@gjsify/adwaita-web 0.14.0 → 0.16.0

package/dist/adwaita-web.css

@@ -234,6 +234,10 @@
   --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);
@@ -274,6 +278,10 @@
     --card-fg-color: #ffffff;
     --card-shade-color: rgba(0, 0, 6, 0.36);
     --accent-color: #78aeed;
+    --popover-bg-color: #36363a;
+    --popover-fg-color: #ffffff;
+    --popover-shade-color: rgba(0, 0, 6, 0.36);
+    --dialog-scrim-color: rgba(0, 0, 6, 0.55);
     --button-bg-color: rgba(255, 255, 255, 0.1);
     --button-hover-color: rgba(255, 255, 255, 0.15);
     --button-active-color: rgba(255, 255, 255, 0.22);
@@ -301,6 +309,10 @@
   --card-fg-color: #ffffff;
   --card-shade-color: rgba(0, 0, 6, 0.36);
   --accent-color: #78aeed;
+  --popover-bg-color: #36363a;
+  --popover-fg-color: #ffffff;
+  --popover-shade-color: rgba(0, 0, 6, 0.36);
+  --dialog-scrim-color: rgba(0, 0, 6, 0.55);
   --button-bg-color: rgba(255, 255, 255, 0.1);
   --button-hover-color: rgba(255, 255, 255, 0.15);
   --button-active-color: rgba(255, 255, 255, 0.22);
@@ -314,6 +326,14 @@
   --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
 }
 
+.adw-root {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  color-scheme: light dark;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+}
+
 adw-window {
   display: flex;
   flex-direction: column;
@@ -739,6 +759,259 @@ adw-button-content.can-shrink .adw-button-content-label {
   pointer-events: none;
 }
 
+.adw-menu-button {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.adw-menu-button .adw-menu-button-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  margin: 0;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  color: var(--window-fg-color);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-menu-button .adw-menu-button-button .adw-menu-button-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.adw-menu-button .adw-menu-button-button:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-menu-button .adw-menu-button-button:active {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button .adw-menu-button-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 1px;
+}
+.adw-menu-button.flat .adw-menu-button-button {
+  background-color: transparent;
+}
+.adw-menu-button.active .adw-menu-button-button {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button.circular .adw-menu-button-button {
+  padding: 0;
+  border-radius: 9999px;
+}
+.adw-menu-button.disabled {
+  opacity: 0.45;
+}
+.adw-menu-button.disabled .adw-menu-button-button {
+  cursor: default;
+  pointer-events: none;
+}
+.adw-menu-button .adw-menu-button-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  padding: var(--spacing-xs);
+  border-radius: var(--card-radius);
+  background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+  color: var(--popover-fg-color, var(--window-fg-color));
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
+}
+.adw-menu-button .adw-menu-button-popover[hidden] {
+  display: none;
+}
+.adw-menu-button .adw-menu-button-title {
+  padding: 4px var(--spacing-s) 6px;
+  font-weight: 700;
+  opacity: var(--dim-opacity);
+}
+.adw-menu-button .adw-menu-button-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  min-height: 32px;
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-s);
+  border: none;
+  border-radius: calc(var(--button-radius) - 2px);
+  background-color: transparent;
+  color: inherit;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-menu-button .adw-menu-button-item .adw-menu-button-item-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.adw-menu-button .adw-menu-button-item:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-menu-button .adw-menu-button-item:active {
+  background-color: var(--button-active-color);
+}
+.adw-menu-button .adw-menu-button-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+
+.adw-drop-down {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.adw-drop-down .adw-drop-down-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 100px;
+  min-height: 34px;
+  margin: 0;
+  padding: 0 8px 0 12px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-drop-down .adw-drop-down-button:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-drop-down .adw-drop-down-button:active {
+  background-color: var(--button-active-color);
+}
+.adw-drop-down .adw-drop-down-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 1px;
+}
+.adw-drop-down .adw-drop-down-button:disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.adw-drop-down .adw-drop-down-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.adw-drop-down .adw-drop-down-arrow {
+  width: 12px;
+  height: 12px;
+  mask-size: 12px;
+  -webkit-mask-size: 12px;
+  flex: none;
+  opacity: var(--dim-opacity);
+}
+.adw-drop-down.disabled {
+  opacity: 0.55;
+}
+.adw-drop-down .adw-drop-down-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  max-width: 320px;
+  padding: var(--spacing-xs);
+  border-radius: var(--card-radius);
+  background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+  color: var(--popover-fg-color, var(--window-fg-color));
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
+}
+.adw-drop-down .adw-drop-down-popover[hidden] {
+  display: none;
+}
+.adw-drop-down .adw-drop-down-search {
+  margin-bottom: var(--spacing-xs);
+}
+.adw-drop-down .adw-drop-down-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.adw-drop-down .adw-drop-down-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-s);
+  width: 100%;
+  min-height: 32px;
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-s);
+  border: none;
+  border-radius: calc(var(--button-radius) - 2px);
+  background-color: transparent;
+  color: inherit;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.adw-drop-down .adw-drop-down-item:hover {
+  background-color: var(--button-hover-color);
+}
+.adw-drop-down .adw-drop-down-item:active {
+  background-color: var(--button-active-color);
+}
+.adw-drop-down .adw-drop-down-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+.adw-drop-down .adw-drop-down-item[hidden] {
+  display: none;
+}
+.adw-drop-down .adw-drop-down-item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.adw-drop-down .adw-drop-down-item-check {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.adw-drop-down .adw-drop-down-item.selected .adw-drop-down-item-check::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--accent-color);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
 :root {
   --active-toggle-bg-color: #ffffff;
   --active-toggle-fg-color: var(--window-fg-color);
@@ -915,6 +1188,97 @@ adw-card,
   overflow: hidden;
 }
 
+.adw-data-grid {
+  display: block;
+  box-sizing: border-box;
+  color: var(--card-fg-color);
+  font-size: var(--font-size-base);
+}
+.adw-data-grid .adw-data-grid-caption {
+  font-size: var(--font-size-heading);
+  font-weight: 700;
+  color: var(--window-fg-color);
+  margin: 0 0 var(--spacing-s);
+  padding: 0 var(--spacing-xs);
+}
+.adw-data-grid .adw-data-grid-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.adw-data-grid .adw-data-grid-table {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: max-content;
+}
+.adw-data-grid .adw-data-grid-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  align-items: center;
+}
+.adw-data-grid .adw-data-grid-cell {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--spacing-s) var(--spacing-m);
+  white-space: nowrap;
+  text-align: left;
+}
+.adw-data-grid .adw-data-grid-cell.align-end {
+  text-align: right;
+}
+.adw-data-grid .adw-data-grid-cell.align-center {
+  text-align: center;
+}
+.adw-data-grid .adw-data-grid-cell.numeric {
+  font-variant-numeric: tabular-nums;
+}
+.adw-data-grid .adw-data-grid-cell.mono {
+  font-family: "Adwaita Mono", "Cantarell", ui-monospace, "SF Mono", "Menlo", monospace;
+  font-variant-numeric: tabular-nums;
+}
+.adw-data-grid .adw-data-grid-row.header .adw-data-grid-cell {
+  font-size: var(--font-size-small);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: var(--dim-opacity);
+  border-bottom: 1px solid var(--separator-color);
+}
+.adw-data-grid .adw-data-grid-row.variant-section .section-cell {
+  font-weight: 700;
+  color: var(--window-fg-color);
+  padding-top: var(--spacing-m);
+}
+.adw-data-grid .adw-data-grid-row.variant-subtotal {
+  border-top: 1px solid var(--separator-color);
+}
+.adw-data-grid .adw-data-grid-row.variant-subtotal .adw-data-grid-cell {
+  font-weight: 700;
+}
+.adw-data-grid .adw-data-grid-row.variant-total {
+  border-top: 2px solid var(--separator-color);
+  border-bottom: 1px solid var(--separator-color);
+}
+.adw-data-grid .adw-data-grid-row.variant-total .adw-data-grid-cell {
+  font-weight: 800;
+  color: var(--window-fg-color);
+}
+.adw-data-grid .adw-data-grid-row.interactive {
+  cursor: pointer;
+  border-radius: var(--button-radius);
+}
+.adw-data-grid .adw-data-grid-row.interactive:hover {
+  background-color: var(--button-bg-color);
+}
+.adw-data-grid .adw-data-grid-row.interactive:active {
+  background-color: var(--button-active-color);
+}
+.adw-data-grid .adw-data-grid-row.interactive:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+
 adw-clamp {
   display: block;
   width: 100%;
@@ -2288,6 +2652,87 @@ adw-inline-view-switcher.flat.round .adw-inline-view-switcher-toggle {
   border-radius: 17px;
 }
 
+adw-view-stack {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+adw-view-stack .adw-view-stack-child {
+  display: none;
+}
+adw-view-stack .adw-view-stack-child.active-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+adw-view-switcher-bar {
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--headerbar-bg-color);
+  border-top: 1px solid var(--separator-color);
+  padding: 7px 0;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-box {
+  display: flex;
+  align-items: stretch;
+  min-height: 6px;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  margin: 0;
+  padding: 4px 3px 2px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: transparent;
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: color 0.2s ease, background-color 0.2s ease;
+  user-select: none;
+  -webkit-user-select: none;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button .adw-view-switcher-bar-icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button .adw-view-switcher-bar-label {
+  min-height: 18px;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:hover {
+  background-color: var(--button-hover-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:active {
+  background-color: var(--button-active-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button.active {
+  color: var(--accent-color);
+}
+adw-view-switcher-bar .adw-view-switcher-bar-button.active .adw-view-switcher-bar-label {
+  color: var(--accent-color);
+}
+
 adw-navigation-view {
   display: flex;
   flex-direction: column;
@@ -2971,6 +3416,178 @@ adw-preferences-dialog .adw-preferences-dialog-pages {
   padding: var(--spacing-xl) var(--spacing-m);
 }
 
+adw-dialog {
+  display: none;
+}
+adw-dialog.open {
+  display: block;
+}
+adw-dialog .adw-dialog-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-l);
+  background-color: var(--dialog-scrim-color, rgba(0, 0, 6, 0.32));
+  animation: adw-dialog-fade-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+adw-dialog .adw-dialog-box {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--adw-dialog-content-width, 360px), 100vw - 2 * var(--spacing-l));
+  max-height: min(var(--adw-dialog-content-height, 100vh), 100vh - 2 * var(--spacing-l));
+  overflow: hidden;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  border-radius: var(--window-radius);
+  outline: 1px solid var(--separator-color);
+  outline-offset: -1px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 5px 2px rgba(0, 0, 6, 0.1), 0 0 14px 2px rgba(0, 0, 6, 0.03);
+  font-family: var(--font-family);
+  animation: adw-dialog-pop-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+adw-dialog .adw-dialog-box:focus {
+  outline: 1px solid var(--separator-color);
+}
+adw-dialog .adw-dialog-header {
+  display: flex;
+  align-items: center;
+  min-height: 47px;
+  padding: 0 6px;
+  flex-shrink: 0;
+}
+adw-dialog .adw-dialog-header-side {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
+}
+adw-dialog .adw-dialog-header-side--end {
+  justify-content: flex-end;
+}
+adw-dialog .adw-dialog-title {
+  flex: 0 0 auto;
+  font-weight: bold;
+  font-size: var(--font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+}
+adw-dialog .adw-dialog-close {
+  appearance: none;
+  border: none;
+  margin: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(--window-fg-color);
+  cursor: pointer;
+  position: relative;
+  flex: none;
+  transition: background-color 0.1s ease;
+}
+adw-dialog .adw-dialog-close::before, adw-dialog .adw-dialog-close::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 1.5px;
+  background-color: currentColor;
+  border-radius: 1px;
+}
+adw-dialog .adw-dialog-close::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+adw-dialog .adw-dialog-close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+adw-dialog .adw-dialog-close:hover {
+  background-color: var(--button-hover-color);
+}
+adw-dialog .adw-dialog-close:active {
+  background-color: var(--button-active-color);
+}
+adw-dialog .adw-dialog-close:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 1px;
+}
+adw-dialog .adw-dialog-close.locked {
+  opacity: var(--dim-opacity);
+  cursor: default;
+}
+adw-dialog .adw-dialog-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--spacing-m) var(--spacing-l) var(--spacing-l);
+}
+adw-dialog .adw-dialog-header[hidden] + .adw-dialog-content {
+  padding-top: var(--spacing-l);
+}
+adw-dialog[data-presentation=bottom-sheet] .adw-dialog-scrim {
+  align-items: flex-end;
+  justify-content: stretch;
+  padding: 0;
+}
+adw-dialog[data-presentation=bottom-sheet] .adw-dialog-box {
+  width: 100%;
+  max-width: none;
+  border-top-left-radius: var(--window-radius);
+  border-top-right-radius: var(--window-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  animation: adw-dialog-slide-up 0.25s cubic-bezier(0, 0, 0.2, 1);
+}
+
+@media (max-width: 550px) {
+  adw-dialog[data-presentation=auto] .adw-dialog-scrim {
+    align-items: flex-end;
+    justify-content: stretch;
+    padding: 0;
+  }
+  adw-dialog[data-presentation=auto] .adw-dialog-box {
+    width: 100%;
+    max-width: none;
+    border-top-left-radius: var(--window-radius);
+    border-top-right-radius: var(--window-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    animation: adw-dialog-slide-up 0.25s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+@keyframes adw-dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes adw-dialog-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes adw-dialog-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
 [hidden] {
   display: none !important;
 }