1250 lines
18 KiB
CSS
1250 lines
18 KiB
CSS
/*
|
|
BASIC
|
|
*/
|
|
* {
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
border: none;
|
|
outline: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/*
|
|
ANIMATION
|
|
*/
|
|
@keyframes slide-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2rem);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--animation-duration: 0.4s;
|
|
}
|
|
|
|
.modal > div,
|
|
.slide-up {
|
|
animation: slide-up var(--animation-duration);
|
|
}
|
|
|
|
/*
|
|
COLORS
|
|
*/
|
|
/* definition */
|
|
body {
|
|
--background: hsla(0, 0%, 100%, 100%);
|
|
--background-glass: hsla(0, 0%, 100%, 5%);
|
|
--background-transparent: hsla(0, 0%, 0%, 5%);
|
|
--background-hover: hsla(0, 0%, 55%, 12%);
|
|
--background-active: hsla(0, 0%, 55%, 12%);
|
|
|
|
--layer: hsla(0, 0%, 96%, 60%);
|
|
|
|
--surface: hsla(0, 0%, 0%, 5%);
|
|
--surface-hover: hsla(0, 0%, 5%, 10%);
|
|
--surface-active: hsla(0, 0%, 5%, 15%);
|
|
|
|
--border: hsla(0, 0%, 0%, 10%);
|
|
--surface-border: #8d8d8d;
|
|
|
|
--text-normal: #161616;
|
|
--text-placeholder: hsla(0, 0%, 0%, 30%);
|
|
--text-on-color: #ffffff;
|
|
|
|
--text-success: #24a148;
|
|
--text-warning: #f1c21b;
|
|
--text-error: #da1e28;
|
|
--text-info: #0043ce;
|
|
|
|
--link: #0f62fe;
|
|
--link-hover: #0043ce;
|
|
|
|
--primary: #0f62fe;
|
|
--primary-hover: #0353e9;
|
|
--primary-active: #002d9c;
|
|
|
|
--danger: #da1e28;
|
|
--danger-hover: #ba1b23;
|
|
--danger-active: #750e13;
|
|
}
|
|
|
|
body[theme="dark"] {
|
|
--background: hsla(0, 0%, 9%, 100%);
|
|
--background-glass: hsla(0, 0%, 9%, 20%);
|
|
--background-transparent: hsla(0, 0%, 100%, 5%);
|
|
--background-hover: hsla(0, 0%, 55%, 16%);
|
|
--background-active: hsla(0, 0%, 55%, 40%);
|
|
|
|
--layer: hsla(0, 0%, 15%, 60%);
|
|
|
|
--surface: hsla(0, 0%, 100%, 4%);
|
|
--surface-hover: hsla(0, 0%, 100%, 10%);
|
|
--surface-active: hsla(0, 0%, 100%, 15%);
|
|
|
|
--border: hsla(0, 0%, 100%, 10%);
|
|
--surface-border: #6f6f6f;
|
|
|
|
--text-normal: #f4f4f4;
|
|
--text-placeholder: hsla(0, 0%, 100%, 30%);
|
|
|
|
--text-success: #42be65;
|
|
--text-warning: #f1c21b;
|
|
--text-error: #fa4d56;
|
|
--text-info: #4589ff;
|
|
|
|
--link: #78a9ff;
|
|
--link-hover: #a6c8ff;
|
|
}
|
|
|
|
@media (display-mode: standalone) {
|
|
:root {
|
|
--background: hsla(0, 0%, 0%, 100%);
|
|
--background-transparent: hsla(0, 0%, 0%, 60%);
|
|
--layer: hsla(0, 0%, 0%, 60%);
|
|
}
|
|
}
|
|
|
|
/* basic */
|
|
body {
|
|
background: var(--background);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tile {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--text-placeholder);
|
|
}
|
|
|
|
.modal > div {
|
|
background: var(--background-glass);
|
|
}
|
|
|
|
menu,
|
|
header {
|
|
background: var(--background-transparent);
|
|
}
|
|
|
|
* {
|
|
color: inherit;
|
|
accent-color: var(--primary);
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
}
|
|
|
|
/* text */
|
|
|
|
.success {
|
|
color: var(--text-success);
|
|
}
|
|
|
|
.warning {
|
|
color: var(--text-warning);
|
|
}
|
|
|
|
.error {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.info {
|
|
color: var(--text-info);
|
|
}
|
|
|
|
/* controls */
|
|
button:not(.tile *),
|
|
footer:not(.tile *),
|
|
input:not(.tile *),
|
|
textarea:not(.tile *),
|
|
select:not(.tile *),
|
|
.surface,
|
|
.tile {
|
|
background: var(--surface);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
button:hover,
|
|
select:hover,
|
|
button.tile.ghost:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
[selected]:hover {
|
|
background: var(--surface);
|
|
}
|
|
}
|
|
|
|
button:active,
|
|
select:active,
|
|
button.tile.ghost:active {
|
|
background: var(--surface-active);
|
|
}
|
|
|
|
[selected]:active {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.tile *,
|
|
header button {
|
|
background: transparent;
|
|
}
|
|
|
|
input:checked {
|
|
background: var(--primary);
|
|
}
|
|
|
|
/* primary button */
|
|
button.primary {
|
|
background: var(--primary);
|
|
color: var(--text-on-color);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
button.primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
}
|
|
|
|
button.primary:active {
|
|
background: var(--primary-active);
|
|
}
|
|
|
|
/* ghost button */
|
|
button.ghost:not(.tile) {
|
|
background: transparent;
|
|
}
|
|
|
|
button.ghost {
|
|
color: var(--link);
|
|
}
|
|
|
|
.tab-link[active] {
|
|
color: var(--primary);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
button.ghost:hover {
|
|
background: var(--background-hover);
|
|
}
|
|
}
|
|
|
|
button.ghost:active {
|
|
background: var(--background-active);
|
|
}
|
|
|
|
/* danger button */
|
|
button.danger {
|
|
background: var(--danger);
|
|
color: white;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
button.danger:hover {
|
|
background: var(--danger-hover);
|
|
}
|
|
}
|
|
|
|
button.danger:active {
|
|
background: var(--danger-active);
|
|
}
|
|
|
|
/*
|
|
SIZES
|
|
*/
|
|
:root {
|
|
/* gap */
|
|
--gap-between-tiles: 4px;
|
|
--gap-in-tab-links: 1rem;
|
|
--gap-in-controls: 1.2rem;
|
|
--large-gap: 2rem;
|
|
|
|
/* outline */
|
|
--outline-width: var(--gap-between-tiles);
|
|
|
|
/* margin */
|
|
--label-top-padding: 0.25rem;
|
|
--label-tile-top-padding: 0.5rem;
|
|
--label-margin-bottom: 1rem;
|
|
--content-margin: 0.75rem;
|
|
|
|
/* padding */
|
|
--control-padding: 1rem;
|
|
--control-padding-compact: 0.4rem 0.8rem;
|
|
--control-marker-padding: 0.7rem;
|
|
--content-padding: 1rem;
|
|
--modal-padding: 1.25rem;
|
|
--horizontal-tab-link-padding: 0.8rem;
|
|
|
|
/* size */
|
|
--checkbox-size: 16px;
|
|
|
|
--menu-height-mobile: calc(var(--header-height) + var(--safe-area-bottom));
|
|
--menu-width-desktop: 200px;
|
|
--split-pane-width-desktop: 300px;
|
|
|
|
--control-height: 42px;
|
|
--header-height: 48px;
|
|
|
|
--max-input-width: 24rem;
|
|
--max-content-width: 38rem;
|
|
|
|
/* safe */
|
|
--safe-area-top: env(safe-area-inset-top);
|
|
--safe-area-left: env(safe-area-inset-left);
|
|
--safe-area-right: env(safe-area-inset-right);
|
|
--safe-area-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/*
|
|
TYPE
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: IBM Plex Sans;
|
|
src: url("Fonts/IBMPlexSans-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: IBM Plex Sans;
|
|
src: url("Fonts/IBMPlexSans-Bold.ttf");
|
|
font-weight: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: IBM Plex Mono;
|
|
src: url("Fonts/IBMPlexMono-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: IBM Plex Serif;
|
|
src: url("Fonts/IBMPlexSerif-Regular.ttf");
|
|
}
|
|
|
|
/*
|
|
MAIN
|
|
*/
|
|
/* appearance */
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
select {
|
|
appearance: none;
|
|
--webkit-appearance: none;
|
|
--mpz-appearance: none;
|
|
}
|
|
|
|
/* backdrop-filter */
|
|
header,
|
|
menu,
|
|
.modal > div {
|
|
backdrop-filter: blur(70px);
|
|
-webkit-backdrop-filter: blur(70px);
|
|
}
|
|
|
|
/* border, outline, etc */
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
border: none;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid var(--surface-border);
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
|
label.tile *
|
|
),
|
|
label.tile,
|
|
select:not(label.tile *),
|
|
textarea:not(label.tile *) {
|
|
border-bottom: 1px solid var(--surface-border);
|
|
}
|
|
|
|
hr {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
|
|
label.tile *
|
|
):not(.no-outline),
|
|
label.tile:has(input:focus),
|
|
label.tile:has(textarea:focus),
|
|
textarea:focus:not(label.tile *),
|
|
[selected] {
|
|
outline: var(--outline-width) solid var(--primary);
|
|
}
|
|
|
|
.inset-outline[selected] {
|
|
outline: none;
|
|
box-shadow: var(--primary) 0 0 0 var(--outline-width) inset;
|
|
}
|
|
|
|
/* border-radius */
|
|
* {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
/* cursor */
|
|
a,
|
|
.tab-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* display etc */
|
|
.align-start {
|
|
align-items: start !important;
|
|
}
|
|
|
|
button:not(.tile),
|
|
footer,
|
|
input,
|
|
header,
|
|
label.inline,
|
|
.modal,
|
|
select,
|
|
textarea,
|
|
.tile:not(label) {
|
|
align-items: center;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center !important;
|
|
}
|
|
|
|
.align-end {
|
|
align-items: end !important;
|
|
}
|
|
|
|
label,
|
|
label * {
|
|
display: block;
|
|
}
|
|
|
|
footer,
|
|
header,
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
label.inline,
|
|
main,
|
|
.modal[open],
|
|
.modal > div,
|
|
.tile,
|
|
.tile > div {
|
|
display: flex;
|
|
}
|
|
|
|
header > span,
|
|
.flex-column,
|
|
.flex-row {
|
|
display: flex;
|
|
}
|
|
|
|
.grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
button:not(.tile),
|
|
input,
|
|
select,
|
|
textarea {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
main,
|
|
.tile,
|
|
.tile > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.flex {
|
|
flex: 1 !important;
|
|
}
|
|
|
|
.flex-no {
|
|
flex: 0 !important;
|
|
}
|
|
|
|
.modal > div,
|
|
.modal main,
|
|
.tile > div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.flex-row {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
|
|
button,
|
|
label.inline,
|
|
.tile,
|
|
.control-gap {
|
|
gap: var(--gap-in-controls);
|
|
}
|
|
|
|
header > span,
|
|
.gap {
|
|
gap: var(--gap-between-tiles) !important;
|
|
}
|
|
|
|
.large-gap {
|
|
gap: var(--large-gap) !important;
|
|
}
|
|
|
|
header,
|
|
button {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-apart {
|
|
justify-content: space-between !important;
|
|
}
|
|
|
|
.tile {
|
|
justify-content: start;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: start !important;
|
|
}
|
|
|
|
footer,
|
|
header button,
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
.modal {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: safe center !important;
|
|
}
|
|
|
|
.justify-end {
|
|
justify-content: end !important;
|
|
}
|
|
|
|
/* opacity */
|
|
[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
label span,
|
|
.helper-text,
|
|
.secondary,
|
|
.tab-link:not([active]) {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* padding, margin, etc */
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: var(--control-padding) 0px;
|
|
}
|
|
|
|
main,
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
.margin-0 {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
hr {
|
|
margin: var(--content-margin) 0px;
|
|
}
|
|
|
|
:is(code, p):not(:last-child) {
|
|
margin-bottom: var(--content-margin);
|
|
}
|
|
|
|
.content-margin-bottom {
|
|
margin-bottom: var(--content-margin) !important;
|
|
}
|
|
|
|
label:not(.tile) {
|
|
margin-bottom: var(--label-margin-bottom);
|
|
}
|
|
|
|
.margin-bottom {
|
|
margin-bottom: var(--gap-between-tiles) !important;
|
|
}
|
|
|
|
label.tile {
|
|
margin-bottom: var(--gap-between-tiles);
|
|
}
|
|
|
|
label:not(.tile) span:first-child {
|
|
margin-top: var(--label-top-padding);
|
|
}
|
|
|
|
label.tile span:first-child {
|
|
margin-top: var(--label-tile-top-padding);
|
|
}
|
|
|
|
input[type="color"],
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
padding: 0px;
|
|
}
|
|
|
|
.padding-0 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
article > div {
|
|
padding: var(--content-padding);
|
|
}
|
|
|
|
button:not(.tile):not(header *),
|
|
input,
|
|
select {
|
|
padding: 0px var(--control-padding);
|
|
}
|
|
|
|
.padding-h {
|
|
padding: 0px var(--control-padding) !important;
|
|
}
|
|
|
|
label.inline,
|
|
textarea,
|
|
.tile:not(label) {
|
|
padding: var(--control-padding);
|
|
}
|
|
|
|
.padding {
|
|
padding: var(--control-padding) !important;
|
|
}
|
|
|
|
header > span {
|
|
padding: var(--gap-between-tiles);
|
|
}
|
|
|
|
.padding-sm {
|
|
padding: var(--gap-between-tiles) !important;
|
|
}
|
|
|
|
.modal main {
|
|
padding: var(--modal-padding);
|
|
}
|
|
|
|
.padding-top {
|
|
padding-top: var(--control-padding) !important;
|
|
}
|
|
|
|
article > div {
|
|
padding-top: calc(var(--header-height) + var(--content-margin));
|
|
}
|
|
|
|
header {
|
|
padding-left: var(--content-padding);
|
|
}
|
|
|
|
label.tile:has(> span.icon) {
|
|
padding-left: var(--control-padding);
|
|
}
|
|
|
|
.padding-left {
|
|
padding-left: var(--control-padding) !important;
|
|
}
|
|
|
|
label.tile:has(> span.icon) :is(input, select, textarea) {
|
|
padding-left: 0px;
|
|
}
|
|
|
|
select {
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.padding-right {
|
|
padding-right: var(--control-padding) !important;
|
|
}
|
|
|
|
.padding-bottom {
|
|
padding-bottom: var(--control-padding) !important;
|
|
}
|
|
|
|
article > div {
|
|
padding-bottom: calc(
|
|
var(--menu-height-mobile) + var(--control-height) +
|
|
var(--content-padding)
|
|
);
|
|
}
|
|
|
|
label:not(.inline) {
|
|
text-indent: var(--control-padding);
|
|
}
|
|
|
|
label.tile:has(> span.icon) {
|
|
text-indent: 0px;
|
|
}
|
|
|
|
/* pointer-events */
|
|
[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* position etc */
|
|
article > div,
|
|
footer,
|
|
header,
|
|
select + .icon {
|
|
position: absolute;
|
|
}
|
|
|
|
.absolute {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed !important;
|
|
}
|
|
|
|
article,
|
|
main,
|
|
input,
|
|
label {
|
|
position: relative;
|
|
}
|
|
|
|
.relative {
|
|
position: relative !important;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky !important;
|
|
}
|
|
|
|
article > div,
|
|
header,
|
|
.modal {
|
|
top: 0;
|
|
}
|
|
|
|
.top-0 {
|
|
top: 0 !important;
|
|
}
|
|
|
|
article > div,
|
|
footer,
|
|
header,
|
|
.modal {
|
|
left: 0px;
|
|
}
|
|
|
|
.left-0 {
|
|
left: 0px !important;
|
|
}
|
|
|
|
article > div,
|
|
footer,
|
|
header,
|
|
.modal {
|
|
right: 0px;
|
|
}
|
|
|
|
.right-0 {
|
|
right: 0px !important;
|
|
}
|
|
|
|
select + .icon {
|
|
right: var(--control-marker-padding);
|
|
}
|
|
|
|
footer {
|
|
bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
body:has(> menu) footer {
|
|
bottom: var(--menu-height-mobile);
|
|
}
|
|
|
|
article > div,
|
|
select + .icon,
|
|
.modal {
|
|
bottom: 0px;
|
|
}
|
|
|
|
.bottom-0 {
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
/* size */
|
|
article,
|
|
main,
|
|
select + .icon,
|
|
.modal > div,
|
|
.modal main {
|
|
height: 100%;
|
|
}
|
|
|
|
.height-100 {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.height-auto {
|
|
height: auto !important;
|
|
}
|
|
|
|
button:not(.tile):not(header *),
|
|
footer,
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
select,
|
|
select + .icon {
|
|
height: var(--control-height);
|
|
}
|
|
|
|
header {
|
|
height: var(--header-height);
|
|
}
|
|
|
|
header button {
|
|
height: calc(var(--header-height) - var(--gap-between-tiles) * 2);
|
|
}
|
|
|
|
.max-height-100 {
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
button:not(.tile):not(header *),
|
|
footer,
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
select,
|
|
.modal > div > :is(button, div.flex-row) {
|
|
min-height: var(--control-height);
|
|
}
|
|
|
|
.ellipsis {
|
|
max-width: 100%;
|
|
}
|
|
|
|
article {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.width-50 {
|
|
width: 50% !important;
|
|
}
|
|
|
|
article,
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
footer,
|
|
header,
|
|
main,
|
|
select,
|
|
textarea,
|
|
.modal > div,
|
|
.tile,
|
|
.tile > div {
|
|
width: 100%;
|
|
}
|
|
|
|
.width-content,
|
|
.width-input,
|
|
.width-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
header button {
|
|
width: var(--header-height);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
label.tile textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
/*
|
|
text
|
|
*/
|
|
* {
|
|
font-family: IBM Plex Sans;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
code {
|
|
font-family: IBM Plex Mono;
|
|
}
|
|
|
|
.secondary,
|
|
.secondary *,
|
|
.helper-text,
|
|
.error,
|
|
.warning,
|
|
.success,
|
|
label.tile > div > span:not(.icon) {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* text-decoration */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* z-index */
|
|
footer,
|
|
header,
|
|
menu {
|
|
z-index: 1;
|
|
}
|
|
|
|
.modal {
|
|
z-index: 2;
|
|
}
|
|
|
|
.modal > div {
|
|
z-index: 2;
|
|
}
|
|
|
|
/*
|
|
PSEUDO
|
|
*/
|
|
input[type="checkbox"]:checked::before {
|
|
content: "check";
|
|
font-size: 70% !important;
|
|
color: var(--text-on-color);
|
|
}
|
|
|
|
input[type="radio"]:checked::before {
|
|
content: "";
|
|
|
|
background: var(--text-on-color);
|
|
border-radius: 100%;
|
|
|
|
--inset: 4px;
|
|
position: absolute;
|
|
top: var(--inset);
|
|
left: var(--inset);
|
|
right: var(--inset);
|
|
bottom: var(--inset);
|
|
}
|
|
|
|
.modal::before {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
|
|
background: var(--background);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/*
|
|
LAYOUT
|
|
*/
|
|
/* basic */
|
|
body,
|
|
html {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
|
|
margin: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body,
|
|
.modal {
|
|
padding-left: var(--safe-area-left);
|
|
padding-right: var(--safe-area-right);
|
|
padding-top: var(--safe-area-top);
|
|
}
|
|
|
|
.modal {
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
menu {
|
|
width: 100%;
|
|
height: var(--menu-height-mobile);
|
|
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
|
|
padding-top: 0px;
|
|
padding-bottom: var(--safe-area-bottom);
|
|
}
|
|
|
|
.tab-link {
|
|
width: 100%;
|
|
height: var(--header-height);
|
|
|
|
padding: var(--horizontal-tab-link-padding) var(--control-padding);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0px;
|
|
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
article > div {
|
|
padding-bottom: calc(
|
|
var(--menu-height-mobile) + var(--header-height) +
|
|
var(--content-padding)
|
|
);
|
|
}
|
|
|
|
/* overflow */
|
|
menu {
|
|
overflow: auto;
|
|
}
|
|
|
|
article,
|
|
body,
|
|
main,
|
|
.clip,
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scroll-no {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
article > div,
|
|
.modal main {
|
|
overflow: auto;
|
|
}
|
|
|
|
main {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.scroll-h {
|
|
overflow-x: auto !important;
|
|
}
|
|
|
|
.scroll-v {
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.ellipsis {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tile {
|
|
word-break: normal;
|
|
}
|
|
|
|
.break-all {
|
|
word-break: break-all !important;
|
|
}
|
|
|
|
.break-word {
|
|
word-break: break-word !important;
|
|
}
|
|
|
|
.ellipsis {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
code {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* scrolling */
|
|
main {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
main::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
main,
|
|
article > div {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
article {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
main {
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
/* tablet & up */
|
|
@media (min-width: 640px) {
|
|
/* basic */
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
|
|
/* border, outline, etc */
|
|
.modal > div {
|
|
border: 1px solid var(--surface-border);
|
|
}
|
|
|
|
menu,
|
|
main.split > article:first-of-type {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
/* size */
|
|
.modal > div {
|
|
height: auto;
|
|
max-height: 100%;
|
|
}
|
|
|
|
p,
|
|
.modal > div {
|
|
max-width: var(--max-content-width);
|
|
}
|
|
|
|
.width-content {
|
|
max-width: var(--max-content-width) !important;
|
|
}
|
|
|
|
input,
|
|
label,
|
|
select,
|
|
textarea {
|
|
max-width: var(--max-input-width);
|
|
}
|
|
|
|
.width-input {
|
|
max-width: var(--max-input-width) !important;
|
|
}
|
|
|
|
/* layout */
|
|
body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
main.split {
|
|
display: grid;
|
|
grid-template-columns: var(--split-pane-width-desktop) 1fr;
|
|
}
|
|
|
|
article > div {
|
|
padding-bottom: calc(var(--content-padding) + var(--control-height));
|
|
}
|
|
|
|
menu {
|
|
position: static;
|
|
|
|
width: var(--menu-width-desktop);
|
|
height: 100%;
|
|
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.tab-link {
|
|
width: 100%;
|
|
height: var(--control-height);
|
|
|
|
flex-direction: row;
|
|
gap: var(--gap-in-tab-links);
|
|
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* desktop */
|
|
@media (min-width: 1024px) {
|
|
:root {
|
|
--split-pane-width-desktop: 400px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
ICONS
|
|
*/
|
|
input[type="checkbox"],
|
|
.tile.arrow-right::after,
|
|
.icon {
|
|
font-family: "Material Symbols Sharp";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Material Symbols Sharp";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url("Icons/material-icons.woff") format("woff");
|
|
}
|