beercss 3.2.13 → 3.3.0

package/src/cdn/elements/progress.css

@@ -1,30 +1,142 @@
-.progress {
+progress {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  color: var(--primary);
+  background: var(--surface-variant);
+  border-radius: 0;
+  flex: none;
+  border: none;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+}
+
+progress.small {
+  width: 4rem;
+}
+
+progress.medium {
+  width: 8rem;
+}
+
+progress.large {
+  width: 12rem;
+}
+
+progress:not(.circle, [value])::after {
+  content: "";
   position: absolute;
-  background-color: var(--active);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  transition: var(--speed4) clip-path;
-  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
+  width: 100%;
+  height: 100%;
+  clip-path: none;
+  background: currentColor;
+  animation: 1.6s to-linear ease infinite;
 }
 
-.progress.left {
-  clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+progress:not(.circle, [value])::-moz-progress-bar {
+  animation: 1.6s to-linear ease infinite;
 }
 
-.progress.right {
-  clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
+progress::-webkit-progress-bar {
+  background: none;
 }
 
-.progress.top {
-  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
+
+progress::-webkit-progress-value {
+  background: currentColor;
+}
+
+progress::-moz-progress-bar {
+  background: currentColor;
+}
+
+progress.circle {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 0.3rem solid currentColor;
+  animation: 1.6s to-circular linear infinite;
+  background: none;
+  flex: none;
+  clip-path: none;
+}
+
+progress.circle::-moz-progress-bar {
+  background: none;
 }
 
-.progress.bottom {
-  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
+progress.circle.small {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 0.2rem;
 }
 
-.progress + * {
-  margin-top: 0;
+progress.circle.large {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-width: 0.4rem;
+}
+
+:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
+  flex: auto;
+}
+
+@keyframes to-linear {
+  0% {
+    transform: translate(0%);
+    width: 0%;
+  }
+
+  100% {
+    transform: translate(100%);
+    width: 100%;
+  }
+}
+
+@keyframes to-circular {
+  0% {
+    transform: rotate(0deg);
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+
+  20% {
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+
+  30% {
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
+  }
+
+  40% {
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
+  }
+
+  60% {
+    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%);
+  }
+
+  70% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
+  }
+
+  80% {
+    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
+  }
+
+  90% {
+    transform: rotate(360deg);
+    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
+  }
 }

package/src/cdn/elements/sliders.css

@@ -1,24 +1,27 @@
 .slider {
+  ---start: 0%;
+  ---end: 0%;
+  ---value1: "";
+  ---value2: "";
+
   display: flex;
   align-items: center !important;
   width: auto;
+  height: 1.25rem;
   margin: 1.125rem;
-  flex: auto;
+  flex: none;
 }
 
 .slider.small {
   width: 4rem;
-  flex: none;
 }
 
 .slider.medium {
   width: 8rem;
-  flex: none;
 }
 
 .slider.large {
   width: 12rem;
-  flex: none;
 }
 
 .slider.vertical {
@@ -105,7 +108,7 @@
   cursor: not-allowed;
 }
 
-.slider > input:disabled + span {
+.slider > input:disabled ~ :is(span, .tooltip) {
   background: #9E9E9E;
 }
 
@@ -116,6 +119,8 @@
   border-radius: 1rem;
   background: var(--primary);
   z-index: 0;
+  left: var(---start);
+  right: var(---end);
 }
 
 .field > .slider {
@@ -123,10 +128,52 @@
 }
 
 .slider::before {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   height: 0.25rem;
   border-radius: 1rem;
   background: var(--active);
-}
+}
+
+.slider > .tooltip {
+  top: 0.25rem;
+  opacity: 0;
+  left: calc(100% - var(---end));
+  right: auto;
+  bottom: auto;
+  width: 1.75rem;
+  height: 1.75rem;
+  background-color: var(--primary);
+  border-radius: 50% 50% 0;
+  transition: var(--speed2) ease top, var(--speed2) ease opacity;
+  transform: translate(-50%, -50%) rotate(45deg) !important;
+}
+
+.slider > .tooltip + .tooltip {
+  left: auto;
+  right: calc(100% - var(---start));
+  transform: translate(50%, -50%) rotate(45deg) !important;
+}
+
+.slider > .tooltip::before {
+  content: var(---value1);
+  transform: rotate(-45deg);
+}
+
+.slider > .tooltip + .tooltip::before {
+  content: var(---value2);
+}
+
+.slider:hover > .tooltip {
+  top: -0.25rem;
+  opacity: 1;
+}
+
+.slider.vertical > .tooltip {
+  display: none;
+}
+
+:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
+  flex: auto;
+}

package/src/cdn/elements/{toasts.css → snackbars.css}

@@ -1,4 +1,4 @@
-.toast {
+.snackbar {
   ---transform: translate(-50%, 1rem);
 
   position: fixed;
@@ -24,25 +24,25 @@
   gap: 0.5rem;
 }
 
-.toast.top {
+.snackbar.top {
   top: 6rem;
   bottom: auto;
 }
 
-.toast.active {
+.snackbar.active {
   visibility: visible;
-  animation: var(--speed2) to-toast;
+  animation: var(--speed2) to-snackbar;
 }
 
-.toast.active.top {
+.snackbar.active.top {
   ---transform: translate(-50%, -1rem);
 }
 
-.toast > .max {
+.snackbar > .max {
   flex: auto;
 }
 
-@keyframes to-toast {
+@keyframes to-snackbar {
   0% {
     opacity: 0;
     transform: var(---transform);
@@ -55,7 +55,7 @@
 }
 
 @media only screen and (min-width: 993px) {
-  .toast {
+  .snackbar {
     width: 40%;
   }
 }

package/src/cdn/elements/tables.css

@@ -30,4 +30,4 @@ table.medium-space :is(th, td) {
 
 table.large-space :is(th, td) {
   padding: 1rem;
-}
+}

package/src/cdn/elements/tabs.css

@@ -52,6 +52,6 @@
   color: var(--primary);
 }
 
-.tabs:is(.left-align, .center-align .right-align) > a {
+.tabs:is(.left-align, .center-align, .right-align) > a {
   width: auto;
 }

package/src/cdn/helpers/dividers.css

@@ -2,7 +2,8 @@
 .small-divider,
 .medium-divider,
 .large-divider {
-  border-bottom: 0.0625rem solid var(--outline);
+  height: 0.0625rem;
+  background-color: var(--outline);
   display: block;
   margin: 0 !important;
 }

package/src/cdn/helpers/forms.css

@@ -70,7 +70,8 @@
   border-radius: 2.5rem;
 }
 
-:is(.circle, .square):not(i, img, video, svg) {
+:is(.circle, .square):not(i, img, video, svg),
+:is(.circle, .square).chip.medium {
   height: 2.5rem;
   width: 2.5rem;
   padding: 0;
@@ -80,7 +81,8 @@
   display: none;
 }
 
-:is(.circle, .square).small:not(i, img, video, svg) {
+:is(.circle, .square).small:not(i, img, video, svg),
+:is(.circle, .square).chip {
   height: 2rem;
   width: 2rem;
 }
@@ -106,6 +108,10 @@
   box-shadow: none;
 }
 
+.no-border {
+  border-color: transparent !important;
+}
+
 :is(nav, .row, dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {
   border-radius: 0;
 }

package/src/cdn/helpers/margins.css

@@ -1,20 +1,59 @@
+:is(.no-margin, .auto-margin, .tiny-margin, .small-margin, .medium-margin, .margin, .large-margin):not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
+  margin: var(---margin) !important;
+}
+
+.no-margin,
+.auto-margin,
+.tiny-margin,
+.small-margin,
+.medium-margin,
+.margin,
+.large-margin,
+.left-margin,
+.right-margin,
+.top-margin,
+.bottom-margin,
+.horizontal-margin,
+.vertical-margin {
+  ---margin: 1rem;
+}
+
 .no-margin {
-  margin: 0 !important;
+  ---margin: 0;
+}
+
+.auto-margin {
+  ---margin: auto;
 }
 
 .tiny-margin {
-  margin: 0.25rem !important;
+  ---margin: 0.25rem;
 }
 
 .small-margin {
-  margin: 0.5rem !important;
+  ---margin: 0.5rem;
 }
 
-.medium-margin,
-.margin {
-  margin: 1rem !important;
+.large-margin {
+  ---margin: 1.5rem;
 }
 
-.large-margin {
-  margin: 1.5rem !important;
+.left-margin,
+.horizontal-margin {
+  margin-left: var(---margin) !important;
+}
+
+.right-margin,
+.horizontal-margin {
+  margin-right: var(---margin) !important;
+}
+
+.top-margin,
+.vertical-margin {
+  margin-top: var(---margin) !important;
+}
+
+.bottom-margin,
+.vertical-margin {
+  margin-bottom: var(---margin) !important;
 }

package/src/cdn/helpers/opacities.css

@@ -1,7 +1,19 @@
 .no-opacity {
-  opacity: 0;
+  opacity: 1 !important;
 }
 
 .opacity {
-  opacity: 1;
+  opacity: 0 !important;
+}
+
+.small-opacity {
+  opacity: 0.75 !important;
+}
+
+.medium-opacity {
+  opacity: 0.5 !important;
+}
+
+.large-opacity {
+  opacity: 0.25 !important;
 }

package/src/cdn/helpers/paddings.css

@@ -1,20 +1,59 @@
+:is(.no-padding, .auto-padding, .tiny-padding, .small-padding, .medium-padding, .padding, .large-padding):not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
+  padding: var(---padding) !important;
+}
+
+.no-padding,
+.auto-padding,
+.tiny-padding,
+.small-padding,
+.medium-padding,
+.padding,
+.large-padding,
+.left-padding,
+.right-padding,
+.top-padding,
+.bottom-padding,
+.horizontal-padding,
+.vertical-padding {
+  ---padding: 1rem;
+}
+
 .no-padding {
-  padding: 0 !important;
+  ---padding: 0;
+}
+
+.auto-padding {
+  ---padding: auto;
 }
 
 .tiny-padding {
-  padding: 0.25rem !important;
+  ---padding: 0.25rem;
 }
 
 .small-padding {
-  padding: 0.5rem !important;
+  ---padding: 0.5rem;
 }
 
-.medium-padding,
-.padding {
-  padding: 1rem !important;
+.large-padding {
+  ---padding: 1.5rem;
 }
 
-.large-padding {
-  padding: 1.5rem !important;
+.left-padding,
+.horizontal-padding {
+  padding-left: var(---padding) !important;
+}
+
+.right-padding,
+.horizontal-padding {
+  padding-right: var(---padding) !important;
+}
+
+.top-padding,
+.vertical-padding {
+  padding-top: var(---padding) !important;
+}
+
+.bottom-padding,
+.vertical-padding {
+  padding-bottom: var(---padding) !important;
 }

package/src/cdn/helpers/reset.css

@@ -38,4 +38,25 @@ button,
   font-family: inherit;
   outline: inherit;
   justify-content: center;
-}
+}
+
+a,
+button,
+.button,
+i,
+label {
+  user-select: none;
+}
+
+body *::-webkit-scrollbar,
+body *::-webkit-scrollbar-thumb,
+body *::-webkit-scrollbar-button {
+  background: none;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+body *:is(:hover,:focus)::-webkit-scrollbar-thumb {
+  background: var(--outline);
+  border-radius: 1rem;
+}

package/src/cdn/helpers/theme.css

@@ -92,7 +92,7 @@
 
 .inverse-primary {
   background-color: var(--inverse-primary);
-  color: var(--inverse-on-primary);
+  color: var(--primary);
 }
 
 .inverse-primary-text {

package/src/cdn/helpers/waves.css

@@ -1,6 +1,7 @@
 .wave::after,
+.chip::after,
 .wave.light::after,
-:is(.chip, .button, button)::after {
+:is(.button, button)::after {
   content: "";
   position: absolute;
   top: 0;
@@ -17,9 +18,10 @@
 
 .wave.dark::after,
 .wave.row::after,
+.chip::after,
 :is(.button, button).none::after,
-:is(.chip, .button, button).border::after,
-:is(.chip, .button, button).transparent::after {
+:is(.button, button).border::after,
+:is(.button, button).transparent::after {
   background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
 }
 

package/src/cdn/settings/dark.css

@@ -1,31 +1,33 @@
 body.dark {
-  --primary: #D0BCFF;
-  --on-primary: #371E73;
-  --primary-container: #4F378B;
-  --on-primary-container: #EADDFF;
-  --secondary: #CCC2DC;
-  --on-secondary: #332D41;
-  --secondary-container: #4A4458;
-  --on-secondary-container: #E8DEF8;
-  --tertiary: #EFB8C8;
-  --on-tertiary: #492532;
-  --tertiary-container: #633B48;
-  --on-tertiary-container: #FFD8E4;
-  --error: #F2B8B5;
-  --on-error: #601410;
-  --error-container: #8C1D18;
-  --on-error-container: #F9DEDC;
-  --background: #1C1B1F;
-  --on-background: #E6E1E5;
-  --surface: #1C1B1F;
-  --on-surface: #E6E1E5;
-  --outline: #938F99;
-  --surface-variant: #49454F;
-  --on-surface-variant: #CAC4D0;
-  --inverse-surface: #E6E1E5;
+  --primary: #cfbcff;
+  --on-primary: #381e72;
+  --primary-container: #4f378a;
+  --on-primary-container: #e9ddff;
+  --secondary: #cbc2db;
+  --on-secondary: #332d41;
+  --secondary-container: #4a4458;
+  --on-secondary-container: #e8def8;
+  --tertiary: #efb8c8;
+  --on-tertiary: #4a2532;
+  --tertiary-container: #633b48;
+  --on-tertiary-container: #ffd9e3;
+  --error: #ffb4ab;
+  --on-error: #690005;
+  --error-container: #93000a;
+  --on-error-container: #ffb4ab;
+  --background: #1c1b1e;
+  --on-background: #e6e1e6;
+  --surface: #1c1b1e;
+  --on-surface: #e6e1e6;
+  --surface-variant: #49454e;
+  --on-surface-variant: #cac4cf;
+  --outline: #948f99;
+  --outline-variant: #49454e;
+  --shadow: #000000;
+  --scrim: #000000;
+  --inverse-surface: #e6e1e6;
   --inverse-on-surface: #313033;
-  --inverse-primary: #6750A4;
-  --inverse-on-primary: #FFF;
+  --inverse-primary: #6750a4;
   --body: #000;
   --overlay: rgb(0 0 0 / 0.5);
   --active: rgb(255 255 255 / 0.2);