spacebox.css

/* Imports */

@import url('https://fonts.googleapis.com/css?family=Inter:light,regular,medium,semibold,bold');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:light,regular,medium,semibold,bold');

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");


/* Variables */

:root {
    /* Main Colors */
    --default: #fafaff;
    --primary: #0197f4;
    --success: #07c566;
    --alert: #ffce5c;
    --warning: #ff7538;
    --danger: #ef476f;
    --dark: #f0f0f6;

    /* Element Colors */
    --bg-color: #f0f0f6;
    --bg-dark-color: #bebec2;
    --panel-color: #ffffff;
    --text-color: #333434;
    --border-color: #d7d7db;
    --shadow-color: #222323;
    --btn-dark-text-color: #ffffff;
    --btn-light-text-color: #555656;
    --table-border-color: #bebec2;
    --tr-bg-color: #f0f0f6;
    --th-bg-color: #e1e1e6;

    /* Filters */
    --dim-filter: opacity(.6);

    /* Shadows */
    --shadow-h-offset: 0rem;
    --shadow-v-offset: 0.25rem;
    --shadow-blur: 0.6rem;
    --shadow-spread-regular: -0.25rem;
    --shadow-spread-heavy: -0.1rem;
    --shadow-spread-light: -0.5rem;

    --shadow-regular: var(--shadow-h-offset) var(--shadow-v-offset) var(--shadow-blur) var(--shadow-spread-regular) var(--shadow-color);
    --shadow-heavy: var(--shadow-h-offset) var(--shadow-v-offset) var(--shadow-blur) var(--shadow-spread-heavy) var(--shadow-color);
    --shadow-light: var(--shadow-h-offset) var(--shadow-v-offset) var(--shadow-blur) var(--shadow-spread-light) var(--shadow-color);
    --shadow-inset: inset var(--shadow-h-offset) var(--shadow-v-offset) var(--shadow-blur) var(--shadow-spread-regular) var(--shadow-color);
    --shadow-none: 0 0 0 0;

    /* Font Sizes */
    --font-size-jumbo: 5rem;
    --font-size-display: 3rem;
    --font-size-caption: 1.5rem;
    --font-size-title: 1.5rem;
    --font-size-subtitle: 1.2rem;
    --font-size-heading: 1.2rem;
    --font-size-subheading: 1rem;
    --font-size-body: 1rem;
    --font-size-mono: .9rem;

    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;
    --font-heavy: 700;

    /* Other */
    --btn-height: 0.2rem;
}


/* General */

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border-radius: 4px; /* Might remove this later but for now it seems fine, can always be overridden with the 'sharp' modifier */
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}


/* Containers */

.box, .hbox {
    background: transparent;
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    gap: 1rem 1rem;
}

.hbox { flex-flow: row wrap; row-gap: 1rem; }
.hbox.fill > * { flex: 1; }
.hbox.equal-h > .panel { height: auto; }

.panel, .hover-panel {
    display: flex;
    flex-direction: column;
    background: var(--panel-color);
    outline: .1rem solid var(--border-color);
    box-shadow: var(--shadow-regular);
    height: min-content;
}

.panel-body {
    flex-grow: 1;
    margin: 1rem 1rem;
}
.panel-body > .hbox { margin: 0; }

.panel-header {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    border-radius: 4px 4px 0px 0px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    outline: .1rem solid var(--border-color);
}

.panel-footer {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    border-radius: 0px 0px 4px 4px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    outline: 0.1rem solid var(--border-color);
}

.panel-buttons > * { flex: 1; }
.panel-buttons {
    display: flex;
}

.hover-panel { transition: ease-in-out 150ms; }
.hover-panel:hover {
    transform: translateY(-0.2rem);
    box-shadow: var(--shadow-heavy);
    transition: ease-in-out 150ms;
}

.hover-panel:active {
    transform: translateY(0.1rem);
    box-shadow: var(--shadow-none);
    transition: ease-in-out 50ms;
}

.hero, .hero-medium, .hero-small {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 100%;
}

.hero-medium { height: 250px; }
.hero-small { height: 150px; }

.hero-body { margin: 1rem; }

.footer {
    display: flex;
    filter: opacity(.75);
    justify-content: center;
    align-items: center;
}


/* Typography */

.jumbo { font-size: var(--font-size-jumbo); font-weight: var(--font-bold); }
.display { font-size: var(--font-size-display); font-weight: var(--font-bold); }
.caption { font-size: var(--font-size-caption); font-weight: var(--font-medium); filter: var(--dim-filter); }
.title { font-size: var(--font-size-title); font-weight: var(--font-medium); }
.subtitle { font-size: var(--font-size-subtitle); font-weight: var(--font-regular); filter: var(--dim-filter); }
.heading { font-size: var(--font-size-heading); font-weight: var(--font-medium); }
.subheading { font-size: var(--font-size-subheading); font-weight: var(--font-regular); filter: var(--dim-filter);}
.body { font-size: var(--font-size-body); font-weight: var(--font-regular); line-height: 1.5em; margin-bottom: 1rem; }


/* Form Elements */

.button,
.panel-btn-left,
.panel-btn-right,
.panel-btn-center {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--default);
    color: var(--btn-light-text-color);
    font-size: 1rem;
    padding: .6rem;
    text-decoration: none;
    border: 0.1rem solid rgba(0, 0, 0, .2);
    border-bottom: var(--btn-height) solid rgba(0, 0, 0, .2);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    width: min-content;
}

.button:hover, .panel-btn-left:hover, .panel-btn-right:hover, .panel-btn-center:hover { cursor: pointer; filter: brightness(1.05); }
.button:disabled, .button.dark:disabled, .panel-btn-left:disabled, .panel-btn-right:disabled, .panel-btn-center:disabled { cursor: initial; opacity: 0.4; }

.button.primary:disabled,
.button.success:disabled,
.button.alert:disabled,
.button.warning:disabled,
.button.danger:disabled
{ filter: brightness(1.2) !important; }

.button:active, .button:disabled,
.panel-btn-left:active, .panel-btn-left:disabled,
.panel-btn-right:active, .panel-btn-right:disabled,
.panel-btn-center:active, .panel-btn-center:disabled {
    filter: brightness(0.95);
    border-bottom: 0.1rem solid rgba(0, 0, 0, .2);
    margin-top: 0.1rem;
}

.panel-btn-left { border-radius: 4px 0px 0px 4px; }
.panel-btn-right { border-radius: 0px 4px 4px 0px; }
.panel-btn-center { border-radius: 0; }
/* .panel-btn-center { border-radius: 0; border-left: 0; border-right: 0; } */


/* Extras */

.table {
    width: 100%;
    table-layout: fixed;
    text-align: left;
    border-collapse: collapse;
}

.table tr, th, td {
    border: 1px solid var(--table-border-color);
    padding: 0.25rem;
    font-weight: var(--font-regular);
}

.table th { font-weight: var(--font-medium); }

.table tr:nth-child(even) { background-color: var(--tr-bg-color); }

.table.no-border tr, th, td {
    border: 0px;
    border-radius: 0px;
}


.code {
    display: block;
    background: var(--bg-color);
    font-family: 'Source Code Pro', sans-serif;
    font-size: var(--font-size-mono);
    line-height: 1.25rem;
    box-shadow: var(--shadow-inset);
    padding: 1rem;
    overflow: auto;
    white-space: pre;
}


/* Experimental */

/* .material-icons, .material-icons-outlined { margin: -0.2rem 0.2rem -0.2rem -0.2rem; } Revisit this later somehow */


/* Spacing Modifiers (probably does not play nicely with the size modifiers) */

.pad-0, .pad-all-0 { padding: 0rem; }
.pad-1, .pad-all-1 { padding: 1rem; }
.pad-2, .pad-all-2 { padding: 2rem; }
.pad-3, .pad-all-3 { padding: 3rem; }

.pad-t0, .pad-top-0 { padding-top: 0rem; }
.pad-t1, .pad-top-1 { padding-top: 1rem; }
.pad-t2, .pad-top-2 { padding-top: 2rem; }
.pad-t3, .pad-top-3 { padding-top: 3rem; }

.pad-b0, .pad-bottom-0 { padding-bottom: 0rem; }
.pad-b1, .pad-bottom-1 { padding-bottom: 1rem; }
.pad-b2, .pad-bottom-2 { padding-bottom: 2rem; }
.pad-b3, .pad-bottom-3 { padding-bottom: 3rem; }

.pad-l0, .pad-left-0 { padding-left: 0rem; }
.pad-l1, .pad-left-1 { padding-left: 1rem; }
.pad-l2, .pad-left-2 { padding-left: 2rem; }
.pad-l3, .pad-left-3 { padding-left: 3rem; }

.pad-r0, .pad-right-0 { padding-right: 0rem; }
.pad-r1, .pad-right-1 { padding-right: 1rem; }
.pad-r2, .pad-right-2 { padding-right: 2rem; }
.pad-r3, .pad-right-3 { padding-right: 3rem; }

.gap-0 { gap: 0rem; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

.margin-0 { margin: 0; }


/* Alignment Modifiers */
/* TODO: Change these to have more descriptive names, it's not immediately clear what can be used where and what affects what (study EXACTLY how this works in flexbox) */

.align-l, .align-left { align-self: flex-start; } /* 'align' modifiers affect elements and children */
.align-r, .align-right { align-self: flex-end; }
.align-c, .align-center { align-self: center; }

.justify-l, .justify-left { justify-content: flex-start;} /* 'justify' modifiers only affect children */
.justify-r, .justify-right { justify-content: flex-end; }
.justify-c, .justify-center { justify-content: center; }
.justify-t, .justify-top { align-items: flex-start; }
.justify-b, .justify-bottom { align-items: flex-end; }

.text-l, .text-left { text-align: left; } /* 'text' modifiers only affect text */
.text-r, .text-right { text-align: right; }
.text-c, .text-center { text-align: center; }


/* Size Modifiers */

.size-1              { width: calc(10% - 0.9rem); }
.size-2              { width: calc(20% - 0.8rem); }
.size-quarter        { width: calc(25% - 0.750rem); }
.size-3              { width: calc(30% - 0.7rem); }
.size-third          { width: calc(33.333% - 0.666rem); }
.size-4              { width: calc(40% - 0.6rem); }
.size-half, .size-5  { width: calc(50% - 0.5rem); }
.size-6              { width: calc(60% - 0.4rem); }
.size-7              { width: calc(70% - 0.3rem); }
.size-8              { width: calc(80% - 0.2rem); }
.size-9              { width: calc(90% - 0.1rem); }
.size-full, .size-10 { width: 100%; }

.width-min { width: min-content; } /* Unsure if these four are needed `min` might be redundant since that's default behavior */
.width-max { width: auto; }

.height-min { height: min-content; }
.height-max { height: auto; }

.width-v { width: 100vw; }
.height-v { height: 100vh; }

/* Font Modifiers */

.light { font-weight: var(--font-light); }
.regular { font-weight: var(--font-regular); }
.medium { font-weight: var(--font-medium); }
.bold { font-weight: var(--font-bold); }
.heavy { font-weight: var(--font-heavy); }

.italic { font-style: italic; }

.mono { font-family: 'Source Code Pro', sans-serif; font-size: var(--font-size-mono); }


/* Style Modifiers */

.no-border { outline: 0.1rem solid transparent; }
.add-border { outline: 0.1rem solid var(--border-color); }

.no-shadow { box-shadow: var(--shadow-none); }
.add-shadow { box-shadow: var(--shadow-regular); }
.add-shadow-heavy { box-shadow: var(--shadow-heavy); }
.add-shadow-light { box-shadow: var(--shadow-light); }
.add-shadow-inset { box-shadow: var(--shadow-inset); }

.no-bg { background: none; }

.sharp { border-radius: 0px; }


/* Wrap Modifiers */

.no-wrap { white-space: nowrap; } /* Add more modifiers to go along with this one */


/* Color Modifiers */

.dim { filter: opacity(0.75); }

.primary { background: var(--primary); color: var(--btn-dark-text-color); }
.success { background: var(--success); color: var(--btn-dark-text-color); }
.alert { background: var(--alert); color: var(--btn-light-text-color); }
.warning { background: var(--warning); color: var(--btn-light-text-color); }
.danger { background: var(--danger); color: var(--btn-dark-text-color); }
.dark { background: var(--dark); color: var(--btn-light-text-color); }


/* Responsive Layout (Unfinished) */

@media screen and (max-width: 1024px) {

}


/* Censorship! (Redact filler text to make screenshots look nicer)*/

/* .display, .caption, .heading, .subheading, .title, .subtitle, .body { background-color: rgba(0, 0, 0, .2); color: transparent; }
.box > .title, .box > .subtitle { background-color: rgba(0, 0, 0, .2); color: transparent; }

.button span { background: rgba(0, 0, 0, .2); color: transparent; }
.material-icons { background: rgba(0, 0, 0, .2); color: transparent; }

.code span { background: rgba(0, 0, 0, .2); color: transparent; box-decoration-break: clone; } */