diff --git a/knopf.css b/knopf.css index 18afdac..a89d649 100644 --- a/knopf.css +++ b/knopf.css @@ -10,7 +10,7 @@ --knopf-luminosity: 37%; /* White */ - --knopf-white: 0 0% 100%; + --knopf-white: 0 100% 100%; /* ========================================================================== Sizes diff --git a/knopf.min.css b/knopf.min.css index fe6c6c5..cce90e6 100644 --- a/knopf.min.css +++ b/knopf.min.css @@ -1 +1 @@ -/*! knopf v1.0.9 | MIT License | https://knopf.dev/ */:root{--knopf-hue:218;--knopf-saturation:77%;--knopf-luminosity:37%;--knopf-white:0 0 100%;--knopf-font-size-base:1rem;--knopf-font-size-small:calc(var(--knopf-font-size-base) - 0.25rem);--knopf-font-size-large:calc(var(--knopf-font-size-base) + 0.2rem);--knopf-font-size-huge:calc(var(--knopf-font-size-base) + 0.5rem);--knopf-padding-base:.375rem;--knopf-padding-small:calc(var(--knopf-padding-base) - 0.125rem);--knopf-padding-large:calc(var(--knopf-padding-base) + 0.125rem);--knopf-padding-huge:calc(var(--knopf-padding-base) + 0.375rem);--knopf-icon-size-base:1.125rem;--knopf-icon-size-small:calc(var(--knopf-icon-size-base) - 0.25rem);--knopf-icon-size-large:calc(var(--knopf-icon-size-base) + 0.375rem);--knopf-icon-size-huge:calc(var(--knopf-icon-size-base) + 0.625rem);--knopf-font-size:var(--knopf-font-size-base);--knopf-padding:var(--knopf-padding-base);--knopf-icon-size:var(--knopf-icon-size-base);--knopf-border-radius:.33em;--knopf-border-style:solid;--knopf-border-width:1px;--knopf-border-alpha:0;--knopf-font-family:inherit;--knopf-font-weight:500;--knopf-line-height:1.5;--knopf-justify-content:center;--knopf-text-decoration-line:none;--knopf-text-decoration-color:currentColor;--knopf-text-transform:none;--knopf-display:inline-flex;--knopf-flex-direction:row;--knopf-group-direction:row;--knopf-background-image:none;--knopf-box-shadow:none;--knopf-transition:all 150ms ease-in-out}.knopf.knopf{--knopf-color:var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);--knopf-color-light:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);--knopf-color-lighter:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);--knopf-color-dark:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);--knopf-color-darker:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);--knopf-background-alpha:100%;--knopf-background-color:var(--knopf-color);--knopf-border-color:var(--knopf-color);--knopf-gradient-from:var(--knopf-color-light);--knopf-gradient-to:var(--knopf-color-dark);--knopf-text-color:var(--knopf-white);--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color-dark);--knopf-hover-border-color:var(--knopf-color-dark);--knopf-hover-gradient-from:var(--knopf-color-lighter);--knopf-hover-gradient-to:var(--knopf-color);--knopf-hover-text-color:var(--knopf-white);--knopf-active-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-darker);--knopf-active-border-color:var(--knopf-color-darker);--knopf-active-gradient-from:var(--knopf-color-dark);--knopf-active-gradient-to:var(--knopf-color);--knopf-active-text-color:var(--knopf-white);--knopf-block-padding:var(--knopf-padding);--knopf-inline-padding:calc(var(--knopf-padding) * 2);all:unset;-webkit-user-drag:element;align-items:center;background-color:var(--knopf-named-background-color,hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));background-image:var(--knopf-background-image);background-origin:border-box;border-color:hsl(var(--knopf-border-color) / var(--knopf-border-alpha));border-radius:var(--knopf-border-radius);border-style:var(--knopf-border-style);border-width:var(--knopf-border-width);box-shadow:var(--knopf-box-shadow);box-sizing:border-box;color:hsl(var(--knopf-text-color));-webkit-text-fill-color:hsl(var(--knopf-text-color));cursor:pointer;display:var(--knopf-display);flex-direction:var(--knopf-flex-direction);font-family:var(--knopf-font-family);font-size:var(--knopf-font-size,inherit);font-weight:var(--knopf-font-weight);line-height:var(--knopf-line-height);justify-content:var(--knopf-justify-content);padding-block-end:var(--knopf-block-padding);padding-block-start:var(--knopf-block-padding);padding-inline-end:var(--knopf-inline-padding);padding-inline-start:var(--knopf-inline-padding);position:relative;text-decoration-color:var(--knopf-text-decoration-color);text-decoration-line:var(--knopf-text-decoration-line);text-transform:var(--knopf-text-transform);transition:var(--knopf-transition)}.knopf.inverse{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-white);--knopf-hover-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-dark);--knopf-active-text-color:var(--knopf-white)}.knopf.flat{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:15%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:25%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf.pale{--knopf-background-alpha:10%;--knopf-background-color:var(--knopf-color);--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:20%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:30%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf.knopf:disabled,.knopf.disabled{cursor:default;opacity:40%;pointer-events:none}.knopf.knopf:visited{color:hsl(var(--knopf-text-color))}.knopf.knopf:hover,.knopf.knopf:active{--knopf-background-alpha:var(--knopf-hover-background-alpha);--knopf-background-color:var(--knopf-hover-background-color);--knopf-border-color:var(--knopf-hover-border-color);--knopf-gradient-from:var(--knopf-hover-gradient-from);--knopf-gradient-to:var(--knopf-hover-gradient-to);--knopf-text-color:var(--knopf-hover-text-color);--knopf-text-decoration-color:var(--knopf-hover-text-decoration-color)}.knopf.knopf:focus,.knopf.knopf:focus-within{--knopf-box-shadow:0 0 0 .15em hsl(var(--knopf-color) / 40%);outline:0}.knopf.active{--knopf-background-alpha:var(--knopf-active-background-alpha);--knopf-background-color:var(--knopf-active-background-color);--knopf-border-color:var(--knopf-active-border-color);--knopf-gradient-from:var(--knopf-active-gradient-from);--knopf-gradient-to:var(--knopf-active-gradient-to);--knopf-text-color:var(--knopf-active-text-color);--knopf-text-decoration-color:var(--knopf-active-text-decoration-color)}.knopf.small{--knopf-font-size:var(--knopf-font-size-small);--knopf-padding:var(--knopf-padding-small);--knopf-icon-size:var(--knopf-icon-size-small)}.knopf.large{--knopf-font-size:var(--knopf-font-size-large);--knopf-padding:var(--knopf-padding-large);--knopf-icon-size:var(--knopf-icon-size-large)}.knopf.huge{--knopf-font-size:var(--knopf-font-size-huge);--knopf-padding:var(--knopf-padding-huge);--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf.traced,.knopf.outlined{--knopf-border-color:var(--knopf-color)}.knopf.traced{--knopf-border-alpha:33%}.knopf.outlined{--knopf-border-alpha:100%}.knopf.block{--knopf-display:flex;width:100%}.knopf.start{--knopf-justify-content:flex-start}.knopf.center{--knopf-justify-content:center}.knopf.end{--knopf-justify-content:flex-end}.knopf.even{--knopf-inline-padding:var(--knopf-padding)}.knopf.wide{--knopf-inline-padding:calc(var(--knopf-padding) * 3)}.knopf.pill{--knopf-border-radius:9999px}.knopf.sharp{--knopf-border-radius:0}.knopf.gradient{--knopf-named-background-color:transparent;--knopf-background-image:linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)),hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)))}.knopf.link{--knopf-border-width:0;--knopf-border-radius:0;--knopf-padding:0;--knopf-font-size:null;--knopf-text-decoration-line:underline;--knopf-text-decoration-color:hsl(var(--knopf-color) / 40%);--knopf-hover-text-decoration-color:hsl(var(--knopf-color-dark));--knopf-active-text-decoration-color:hsl(var(--knopf-color-darker));--knopf-background-alpha:0;--knopf-border-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:0;--knopf-hover-border-alpha:0;--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:0;--knopf-active-border-alpha:0;--knopf-active-text-color:var(--knopf-color-darker)}.knopf>.icon{align-items:center;color:inherit;display:inline-flex;fill:currentColor;flex-shrink:0;font-size:var(--knopf-icon-size);height:var(--knopf-icon-size);justify-content:center;width:var(--knopf-icon-size)}.knopf>.icon.small{--knopf-icon-size:var(--knopf-icon-size-small)}.knopf>.icon.base{--knopf-icon-size:var(--knopf-icon-size-base)}.knopf>.icon.large{--knopf-icon-size:var(--knopf-icon-size-large)}.knopf>.icon.huge{--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf>.icon:first-child:not(:only-child){margin-inline-start:calc(var(--knopf-inline-padding) * -0.25);margin-inline-end:calc(var(--knopf-inline-padding) * 0.5)}.knopf>.icon:last-child:not(:only-child){margin-inline-start:calc(var(--knopf-inline-padding) * 0.5);margin-inline-end:calc(var(--knopf-inline-padding) * -0.25)}@media screen and (min-width:576px){.knopf>.icon.floating:not(:only-child){margin-inline-start:0;margin-inline-end:0;position:absolute}.knopf>.icon.floating:first-child:not(:only-child){left:var(--knopf-inline-padding)}.knopf>.icon.floating:last-child:not(:only-child){right:var(--knopf-inline-padding)}}.knopf-group{align-items:stretch;display:inline-flex;flex-direction:var(--knopf-group-direction);flex-wrap:nowrap;justify-content:center}.knopf-group.vertical{--knopf-group-direction:column}.knopf-group.vertical>.knopf:first-child:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.knopf-group.vertical>.knopf:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.knopf-group:not(.vertical)>.knopf:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.knopf-group:not(.vertical)>.knopf:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.knopf-group>.knopf:not(:first-child):not(:last-child){--knopf-border-radius:0}.knopf-group.vertical>.knopf+.knopf{margin-block-start:calc(var(--knopf-border-width) * -1)}.knopf-group:not(.vertical)>.knopf+.knopf{margin-inline-start:calc(var(--knopf-border-width) * -1)} +/*! knopf v1.0.9 | MIT License | https://knopf.dev/ */:root{--knopf-hue:218;--knopf-saturation:77%;--knopf-luminosity:37%;--knopf-white:0 100% 100%;--knopf-font-size-base:1rem;--knopf-font-size-small:calc(var(--knopf-font-size-base) - 0.25rem);--knopf-font-size-large:calc(var(--knopf-font-size-base) + 0.2rem);--knopf-font-size-huge:calc(var(--knopf-font-size-base) + 0.5rem);--knopf-padding-base:.375rem;--knopf-padding-small:calc(var(--knopf-padding-base) - 0.125rem);--knopf-padding-large:calc(var(--knopf-padding-base) + 0.125rem);--knopf-padding-huge:calc(var(--knopf-padding-base) + 0.375rem);--knopf-icon-size-base:1.125rem;--knopf-icon-size-small:calc(var(--knopf-icon-size-base) - 0.25rem);--knopf-icon-size-large:calc(var(--knopf-icon-size-base) + 0.375rem);--knopf-icon-size-huge:calc(var(--knopf-icon-size-base) + 0.625rem);--knopf-font-size:var(--knopf-font-size-base);--knopf-padding:var(--knopf-padding-base);--knopf-icon-size:var(--knopf-icon-size-base);--knopf-border-radius:.33em;--knopf-border-style:solid;--knopf-border-width:1px;--knopf-border-alpha:0;--knopf-font-family:inherit;--knopf-font-weight:500;--knopf-line-height:1.5;--knopf-justify-content:center;--knopf-text-decoration-line:none;--knopf-text-decoration-color:currentColor;--knopf-text-transform:none;--knopf-display:inline-flex;--knopf-flex-direction:row;--knopf-group-direction:row;--knopf-background-image:none;--knopf-box-shadow:none;--knopf-transition:all 150ms ease-in-out}.knopf.knopf{--knopf-color:var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);--knopf-color-light:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);--knopf-color-lighter:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);--knopf-color-dark:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);--knopf-color-darker:var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);--knopf-background-alpha:100%;--knopf-background-color:var(--knopf-color);--knopf-border-color:var(--knopf-color);--knopf-gradient-from:var(--knopf-color-light);--knopf-gradient-to:var(--knopf-color-dark);--knopf-text-color:var(--knopf-white);--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color-dark);--knopf-hover-border-color:var(--knopf-color-dark);--knopf-hover-gradient-from:var(--knopf-color-lighter);--knopf-hover-gradient-to:var(--knopf-color);--knopf-hover-text-color:var(--knopf-white);--knopf-active-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-darker);--knopf-active-border-color:var(--knopf-color-darker);--knopf-active-gradient-from:var(--knopf-color-dark);--knopf-active-gradient-to:var(--knopf-color);--knopf-active-text-color:var(--knopf-white);--knopf-block-padding:var(--knopf-padding);--knopf-inline-padding:calc(var(--knopf-padding) * 2);all:unset;-webkit-user-drag:element;align-items:center;background-color:var(--knopf-named-background-color,hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));background-image:var(--knopf-background-image);background-origin:border-box;border-color:hsl(var(--knopf-border-color) / var(--knopf-border-alpha));border-radius:var(--knopf-border-radius);border-style:var(--knopf-border-style);border-width:var(--knopf-border-width);box-shadow:var(--knopf-box-shadow);box-sizing:border-box;color:hsl(var(--knopf-text-color));-webkit-text-fill-color:hsl(var(--knopf-text-color));cursor:pointer;display:var(--knopf-display);flex-direction:var(--knopf-flex-direction);font-family:var(--knopf-font-family);font-size:var(--knopf-font-size,inherit);font-weight:var(--knopf-font-weight);line-height:var(--knopf-line-height);justify-content:var(--knopf-justify-content);padding-block-end:var(--knopf-block-padding);padding-block-start:var(--knopf-block-padding);padding-inline-end:var(--knopf-inline-padding);padding-inline-start:var(--knopf-inline-padding);position:relative;text-decoration-color:var(--knopf-text-decoration-color);text-decoration-line:var(--knopf-text-decoration-line);text-transform:var(--knopf-text-transform);transition:var(--knopf-transition)}.knopf.inverse{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:100%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-white);--knopf-hover-background-alpha:100%;--knopf-active-background-color:var(--knopf-color-dark);--knopf-active-text-color:var(--knopf-white)}.knopf.flat{--knopf-background-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:15%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:25%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf.pale{--knopf-background-alpha:10%;--knopf-background-color:var(--knopf-color);--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:20%;--knopf-hover-background-color:var(--knopf-color);--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:30%;--knopf-active-background-color:var(--knopf-color);--knopf-active-text-color:var(--knopf-color-darker)}.knopf.knopf:disabled,.knopf.disabled{cursor:default;opacity:40%;pointer-events:none}.knopf.knopf:visited{color:hsl(var(--knopf-text-color))}.knopf.knopf:hover,.knopf.knopf:active{--knopf-background-alpha:var(--knopf-hover-background-alpha);--knopf-background-color:var(--knopf-hover-background-color);--knopf-border-color:var(--knopf-hover-border-color);--knopf-gradient-from:var(--knopf-hover-gradient-from);--knopf-gradient-to:var(--knopf-hover-gradient-to);--knopf-text-color:var(--knopf-hover-text-color);--knopf-text-decoration-color:var(--knopf-hover-text-decoration-color)}.knopf.knopf:focus,.knopf.knopf:focus-within{--knopf-box-shadow:0 0 0 .15em hsl(var(--knopf-color) / 40%);outline:0}.knopf.active{--knopf-background-alpha:var(--knopf-active-background-alpha);--knopf-background-color:var(--knopf-active-background-color);--knopf-border-color:var(--knopf-active-border-color);--knopf-gradient-from:var(--knopf-active-gradient-from);--knopf-gradient-to:var(--knopf-active-gradient-to);--knopf-text-color:var(--knopf-active-text-color);--knopf-text-decoration-color:var(--knopf-active-text-decoration-color)}.knopf.small{--knopf-font-size:var(--knopf-font-size-small);--knopf-padding:var(--knopf-padding-small);--knopf-icon-size:var(--knopf-icon-size-small)}.knopf.large{--knopf-font-size:var(--knopf-font-size-large);--knopf-padding:var(--knopf-padding-large);--knopf-icon-size:var(--knopf-icon-size-large)}.knopf.huge{--knopf-font-size:var(--knopf-font-size-huge);--knopf-padding:var(--knopf-padding-huge);--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf.traced,.knopf.outlined{--knopf-border-color:var(--knopf-color)}.knopf.traced{--knopf-border-alpha:33%}.knopf.outlined{--knopf-border-alpha:100%}.knopf.block{--knopf-display:flex;width:100%}.knopf.start{--knopf-justify-content:flex-start}.knopf.center{--knopf-justify-content:center}.knopf.end{--knopf-justify-content:flex-end}.knopf.even{--knopf-inline-padding:var(--knopf-padding)}.knopf.wide{--knopf-inline-padding:calc(var(--knopf-padding) * 3)}.knopf.pill{--knopf-border-radius:9999px}.knopf.sharp{--knopf-border-radius:0}.knopf.gradient{--knopf-named-background-color:transparent;--knopf-background-image:linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)),hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)))}.knopf.link{--knopf-border-width:0;--knopf-border-radius:0;--knopf-padding:0;--knopf-font-size:null;--knopf-text-decoration-line:underline;--knopf-text-decoration-color:hsl(var(--knopf-color) / 40%);--knopf-hover-text-decoration-color:hsl(var(--knopf-color-dark));--knopf-active-text-decoration-color:hsl(var(--knopf-color-darker));--knopf-background-alpha:0;--knopf-border-alpha:0;--knopf-text-color:var(--knopf-color);--knopf-hover-background-alpha:0;--knopf-hover-border-alpha:0;--knopf-hover-text-color:var(--knopf-color-dark);--knopf-active-background-alpha:0;--knopf-active-border-alpha:0;--knopf-active-text-color:var(--knopf-color-darker)}.knopf>.icon{align-items:center;color:inherit;display:inline-flex;fill:currentColor;flex-shrink:0;font-size:var(--knopf-icon-size);height:var(--knopf-icon-size);justify-content:center;width:var(--knopf-icon-size)}.knopf>.icon.small{--knopf-icon-size:var(--knopf-icon-size-small)}.knopf>.icon.base{--knopf-icon-size:var(--knopf-icon-size-base)}.knopf>.icon.large{--knopf-icon-size:var(--knopf-icon-size-large)}.knopf>.icon.huge{--knopf-icon-size:var(--knopf-icon-size-huge)}.knopf>.icon:first-child:not(:only-child){margin-inline-start:calc(var(--knopf-inline-padding) * -0.25);margin-inline-end:calc(var(--knopf-inline-padding) * 0.5)}.knopf>.icon:last-child:not(:only-child){margin-inline-start:calc(var(--knopf-inline-padding) * 0.5);margin-inline-end:calc(var(--knopf-inline-padding) * -0.25)}@media screen and (min-width:576px){.knopf>.icon.floating:not(:only-child){margin-inline-start:0;margin-inline-end:0;position:absolute}.knopf>.icon.floating:first-child:not(:only-child){left:var(--knopf-inline-padding)}.knopf>.icon.floating:last-child:not(:only-child){right:var(--knopf-inline-padding)}}.knopf-group{align-items:stretch;display:inline-flex;flex-direction:var(--knopf-group-direction);flex-wrap:nowrap;justify-content:center}.knopf-group.vertical{--knopf-group-direction:column}.knopf-group.vertical>.knopf:first-child:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.knopf-group.vertical>.knopf:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.knopf-group:not(.vertical)>.knopf:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.knopf-group:not(.vertical)>.knopf:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.knopf-group>.knopf:not(:first-child):not(:last-child){--knopf-border-radius:0}.knopf-group.vertical>.knopf+.knopf{margin-block-start:calc(var(--knopf-border-width) * -1)}.knopf-group:not(.vertical)>.knopf+.knopf{margin-inline-start:calc(var(--knopf-border-width) * -1)}