@gjsify/adwaita-web 0.4.26 → 0.4.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adwaita-web.css +4 -0
- package/dist/adwaita-web.css.map +1 -1
- package/package.json +4 -4
- package/scss/_headerbar.scss +11 -0
package/dist/adwaita-web.css
CHANGED
|
@@ -99,6 +99,7 @@ adw-header-bar .adw-header-bar-center {
|
|
|
99
99
|
flex: 1;
|
|
100
100
|
display: flex;
|
|
101
101
|
justify-content: center;
|
|
102
|
+
min-width: 0;
|
|
102
103
|
}
|
|
103
104
|
adw-header-bar .adw-header-bar-title {
|
|
104
105
|
font-weight: bold;
|
|
@@ -112,12 +113,15 @@ adw-header-bar .adw-header-bar-start {
|
|
|
112
113
|
align-items: center;
|
|
113
114
|
padding: 0 6px;
|
|
114
115
|
gap: 4px;
|
|
116
|
+
flex-shrink: 0;
|
|
115
117
|
}
|
|
116
118
|
adw-header-bar .adw-header-bar-end {
|
|
117
119
|
display: flex;
|
|
118
120
|
align-items: center;
|
|
121
|
+
justify-content: flex-end;
|
|
119
122
|
padding: 0 6px;
|
|
120
123
|
gap: 4px;
|
|
124
|
+
flex-shrink: 0;
|
|
121
125
|
}
|
|
122
126
|
adw-header-bar .adw-header-btn {
|
|
123
127
|
position: relative;
|
package/dist/adwaita-web.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_icons.generated.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_variables.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_theme.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_window.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_headerbar.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_preferences.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_card.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_switch_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_combo_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_spin_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_toast.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_overlay_split_view.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;;ACCF;EAEE;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;AC/BF;EACE;IAlBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAWF;EAxBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACxDN;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,YACE;EAGF;;;ACzBJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;;;ACXF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AClBA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;;ACvDJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACxDN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACpDJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","sourcesContent":["// _icons.generated.scss — auto-generated by scripts/build-scss.mjs\n// DO NOT EDIT — regenerated on every build from @gjsify/adwaita-icons.\n\n:root {\n --icon-edit-paste: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n --icon-go-down: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n --icon-sidebar-show: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E\");\n}\n","// _variables.scss — Adwaita CSS custom properties (light theme defaults).\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss (canonical color palette)\n// Reference: refs/adwaita-web/adwaita-web/scss/_variables.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Subset adapted for @gjsify/adwaita-web Web Components.\n\n:root {\n // Window\n --window-bg-color: #fafafb;\n --window-fg-color: rgba(0, 0, 6, 0.8);\n\n // Views\n --view-bg-color: #ffffff;\n --view-fg-color: rgba(0, 0, 6, 0.8);\n\n // Header bar\n --headerbar-bg-color: #ffffff;\n --headerbar-fg-color: rgba(0, 0, 6, 0.8);\n --headerbar-shade-color: rgba(0, 0, 6, 0.12);\n\n // Sidebar\n --sidebar-bg-color: #ebebed;\n\n // Cards / boxed lists\n --card-bg-color: #ffffff;\n --card-fg-color: rgba(0, 0, 6, 0.8);\n --card-shade-color: rgba(0, 0, 6, 0.07);\n\n // Accent\n --accent-bg-color: #3584e4;\n --accent-fg-color: #ffffff;\n --accent-color: #1c71d8;\n\n // Switch\n --switch-off-bg: rgba(0, 0, 0, 0.2);\n --switch-knob-bg: #ffffff;\n\n // Layout radii\n --window-radius: 15px;\n --card-radius: 12px;\n --button-radius: 9px;\n\n // Spacing scale\n --spacing-xs: 6px;\n --spacing-s: 9px;\n --spacing-m: 12px;\n --spacing-l: 18px;\n --spacing-xl: 24px;\n\n // Typography — GNOME default: Adwaita Sans 11\n --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;\n --font-size-base: 11pt;\n --font-size-small: 9pt;\n --font-size-heading: 12pt;\n --dim-opacity: 0.55;\n}\n","// _theme.scss — Light/dark theme switching.\n// Auto via prefers-color-scheme + manual .theme-dark / .theme-light overrides.\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\n@mixin dark-theme {\n --window-bg-color: #222226;\n --window-fg-color: #ffffff;\n --view-bg-color: #1d1d20;\n --view-fg-color: #ffffff;\n --headerbar-bg-color: #2e2e32;\n --headerbar-fg-color: #ffffff;\n --headerbar-shade-color: rgba(0, 0, 6, 0.36);\n --sidebar-bg-color: #2e2e32;\n --card-bg-color: rgba(255, 255, 255, 0.08);\n --card-fg-color: #ffffff;\n --card-shade-color: rgba(0, 0, 6, 0.36);\n --accent-color: #78aeed;\n --switch-off-bg: rgba(255, 255, 255, 0.2);\n --switch-knob-bg: #deddda;\n}\n\n// Auto dark theme via prefers-color-scheme — opt out with .theme-light\n@media (prefers-color-scheme: dark) {\n :root:not(.theme-light) {\n @include dark-theme;\n }\n}\n\n// Manual override\n:root.theme-dark {\n @include dark-theme;\n}\n","// _window.scss — adw-window styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_window.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-window {\n display: flex;\n flex-direction: column;\n background-color: var(--window-bg-color);\n color: var(--window-fg-color);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n border-radius: var(--window-radius);\n box-shadow:\n 0 0 14px 5px rgb(0 0 0 / 15%),\n 0 0 5px 2px rgb(0 0 0 / 10%),\n 0 0 0 1px rgb(0 0 0 / 5%);\n overflow: hidden;\n outline: 1px solid rgb(255 255 255 / 7%);\n outline-offset: -1px;\n}\n","// _headerbar.scss — adw-header-bar styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_headerbar.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_header-bar.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-header-bar {\n display: flex;\n align-items: center;\n min-height: 47px;\n padding: 0 6px;\n background-color: var(--headerbar-bg-color);\n color: var(--headerbar-fg-color);\n box-shadow: inset 0 -1px var(--headerbar-shade-color);\n flex-shrink: 0;\n\n .adw-header-bar-center {\n flex: 1;\n display: flex;\n justify-content: center;\n }\n\n .adw-header-bar-title {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .adw-header-bar-start {\n display: flex;\n align-items: center;\n padding: 0 6px;\n gap: 4px;\n }\n\n .adw-header-bar-end {\n display: flex;\n align-items: center;\n padding: 0 6px;\n gap: 4px;\n }\n\n .adw-header-btn {\n position: relative;\n width: 34px;\n height: 34px;\n border: none;\n border-radius: var(--button-radius);\n background: transparent;\n color: var(--headerbar-fg-color);\n cursor: pointer;\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n\n &:hover {\n background: rgba(128, 128, 128, 0.12);\n }\n\n &:active {\n background: rgba(128, 128, 128, 0.22);\n }\n }\n}\n","// _preferences.scss — adw-preferences-group styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_preferences.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_preferences.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-preferences-group {\n display: block;\n\n .adw-preferences-group-header {\n padding: var(--spacing-xs) 2px;\n }\n\n .adw-preferences-group-title {\n font-size: var(--font-size-small);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n opacity: var(--dim-opacity);\n margin: 0;\n color: var(--window-fg-color);\n }\n\n .adw-preferences-group-listbox {\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n border-radius: var(--card-radius);\n box-shadow:\n 0 0 0 1px rgb(0 0 6 / 3%),\n 0 1px 3px 1px rgb(0 0 6 / 7%),\n 0 2px 6px 2px rgb(0 0 6 / 3%);\n overflow: hidden;\n }\n}\n","// _card.scss — adw-card styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_card.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-card,\n.adw-card {\n display: block;\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n border-radius: var(--card-radius);\n padding: var(--spacing-l);\n box-shadow:\n 0 0 0 1px rgb(0 0 6 / 3%),\n 0 1px 3px 1px rgb(0 0 6 / 7%),\n 0 2px 6px 2px rgb(0 0 6 / 3%);\n overflow: hidden;\n}\n","// _row.scss — Shared base styling for rows in preferences groups.\n// Reference: refs/adwaita-web/adwaita-web/scss/_row_types.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_action-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row,\nadw-combo-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 50px;\n padding: var(--spacing-s) var(--spacing-m);\n gap: var(--spacing-m);\n border-bottom: 1px solid var(--card-shade-color);\n\n &:last-child {\n border-bottom: none;\n }\n}\n\n// Utility separator (used by content layouts)\n.adw-separator-vertical {\n width: 1px;\n align-self: stretch;\n background-color: var(--card-shade-color);\n flex-shrink: 0;\n}\n","// _switch_row.scss — adw-switch-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row {\n .adw-row-title {\n flex: 1;\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n }\n\n .adw-switch {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n }\n }\n\n .adw-switch-slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background-color: var(--switch-off-bg);\n border-radius: 12px;\n transition: background-color 0.15s ease-out;\n\n &::before {\n content: \"\";\n position: absolute;\n height: 20px;\n width: 20px;\n left: 2px;\n bottom: 2px;\n background-color: var(--switch-knob-bg);\n border-radius: 50%;\n transition: transform 0.15s ease-out;\n box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n }\n }\n\n .adw-switch input:checked + .adw-switch-slider {\n background-color: var(--accent-bg-color);\n\n &::before {\n transform: translateX(20px);\n }\n }\n\n .adw-switch input:focus-visible + .adw-switch-slider {\n outline: 2px solid var(--accent-color);\n outline-offset: 2px;\n }\n}\n","// _combo_row.scss — adw-combo-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_combo_row.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_combo-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-combo-row {\n position: relative;\n cursor: pointer;\n\n .adw-row-title {\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n pointer-events: none;\n }\n\n // Hidden <select> overlay — stretches across the row to capture clicks\n // anywhere. The visual dropdown arrow is rendered by .adw-row-value::after\n // below, so the select itself doesn't need a background image.\n select {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n border: none;\n padding: 6px 24px 6px 8px;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n cursor: pointer;\n text-align: right;\n position: absolute;\n inset: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n &:focus-visible {\n outline: 2px solid var(--accent-color);\n outline-offset: -1px;\n }\n\n option {\n background-color: var(--window-bg-color);\n color: var(--window-fg-color);\n }\n }\n\n .adw-row-value {\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n opacity: var(--dim-opacity);\n display: flex;\n align-items: center;\n gap: 4px;\n\n // Dropdown arrow — rendered via CSS mask so `currentColor` drives the\n // fill, making the icon theme-aware (matches libadwaita's dark theme).\n // Using background-image with a data-URI SVG would NOT resolve\n // `currentColor` in most browsers.\n &::after {\n content: \"\";\n display: inline-block;\n width: 12px;\n height: 12px;\n background-color: currentColor;\n -webkit-mask-image: var(--icon-go-down);\n mask-image: var(--icon-go-down);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: contain;\n mask-size: contain;\n -webkit-mask-position: center;\n mask-position: center;\n }\n }\n}\n","// _spin_row.scss — adw-spin-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_spin_button.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-spin-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 50px;\n padding: var(--spacing-s) var(--spacing-m);\n gap: var(--spacing-m);\n border-bottom: 1px solid var(--card-shade-color);\n\n &:last-child {\n border-bottom: none;\n }\n\n .adw-row-title {\n flex: 1;\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n }\n}\n\n.adw-spin-control {\n display: flex;\n align-items: center;\n gap: 2px;\n\n button {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--button-radius);\n background: transparent;\n color: var(--card-fg-color);\n cursor: pointer;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n &:hover {\n background: rgba(128, 128, 128, 0.15);\n }\n }\n\n input {\n width: 56px;\n text-align: center;\n border: none;\n border-radius: var(--button-radius);\n background: rgba(128, 128, 128, 0.1);\n color: var(--card-fg-color);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n padding: 4px 2px;\n\n &:focus {\n outline: 2px solid var(--accent-color);\n outline-offset: -1px;\n }\n }\n}\n","// _toast.scss — adw-toast and adw-toast-overlay styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_toast.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-toast-overlay {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 9999;\n display: flex;\n flex-direction: column-reverse;\n gap: 9px;\n align-items: center;\n pointer-events: none;\n}\n\n.adw-toast {\n background-color: #3d3846;\n color: #ffffff;\n padding: 9px 12px;\n border-radius: var(--card-radius);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);\n display: flex;\n align-items: center;\n gap: 9px;\n width: max-content;\n max-width: 400px;\n min-height: 36px;\n pointer-events: auto;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n\n opacity: 0;\n transform: translateY(100%) scale(0.9);\n transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),\n transform 0.2s cubic-bezier(0, 0, 0.2, 1);\n will-change: transform, opacity;\n\n &.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n &.hiding {\n opacity: 0;\n transform: translateY(100%) scale(0.9);\n transition-duration: 0.15s;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n }\n\n .adw-toast-title {\n font-weight: normal;\n line-height: 1.3;\n }\n}\n","// _overlay_split_view.scss — adw-overlay-split-view styling.\n// Reference: refs/libadwaita/src/adw-overlay-split-view.c\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Implemented as Web Component for @gjsify/adwaita-web.\n\nadw-overlay-split-view {\n display: flex;\n flex-direction: row;\n flex: 1;\n min-height: 0;\n position: relative;\n overflow: hidden;\n\n .adw-osv-sidebar {\n background-color: var(--sidebar-bg-color);\n overflow-y: auto;\n flex-shrink: 0;\n transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;\n z-index: 10;\n align-self: stretch;\n }\n\n .adw-osv-content {\n flex: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n align-self: stretch;\n }\n\n // Docked mode (not collapsed) — sidebar beside content\n &:not(.collapsed) .adw-osv-sidebar {\n position: relative;\n }\n\n // Docked hide: slide left and collapse via opacity. Sidebar keeps its\n // intrinsic width so internal elements don't reflow.\n &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {\n transform: translateX(-100%);\n opacity: 0;\n pointer-events: none;\n }\n\n // Overlay mode (collapsed) — sidebar on top of content\n &.collapsed .adw-osv-sidebar {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n opacity: 0;\n pointer-events: none;\n }\n\n &.collapsed.sidebar-end .adw-osv-sidebar {\n left: auto;\n right: 0;\n transform: translateX(100%);\n }\n\n &.collapsed.show-sidebar .adw-osv-sidebar {\n transform: translateX(0);\n opacity: 1;\n pointer-events: auto;\n }\n\n // Backdrop — visible only in overlay mode when sidebar is open\n .adw-osv-backdrop {\n display: none;\n }\n\n &.collapsed.show-sidebar .adw-osv-backdrop {\n display: block;\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 9;\n }\n}\n\n// Sidebar content layout helper — wraps the sidebar's children with the\n// standard Adwaita spacing scale (12px padding, 12px gap between groups).\n.adw-sidebar-content {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n}\n\n// Sidebar toggle button — sidebar-show-symbolic icon via CSS mask\n.adw-sidebar-toggle-icon::after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: currentColor;\n -webkit-mask-image: var(--icon-sidebar-show);\n mask-image: var(--icon-sidebar-show);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 16px 16px;\n mask-size: 16px 16px;\n -webkit-mask-position: center;\n mask-position: center;\n pointer-events: none;\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_icons.generated.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_variables.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_theme.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_window.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_headerbar.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_preferences.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_card.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_switch_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_combo_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_spin_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_toast.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_overlay_split_view.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;;ACCF;EAEE;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;AC/BF;EACE;IAlBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAWF;EAxBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EAGA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACnEN;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,YACE;EAGF;;;ACzBJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;;;ACXF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AClBA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;;ACvDJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACxDN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACpDJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","sourcesContent":["// _icons.generated.scss — auto-generated by scripts/build-scss.mjs\n// DO NOT EDIT — regenerated on every build from @gjsify/adwaita-icons.\n\n:root {\n --icon-edit-paste: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n --icon-go-down: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n --icon-sidebar-show: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E\");\n}\n","// _variables.scss — Adwaita CSS custom properties (light theme defaults).\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss (canonical color palette)\n// Reference: refs/adwaita-web/adwaita-web/scss/_variables.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Subset adapted for @gjsify/adwaita-web Web Components.\n\n:root {\n // Window\n --window-bg-color: #fafafb;\n --window-fg-color: rgba(0, 0, 6, 0.8);\n\n // Views\n --view-bg-color: #ffffff;\n --view-fg-color: rgba(0, 0, 6, 0.8);\n\n // Header bar\n --headerbar-bg-color: #ffffff;\n --headerbar-fg-color: rgba(0, 0, 6, 0.8);\n --headerbar-shade-color: rgba(0, 0, 6, 0.12);\n\n // Sidebar\n --sidebar-bg-color: #ebebed;\n\n // Cards / boxed lists\n --card-bg-color: #ffffff;\n --card-fg-color: rgba(0, 0, 6, 0.8);\n --card-shade-color: rgba(0, 0, 6, 0.07);\n\n // Accent\n --accent-bg-color: #3584e4;\n --accent-fg-color: #ffffff;\n --accent-color: #1c71d8;\n\n // Switch\n --switch-off-bg: rgba(0, 0, 0, 0.2);\n --switch-knob-bg: #ffffff;\n\n // Layout radii\n --window-radius: 15px;\n --card-radius: 12px;\n --button-radius: 9px;\n\n // Spacing scale\n --spacing-xs: 6px;\n --spacing-s: 9px;\n --spacing-m: 12px;\n --spacing-l: 18px;\n --spacing-xl: 24px;\n\n // Typography — GNOME default: Adwaita Sans 11\n --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;\n --font-size-base: 11pt;\n --font-size-small: 9pt;\n --font-size-heading: 12pt;\n --dim-opacity: 0.55;\n}\n","// _theme.scss — Light/dark theme switching.\n// Auto via prefers-color-scheme + manual .theme-dark / .theme-light overrides.\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\n@mixin dark-theme {\n --window-bg-color: #222226;\n --window-fg-color: #ffffff;\n --view-bg-color: #1d1d20;\n --view-fg-color: #ffffff;\n --headerbar-bg-color: #2e2e32;\n --headerbar-fg-color: #ffffff;\n --headerbar-shade-color: rgba(0, 0, 6, 0.36);\n --sidebar-bg-color: #2e2e32;\n --card-bg-color: rgba(255, 255, 255, 0.08);\n --card-fg-color: #ffffff;\n --card-shade-color: rgba(0, 0, 6, 0.36);\n --accent-color: #78aeed;\n --switch-off-bg: rgba(255, 255, 255, 0.2);\n --switch-knob-bg: #deddda;\n}\n\n// Auto dark theme via prefers-color-scheme — opt out with .theme-light\n@media (prefers-color-scheme: dark) {\n :root:not(.theme-light) {\n @include dark-theme;\n }\n}\n\n// Manual override\n:root.theme-dark {\n @include dark-theme;\n}\n","// _window.scss — adw-window styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_window.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-window {\n display: flex;\n flex-direction: column;\n background-color: var(--window-bg-color);\n color: var(--window-fg-color);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n border-radius: var(--window-radius);\n box-shadow:\n 0 0 14px 5px rgb(0 0 0 / 15%),\n 0 0 5px 2px rgb(0 0 0 / 10%),\n 0 0 0 1px rgb(0 0 0 / 5%);\n overflow: hidden;\n outline: 1px solid rgb(255 255 255 / 7%);\n outline-offset: -1px;\n}\n","// _headerbar.scss — adw-header-bar styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_headerbar.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_header-bar.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-header-bar {\n display: flex;\n align-items: center;\n min-height: 47px;\n padding: 0 6px;\n background-color: var(--headerbar-bg-color);\n color: var(--headerbar-fg-color);\n box-shadow: inset 0 -1px var(--headerbar-shade-color);\n // flex-shrink: 0 ensures the headerbar never collapses inside a flex-column\n // adw-window, preventing a spurious spacing band between bar and content.\n flex-shrink: 0;\n\n .adw-header-bar-center {\n flex: 1;\n display: flex;\n justify-content: center;\n // min-width: 0 prevents the title from pushing the end buttons off-screen.\n min-width: 0;\n }\n\n .adw-header-bar-title {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .adw-header-bar-start {\n display: flex;\n align-items: center;\n padding: 0 6px;\n gap: 4px;\n // flex-shrink: 0 keeps the start buttons visible when the window is narrow.\n flex-shrink: 0;\n }\n\n .adw-header-bar-end {\n display: flex;\n align-items: center;\n // justify-content: flex-end aligns end buttons to the right edge of the\n // end section, fixing the pause-button misposition bug.\n justify-content: flex-end;\n padding: 0 6px;\n gap: 4px;\n // flex-shrink: 0 keeps the end buttons visible when the window is narrow.\n flex-shrink: 0;\n }\n\n .adw-header-btn {\n position: relative;\n width: 34px;\n height: 34px;\n border: none;\n border-radius: var(--button-radius);\n background: transparent;\n color: var(--headerbar-fg-color);\n cursor: pointer;\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n\n &:hover {\n background: rgba(128, 128, 128, 0.12);\n }\n\n &:active {\n background: rgba(128, 128, 128, 0.22);\n }\n }\n}\n","// _preferences.scss — adw-preferences-group styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_preferences.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_preferences.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-preferences-group {\n display: block;\n\n .adw-preferences-group-header {\n padding: var(--spacing-xs) 2px;\n }\n\n .adw-preferences-group-title {\n font-size: var(--font-size-small);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n opacity: var(--dim-opacity);\n margin: 0;\n color: var(--window-fg-color);\n }\n\n .adw-preferences-group-listbox {\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n border-radius: var(--card-radius);\n box-shadow:\n 0 0 0 1px rgb(0 0 6 / 3%),\n 0 1px 3px 1px rgb(0 0 6 / 7%),\n 0 2px 6px 2px rgb(0 0 6 / 3%);\n overflow: hidden;\n }\n}\n","// _card.scss — adw-card styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_card.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-card,\n.adw-card {\n display: block;\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n border-radius: var(--card-radius);\n padding: var(--spacing-l);\n box-shadow:\n 0 0 0 1px rgb(0 0 6 / 3%),\n 0 1px 3px 1px rgb(0 0 6 / 7%),\n 0 2px 6px 2px rgb(0 0 6 / 3%);\n overflow: hidden;\n}\n","// _row.scss — Shared base styling for rows in preferences groups.\n// Reference: refs/adwaita-web/adwaita-web/scss/_row_types.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_action-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row,\nadw-combo-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 50px;\n padding: var(--spacing-s) var(--spacing-m);\n gap: var(--spacing-m);\n border-bottom: 1px solid var(--card-shade-color);\n\n &:last-child {\n border-bottom: none;\n }\n}\n\n// Utility separator (used by content layouts)\n.adw-separator-vertical {\n width: 1px;\n align-self: stretch;\n background-color: var(--card-shade-color);\n flex-shrink: 0;\n}\n","// _switch_row.scss — adw-switch-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row {\n .adw-row-title {\n flex: 1;\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n }\n\n .adw-switch {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n }\n }\n\n .adw-switch-slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background-color: var(--switch-off-bg);\n border-radius: 12px;\n transition: background-color 0.15s ease-out;\n\n &::before {\n content: \"\";\n position: absolute;\n height: 20px;\n width: 20px;\n left: 2px;\n bottom: 2px;\n background-color: var(--switch-knob-bg);\n border-radius: 50%;\n transition: transform 0.15s ease-out;\n box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n }\n }\n\n .adw-switch input:checked + .adw-switch-slider {\n background-color: var(--accent-bg-color);\n\n &::before {\n transform: translateX(20px);\n }\n }\n\n .adw-switch input:focus-visible + .adw-switch-slider {\n outline: 2px solid var(--accent-color);\n outline-offset: 2px;\n }\n}\n","// _combo_row.scss — adw-combo-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_combo_row.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_combo-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-combo-row {\n position: relative;\n cursor: pointer;\n\n .adw-row-title {\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n pointer-events: none;\n }\n\n // Hidden <select> overlay — stretches across the row to capture clicks\n // anywhere. The visual dropdown arrow is rendered by .adw-row-value::after\n // below, so the select itself doesn't need a background image.\n select {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n border: none;\n padding: 6px 24px 6px 8px;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n cursor: pointer;\n text-align: right;\n position: absolute;\n inset: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n &:focus-visible {\n outline: 2px solid var(--accent-color);\n outline-offset: -1px;\n }\n\n option {\n background-color: var(--window-bg-color);\n color: var(--window-fg-color);\n }\n }\n\n .adw-row-value {\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n opacity: var(--dim-opacity);\n display: flex;\n align-items: center;\n gap: 4px;\n\n // Dropdown arrow — rendered via CSS mask so `currentColor` drives the\n // fill, making the icon theme-aware (matches libadwaita's dark theme).\n // Using background-image with a data-URI SVG would NOT resolve\n // `currentColor` in most browsers.\n &::after {\n content: \"\";\n display: inline-block;\n width: 12px;\n height: 12px;\n background-color: currentColor;\n -webkit-mask-image: var(--icon-go-down);\n mask-image: var(--icon-go-down);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: contain;\n mask-size: contain;\n -webkit-mask-position: center;\n mask-position: center;\n }\n }\n}\n","// _spin_row.scss — adw-spin-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_spin_button.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-spin-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 50px;\n padding: var(--spacing-s) var(--spacing-m);\n gap: var(--spacing-m);\n border-bottom: 1px solid var(--card-shade-color);\n\n &:last-child {\n border-bottom: none;\n }\n\n .adw-row-title {\n flex: 1;\n font-size: var(--font-size-base);\n color: var(--card-fg-color);\n }\n}\n\n.adw-spin-control {\n display: flex;\n align-items: center;\n gap: 2px;\n\n button {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: var(--button-radius);\n background: transparent;\n color: var(--card-fg-color);\n cursor: pointer;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n &:hover {\n background: rgba(128, 128, 128, 0.15);\n }\n }\n\n input {\n width: 56px;\n text-align: center;\n border: none;\n border-radius: var(--button-radius);\n background: rgba(128, 128, 128, 0.1);\n color: var(--card-fg-color);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n padding: 4px 2px;\n\n &:focus {\n outline: 2px solid var(--accent-color);\n outline-offset: -1px;\n }\n }\n}\n","// _toast.scss — adw-toast and adw-toast-overlay styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_toast.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-toast-overlay {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 9999;\n display: flex;\n flex-direction: column-reverse;\n gap: 9px;\n align-items: center;\n pointer-events: none;\n}\n\n.adw-toast {\n background-color: #3d3846;\n color: #ffffff;\n padding: 9px 12px;\n border-radius: var(--card-radius);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);\n display: flex;\n align-items: center;\n gap: 9px;\n width: max-content;\n max-width: 400px;\n min-height: 36px;\n pointer-events: auto;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n\n opacity: 0;\n transform: translateY(100%) scale(0.9);\n transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),\n transform 0.2s cubic-bezier(0, 0, 0.2, 1);\n will-change: transform, opacity;\n\n &.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n &.hiding {\n opacity: 0;\n transform: translateY(100%) scale(0.9);\n transition-duration: 0.15s;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n }\n\n .adw-toast-title {\n font-weight: normal;\n line-height: 1.3;\n }\n}\n","// _overlay_split_view.scss — adw-overlay-split-view styling.\n// Reference: refs/libadwaita/src/adw-overlay-split-view.c\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Implemented as Web Component for @gjsify/adwaita-web.\n\nadw-overlay-split-view {\n display: flex;\n flex-direction: row;\n flex: 1;\n min-height: 0;\n position: relative;\n overflow: hidden;\n\n .adw-osv-sidebar {\n background-color: var(--sidebar-bg-color);\n overflow-y: auto;\n flex-shrink: 0;\n transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;\n z-index: 10;\n align-self: stretch;\n }\n\n .adw-osv-content {\n flex: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n align-self: stretch;\n }\n\n // Docked mode (not collapsed) — sidebar beside content\n &:not(.collapsed) .adw-osv-sidebar {\n position: relative;\n }\n\n // Docked hide: slide left and collapse via opacity. Sidebar keeps its\n // intrinsic width so internal elements don't reflow.\n &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {\n transform: translateX(-100%);\n opacity: 0;\n pointer-events: none;\n }\n\n // Overlay mode (collapsed) — sidebar on top of content\n &.collapsed .adw-osv-sidebar {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n opacity: 0;\n pointer-events: none;\n }\n\n &.collapsed.sidebar-end .adw-osv-sidebar {\n left: auto;\n right: 0;\n transform: translateX(100%);\n }\n\n &.collapsed.show-sidebar .adw-osv-sidebar {\n transform: translateX(0);\n opacity: 1;\n pointer-events: auto;\n }\n\n // Backdrop — visible only in overlay mode when sidebar is open\n .adw-osv-backdrop {\n display: none;\n }\n\n &.collapsed.show-sidebar .adw-osv-backdrop {\n display: block;\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 9;\n }\n}\n\n// Sidebar content layout helper — wraps the sidebar's children with the\n// standard Adwaita spacing scale (12px padding, 12px gap between groups).\n.adw-sidebar-content {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n}\n\n// Sidebar toggle button — sidebar-show-symbolic icon via CSS mask\n.adw-sidebar-toggle-icon::after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: currentColor;\n -webkit-mask-image: var(--icon-sidebar-show);\n mask-image: var(--icon-sidebar-show);\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 16px 16px;\n mask-size: 16px 16px;\n -webkit-mask-position: center;\n mask-position: center;\n pointer-events: none;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gjsify/adwaita-web",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.28",
|
|
4
4
|
"description": "Adwaita/Libadwaita web components for browser targets",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"build:types": "tsc"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@gjsify/adwaita-fonts": "^0.4.
|
|
37
|
-
"@gjsify/adwaita-icons": "^0.4.
|
|
36
|
+
"@gjsify/adwaita-fonts": "^0.4.28",
|
|
37
|
+
"@gjsify/adwaita-icons": "^0.4.28"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@gjsify/cli": "^0.4.
|
|
40
|
+
"@gjsify/cli": "^0.4.28",
|
|
41
41
|
"sass": "^1.99.0",
|
|
42
42
|
"typescript": "^6.0.3"
|
|
43
43
|
}
|
package/scss/_headerbar.scss
CHANGED
|
@@ -13,12 +13,16 @@ adw-header-bar {
|
|
|
13
13
|
background-color: var(--headerbar-bg-color);
|
|
14
14
|
color: var(--headerbar-fg-color);
|
|
15
15
|
box-shadow: inset 0 -1px var(--headerbar-shade-color);
|
|
16
|
+
// flex-shrink: 0 ensures the headerbar never collapses inside a flex-column
|
|
17
|
+
// adw-window, preventing a spurious spacing band between bar and content.
|
|
16
18
|
flex-shrink: 0;
|
|
17
19
|
|
|
18
20
|
.adw-header-bar-center {
|
|
19
21
|
flex: 1;
|
|
20
22
|
display: flex;
|
|
21
23
|
justify-content: center;
|
|
24
|
+
// min-width: 0 prevents the title from pushing the end buttons off-screen.
|
|
25
|
+
min-width: 0;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
.adw-header-bar-title {
|
|
@@ -34,13 +38,20 @@ adw-header-bar {
|
|
|
34
38
|
align-items: center;
|
|
35
39
|
padding: 0 6px;
|
|
36
40
|
gap: 4px;
|
|
41
|
+
// flex-shrink: 0 keeps the start buttons visible when the window is narrow.
|
|
42
|
+
flex-shrink: 0;
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
.adw-header-bar-end {
|
|
40
46
|
display: flex;
|
|
41
47
|
align-items: center;
|
|
48
|
+
// justify-content: flex-end aligns end buttons to the right edge of the
|
|
49
|
+
// end section, fixing the pause-button misposition bug.
|
|
50
|
+
justify-content: flex-end;
|
|
42
51
|
padding: 0 6px;
|
|
43
52
|
gap: 4px;
|
|
53
|
+
// flex-shrink: 0 keeps the end buttons visible when the window is narrow.
|
|
54
|
+
flex-shrink: 0;
|
|
44
55
|
}
|
|
45
56
|
|
|
46
57
|
.adw-header-btn {
|