From 9bf1efb46abc96df06ae8391c89ccba280044fe9 Mon Sep 17 00:00:00 2001 From: nutty Date: Tue, 28 Apr 2026 17:13:12 +1000 Subject: [PATCH] Brought over .common from nutty.gg premium --- .common/core/settings-core/script.js | 18 +++ .common/core/settings-core/style.css | 11 ++ .common/styles/global.css | 109 +++++++++++++++++- .common/templates/poll-response-template.css | 95 +++++++++++++++ .common/templates/poll-response-template.html | 16 +++ 5 files changed, 247 insertions(+), 2 deletions(-) create mode 100644 .common/templates/poll-response-template.css create mode 100644 .common/templates/poll-response-template.html diff --git a/.common/core/settings-core/script.js b/.common/core/settings-core/script.js index 339f7a8..3e76669 100644 --- a/.common/core/settings-core/script.js +++ b/.common/core/settings-core/script.js @@ -70,6 +70,12 @@ function LoadJSON(settingsJson) { settingItem.classList.add('setting-item'); settingItem.id = `item-${setting.id}`; + // Indent settings that are dependent on other settings using the showIf property + if (setting.showIf) { + const depth = GetSettingDepth(setting, data.settings); + settingItem.style.marginLeft = `${depth * 20}px`; + } + const labelDescriptionDiv = document.createElement('div'); if (setting.label) { @@ -469,6 +475,18 @@ window.addEventListener('message', (event) => { } }); +function GetSettingDepth(setting, allSettings) { + let depth = 0; + let current = setting; + + while (current.showIf) { + depth++; + current = allSettings.find(s => s.id === current.showIf) || {}; + } + + return depth; +} + diff --git a/.common/core/settings-core/style.css b/.common/core/settings-core/style.css index bbfbf7e..87b86ba 100644 --- a/.common/core/settings-core/style.css +++ b/.common/core/settings-core/style.css @@ -53,6 +53,7 @@ body { height: 100%; padding: 0px 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); + z-index: 2; } #settingsPanel::-webkit-scrollbar { @@ -82,6 +83,16 @@ body { flex-grow: 1; overflow: hidden; position: relative; + + /* Dark Checkerboard Pattern */ + background-color: #181818; /* The "base" dark color */ + background-image: conic-gradient( + #252525 90deg, + #181818 90deg 180deg, + #252525 180deg 270deg, + #181818 270deg + ); + background-size: 30px 30px; /* Size of the squares */ } #widgetPreview { diff --git a/.common/styles/global.css b/.common/styles/global.css index 1f4bca5..9cd07b1 100644 --- a/.common/styles/global.css +++ b/.common/styles/global.css @@ -28,7 +28,7 @@ body { padding: 0; font-family: Inter, system-ui, sans-serif; /* font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; */ - /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; */ + /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; */ color: white; background-color: var(--background-color); } @@ -311,6 +311,17 @@ iframe { /*** DIALOG ***/ /**************/ +.dialog-wrapper { + position: fixed; + width: 100%; + height: 100%; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + backdrop-filter: blur(var(--blur-intensity)); +} + .dialog { font-size: 1em; background-color: var(--dialog-background); @@ -327,7 +338,7 @@ iframe { border: 1px solid #40404080; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 1000; - /* above overlay */ + backdrop-filter: blur(var(--blur-intensity)); } .dialog-nav-button { @@ -384,4 +395,98 @@ select { color: #fff; cursor: pointer; min-width: 8em; +} + +/***************/ +/*** SIDEBAR ***/ +/***************/ + +#sidebar { + position: fixed; + top: 0; + left: 0; + width: 250px; + /* expanded width */ + height: 100vh; + color: #fff; + overflow: hidden; + transition: width 0.3s ease; + backdrop-filter: blur(var(--blur-intensity)); + /* <-- adds the blur */ + box-shadow: 0 0 10px rgba(0, 0, 0, 1); +} + +#sidebar.collapsed { + width: 3em; + /* collapsed width */ +} + +#sidebar button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5em; + padding: 0.5em 1em; + border-radius: 0; +} + +#sidebar .sidebar-menu { + opacity: 1; + transition: opacity 0.3s ease; +} + +#sidebar.collapsed .sidebar-menu { + opacity: 1; +} + +#collapse-sidebar-btn { + width: 100%; + background: none; + border: none; + color: #fff; + cursor: pointer; + justify-content: flex-end !important; +} + +.sidebar-item { + padding: 0.75em 1em; + text-align: left; + background: none; + border: none; + color: inherit; + font-size: 1em; + cursor: pointer; + white-space: nowrap; + /* prevent line breaks */ + overflow: hidden; + /* hide overflow text */ + text-overflow: ellipsis; + /* optional: show "..." if needed */ +} + +#sidebar.collapsed .sidebar-item { + justify-content: center; + padding: 0.75em 0; +} + +.sidebar-label { + display: inline-block; +} + +#sidebar.collapsed .sidebar-label { + display: none; +} + +.sidebar-item svg { + width: 1em; + height: 1em; + flex-shrink: 0; +} + +.sidebar-spacer { + flex: 1; +} + +.sidebar-item:hover { + background-color: #333; } \ No newline at end of file diff --git a/.common/templates/poll-response-template.css b/.common/templates/poll-response-template.css new file mode 100644 index 0000000..29ef7b5 --- /dev/null +++ b/.common/templates/poll-response-template.css @@ -0,0 +1,95 @@ +:root { + --winning-color: #3be47680; + --vote-bar-color: #FFFFFF; + --vote-bar-track-color: #FFFFFF33; +} + +.response-container { + display: flex; + align-items: center; + gap: 0.75em; + width: 100%; + transition: all 0.8s ease; +} + +.response-index { + width: 2.5em; + height: 2.5em; + min-width: 2.5em; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; + font-weight: 900; + font-size: 0.8em; + transition: all 0.8s ease-out; +} + +.response-except-just-the-shit-on-the-right-side { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.25em; + min-width: 0; +} + +.response-title, +.response-votes { + position: relative; + z-index: 1; + display: flex; + align-items: center; + line-height: 1.2em; + /* mix-blend-mode: exclusion; */ /* I couldn't make this shit look good so I'm turning it off for now */ +} + +.response-title { + flex: 1 1 auto; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.response-votes { + flex: 0 0 auto; + white-space: nowrap; + margin-left: 8px; + font-size: 0.8em; +} + +.response-bar-track { + background-color: var(--vote-bar-track-color); + position: relative; + display: flex; + border-radius: 0.5em; + overflow: hidden; + padding: 0.5em 0.5em; +} + +.response-bar-fill { + position: absolute; /* take it out of flex flow */ + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--vote-bar-color); + transition: all 0.25s ease; + z-index: 0; /* sits behind text */ + inset: 0; + display: flex; /* 👈 KEY CHANGE */ + overflow: hidden; +} + +.trophy-icon { + width: 1.8em; + height: 1.8em; + vertical-align: middle; +} + +.response-bar-segment { + height: 100%; + flex-shrink: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/.common/templates/poll-response-template.html b/.common/templates/poll-response-template.html new file mode 100644 index 0000000..5998cb6 --- /dev/null +++ b/.common/templates/poll-response-template.html @@ -0,0 +1,16 @@ + \ No newline at end of file