Neo Brutalism Theme

theme.css

/* filepath: /Users/thu_nx/workspace/tools/notes/neo-brutalism-theme.css */

body {
    /* Tag styling */
    --tag-border-color-hover: rgba(255, 105, 180, 1);
    --tag-border-width: 3px;
    --tag-padding-x: 0.8em;
    --tag-padding-y: 0.3em;
    --tag-radius: 0px;
    
    /* Window frame */
    --titlebar-background: var(--background-secondary);
    --titlebar-background-focused: var(--background-secondary-alt);
    --titlebar-border-width: 4px;
    --titlebar-border-color: var(--background-modifier-border);
    --titlebar-text-color: var(--text-muted);
    --titlebar-text-color-focused: var(--text-normal);
    --titlebar-text-weight: var(--font-bold);
    
    /* Toggles */
    --toggle-border-width: 3px;
    --toggle-width: 45px;
    --toggle-radius: 4px;
    --toggle-thumb-color: #ffffff;
    --toggle-thumb-radius: 2px;
    --toggle-thumb-height: 20px;
    --toggle-thumb-width: 20px;
    --toggle-s-border-width: 3px;
    --toggle-s-width: 38px;
    --toggle-s-thumb-height: 17px;
    --toggle-s-thumb-width: 17px;
    
    /* Vault name */
    --vault-name-font-size: var(--font-ui-medium);
    --vault-name-font-weight: var(--font-bold);
    --vault-name-color: var(--text-normal);
    
    /* Workspace */
    --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.8);
    
    /* Color mappings ------------------------ */
    /* Accent HSL values */
    --accent-h: var(--accent-h-theme);
    --accent-s: var(--accent-s-theme);
    --accent-l: var(--accent-l-theme);
    
    /* Backgrounds */
    --background-primary: var(--color-base-00);
    --background-primary-alt: var(--color-base-10);
    --background-secondary: var(--color-base-20);
    --background-modifier-hover: rgba(var(--rgb-hover), var(--background-modifier-hover-alpha));
    --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.25);
    --background-modifier-border: var(--color-base-30);
    --background-modifier-border-hover: var(--color-base-35);
    --background-modifier-border-focus: var(--color-accent);
    --background-modifier-error-rgb: var(--color-red-rgb);
    --background-modifier-error: var(--color-red);
    --background-modifier-error-hover: var(--color-red);
    --background-modifier-success-rgb: var(--color-green-rgb);
    --background-modifier-success: var(--color-green);
    --background-modifier-message: rgba(0, 0, 0, 0.9);
    
    /* Inputs */
    --background-modifier-form-field: var(--color-base-25);
    
    /* Text */
    --text-normal: var(--color-base-100);
    --text-muted: var(--color-base-70);
    --text-faint: var(--color-base-50);
    --text-on-accent: white;
    --text-on-accent-inverted: black;
    --text-error: var(--color-red);
    --text-success: var(--color-green);
    --text-selection: hsla(var(--color-accent-hsl), 0.25);
    --text-highlight-bg: rgba(255, 213, 0, 0.6);
    --text-accent: var(--color-accent);
    --text-accent-hover: var(--color-accent-2);
    --interactive-normal: var(--color-base-00);
    --interactive-hover: var(--color-base-10);
    --interactive-accent-hsl: var(--color-accent-hsl);
    --interactive-accent: var(--color-accent-1);
    --interactive-accent-hover: var(--color-accent-2);
}

.theme-dark {
    color-scheme: dark;
    --highlight-mix-blend-mode: lighten;
    --mono-rgb-0: 0, 0, 0;
    --mono-rgb-100: 255, 255, 255;
    --rgb-hover: 255, 105, 180;
    
    /* Neo-brutalism color palette */
    --color-red-rgb: 255, 75, 75;
    --color-red: #FF4B4B;
    --color-green-rgb: 72, 240, 120;
    --color-green: #48F078;
    --color-orange: #FF914D;
    --color-yellow: #FFDE59;
    --color-cyan: #5CE1E6;
    --color-blue: #5271FF;
    --color-purple: #C04CFD;
    --color-pink: #FF69B4;

    /* Base colors */
    --color-base-00: #1C1C1C;
    --color-base-10: #2A2A2A;
    --color-base-20: #353535;
    --color-base-25: #252525;
    --color-base-30: #494949;
    --color-base-35: #555555;
    --color-base-40: #606060;
    --color-base-50: #7F7F7F;
    --color-base-60: #999999;
    --color-base-70: #B5B5B5;
    --color-base-100: #FFFFFF;

    /* Accent colors */
    --accent-h-theme: 330;
    --accent-s-theme: 100%;
    --accent-l-theme: 70%;
    --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
    --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));

    /* Other theme variables */
    --background-secondary-alt: var(--color-base-25);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.5);
    --background-modifier-cover: rgba(10, 10, 10, 0.4);
    --text-highlight-bg-active: rgba(255, 145, 77, 0.6);
    --text-selection: hsla(var(--interactive-accent-hsl), 0.5);
    --input-shadow: inset 0 0 0 3px #494949;
    --input-shadow-hover: inset 0 0 0 3px var(--color-base-70);
    --shadow-s: 5px 5px 0px #000000;
    --shadow-l: 8px 8px 0px #000000;

    /* Code blocks */
    --inline-code-background: rgba(255, 105, 180, 0.2);
    
    /* Headers */
    --h-color-theme: var(--color-yellow);
    --h1-color-theme: var(--color-yellow);
    --h2-color-theme: var(--color-green);
    --h3-color-theme: var(--color-cyan);
    --h4-color-theme: var(--color-blue);
    --h5-color-theme: var(--color-purple);
    --h6-color-theme: var(--color-pink);
    
    /* UI */
    --background-modifier-hover-alpha: 0.2;
    --color-btn-primary-bg: var(--color-pink);
    --color-btn-primary-hover-bg: #FF8AC4;

    /* Kanban colors */
    --kanban-background: var(--background-primary);
    --kanban-lane-background: var(--background-secondary-alt);
    --kanban-item-background: var(--background-primary-alt);
    --kanban-lane-border: #494949;
    --kanban-lane-count: #494949;
    --kanban-options-btn: var(--color-base-30);
}

.theme-light {
    color-scheme: light;
    --highlight-mix-blend-mode: darken;
    --mono-rgb-0: 255, 255, 255;
    --mono-rgb-100: 0, 0, 0;
    --rgb-hover: 255, 105, 180;
    
    /* Neo-brutalism color palette */
    --color-red-rgb: 235, 50, 50;
    --color-red: #EB3232;
    --color-green-rgb: 39, 203, 88;
    --color-green: #27CB58;
    --color-orange: #FF7433;
    --color-yellow: #FFCD29;
    --color-cyan: #33C7CC;
    --color-blue: #3557EB;
    --color-purple: #A029F0;
    --color-pink: #FF4299;

    /* Base colors */
    --color-base-00: #FFFFFF;
    --color-base-05: #FCFCFC;
    --color-base-10: #F2F2F2;
    --color-base-20: #E6E6E6;
    --color-base-25: #EEEEEE;
    --color-base-30: #DADADA;
    --color-base-35: #CCCCCC;
    --color-base-40: #BBBBBB;
    --color-base-50: #989898;
    --color-base-60: #707070;
    --color-base-70: #505050;
    --color-base-100: #121212;

    /* Accent colors */
    --accent-h-theme: 330;
    --accent-s-theme: 100%;
    --accent-l-theme: 60%;
    --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 5%));
    --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));

    /* Other theme variables */
    --background-secondary-alt: var(--color-base-05);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --background-modifier-cover: rgba(220, 220, 220, 0.4);
    --text-highlight-bg-active: rgba(255, 116, 51, 0.6);
    --input-shadow: inset 0 0 0 3px #DADADA;
    --input-shadow-hover: inset 0 0 0 3px #BBBBBB;
    --shadow-s: 5px 5px 0px #000000;
    --shadow-l: 8px 8px 0px #000000;

    /* Code blocks */
    --inline-code-background: rgba(255, 105, 180, 0.15);
    
    /* Headers */
    --h-color-theme: var(--color-pink);
    --h1-color-theme: var(--color-pink);
    --h2-color-theme: var(--color-purple);
    --h3-color-theme: var(--color-blue);
    --h4-color-theme: var(--color-cyan);
    --h5-color-theme: var(--color-green);
    --h6-color-theme: var(--color-orange);
    
    /* UI */
    --background-modifier-hover-alpha: 0.32;
    --color-btn-primary-bg: var(--color-pink);
    --color-btn-primary-hover-bg: #FF69B4;

    /* Kanban colors */
    --kanban-background: var(--background-primary);
    --kanban-lane-background: var(--background-primary-alt);
    --kanban-item-background: var(--background-primary);
    --kanban-lane-border: #DADADA;
    --kanban-lane-count: #DADADA;
    --kanban-options-btn: var(--background-primary-alt);
}

/* Tables */
.markdown-rendered td, 
.markdown-rendered th {
    padding: var(--size-2-3) var(--size-4-3);
    border: 3px solid var(--color-base-30);
} 
.markdown-rendered th {
    text-align: center;
    background-color: var(--color-pink);
    color: white;
    font-weight: bold;
}
.markdown-rendered tbody tr:nth-child(2n) {
    background-color: var(--background-secondary);
}

/* Buttons */
button {
    border: 3px solid #000;
    border-radius: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: var(--shadow-s);
    font-weight: bold;
}
button:hover {
    cursor: var(--cursor-link);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px #000000;
}
button.mod-cta {
    background-color: var(--color-btn-primary-bg);
    color: var(--text-on-accent);
    border: 3px solid #000;
    padding: 6px 12px;
}
button.mod-cta:hover {
    background-color: var(--color-btn-primary-hover-bg);
}
button:active, button.mod-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px #000000;
}

/* Callout */
body.callout-on {
    --callout-radius: 0;
    --callout-border-width: 3px;
    --callout-padding: 0 1em;
}
body.callout-on .callout {
    border: 3px solid var(--color-base-30);
    background-color: rgba(var(--rgb-hover), 0.07);
    box-shadow: var(--shadow-s);
}
body.callout-on .callout-content p {
    margin: 0.3em 0;
}

/* Headers */
body.headers-one-color {
    --h1-color: var(--h-color-theme);
    --h2-color: var(--h-color-theme);
    --h3-color: var(--h-color-theme);
    --h4-color: var(--h-color-theme);
    --h5-color: var(--h-color-theme);
    --h6-color: var(--h-color-theme);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    letter-spacing: -0.02em;
}

/* Kanban-common */
.kanban-plugin {
    --lane-width: 348px;
}
.kanban-plugin__lane {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-s);
}
.kanban-plugin__item {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #000;
    margin-bottom: 15px !important;
}
.kanban-plugin__item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.kanban-plugin__lane-header-wrapper {
    background-color: var(--color-pink) !important;
    color: white !important;
    border-bottom: 3px solid #000 !important;
}
body.theme-light .kanban-plugin__lane-items>div {
    box-shadow: 4px 4px 0 #000;
}

/* Inputs and form elements */
input[type='text'], 
input[type='search'], 
input[type='email'], 
input[type='password'], 
input[type='number'],
textarea {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 8px;
}

input[type='text']:focus, 
input[type='search']:focus, 
input[type='email']:focus, 
input[type='password']:focus, 
input[type='number']:focus,
textarea:focus-visible, 
input[type='text']:focus-visible, 
input[type='search']:focus-visible, 
input[type='email']:focus-visible, 
input[type='password']:focus-visible, 
input[type='number']:focus-visible {
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
    transform: translate(-2px, -2px);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

select, .dropdown {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

select:focus, .dropdown:focus {
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
    transform: translate(-2px, -2px);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Checkboxes */
input[type="checkbox"] {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
}

/* Inline code block */
.markdown-rendered :not(pre) > code {
    background-color: var(--inline-code-background);
    padding: 0.2em 0.4em;
    border-radius: 0;
    border: 2px solid #000;
    color: var(--text-normal);
    font-weight: bold;
}

/* Code blocks */
pre {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-s);
}

/* Links */
a {
    color: var(--color-pink);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(transparent 0%, transparent calc(50% - 3px), rgba(255, 105, 180, 0.35) calc(50% - 3px), rgba(255, 105, 180, 0.35) 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    transition: background-position 120ms ease;
}
a:hover {
    text-decoration: none;
    background-position: 0 100%;
}

/* Tabs */
.workspace-tab-header {
    border: 2px solid #000;
    border-radius: 0;
    font-weight: bold;
    margin-right: 5px;
}
.workspace-tab-header.is-active {
    background-color: var(--color-pink);
    color: white;
}
.workspace-tab-header:hover {
    background-color: var(--color-base-10);
    transform: translateY(-2px);
    transition: transform 0.1s ease;
}

/* Sidebar items */
.nav-file, .nav-folder {
    border-left: 3px solid transparent;
    transition: border-left 0.1s ease, background-color 0.1s ease;
}
.nav-file:hover, .nav-folder:hover {
    border-left: 3px solid var(--color-pink);
    background-color: var(--background-modifier-hover);
}
.nav-file-title.is-active, .nav-folder-title.is-active {
    background-color: rgba(var(--rgb-hover), 0.2);
    border-left: 3px solid var(--color-pink);
    font-weight: bold;
}

/* Tags */
a.tag {
    background-color: rgba(var(--rgb-hover), 0.1);
    border: 2px solid var(--color-pink);
    border-radius: 0;
    color: var(--text-normal);
    font-weight: bold;
    padding: 2px 6px;
    transition: background-color 0.1s ease, transform 0.1s ease;
}
a.tag:hover {
    background-color: rgba(var(--rgb-hover), 0.2);
    transform: translateY(-2px);
}

/* Underline for the top level headers */
body.h1-underline h1, body.h1-underline.markdown-rendered h1 {
    padding-bottom: .3em;
    border-bottom: 3px solid var(--color-base-40);
}
body.h2-underline h2, body.h2-underline.markdown-rendered h2 {
    padding-bottom: .3em;
    border-bottom: 3px solid var(--color-base-40);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-track {
    background-color: var(--background-primary);
    border: 2px solid var(--color-base-30);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-pink);
    border: 2px solid #000;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-btn-primary-hover-bg);
}

/* Modals and Popups */
.modal {
    border: 3px solid #000;
    border-radius: 0;
    box-shadow: var(--shadow-l);
}
.modal-bg {
    backdrop-filter: blur(5px);
}
.modal-title {
    background-color: var(--color-pink);
    color: white;
    font-weight: bold;
    border-bottom: 3px solid #000;
}
.suggestion-container {
    border: 3px solid #000;
    border-radius: 0;
    box-shadow: var(--shadow-s);
}

/* Status bar */
.status-bar {
    background-color: var(--color-base-20);
    border-top: 3px solid #000;
    font-weight: bold;
}

/* Lists */
ul li::marker {
    color: var(--color-pink);
}
ol li::marker {
    color: var(--color-pink);
    font-weight: bold;
}

/* Blockquotes */
blockquote {
    border-left: 5px solid var(--color-pink);
    background-color: rgba(var(--rgb-hover), 0.1);
    padding: 1em;
    margin: 1em 0;
    box-shadow: var(--shadow-s);
}