@gjsify/adwaita-web 0.36.0 → 0.38.0

package/dist/adwaita-web.css

@@ -285,12 +285,22 @@
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
   --dim-opacity: 0.55;
+  --border-opacity: 15%;
+  --border-color: color-mix(in srgb, currentColor var(--border-opacity), transparent);
+  --disabled-opacity: 0.5;
   --document-font-family: var(--font-family);
   --document-font-size: var(--font-size-base);
   --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
   --monospace-font-size: var(--font-size-base);
 }
 
+@media (prefers-contrast: more) {
+  :root {
+    --border-opacity: 50%;
+    --dim-opacity: 0.9;
+    --disabled-opacity: 0.4;
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root:not(.theme-light) {
     --window-bg-color: #222226;
@@ -338,7 +348,7 @@
     --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
   }
 }
-:root.theme-dark {
+.theme-dark {
   --window-bg-color: #222226;
   --window-fg-color: #ffffff;
   --view-bg-color: #1d1d20;
@@ -384,6 +394,76 @@
   --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
 }
 
+.theme-light {
+  --window-bg-color: #fafafb;
+  --window-fg-color: rgba(0, 0, 6, 0.8);
+  --view-bg-color: #ffffff;
+  --view-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-bg-color: #ffffff;
+  --headerbar-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-shade-color: rgba(0, 0, 6, 0.12);
+  --separator-color: rgba(0, 0, 6, 0.1);
+  --sidebar-bg-color: #ebebed;
+  --sidebar-fg-color: rgba(0, 0, 6, 0.8);
+  --sidebar-backdrop-color: #f2f2f4;
+  --sidebar-shade-color: rgba(0, 0, 6, 0.07);
+  --sidebar-border-color: rgba(0, 0, 6, 0.07);
+  --secondary-sidebar-bg-color: #f3f3f5;
+  --secondary-sidebar-fg-color: rgba(0, 0, 6, 0.8);
+  --secondary-sidebar-backdrop-color: #f6f6fa;
+  --secondary-sidebar-shade-color: rgba(0, 0, 6, 0.07);
+  --secondary-sidebar-border-color: rgba(0, 0, 6, 0.07);
+  --card-bg-color: #ffffff;
+  --card-fg-color: rgba(0, 0, 6, 0.8);
+  --card-shade-color: rgba(0, 0, 6, 0.07);
+  --accent-bg-color: #3584e4;
+  --accent-fg-color: #ffffff;
+  --accent-color: #1c71d8;
+  --popover-bg-color: #ffffff;
+  --popover-fg-color: rgba(0, 0, 6, 0.8);
+  --popover-shade-color: rgba(0, 0, 6, 0.07);
+  --dialog-scrim-color: rgba(0, 0, 6, 0.32);
+  --button-bg-color: rgba(0, 0, 6, 0.08);
+  --button-hover-color: rgba(0, 0, 6, 0.13);
+  --button-active-color: rgba(0, 0, 6, 0.19);
+  --entry-bg-color: #ffffff;
+  --entry-border-color: rgba(0, 0, 6, 0.18);
+  --entry-border-hover-color: rgba(0, 0, 6, 0.28);
+  --destructive-bg-color: #e01b24;
+  --destructive-fg-color: #ffffff;
+  --success-bg-color: #2ec27e;
+  --success-fg-color: #ffffff;
+  --success-color: oklab(from var(--success-bg-color) min(l, 0.5) a b);
+  --warning-bg-color: #e5a50a;
+  --warning-fg-color: rgba(0, 0, 0, 0.8);
+  --warning-color: oklab(from var(--warning-bg-color) min(l, 0.5) a b);
+  --error-bg-color: #e01b24;
+  --error-fg-color: #ffffff;
+  --error-color: oklab(from var(--error-bg-color) min(l, 0.5) a b);
+  --switch-off-bg: rgba(0, 0, 0, 0.2);
+  --switch-knob-bg: #ffffff;
+  --window-radius: 15px;
+  --card-radius: 12px;
+  --button-radius: 9px;
+  --spacing-xs: 6px;
+  --spacing-s: 9px;
+  --spacing-m: 12px;
+  --spacing-l: 18px;
+  --spacing-xl: 24px;
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  --font-size-base: 11pt;
+  --font-size-small: 9pt;
+  --font-size-heading: 12pt;
+  --dim-opacity: 0.55;
+  --border-opacity: 15%;
+  --border-color: color-mix(in srgb, currentColor var(--border-opacity), transparent);
+  --disabled-opacity: 0.5;
+  --document-font-family: var(--font-family);
+  --document-font-size: var(--font-size-base);
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-size: var(--font-size-base);
+}
+
 .adw-root {
   background-color: var(--window-bg-color);
   color: var(--window-fg-color);
@@ -392,7 +472,7 @@
   font-size: var(--font-size-base);
 }
 
-adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-checkbox, adw-clamp, adw-combo-row, adw-data-grid, adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row, adw-header-bar, adw-icon, adw-inline-view-switcher, adw-menu-button, adw-navigation-page, adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view, adw-password-entry-row, adw-popover, adw-preferences-dialog, adw-preferences-group, adw-preferences-page, adw-progress-bar, adw-radio, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row, adw-split-button, adw-status-page, adw-switch, adw-switch-row, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title, adw-wrap-box {
+adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-checkbox, adw-clamp, adw-combo-row, adw-data-grid, adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row, adw-header-bar, adw-icon, adw-inline-view-switcher, adw-menu-button, adw-navigation-page, adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view, adw-password-entry-row, adw-popover, adw-preferences-dialog, adw-preferences-group, adw-preferences-page, adw-progress-bar, adw-radio, adw-shortcut-label, adw-sidebar, adw-sidebar-item, adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row, adw-split-button, adw-status-page, adw-switch, adw-switch-row, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title, adw-wrap-box {
   box-sizing: border-box;
   color: var(--window-fg-color);
   font-family: var(--font-family);
@@ -649,6 +729,12 @@ adw-radio *::after {
   box-sizing: border-box;
 }
 
+adw-shortcut-label *,
+adw-shortcut-label *::before,
+adw-shortcut-label *::after {
+  box-sizing: border-box;
+}
+
 adw-sidebar *,
 adw-sidebar *::before,
 adw-sidebar *::after {
@@ -898,6 +984,270 @@ adw-wrap-box *::after {
   font-variant-numeric: tabular-nums;
 }
 
+/************
+ * Surfaces *
+ ************/
+.background {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
+
+.view {
+  background-color: var(--view-bg-color);
+  color: var(--view-fg-color);
+}
+.view:disabled, .view[disabled] {
+  color: color-mix(in srgb, var(--view-fg-color) var(--disabled-opacity), transparent);
+  background-color: color-mix(in srgb, var(--window-bg-color) 60%, var(--view-bg-color));
+}
+.view[aria-selected=true] {
+  background-color: color-mix(in srgb, var(--accent-bg-color) 25%, transparent);
+  border-radius: var(--button-radius);
+}
+
+.frame {
+  border: 1px solid var(--border-color);
+}
+
+/*********
+ * Cards *
+ *********/
+adw-card,
+.adw-card, adw-preferences-group .adw-preferences-group-listbox, .boxed-list-separate > *, .boxed-list, .card {
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.03), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
+}
+@media (prefers-contrast: more) {
+  adw-card,
+  .adw-card, adw-preferences-group .adw-preferences-group-listbox, .boxed-list-separate > *, .boxed-list, .card {
+    box-shadow: 0 0 0 1px var(--border-color), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
+  }
+}
+
+.card.activatable {
+  transition: background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.card.activatable:hover {
+  background-image: linear-gradient(color-mix(in srgb, currentColor 3%, transparent), color-mix(in srgb, currentColor 3%, transparent));
+}
+.card.activatable:active {
+  background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 8%, transparent));
+}
+.osd .card, .card.osd {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: none;
+}
+@media (prefers-contrast: more) {
+  .osd .card, .card.osd {
+    box-shadow: 0 0 0 1px var(--border-color);
+  }
+}
+
+/***************
+ * Boxed lists *
+ ***************/
+.boxed-list {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.boxed-list-separate {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: none;
+  color: var(--card-fg-color);
+}
+.boxed-list-separate > * {
+  overflow: hidden;
+  border-bottom: none;
+}
+
+/************
+ * Toolbars *
+ ************/
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+}
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only,
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button,
+.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button {
+  background-color: transparent;
+}
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:hover,
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:hover,
+.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover {
+  background-color: var(--button-hover-color);
+}
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:active,
+.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:active,
+.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active {
+  background-color: var(--button-active-color);
+}
+.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button {
+  background-color: var(--button-bg-color);
+}
+.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover {
+  background-color: var(--button-hover-color);
+}
+.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active {
+  background-color: var(--button-active-color);
+}
+.toolbar.osd {
+  padding: 12px;
+  border-radius: calc(var(--button-radius) + 6px);
+}
+
+.spacer {
+  background: none;
+  border: none;
+  flex-shrink: 0;
+}
+.spacer, .spacer.horizontal {
+  min-width: 12px;
+}
+.spacer.vertical {
+  min-height: 12px;
+}
+
+/*******
+ * OSD *
+ *******/
+.osd:not(adw-progress-bar):not(adw-button):not(adw-menu-button):not(adw-split-button):not(adw-inline-view-switcher) {
+  --accent-bg-color: rgb(255 255 255 / 75%);
+  --accent-fg-color: rgb(0 0 0 / 75%);
+  --accent-color: oklab(from var(--accent-bg-color) max(l, 0.85) a b);
+  --destructive-color: oklab(from var(--destructive-bg-color) max(l, 0.85) a b);
+  --success-color: oklab(from var(--success-bg-color) max(l, 0.85) a b);
+  --warning-color: oklab(from var(--warning-bg-color) max(l, 0.85) a b);
+  --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
+  color: rgba(255, 255, 255, 0.9);
+  border: none;
+  background-color: rgba(0, 0, 0, 0.7);
+  background-clip: padding-box;
+}
+
+/*******************
+ * Linked controls *
+ *******************/
+.linked,
+.adw-linked {
+  display: inline-flex;
+}
+.linked:not(.vertical) > *:not(:first-child) .adw-button, .linked:not(.vertical) > *:not(:first-child).adw-button,
+.adw-linked:not(.vertical) > *:not(:first-child) .adw-button,
+.adw-linked:not(.vertical) > *:not(:first-child).adw-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.linked:not(.vertical) > *:not(:last-child) .adw-button, .linked:not(.vertical) > *:not(:last-child).adw-button,
+.adw-linked:not(.vertical) > *:not(:last-child) .adw-button,
+.adw-linked:not(.vertical) > *:not(:last-child).adw-button {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.linked:not(.vertical) > *:not(:first-child) .adw-entry, .linked:not(.vertical) > *:not(:first-child).adw-entry,
+.adw-linked:not(.vertical) > *:not(:first-child) .adw-entry,
+.adw-linked:not(.vertical) > *:not(:first-child).adw-entry {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.linked:not(.vertical) > *:not(:last-child) .adw-entry, .linked:not(.vertical) > *:not(:last-child).adw-entry,
+.adw-linked:not(.vertical) > *:not(:last-child) .adw-entry,
+.adw-linked:not(.vertical) > *:not(:last-child).adw-entry {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.linked.vertical,
+.adw-linked.vertical {
+  flex-direction: column;
+}
+.linked.vertical > *:not(:first-child) .adw-button, .linked.vertical > *:not(:first-child).adw-button,
+.adw-linked.vertical > *:not(:first-child) .adw-button,
+.adw-linked.vertical > *:not(:first-child).adw-button {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.linked.vertical > *:not(:last-child) .adw-button, .linked.vertical > *:not(:last-child).adw-button,
+.adw-linked.vertical > *:not(:last-child) .adw-button,
+.adw-linked.vertical > *:not(:last-child).adw-button {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.linked.vertical > *:not(:first-child) .adw-entry, .linked.vertical > *:not(:first-child).adw-entry,
+.adw-linked.vertical > *:not(:first-child) .adw-entry,
+.adw-linked.vertical > *:not(:first-child).adw-entry {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.linked.vertical > *:not(:last-child) .adw-entry, .linked.vertical > *:not(:last-child).adw-entry,
+.adw-linked.vertical > *:not(:last-child) .adw-entry,
+.adw-linked.vertical > *:not(:last-child).adw-entry {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/*************
+ * App icons *
+ *************/
+.lowres-icon {
+  filter: drop-shadow(0 -1px rgba(0, 0, 6, 0.05)) drop-shadow(1px 0 rgba(0, 0, 6, 0.1)) drop-shadow(0 1px rgba(0, 0, 6, 0.3)) drop-shadow(-1px 0 rgba(0, 0, 6, 0.1));
+}
+
+.icon-dropshadow {
+  filter: drop-shadow(0 1px 12px rgba(0, 0, 6, 0.05)) drop-shadow(0 -1px rgba(0, 0, 6, 0.05)) drop-shadow(1px 0 rgba(0, 0, 6, 0.1)) drop-shadow(0 1px rgba(0, 0, 6, 0.3)) drop-shadow(-1px 0 rgba(0, 0, 6, 0.1));
+}
+
+/************************
+ * Undershoot indicators *
+ ************************/
+.undershoot-top:not(adw-toolbar-view) {
+  box-shadow: inset 0 6px 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.undershoot-bottom:not(adw-toolbar-view) {
+  box-shadow: inset 0 -6px 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.undershoot-start:dir(ltr) {
+  box-shadow: inset 6px 0 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+.undershoot-start:dir(rtl) {
+  box-shadow: inset -6px 0 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.undershoot-end:dir(ltr) {
+  box-shadow: inset -6px 0 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+.undershoot-end:dir(rtl) {
+  box-shadow: inset 6px 0 6px -6px color-mix(in srgb, currentColor 6%, transparent);
+}
+
 adw-window {
   display: flex;
   flex-direction: column;
@@ -970,6 +1320,11 @@ adw-header-bar .adw-header-btn:active {
   background: rgba(128, 128, 128, 0.22);
 }
 
+.devel adw-header-bar,
+adw-window.devel adw-header-bar {
+  background-image: linear-gradient(to bottom, transparent 0%, var(--headerbar-bg-color) 100%), repeating-linear-gradient(116.565deg, color-mix(in srgb, currentColor 5%, transparent) 0 32px, transparent 32px 64px);
+}
+
 adw-window-title {
   display: flex;
   flex-direction: column;
@@ -1082,26 +1437,33 @@ adw-button {
   padding: 6px 20px;
   border-radius: 9999px;
 }
-
-.adw-linked {
-  display: inline-flex;
+.adw-button.raised {
+  background-color: var(--button-bg-color);
 }
-.adw-linked > .adw-button,
-.adw-linked > adw-button .adw-button {
-  border-radius: 0;
+.adw-button.raised:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-button.raised:active {
+  background-color: var(--button-active-color);
+}
+.adw-button.osd {
+  min-height: 32px;
+  min-width: 32px;
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(0, 0, 0, 0.65);
 }
-.adw-linked > :first-child .adw-button,
-.adw-linked > .adw-button:first-child {
-  border-top-left-radius: var(--button-radius);
-  border-bottom-left-radius: var(--button-radius);
+@media (prefers-contrast: more) {
+  .adw-button.osd {
+    box-shadow: 0 0 0 1px currentColor;
+  }
 }
-.adw-linked > :last-child .adw-button,
-.adw-linked > .adw-button:last-child {
-  border-top-right-radius: var(--button-radius);
-  border-bottom-right-radius: var(--button-radius);
+.adw-button.osd:hover {
+  color: #ffffff;
+  background-color: color-mix(in srgb, black 55.25%, currentColor 9.75%);
 }
-.adw-linked > * + * {
-  margin-left: 2px;
+.adw-button.osd:active {
+  color: #ffffff;
+  background-color: color-mix(in srgb, black 48.75%, currentColor 16.25%);
 }
 
 .adw-button.image-text-button {
@@ -1161,7 +1523,7 @@ adw-popover {
     box-shadow: 0 0 0 1px var(--separator-color), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
   }
 }
-adw-popover[menu] {
+adw-popover[menu], adw-popover.menu {
   padding: 6px;
 }
 adw-popover[data-position=bottom] {
@@ -1221,7 +1583,7 @@ adw-popover[data-position=bottom][data-align=end], adw-popover[data-position=top
   outline-offset: -2px;
 }
 .adw-popover-item[disabled] {
-  opacity: var(--disabled-opacity, 0.5);
+  opacity: var(--disabled-opacity);
   pointer-events: none;
 }
 
@@ -1656,7 +2018,7 @@ adw-toggle-group.flat.round .adw-toggle {
 }
 
 .adw-switch.disabled {
-  opacity: var(--dim-opacity);
+  opacity: var(--disabled-opacity);
 }
 .adw-switch.disabled .adw-switch-slider {
   cursor: not-allowed;
@@ -1790,7 +2152,7 @@ adw-radio[indeterminate]:not([disabled]):active .adw-check-indicator {
 adw-checkbox[disabled],
 adw-radio[disabled] {
   cursor: not-allowed;
-  opacity: var(--dim-opacity);
+  opacity: var(--disabled-opacity);
 }
 adw-checkbox .adw-check-input:focus-visible ~ .adw-check-indicator,
 adw-radio .adw-check-input:focus-visible ~ .adw-check-indicator {
@@ -1867,7 +2229,7 @@ adw-progress-bar .adw-progress-bar-text {
   font-size: smaller;
 }
 adw-progress-bar[disabled] {
-  opacity: var(--dim-opacity);
+  opacity: var(--disabled-opacity);
 }
 adw-progress-bar[inverted] .adw-progress-bar-trough {
   justify-content: flex-end;
@@ -1875,16 +2237,16 @@ adw-progress-bar[inverted] .adw-progress-bar-trough {
 adw-progress-bar .adw-progress-bar-trough.empty .adw-progress-bar-progress {
   all: unset;
 }
-adw-progress-bar[osd] {
+adw-progress-bar[osd], adw-progress-bar.osd {
   min-width: 2px;
 }
-adw-progress-bar[osd] .adw-progress-bar-trough {
+adw-progress-bar[osd] .adw-progress-bar-trough, adw-progress-bar.osd .adw-progress-bar-trough {
   height: 2px;
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
 }
-adw-progress-bar[osd] .adw-progress-bar-progress {
+adw-progress-bar[osd] .adw-progress-bar-progress, adw-progress-bar.osd .adw-progress-bar-progress {
   border-radius: 0;
 }
 adw-progress-bar[pulsing] .adw-progress-bar-progress {
@@ -1960,21 +2322,13 @@ adw-preferences-group .adw-preferences-group-description {
   color: var(--window-fg-color);
 }
 adw-preferences-group .adw-preferences-group-listbox {
-  background-color: var(--card-bg-color);
-  color: var(--card-fg-color);
-  border-radius: var(--card-radius);
-  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.03), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
   overflow: hidden;
 }
 
 adw-card,
 .adw-card {
   display: block;
-  background-color: var(--card-bg-color);
-  color: var(--card-fg-color);
-  border-radius: var(--card-radius);
   padding: var(--spacing-l);
-  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.03), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
   overflow: hidden;
 }
 
@@ -2080,6 +2434,48 @@ adw-spinner svg {
   flex: none;
 }
 
+adw-shortcut-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+}
+adw-shortcut-label:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 1px;
+}
+adw-shortcut-label .adw-shortcut-label-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+adw-shortcut-label .keycap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 20px;
+  padding: 6px;
+  border-radius: 6px;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  box-shadow: inset 0 -2px var(--card-shade-color);
+}
+@media (prefers-contrast: more) {
+  adw-shortcut-label .keycap {
+    box-shadow: inset 0 -2px var(--card-shade-color), 0 0 0 1px var(--border-color);
+  }
+}
+adw-shortcut-label .adw-shortcut-label-side {
+  margin-inline-start: 2px;
+  font-size: 82%;
+  font-weight: 700;
+  vertical-align: baseline;
+  bottom: 0;
+}
+adw-shortcut-label > .dimmed {
+  padding: 6px 0;
+}
+
 adw-avatar {
   display: inline-flex;
   align-items: center;
@@ -2103,6 +2499,12 @@ adw-avatar .adw-avatar-icon {
   -webkit-mask-size: contain;
   mask-size: contain;
 }
+adw-avatar .adw-avatar-custom-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
 adw-banner {
   display: flex;
@@ -2176,6 +2578,17 @@ adw-status-page .adw-status-page-description {
 adw-status-page .adw-status-page-child {
   margin-top: var(--spacing-s);
 }
+adw-status-page.compact {
+  gap: var(--spacing-s);
+  padding: var(--spacing-m);
+}
+adw-status-page.compact .adw-status-page-icon {
+  width: 72px;
+  height: 72px;
+}
+adw-status-page.compact .adw-status-page-title {
+  font-size: 14pt;
+}
 
 adw-switch-row,
 adw-combo-row {
@@ -2276,6 +2689,27 @@ adw-action-row .adw-row-subtitle {
   text-overflow: ellipsis;
 }
 
+adw-action-row.property .adw-row-title,
+adw-expander-row.property .adw-row-title {
+  font-size: var(--font-size-small);
+  opacity: var(--dim-opacity);
+}
+adw-action-row.property .adw-row-subtitle,
+adw-expander-row.property .adw-row-subtitle {
+  font-size: var(--font-size-base);
+  opacity: 1;
+}
+adw-action-row.property.monospace,
+adw-expander-row.property.monospace {
+  font-family: inherit;
+  font-size: inherit;
+}
+adw-action-row.property.monospace .adw-row-subtitle,
+adw-expander-row.property.monospace .adw-row-subtitle {
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
 adw-entry-row {
   display: flex;
   align-items: center;
@@ -3967,6 +4401,42 @@ adw-sidebar.page .adw-sidebar-item-arrow {
   display: inline-block;
 }
 
+.navigation-sidebar, .navigation-sidebar.view, .navigation-sidebar.view:disabled {
+  background-color: transparent;
+  color: inherit;
+}
+.navigation-sidebar.background {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
+.navigation-sidebar {
+  padding-top: var(--spacing-xs);
+  padding-bottom: 4px;
+}
+.navigation-sidebar > * {
+  margin: 0 var(--spacing-xs) 2px;
+  padding: 3px 14px;
+  border-radius: var(--button-radius);
+}
+.navigation-sidebar > .activatable:hover {
+  background-color: color-mix(in srgb, currentColor 7%, transparent);
+}
+.navigation-sidebar > .activatable:active {
+  background-color: color-mix(in srgb, currentColor 16%, transparent);
+}
+.navigation-sidebar > [aria-selected=true],
+.navigation-sidebar > .selected {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+.navigation-sidebar > [aria-selected=true]:hover,
+.navigation-sidebar > .selected:hover {
+  background-color: color-mix(in srgb, currentColor 13%, transparent);
+}
+.navigation-sidebar > [aria-selected=true]:active,
+.navigation-sidebar > .selected:active {
+  background-color: color-mix(in srgb, currentColor 19%, transparent);
+}
+
 adw-about-dialog {
   display: none;
 }