513 lines
12 KiB
SCSS
513 lines
12 KiB
SCSS
@use "pico" with (
|
|
$enable-semantic-container: true,
|
|
$enable-responsive-spacings: true,
|
|
$enable-responsive-typography: false,
|
|
$theme-color: "slate",
|
|
$breakpoints: (
|
|
sm: (breakpoint: 576px, viewport: 95%),
|
|
md: (breakpoint: 768px, viewport: 95%),
|
|
lg: (breakpoint: 1024px, viewport: 90%),
|
|
xl: (breakpoint: 1280px, viewport: 90%),
|
|
xxl: (breakpoint: 1536px, viewport: 85%)
|
|
),
|
|
);
|
|
@use "colors" as *;
|
|
@use "sass:map";
|
|
@use "settings" as *;
|
|
@use "sass:math";
|
|
|
|
@font-face {
|
|
font-family: go;
|
|
src: local("Go Regular"), url(../fonts/Go-Regular.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go;
|
|
src: local("Go Italic"), url(../fonts/Go-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go medium;
|
|
src: local("Go Medium"), url(../fonts/Go-Medium.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: go medium;
|
|
src: local("Go Medium Italic"), url(../fonts/Go-Medium-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: go;
|
|
src: local("Go Bold"), url(../fonts/Go-Bold.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: go;
|
|
src: local("Go Bold Italic"), url(../fonts/Go-Bold-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: go smallcaps;
|
|
src: local("Go Smallcaps"), url(../fonts/Go-Smallcaps.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go smallcaps;
|
|
src: local("Go Smallcaps Italic"), url(../fonts/Go-Smallcaps-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go mono;
|
|
src: local("Go Mono"), url(../fonts/Go-Mono.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go mono;
|
|
src: local("Go Mono Italic"), url(../fonts/Go-Mono-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: go mono;
|
|
src: local("Go Mono Bold"), url(../fonts/Go-Mono-Bold.woff2) format("woff2");
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: go mono;
|
|
src: local("Go Mono Bold Italic"), url(../fonts/Go-Mono-Bold-Italic.woff2) format("woff2");
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
|
|
:root {
|
|
--pico-font-family-sans-serif: "Go", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--pico-font-family-emoji);
|
|
--pico-form-element-spacing-vertical: .5rem;
|
|
--pico-form-element-spacing-horizontal: .5rem;
|
|
--pico-border-radius: 0;
|
|
--pico-font-size: 12pt;
|
|
--pico-line-height: 1.4;
|
|
}
|
|
|
|
$sm-breakpoint: map-get(map-get($breakpoints, sm), breakpoint);
|
|
$md-breakpoint: map-get(map-get($breakpoints, md), breakpoint);
|
|
$lg-breakpoint: map-get(map-get($breakpoints, lg), breakpoint);
|
|
$xl-breakpoint: map-get(map-get($breakpoints, xl), breakpoint);
|
|
$xxl-breakpoint: map-get(map-get($breakpoints, xxl), breakpoint);
|
|
|
|
small {
|
|
font-size: .875rem;
|
|
color: var(--pico-muted-color);
|
|
}
|
|
|
|
mark {
|
|
margin-block: calc(var(--pico-spacing)/4);
|
|
display: inline-block;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
pre {
|
|
padding: calc(var(--pico-spacing)/2);
|
|
}
|
|
|
|
#nav-theme-toggle {
|
|
cursor:pointer !important;
|
|
}
|
|
.dark {
|
|
filter: grayscale(100%);
|
|
}
|
|
.hi, .hi a {
|
|
font-size:1.1rem;
|
|
--pico-text-decoration: none;
|
|
}
|
|
|
|
table td article {
|
|
margin-bottom: var(--pico-spacing);
|
|
}
|
|
table tr {
|
|
white-space: nowrap;
|
|
}
|
|
table td.created-modified {
|
|
background-image: var(--pico-icon-date);
|
|
background-position: center right var(--pico-form-element-spacing-vertical);
|
|
background-size: 1rem;
|
|
padding-inline-end: 2rem;
|
|
}
|
|
table td.created-modified, table th.created-modified {
|
|
text-align: right;
|
|
}
|
|
|
|
.no-text-decoration {
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
[data-loading] {
|
|
display: none;
|
|
}
|
|
|
|
.help {
|
|
cursor:help;
|
|
}
|
|
|
|
.pointer {
|
|
cursor:pointer;
|
|
}
|
|
|
|
[contenteditable] {
|
|
display: inline-block;
|
|
border-bottom: 1px dotted #{$slate-300};
|
|
text-decoration: none;
|
|
}
|
|
[contenteditable]:focus {
|
|
padding: calc(var(--pico-spacing)/2);
|
|
background: var(--pico-contrast);
|
|
color: var(--pico-contrast-inverse);
|
|
}
|
|
|
|
[role="group"] {
|
|
--pico-group-box-shadow: none !important;
|
|
}
|
|
|
|
/*
|
|
* Table navigation
|
|
*/
|
|
.table-navigation {
|
|
user-select: none;
|
|
}
|
|
.table-navigation .paging:not(.disabled) {
|
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
color: var(--pico-color);
|
|
}
|
|
.table-navigation button.sorting {
|
|
font-size: .875rem;
|
|
border: 0;
|
|
}
|
|
.table-navigation div.filters {
|
|
white-space: wrap;
|
|
}
|
|
.table-navigation div.filter-buttons button {
|
|
font-size: 0.875rem;
|
|
padding: calc(var(--pico-form-element-spacing-vertical) / 2) calc(var(--pico-form-element-spacing-horizontal) / 2);
|
|
border-color: var(--pico-form-element-border-color);
|
|
--pico-border-radius: .5rem;
|
|
}
|
|
.table-navigation .paging.disabled {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/*
|
|
# Notifications
|
|
*/
|
|
#notification-container {
|
|
position: fixed;
|
|
left: .25rem;
|
|
bottom: .25rem;
|
|
z-index: 999;
|
|
width: fit-content;
|
|
}
|
|
.notification:not(:last-child) {
|
|
margin-bottom: .25rem;
|
|
}
|
|
.notification-text {
|
|
white-space: pre-line;
|
|
}
|
|
.notification {
|
|
cursor: pointer;
|
|
padding: var(--pico-form-element-spacing-vertical) 2rem;
|
|
color: var(--pico-color);
|
|
background-color: var(--pico-background-color);
|
|
background-image: var(--pico-icon);
|
|
background-position: center left var(--pico-form-element-spacing-vertical);
|
|
background-size: calc(var(--pico-spacing) * 1.5);
|
|
background-blend-mode: color-burn;
|
|
padding-left: calc(var(--pico-form-element-spacing-vertical) * 2 + calc(var(--pico-spacing) * 1.5));
|
|
}
|
|
.notification-error {
|
|
--pico-background-color: #{$red-600};
|
|
--pico-icon: var(--pico-icon-invalid);
|
|
--pico-color: #{$red-50};
|
|
}
|
|
.notification-warning {
|
|
--pico-background-color: #{$yellow-50};
|
|
--pico-icon: var(--pico-icon-invalid);
|
|
--pico-color: #{$yellow-900};
|
|
}
|
|
.notification-success {
|
|
--pico-background-color: #{$green-550};
|
|
--pico-icon: var(--pico-icon-valid);
|
|
--pico-color: #{$slate-50};
|
|
}
|
|
.notification-user {
|
|
--pico-background-color: #{$azure-450};
|
|
--pico-icon: var(--pico-icon-chevron);
|
|
--pico-color: #{$slate-50};
|
|
}
|
|
.notification-title {
|
|
font-weight: bold;
|
|
}
|
|
.notification-system > .notification-title:before {
|
|
content:"\1F4E2\0020 Broadcast:\0020";
|
|
}
|
|
.notification-system {
|
|
--pico-background-color: #{$fuchsia-800};
|
|
--pico-icon: var(--pico-icon-chevron);
|
|
--pico-color: #{$fuchsia-100};
|
|
}
|
|
|
|
.login-grid {
|
|
display: grid;
|
|
grid-template-columns: 20% 60% 20%;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
.login-register { grid-column-start: 2; }
|
|
|
|
|
|
thead th, thead td, tfoot th, tfoot td {
|
|
--pico-font-weight: 400;
|
|
}
|
|
|
|
button, a { touch-action: manipulation; }
|
|
|
|
button[type="submit"] {
|
|
width: auto;
|
|
}
|
|
|
|
dialog article {
|
|
max-width: 65%;
|
|
}
|
|
|
|
.no-text-wrap {
|
|
text-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
.text-wrap {
|
|
text-wrap: balance;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
.split-grid.grid > article:first-child {
|
|
grid-column: span 1;
|
|
}
|
|
.split-grid.grid > article {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.grid-end {
|
|
display: grid;
|
|
justify-content: end;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: column;
|
|
gap: calc(var(--pico-spacing)/2);
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
.grid-space-between {
|
|
display: grid;
|
|
justify-content: space-between;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: column;
|
|
gap: calc(var(--pico-spacing)/2);
|
|
white-space: nowrap;
|
|
align-items: baseline;
|
|
margin: calc(var(--pico-spacing) /2) auto;
|
|
}
|
|
|
|
.grid-auto-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
.grid-auto-cols .grid-span-all {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.grid-auto-cols > article {
|
|
margin-bottom: 0;
|
|
padding-bottom: var(--pico-form-element-spacing-vertical);
|
|
--pico-border-radius: .5rem;
|
|
}
|
|
|
|
.table-select {
|
|
background-color: rgb(128 128 128 / 10%);
|
|
backdrop-filter: blur(1px);
|
|
position: sticky;
|
|
bottom: var(--pico-form-element-spacing-vertical);
|
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
}
|
|
|
|
nav details.dropdown {
|
|
width: max-content;
|
|
}
|
|
|
|
fieldset.vault-unlock {
|
|
padding: var(--pico-spacing) 0;
|
|
}
|
|
|
|
article.user-group {
|
|
background-color: var(--pico-form-element-background-color);
|
|
}
|
|
|
|
hgroup ol, hgroup ul {
|
|
margin-block: calc(var(--pico-spacing)/2);
|
|
}
|
|
|
|
@media (max-width: $xxl-breakpoint) {
|
|
.grid-auto-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
}
|
|
@media (max-width: $xl-breakpoint) {
|
|
.grid-auto-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
}
|
|
@media (max-width: $lg-breakpoint) {
|
|
.split-grid.grid {
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
.split-grid.grid > article {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.grid-auto-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
th, td {
|
|
--pico-spacing: 0.75rem;
|
|
}
|
|
}
|
|
@media only screen and (max-width: $sm-breakpoint) {
|
|
#notification-container {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
dialog article {
|
|
max-width: 95%;
|
|
}
|
|
.grid-auto-cols {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: calc(var(--pico-spacing)/2);
|
|
}
|
|
}
|
|
|
|
.user-group {
|
|
opacity: 0;
|
|
}
|
|
|
|
textarea.dns-data {
|
|
border: 0;
|
|
background: transparent;
|
|
font-family: monospace;
|
|
}
|
|
|
|
fieldset.system-field label:before {
|
|
content:"\1f512\0020";
|
|
}
|
|
|
|
fieldset.keypair, fieldset.tresor {
|
|
border: 1px solid var(--pico-form-element-border-color);
|
|
padding: var(--pico-spacing);
|
|
}
|
|
|
|
|
|
///////////////////////////////////////
|
|
// Generators for colors and breakpoints
|
|
///////////////////////////////////////
|
|
|
|
@function get-luminance($color) {
|
|
$red: math.div(red($color), 255);
|
|
$green: math.div(green($color), 255);
|
|
$blue: math.div(blue($color), 255);
|
|
|
|
@return ($red * 0.2126) + ($green * 0.7152) + ($blue * 0.0722);
|
|
}
|
|
|
|
@function get-contrast-ratio($color1, $color2) {
|
|
$l1: get-luminance($color1);
|
|
$l2: get-luminance($color2);
|
|
|
|
@if $l1 > $l2 {
|
|
@return math.div($l1, $l2);
|
|
} @else {
|
|
@return math.div($l2, $l1);
|
|
}
|
|
}
|
|
|
|
@function get-contrast-color($color) {
|
|
$dark-color: $grey-900;
|
|
$light-color: $slate-100;
|
|
$contrast-with-dark: get-contrast-ratio($color, $dark-color);
|
|
$contrast-with-light: get-contrast-ratio($color, $light-color);
|
|
|
|
@if $contrast-with-light >= 2.0 {
|
|
@return $light-color;
|
|
} @else {
|
|
@return $dark-color;
|
|
}
|
|
}
|
|
|
|
@each $color-key, $color-var in $colors {
|
|
@each $shade, $value in $color-var {
|
|
.color-#{"#{$color-key}"}-#{$shade} {
|
|
color: $value !important;
|
|
}
|
|
:is(button, [type="submit"], [type="button"], [role="button"]).button-#{"#{$color-key}"}-#{$shade},
|
|
[type="reset"].button-#{"#{$color-key}"}-#{$shade} {
|
|
color: get-contrast-color($value);
|
|
border-color: $value;
|
|
background-color: $value;
|
|
}
|
|
:is(a).color-#{"#{$color-key}"}-#{$shade} {
|
|
text-decoration-color: $value !important;
|
|
}
|
|
}
|
|
|
|
@if map-has-key($color-var, 500) {
|
|
.color-#{"#{$color-key}"} {
|
|
@extend .color-#{"#{$color-key}"}-500;
|
|
}
|
|
:is(button, [type="submit"], [type="button"], [role="button"]).button-#{"#{$color-key}"},
|
|
[type="reset"].button-#{"#{$color-key}"} {
|
|
@extend .button-#{"#{$color-key}"}-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $size, $data in $breakpoints {
|
|
$breakpoint: map-get($data, breakpoint);
|
|
@media (max-width: $breakpoint) {
|
|
.hide-below-#{$size} {
|
|
display: none;
|
|
}
|
|
.show-below-#{$size} {
|
|
display: block;
|
|
}
|
|
}
|
|
@media (min-width: $breakpoint + 1px) {
|
|
.show-below-#{$size} {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|