You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
616 lines
16 KiB
616 lines
16 KiB
/* // TODO: fix all transition syntax
|
|
// TODO: double-colon selectors */
|
|
|
|
*, ::after, ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--root-font-size: 14px;
|
|
|
|
--text: #212121;
|
|
--background: #fafafa;
|
|
--border: #ccc;
|
|
|
|
--action: #ff9000;
|
|
--important: #ff4df1;
|
|
|
|
--link-normal-color: #0d27fa;
|
|
--link-normal-sub-color: #475bff;
|
|
--link-active-color: #ff9000;
|
|
|
|
--footer-background: #ddd;
|
|
|
|
--left-panel-background: #c8e0cf;
|
|
--left-panel-header-background: #b8e2ba;
|
|
|
|
--right-panel-color: #f1f1f1;
|
|
--divider-color: #a6a6a6;
|
|
|
|
--textbox-border: #888;
|
|
--textbox-selected-border: #ff9000;
|
|
--textbox-selected-shadow: #ff810094;
|
|
--textbox-background: #fafafa;
|
|
|
|
--checkbox-color: #ff4df1;
|
|
|
|
--control-disabled: #aaa;
|
|
--control-enabled: #050505;
|
|
--control-selected: #ff9000;
|
|
|
|
--scrollbar-background: #ddd;
|
|
--scrollbar-color: #aaa;
|
|
|
|
--shadow-color: 128,128,128;
|
|
|
|
--message-wrapper-background: rgba(190, 190, 190, 0.85);
|
|
--message-shadow-background: rgb(190, 190, 190);
|
|
--message-background: #fafafa;
|
|
|
|
|
|
--button-background: #ffd96f;
|
|
--button-selected-shadow: #ffd96f63;
|
|
--button-selected-color: #070707;
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
font-size: var(--root-font-size);
|
|
}
|
|
body {
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
|
|
font-size: 1rem;
|
|
font-family: 'Exo 2', 'Open Sans', 'Roboto', 'Segoe UI', Tahoma, sans-serif;
|
|
font-weight: normal;
|
|
letter-spacing: 0.02rem;
|
|
text-align: center;
|
|
|
|
background-color: var(--background);
|
|
color: var(--text);
|
|
}
|
|
ol, ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
label {
|
|
}
|
|
|
|
|
|
|
|
:root {
|
|
--accent-border: #ccc;
|
|
|
|
--component-border: #999;
|
|
--component-background: #fafafa;
|
|
--component-focus: #cccccca9;
|
|
--component-shadow-action: #ff8d0099;
|
|
|
|
--button-inset-shadow: #555555aa;
|
|
--cb-tick: #e31fe6;
|
|
|
|
--window-wrapper-background: rgba(190, 190, 190, 0.85);
|
|
--window-shadow-background: rgb(190, 190, 190);
|
|
--window-background: #fafafa;
|
|
}
|
|
|
|
|
|
.component {
|
|
display: flex; justify-content: flex-start; align-items: center;
|
|
}
|
|
.component.column {
|
|
flex-direction: column;
|
|
}
|
|
.component > label {
|
|
flex-basis: auto;
|
|
width: max-content;
|
|
}
|
|
.component > input, .component > button {
|
|
position: relative;
|
|
}
|
|
.component > input[type='checkbox'], .component > input[type='checkbox'] + label, .component > button {
|
|
cursor: pointer;
|
|
}
|
|
.component > input[type='checkbox'] {
|
|
width: 1.25rem; height: 1.25rem;
|
|
min-width: 1.25rem; min-height: 1.25rem;
|
|
max-width: 1.25rem; max-height: 1.25rem;
|
|
}
|
|
.component > input + label, .component > label + input {
|
|
margin-left: .5rem;
|
|
}
|
|
.component.column > input + label, .component.column > label + input {
|
|
margin-left: 0;
|
|
}
|
|
.component > button {
|
|
min-width: 5rem;
|
|
min-height: 1.7rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.component.column > label {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
|
|
@supports (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {
|
|
.component > input, .component > button {
|
|
-webkit-appearance: none; -moz-appearance: none; appearance: none;
|
|
outline: none;
|
|
border: 1px solid var(--component-border-action, var(--component-border));
|
|
background: var(--component-background-action, var(--component-background));
|
|
border-radius: 3px;
|
|
transition: border-color .15s, background-color .15s, box-shadow .15s;
|
|
}
|
|
.component > input[type='checkbox']:checked:not(:hover) {
|
|
--component-border-action: #666;
|
|
--component-background-action: #fff4ea;
|
|
}
|
|
.component > input:hover, .component > button:hover {
|
|
--component-border-action: #ff8d00;
|
|
box-shadow: 0 0 3px 1px var(--component-shadow-action);
|
|
}
|
|
.component > input:focus:not(:hover), .component > button:focus:not(:hover) {
|
|
box-shadow: 0 0 1px 2px var(--component-focus);
|
|
}
|
|
.component > input[type='checkbox']::after {
|
|
content: '';
|
|
display: block;
|
|
left: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 60%;
|
|
border: 2px solid var(--cb-tick);
|
|
border-top: 0;
|
|
border-left: 0;
|
|
left: 35%;
|
|
top: 15%;
|
|
opacity: 0;
|
|
transform: rotate(45deg);
|
|
transition: opacity .15s;
|
|
}
|
|
.component > input[type='checkbox']:checked::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.component > input[type='text'] {
|
|
min-height: 1.6rem;
|
|
padding: .15rem .3rem;
|
|
min-width: 12.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.component > button::after {
|
|
left: -1px;
|
|
top: -1px;
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% + 2px);
|
|
height: calc(100% + 2px);
|
|
opacity: 0;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
box-shadow: inset 0 0 2px 1px var(--button-inset-shadow);
|
|
transition: opacity .15s;
|
|
}
|
|
.component > button:active::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.shadow-bottom-inset {
|
|
box-shadow: 0 10px 5px -10px rgba(var(--shadow-color), 0.75) inset;
|
|
}
|
|
|
|
|
|
.textbox {
|
|
padding: .25rem .5rem;
|
|
background-color: var(--background);
|
|
border: 1px solid var(--textbox-border);
|
|
border-radius: .2rem;
|
|
transition: box-shadow .2s ease-out;
|
|
}
|
|
|
|
.textbox:focus {
|
|
border-color: var(--textbox-selected-border);
|
|
box-shadow: 0 0 0 .1rem var(--textbox-selected-shadow);
|
|
outline: .15rem solid transparent;
|
|
}
|
|
|
|
|
|
|
|
/* 3rd party css styling */
|
|
|
|
.pd-theme td:not(.is-selected):not(.is-today) [data-pika-month="2"][data-pika-day="8"] {
|
|
background-color: var(--important-date-background);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pd-theme .pika-row td:nth-last-child(-n+2):not(.is-selected) .pika-button:not(:hover) {
|
|
background-color: var(--weekend-background);
|
|
}
|
|
|
|
.simplebar-track.simplebar-vertical {
|
|
width: 1rem !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.body-spacer {
|
|
width: 5vw;
|
|
max-width: 5vw;
|
|
}
|
|
|
|
.body-wrapper {
|
|
max-width: 1500px;
|
|
width: fit-content;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 auto;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.panel-wrapper {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.left-panel {
|
|
max-width: 15.5rem;
|
|
min-width: 12.5rem;
|
|
flex-basis: 100%;
|
|
background-color: var(--left-panel-background);
|
|
border-right: 1px solid var(--border);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
user-select: none;
|
|
}
|
|
|
|
.left-panel > .header {
|
|
height: 3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border);
|
|
background-color: var(--left-panel-header-background);
|
|
}
|
|
|
|
.left-panel .header .text {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.left-panel .sections {
|
|
padding: .5rem 0 .5rem 1rem;
|
|
}
|
|
|
|
.left-panel .section {
|
|
margin: .25rem 0;
|
|
position: relative;
|
|
display: flex; align-items: center;
|
|
}
|
|
|
|
.left-panel .section .clickable-area {
|
|
width: 80%; max-width: 100%;
|
|
padding: .5rem 1rem .5rem .5rem;
|
|
cursor: pointer;
|
|
display: flex; align-items: center;
|
|
}
|
|
.left-panel .section .image {
|
|
min-width: 1.5rem; max-width: 1.5rem; width: 1.5rem;
|
|
min-height: 1.5rem; max-height: 1.5rem; height: 1.5rem;
|
|
margin-right: 1rem;
|
|
transition: fill .15s;
|
|
}
|
|
.left-panel .section .text {
|
|
font-size: 1.15rem; font-weight: 300;
|
|
color: var(--link-normal-color);
|
|
transition: color .15s;
|
|
}
|
|
.left-panel .clickable-area:hover .text, .left-panel .clickable-area:active .text {
|
|
color: var(--link-active-color);
|
|
}
|
|
.left-panel .clickable-area:hover .image, .left-panel .clickable-area:active .image {
|
|
fill: var(--link-active-color);
|
|
}
|
|
|
|
.left-panel .section .arrow {
|
|
display: block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-right: 1px solid var(--border);
|
|
border-top: 1px solid var(--border);
|
|
transform: rotate(-135deg);
|
|
position: absolute;
|
|
right: -.51rem;
|
|
background-color: var(--right-panel-color);
|
|
}
|
|
|
|
.left-panel .section.sub .clickable-area {
|
|
width: 100%;
|
|
padding: .25rem 0;
|
|
margin-right: .5rem;
|
|
}
|
|
.left-panel .section.sub .image {
|
|
min-width: 1rem; max-width: 1rem; width: 1rem;
|
|
min-height: 1rem; max-height: 1rem; height: 1rem;
|
|
margin-right: .5rem;
|
|
}
|
|
.left-panel .section.sub .text {
|
|
font-size: 1rem;
|
|
color: var(--link-normal-sub-color);
|
|
}
|
|
.left-panel .section.sub .clickable-area:hover .image {
|
|
fill: unset;
|
|
}
|
|
.left-panel .section.sub .clickable-area:hover .image.collapser {
|
|
fill: var(--link-active-color);
|
|
}
|
|
.left-panel .section.sub .dot-filler {
|
|
flex: 1;
|
|
height: 2px;
|
|
border-top: 2px dashed rgba(0,0,0,0.25);
|
|
margin-left: .5rem; margin-right: .5rem;
|
|
}
|
|
.left-panel .section.sub .collapser {
|
|
display: none;
|
|
margin-right: 0;
|
|
}
|
|
.left-panel .section.sub .collapser.active {
|
|
display: block;
|
|
}
|
|
|
|
.left-panel .ss-line {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 2px;
|
|
border-left: 2px dashed rgba(0,0,0,0.25);
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
.left-panel .divider { display: none; }
|
|
.left-panel .divider:not(:last-child) {
|
|
display: block;
|
|
width: 85%;
|
|
border: 1px solid var(--divider-color);
|
|
background-color: var(--divider-color);
|
|
border-radius: 1px;
|
|
align-self: center;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.left-panel .divider + div {
|
|
padding: .5rem 1rem 1rem 1.5rem;
|
|
display: flex; flex-direction: column; align-items: stretch;
|
|
}
|
|
|
|
.right-panel {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
background-color: var(--right-panel-color);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.right-panel .no-section {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
|
|
.footer {
|
|
min-height: 2rem;
|
|
max-height: 2rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: var(--footer-background);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.window-wrapper {
|
|
position: fixed;
|
|
width: 100%; height: 100%;
|
|
background-color: var(--window-wrapper-background);
|
|
z-index: 100;
|
|
|
|
overflow: hidden;
|
|
display: flex; justify-content: center; align-items: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .35s, visibility .35s;
|
|
}
|
|
.window-wrapper.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.window {
|
|
min-width: min(400px, 80vw); max-width: 1200px;
|
|
min-height: fit-content; max-height: 800px;
|
|
position: relative;
|
|
background-color: var(--window-background);
|
|
border-radius: 1rem;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 2rem;
|
|
box-shadow: 0 0 100px 40px var(--window-shadow-background);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .35s, visibility .35s;
|
|
}
|
|
.window.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.window .close-button {
|
|
position: absolute;
|
|
right: 1.5rem; top: 1.5rem;
|
|
width: 2rem; height: 2rem;
|
|
opacity: .3;
|
|
transition: opacity .2s;
|
|
cursor: pointer;
|
|
}
|
|
.window .close-button:hover {
|
|
opacity: 1;
|
|
}
|
|
.window .close-button::before, .window .close-button::after {
|
|
position: absolute;
|
|
left: calc(50% - 1px);
|
|
content: ' ';
|
|
height: 100%;
|
|
width: 2px;
|
|
background-color: var(--text);
|
|
}
|
|
.window .close-button::before { transform: rotate(45deg); }
|
|
.window .close-button::after { transform: rotate(-45deg); }
|
|
|
|
.window > *:nth-child(n+2):not(:last-child) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* old stuff */
|
|
|
|
|
|
.message-wrapper {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--message-wrapper-background);
|
|
z-index: 100;
|
|
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .35s, visibility .35s;
|
|
}
|
|
.message-wrapper.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.message {
|
|
min-width: min(400px, 80vw); max-width: 1200px;
|
|
min-height: min(300px, 80vh); max-height: 800px;
|
|
position: relative;
|
|
background-color: var(--message-background);
|
|
border-radius: 1rem;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 2rem;
|
|
box-shadow: 0 0 100px 40px var(--message-shadow-background);
|
|
}
|
|
.message .close-button {
|
|
position: absolute;
|
|
right: 1.5rem; top: 1.5rem;
|
|
width: 2rem; height: 2rem;
|
|
opacity: .3;
|
|
transition: opacity .2s;
|
|
cursor: pointer;
|
|
}
|
|
.message .close-button:hover {
|
|
opacity: 1;
|
|
}
|
|
.message .close-button:before, .message .close-button:after {
|
|
position: absolute;
|
|
left: calc(50% - 1px);
|
|
content: ' ';
|
|
height: 100%;
|
|
width: 2px;
|
|
background-color: var(--text);
|
|
}
|
|
.message .close-button:before { transform: rotate(45deg); }
|
|
.message .close-button:after { transform: rotate(-45deg); }
|
|
|
|
.message > *:nth-child(n+2):not(:last-child) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.message .icon {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
.message .header {
|
|
font-size: 2.25rem;
|
|
font-weight: 600;
|
|
margin-left: 1rem; margin-right: 1rem;
|
|
}
|
|
.message .text {
|
|
font-size: 1.25rem;
|
|
flex: 1;
|
|
}
|
|
.message .button {
|
|
min-width: 10rem;
|
|
min-height: 2.5rem;
|
|
background-color: var(--button-background);
|
|
border-radius: 2rem;
|
|
display: flex; justify-content: center; align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: box-shadow .15s ease-out;
|
|
color: var(--text);
|
|
}
|
|
.message .button:hover {
|
|
box-shadow: 0 0 0 .1rem var(--button-selected-shadow);
|
|
outline: .15rem solid transparent;
|
|
color: var(--button-selected-color);
|
|
}
|
|
.message .button .button-text {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|