index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    --mouse-x: 0px;
    --mouse-y: 0px;
    --prop-header_height: 60px;
    --prop-body_space: 10px;
    
    --prop-codeview_height: 400px;
    --prop-codeview_height_closed: 35px;
    --prop-codeview_width: 500px;
    
    --color-error: hsl(0, 100%, 60%);
    --color-warning: hsl(60, 100%, 60%);
}
.dark-theme {
    --color-text: hsl(0, 0%, 100%);
    --color-subtle_text: hsl(0, 0%, 61%);
    --color-ui: hsl(0, 0%, 24%);
    --color-dark_ui: hsl(0, 0%, 12%);
    --color-back: hsl(0, 0%, 9%);
    --color-code: hsl(240, 9%, 11%);
    --color-accent: lightgreen;
    --color-accent_translucent: hsla(120, 73%, 75%, 0.75);
}
.light-theme {
    --color-code: hsl(0, 0%, 100%);
    --color-text: hsl(0, 0%, 0%);
    --color-subtle_text: rgb(35, 59, 35);
    --color-ui: hsl(0, 0%, 97%);
    --color-dark_ui: hsl(0, 0%, 90%);
    --color-back: hsl(0, 0%, 100%);
    --color-accent: hsl(205, 30%, 50%);
    --color-accent_translucent: hsla(205, 30%, 50%, 0.75);
}
.light-theme img:not(.card img:not(.non_color),.ignore) {
    filter: brightness(50%);
}
::selection {
    background-color: var(--color-accent);
}
/* .dark-theme ::selection{ text-shadow: 1px 1px 0 black; } */
/* .light-theme ::selection{ text-shadow: 1px 1px 0 white; } */

ul {
    padding: 0;
}
body,html {
    height: 100vh;
    margin: 0;
    font-family: Poppins;
    color: var(--color-text);
    background: var(--color-back);
    overflow-x: hidden;
    overflow-y: auto;
}
header {
    user-select: none;
    background-color: var(--color-ui);
    display: flex;
    flex-direction: row;
    height: var(--prop-header_height);
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.726);
    position: relative;
}
header h2 {
    margin: 0;
    cursor: pointer;
}
header .opacityHover {
    opacity: 1;
    transition: opacity 100ms ease;
}
header .opacityHover:hover {
    opacity: .8;
}
header .toolbar {
    position: absolute;
    right: 10px;
    width: 300px;
    height: 50%;
    display: flex;
    flex-direction: row-reverse;
}
header .tool {
    margin: 0 5px;
}
.gens img {
    width: 35px;
    cursor: pointer;
    transition: transform 100ms ease;
    position: absolute;
    margin-top: -15px;
}
.gens:hover img {
    opacity: .8;
    transform: scale(115%);
}
.gens ul {
    z-index: 20;
    opacity: 0;
    position: absolute;
    background-color: var(--color-ui);
    box-shadow: 0 0 10px black;
    pointer-events: none;
    margin: 0;
    margin-top: calc(var(--prop-header_height) * 0.25);
}
.gens li {
    padding: 2px 10px;
    height: 30px;
    font-size: 1em;
}
.gens li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.gens:hover ul{
    opacity: 1;
    pointer-events: all;
}

li {
    list-style: none;
}

.mainIcon {
    width: fit-content;
    height: var(--prop-header_height);
    display: inline;
}
.mainIcon img {
    height: 100%;
}

.subBody {
    width: 95%;
    height: calc(calc(100% - var(--prop-header_height)) - var(--prop-body_space));
    margin: auto;
    margin-top: var(--prop-body_space);
}
.cardsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.card {
    width: fit-content;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 10px #000000a0;
    padding: 5px;
    border-radius: 8px;
    margin: 10px;
    cursor: pointer;
    border: 3px dotted var(--color-text);
    transition: box-shadow 300ms ease, transform 200ms cubic-bezier(0.01, 0.71, 0.58, 1);
    font-size: 1.5em;
    background: var(--color-dark_ui);
}
.card:hover {
    box-shadow: 0 0px 20px var(--color-accent);
    border: 3px dashed var(--color-accent);
    transform: scale(105%);
    color: var(--color-accent);
}
.card img {
    user-select: none;
    width: 150px;
    -webkit-user-drag: none;
}
.card:hover img.non_color {
    filter:
        contrast(1000%)
        sepia(100%)
        saturate(1100%)
        hue-rotate(45deg);
}
.light-theme .card:hover img.non_color {
    filter:
        contrast(0%)
        sepia(100%)
        saturate(1100%)
        hue-rotate(180deg);
    /* color: rgb(255, 136, 0); */
}
.card > * {
    margin: 0;
}

.tooltip {
    position: fixed;
    height: fit-content;
    max-width: 200px;
    font-size: .6em;
    left: var(--mouse-x);
    top:  var(--mouse-y);
    margin: 15px;
    user-select: none;
    color: var(--color-subtle_text);
    outline: 1px solid var(--color-subtle_text);
    background-color: var(--color-ui);
    padding: 2px;
    z-index: 64;
}
.tooltip.wide {
    /* left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
    max-width: 100%;
    width: 25%;
    font-size: 0.9em;
    /* margin: 0;
    height: 50%; */
}
.hidden {
    display: none !important;
}

.loadingScreen {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--color-dark_ui);
    z-index: 48;
}
@keyframes spin {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
.loadingScreen div {
    position: absolute;
    padding: 40px;
    left: 50%;
    top: 50%;
    opacity: 1;
    border-radius: 50%;
    border:       20px solid var(--color-ui);
    border-right: 20px solid var(--color-accent);
    box-shadow: 0 0 15px black;
    animation: spin 1000ms linear infinite;
}


.pageCenter {
    position: relative;
    top: 5%;
}
.pageCenter td {
    padding: 5px;
    position: relative;
}
.pageCenter td {
    vertical-align: top;
}

input {
    background-color: var(--color-ui);
    border: 2px solid var(--color-dark_ui);
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    outline: none;
    transition: box-shadow 100ms;
    color: var(--color-subtle_text);
    flex: 1;
}
input[type="text"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 5px var(--color-accent_translucent);
}
input[type="range"]:focus {
    border-color: var(--color-accent);
}
input[type="range"] {
    -webkit-appearance: none;
    height: 2.5px;
    border-radius: 5px;  
    background: var(--color-ui);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17.5px;
    height: 17.5px;
    border-radius: 50%; 
    background: var(--color-accent);
    box-shadow: 0 0 7px var(--color-accent_translucent);
    cursor: e-resize;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17.5px;
    height: 17.5px;
    border-radius: 50%; 
    background: var(--color-accent);
    cursor: e-resize;
}

.variables {
    border: 2px solid black;
    border-radius: 5px;
    display: grid;
    padding: 5px;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 10px;
}
.variables:empty::after {
    font-style: italic;
    content: 'nothing to show here...';
    color: var(--color-subtle_text);
    font-size: .75em;
}
@media screen and (max-width: 750px) {
    .variables {
        margin-bottom: 50px;
    }
}

[m] {
    margin: 0;
}
.sbForm {
    padding: 5px;
    font-size: .9em;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
    border-radius: 2px;
}
.sbForm input {
    font-size: .9em;
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
}
.sbForm img {
    height: 20px;
    margin-left: auto;
    margin-bottom: 2px;
    display: block;
}
.toolbar {
    height: 25px;
    padding-bottom: 2px;
    user-select: none;
}
.toolbar img {
    height: 100%;
}
.tool{
    cursor: pointer;
    filter: brightness(50%);
    transition: filter 100ms ease, transform 100ms ease;
}
.tool:hover{
    filter: brightness(75%);
    transform: scale(115%);

}
hr {
    border-color: var(--color-subtle_text);
}

/* (5*3 + 10 * #a + 20 * 30 + 50) + 5*3 + 10 * #a + 20 * 30 + 50 */
::-webkit-scrollbar {
    width: 7.5px;
    height: 7.5px;
}
::-webkit-scrollbar-track {
    background: rgb(19, 19, 19);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(61, 70, 53);
}
::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    background: var(--color-accent);
}
/* CODE VIEW */
@keyframes hideDown {
    0% { transform: translateY(0%); }
    100% { transform: translateY(90%); }
}
@keyframes showUp {
    0% { transform: translateY(90%); }
    100% { transform: translateY(0%); }
}
.codeview {
    position: fixed;
    padding: 10px 5px;
    
    font-family: monospace;
    background-color: var(--color-code);
    
    height: 100%;
    width: 100%;
    max-height: var(--prop-codeview_height);
    max-width: var(--prop-codeview_width);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: max-height 500ms ease , max-width 500ms ease;
    
    box-sizing: border-box;
    
    overflow: hidden;

    z-index: 32;
}
pre {
    margin: 0;
}
.codeview .lines {
    height: calc(100% - 40px);
    overflow: auto;
}
.codeview .lines > .line {
    display: flex;
    flex-wrap: wrap;
}
.codeview .cv-token {
    white-space: pre;
    transition: font-size 100ms linear;
}
.codeview.hide {
    --prop-codeview_height: var(--prop-codeview_height_closed);
}
.codeview.hide .lines {
    overflow: hidden;
}
.codeview .toolbar .tool:first-child {
    transition: transform 250ms ease;
}
.codeview.show .toolbar .tool:first-child {
    transform: scaleY(1);
}
.codeview.hide .toolbar .tool:first-child {
    transform: scaleY(-1);
}

.codeview .toolbar {
    background: var(--color-code);
    width: 90%;
    position: absolute;
    bottom: 0;
}
.stickleftbottom {
    right: 0;
    bottom: 0;
    border-radius: 20px 0 0 0;
}

.cv-comment {
    color: hsl(0, 0%, 40%);
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.cv-keyword {
    font-weight: 900;
}
.dark-theme .cv-keyword           { color: hsl(0, 100%, 67%) }
.dark-theme .cv-seckeyword        { color: hsl(17, 100%, 73%) }
.dark-theme .cv-thrkeyword        { color: hsl(72, 100%, 72%) }
.dark-theme .cv-resource_location { color: hsl(155, 100%, 60%) }
.dark-theme .cv-list              { color: hsl(44, 100%, 63%) }
.dark-theme .cv-selector          { color: hsl(301, 100%, 79%) }
.dark-theme .cv-delimiter         { color: hsl(240, 100%, 63%) }
.dark-theme .cv-variable          { color: hsl(60, 100%, 83%) }
.dark-theme .cv-value             { color: hsl(208, 100%, 64%) }
.dark-theme .cv-special           { color: hsl(83, 100%, 46%) }

.light-theme .cv-keyword           { color: hsl(0, 80%, 27%) }
.light-theme .cv-seckeyword        { color: hsl(17, 80%, 33%) }
.light-theme .cv-thrkeyword        { color: hsl(72, 80%, 32%) }
.light-theme .cv-resource_location { color: hsl(155, 80%, 20%) }
.light-theme .cv-list              { color: hsl(44, 80%, 23%) }
.light-theme .cv-selector          { color: hsl(301, 80%, 39%) }
.light-theme .cv-delimiter         { color: hsl(240, 80%, 23%) }
.light-theme .cv-variable          { color: hsl(60, 80%, 43%) }
.light-theme .cv-value             { color: hsl(208, 80%, 24%) }
.light-theme .cv-special           { color: hsl(83, 80%, 6%) }

.toolSeperator {
    display: inline-block;
    border-left: 2px solid var(--color-subtle_text);
    filter: brightness(50%);
    height: 100%;
    padding-right: 5px;
    margin-left: 5px;
}

.mizer {
    padding: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
}
.hide .mizer {
    pointer-events: none;
}
.maximized:not(.hide) .mizer {
    background: url('/assets/fullscreen_exit.svg');
    background-size: contain;
    image-rendering: pixelated;
}
.minimized:not(.hide) .mizer {
    background: url('/assets/fullscreen.svg');
    background-size: contain;
    image-rendering: pixelated;
}
code {
    background-color: var(--color-code);
    padding: 2px;
    border: 1px solid var(--color-subtle_text);
    color: var(--color-subtle_text);
}
input[type="checkbox"]{
    -webkit-appearance: none;
    padding: 0px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

input[type="checkbox"]:checked{
    background-image: url('/assets/done.svg');
    background-size: cover;
}
input[type="checkbox"]:hover{
    filter: brightness(150%);
}
[template-tag="info"]{
    height: 15px;
    background-color: var(--color-code);
    border: 1px solid var(--color-subtle_text);
    padding: 2px;
    border-radius: 50%;
}


/* Form */
.form {
    width: var(--width);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.form > div {
    position: relative;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.form > div > label {
    width: 150px;
}

.errorLabel {
    color: var(--color-error);
    font-size: .85em;
    font-family: monospace;
    margin-left: 160px;
}
/* Dialog */
@keyframes popIn {
    from {transform: translate(-50%, -50%) scale(0.0);}
    to   {transform: translate(-50%, -50%) scale(1.0);}
}
dialog {
    position: absolute;
    margin: 0;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;

    color: var(--color-text);
    background-color: var(--color-back);
    
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 0;
    
    animation: popIn 300ms ease;
}
dialog > .handle > span {
    flex: 1;
}
dialog > .handle {
    user-select: none;
    display: flex;

    width: 100%;
    background-color: var(--color-ui);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    box-sizing: border-box;
}
dialog > .body {
    padding: 10px;
    box-sizing: border-box;
}
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.25);
}