546 lines
12 KiB
CSS
Executable File
546 lines
12 KiB
CSS
Executable File
/*!
|
|
* molybdenum v1.1.0 Companion CSS
|
|
* Copyright 2025 PT Nusa Angkasa Siber
|
|
* Released under the MIT License
|
|
*/
|
|
:root {
|
|
color-scheme: light only;
|
|
--secondary-table: #1e634a;
|
|
--primary-table: #1182a4;
|
|
--primary-foreground: #050607;
|
|
--secondary-foreground: #aaaaac;
|
|
--primary-background: #fefdfc;
|
|
--secondary-background: #d9d9dc;
|
|
--semi-background: #fdfcf975;
|
|
--primary-accent: #1b5d76;
|
|
--semi-primary: #1b5d76bb;
|
|
--secondary-accent: #4eaacc;
|
|
--semi-secondary: #4eaaccbb;
|
|
--negative-accent: #ad0400;
|
|
--positive-accent: #4ecc89;
|
|
--neutral-p-accent: #5fc4ff;
|
|
--neutral-n-accent: #f6c267;
|
|
--semi-negative: #ad0400bb;
|
|
--semi-positive: #4ecc89bb;
|
|
--semi-neutral-p: #5fc4ffbb;
|
|
--semi-neutral-n: #f6c267bb;
|
|
--input-background: #ebf2f4;
|
|
--blend-color: inherit;
|
|
height: 100vh;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
font-family: 'Source Sans 3';
|
|
}
|
|
body
|
|
{
|
|
font-size: 13pt;
|
|
color: var(--primary-foreground);
|
|
background-color: var(--primary-background);
|
|
}
|
|
thead
|
|
{
|
|
background-color: var(--primary-accent);
|
|
color: var(--primary-background);
|
|
position: sticky;
|
|
top: 1px;
|
|
z-index: 1;
|
|
}
|
|
button
|
|
{
|
|
border: 1px solid var(--secondary-foreground);
|
|
color: var(--primary-foreground);
|
|
padding: .125em .35em .125em .35em;
|
|
border-radius: .15em;
|
|
margin: .15em 0 .15em 0;
|
|
font-size: .9em;
|
|
}
|
|
button.accented
|
|
{
|
|
background-color: var(--primary-accent);
|
|
color: var(--primary-background);
|
|
}
|
|
button.p-accent
|
|
{
|
|
background-color: var(--neutral-p-accent);
|
|
}
|
|
button.s-accent
|
|
{
|
|
background-color: var(--secondary-accent);
|
|
}
|
|
button.n-accent
|
|
{
|
|
background-color: var(--neutral-n-accent);
|
|
}
|
|
button.positive
|
|
{
|
|
background-color: var(--positive-accent);
|
|
}
|
|
button.negative
|
|
{
|
|
background-color: var(--negative-accent);
|
|
color: var(--primary-background);
|
|
}
|
|
button:hover:not(:disabled)
|
|
{
|
|
filter: brightness(1.15);
|
|
}
|
|
button:active:not(:disabled)
|
|
{
|
|
border: 1px inset var(--secondary-foreground);
|
|
filter: brightness(.95);
|
|
}
|
|
button:disabled
|
|
{
|
|
background-color: var(--secondary-foreground);
|
|
color: var(--primary-foreground)
|
|
}
|
|
table
|
|
{
|
|
isolation: isolate;
|
|
}
|
|
table, table th, table td {
|
|
border-collapse: collapse;
|
|
padding: .2ch .25ch .2ch .25ch;
|
|
margin: auto;
|
|
}
|
|
table.bordered, table.bordered th , table.bordered td {
|
|
border: 1px solid var(--primary-background);
|
|
}
|
|
table.fullwidth{
|
|
width: calc(100% - 2ch);
|
|
}
|
|
table.selectable tr:not(thead tr){
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
table.selectable tr:hover:not(thead tr)
|
|
{
|
|
background-color: var(--semi-neutral-p);
|
|
}
|
|
tr:nth-child(odd):not(thead tr){
|
|
background-color: white;
|
|
}
|
|
tr:not(thead tr){
|
|
background-color: var(--input-background);
|
|
}
|
|
table.selectable tr.selected:not(thead tr), table.selectable tr.odd.selected:not(thead tr){
|
|
background-color: var(--semi-positive);
|
|
}
|
|
table.selectablecell td:hover:not(.block)
|
|
{
|
|
cursor: pointer;
|
|
background-color: var(--semi-neutral-p);
|
|
}
|
|
table.selectablecell td.selected:not(.block)
|
|
{
|
|
background-color: var(--semi-positive);
|
|
}
|
|
textarea
|
|
{
|
|
min-height: 1.85em;
|
|
resize: vertical;
|
|
}
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select
|
|
{
|
|
background-color: var(--primary-background);
|
|
border: 1px solid var(--secondary-foreground);
|
|
border-radius: .15em;
|
|
font-size: 1em;
|
|
padding-inline-start: .35em;
|
|
padding-inline-end: .35em;
|
|
width: 25ch;
|
|
outline: none;
|
|
margin-bottom: .25em;
|
|
}
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible, textarea:focus-visible, select:focus-visible
|
|
{
|
|
border: 1px solid var(--secondary-background);
|
|
border-bottom: 1px solid var(--primary-accent);
|
|
background-color: var(--input-background);
|
|
}
|
|
input.icon
|
|
{
|
|
padding-left: 3.5ch !important;
|
|
}
|
|
input[type="password"].peek
|
|
{
|
|
padding-right: 3.5ch !important;
|
|
}
|
|
sep-bar{
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
color: var(--secondary-foreground);
|
|
margin-inline-start: .75ch;
|
|
margin-inline-end: .5ch;
|
|
}
|
|
sep-bar::after{
|
|
content: "|";
|
|
}
|
|
background-screen, load-screen, dialog-screen
|
|
{
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--semi-background);
|
|
backdrop-filter: blur(5px);
|
|
user-select: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
-webkit-user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
load-screen:not(body>load-screen)
|
|
{
|
|
position: absolute;
|
|
}
|
|
load-screen
|
|
{
|
|
flex-direction: column;
|
|
}
|
|
dialog-box
|
|
{
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
row-gap: .75em;
|
|
position: relative;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
width: max-content;
|
|
height: max-content;
|
|
background-color: var(--primary-background);
|
|
border: 1px solid var(--secondary-foreground);
|
|
border-radius: .25em;
|
|
padding: .5em;
|
|
transition: scale .25s;
|
|
scale: 0;
|
|
}
|
|
dialog-title
|
|
{
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
border-bottom: 1px solid var(--secondary-foreground);
|
|
font-weight: 500;
|
|
padding-left: .25em;
|
|
height: 1.65em;
|
|
}
|
|
load-screen.opaque
|
|
{
|
|
background-color: var(--primary-background);
|
|
}
|
|
a, confirm-handle
|
|
{
|
|
display: inline;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
color: var(--primary-accent);
|
|
margin-inline-start: .5ch;
|
|
margin-inline-end: .5ch;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
filter: brightness(1);
|
|
}
|
|
a
|
|
{
|
|
transition: filter .35s ease, text-shadow .35s ease;
|
|
}
|
|
a:hover /*, confirm-handle:hover */
|
|
{
|
|
filter: brightness(1.25);
|
|
text-shadow: 0 0 .25em var(--semi-primary);
|
|
}
|
|
a:active /*, confirm-handle:active*/
|
|
{
|
|
filter: brightness(1.25);
|
|
text-shadow: 0 0 .75em var(--semi-primary);
|
|
}
|
|
button.notifier::after
|
|
{
|
|
content: ".";
|
|
background-color: var(--negative-accent);
|
|
color: var(--negative-accent);
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 1em;
|
|
display: block;
|
|
position: absolute;
|
|
top: -.75em;
|
|
right: -.75em;
|
|
font-size: .3em;
|
|
}
|
|
a-button.notifier::after
|
|
{
|
|
content: ".";
|
|
background-color: var(--negative-accent);
|
|
color: var(--negative-accent);
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 1em;
|
|
display: block;
|
|
position: absolute;
|
|
top: -.1em;
|
|
right: -1.25em;
|
|
font-size: .26em;
|
|
}
|
|
/* .ellipsis
|
|
{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
} */
|
|
.noscroll
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
/* ANIMATIONS */
|
|
load-message
|
|
{
|
|
display: block;
|
|
margin: .4em;
|
|
}
|
|
chat-load { /* POSSIBLE load-anim DEFINITION */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
chat-load span { /* ALSO PUT load-anim span IF USED */
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: var(--primary-accent);
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
animation: pulse 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
chat-load span:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
chat-load span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
chat-load span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
sonar-ping
|
|
{ /* POSSIBLE load-anim DEFINITION */
|
|
width: 2em;
|
|
height: 2em;
|
|
border: 2px solid var(--primary-accent);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
animation: expandRing 1.5s infinite ease-out;
|
|
}
|
|
|
|
@keyframes expandRing {
|
|
0% {
|
|
transform: scale(0.5);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
skeleton-view {
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite linear;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
progress-loop { /* POSSIBLE load-anim DEFINITION */
|
|
width: 95%;
|
|
height: .25em;
|
|
background: var(--secondary-background);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
progress-loop::after { /* ALSO PUT load-anim::after IF USED */
|
|
content: "";
|
|
width: 50%;
|
|
height: 100%;
|
|
background: var(--primary-accent);
|
|
position: absolute;
|
|
left: -50%;
|
|
animation: progress-loop 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-loop {
|
|
0% { left: -50%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
m-icon {
|
|
max-width: 1ch;
|
|
width: 1ch;
|
|
overflow: hidden;
|
|
font-family: 'Material Symbols Outlined';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.3em;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
m-inline {
|
|
max-width: 1ch;
|
|
width: 1ch;
|
|
overflow: hidden;
|
|
font-family: 'Material Symbols Outlined';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.25em;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
padding-bottom: .17em;
|
|
vertical-align: middle;
|
|
}
|
|
button>m-inline
|
|
{
|
|
padding-bottom: .07em;
|
|
}
|
|
m-inline.icon
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 1.2em;
|
|
padding-top: .25em;
|
|
padding-left: .2em;
|
|
max-width: 1.2ch;
|
|
width: 1.2ch;
|
|
}
|
|
|
|
/* ALERT BOX */
|
|
alert-screen, confirm-screen
|
|
{
|
|
display: flex;
|
|
position: fixed !important;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--semi-background);
|
|
backdrop-filter: blur(5px);
|
|
user-select: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
-webkit-user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
alert-box, confirm-box
|
|
{
|
|
border: 1px solid var(--secondary-foreground);
|
|
display: block;
|
|
width: calc(100vw - .75em);
|
|
max-width: 450px;
|
|
position: fixed;
|
|
height: 12.25em;
|
|
max-height: 12.25em;
|
|
padding: .5em;
|
|
background-color: var(--semi-background);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
border-radius: .25em;
|
|
scale: 0;
|
|
transition: scale .25s;
|
|
text-align: center;
|
|
}
|
|
confirm-box
|
|
{
|
|
height: 14.25em;
|
|
max-height: 14.25em;
|
|
}
|
|
alert-handle
|
|
{
|
|
display: inline;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
color: var(--primary-accent);
|
|
margin-inline-start: .5ch;
|
|
margin-inline-end: .5ch;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
filter: brightness(1);
|
|
}
|
|
confirm-handle
|
|
{
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
position: absolute;
|
|
bottom: .25em;
|
|
left: -.2em;
|
|
right: -.2em;
|
|
text-align: center;
|
|
height: 3.5em;
|
|
outline: none;
|
|
color: var(--primary-foreground);
|
|
}
|
|
alert-title, confirm-title
|
|
{
|
|
display: block;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
margin-bottom: .25em;
|
|
border-bottom: 1px solid var(--secondary-background);
|
|
}
|
|
alert-text, confirm-text
|
|
{
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 5;
|
|
line-clamp: 5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-top: .25em;
|
|
border-bottom: 1px solid var(--secondary-background);
|
|
text-align: justify;
|
|
height: 7.75em;
|
|
margin-bottom: .25em;
|
|
}
|