@vixcom/ui 1.7.1 → 1.7.3

package/dist/css/main.css

@@ -4,6 +4,7 @@ script {
 }
 
 * {
+  box-sizing: border-box;
   scrollbar-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%)) transparent;
   scrollbar-width: thin;
   word-break: break-word;
@@ -71,13 +72,21 @@ b {
   filter: grayscale(0.8);
 }
 
+.bg-current {
+  background-color: rgb(from var(--background-color, var(--color, currentColor)) r g b / var(--background-opacity, 0.055));
+}
+.bg-current:hover {
+  --background-opacity: 0.125;
+}
+
 .bg-text,
 .bg-text-color {
+  --opacity: 0.055;
   position: relative;
 }
 .bg-text:hover::after,
 .bg-text-color:hover::after {
-  opacity: 0.125;
+  opacity: var(--opacity-hover, calc(var(--opacity0.75)));
 }
 .bg-text::after,
 .bg-text-color::after {
@@ -86,7 +95,7 @@ b {
   top: 0;
   left: 0;
   background-color: currentColor;
-  opacity: 0.055;
+  opacity: var(--opacity);
   height: 100%;
   width: 100%;
   border-radius: inherit;
@@ -151,8 +160,6 @@ a:not(.link) {
 
 .main-logo {
   display: inline-flex;
-  max-width: 100%;
-  object-fit: contain;
 }
 
 .page-header {
@@ -235,6 +242,7 @@ a:not(.link) {
   display: flex;
   align-items: center;
   justify-content: center;
+  aspect-ratio: 1;
   font-size: 150%;
 }
 
@@ -469,7 +477,7 @@ input[type=radio] {
   background-color: transparent;
   border: 0.125rem solid currentColor;
   border-radius: 50%;
-  display: inline-block;
+  /* display: inline-block; */
   justify-content: center;
   align-items: center;
   width: 1rem;
@@ -1253,11 +1261,12 @@ table {
   background-color: inherit;
   z-index: 0;
 }
-.flex-item .img,
-.flex-item .icon,
-.flex-card .img,
-.flex-card .icon {
+.flex-item > .img,
+.flex-item > .icon,
+.flex-card > .img,
+.flex-card > .icon {
   position: relative;
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -1265,18 +1274,14 @@ table {
   object-fit: cover;
   text-align: center;
   font-size: 200%;
-  z-index: 1;
 }
-.flex-item .img,
-.flex-card .img {
+.flex-item > .img,
+.flex-card > .img {
   flex: 1 1 40%;
-  border-radius: inherit;
 }
-.flex-item .icon,
-.flex-card .icon {
+.flex-item > .icon,
+.flex-card > .icon {
   flex: 1 1 25%;
-  /* padding-left: 0.75rem; */
-  /* font-weight: bold; */
 }
 .flex-item .addon,
 .flex-card .addon {
@@ -1842,5 +1847,3 @@ section {
     max-width: 75%;
   }
 }
-
-/*# sourceMappingURL=main.css.map */