theme.css

/*NOVADUST*/


:root {

    --darkest-blue: #18222b;
    --mid-blue: #273341;
    --light-blue: #303f51;


    --dark-blue: #1d2833;
    --dark-blue-rgb: 29, 40, 51;
    --soft-dark-blue: #2c3a4a;
    --soft-dark-blue-rbg: 44, 58, 74;
    --ocean-blue: #2c4f64;
    --ocean-blue-rgb: 44, 79, 100;
    --bright-blue: #5dcbc3;
    --bright-blue-rbg: 95, 203, 195;
    --percy-blue: #84dca1;
    --percy-blue-rgb: 133, 221, 162;
    --bright-green: #b9e678;
    --bright-green-rgb: 185, 230, 120;
    --soft-yellow: #ffd580;
    --soft-yellow-rgb: 255, 213, 128;
    --bright-yellow: #f8c260;
    --bright-yellow-rgb: 248, 194, 96;
    --bright-orange: #ffa161;
    --bright-orange-rgb: 255, 161, 97;
    --bright-red: #ff695d;
    --bright-red-rgb: 255, 105, 93;
    --bright-purple: #d689e3;
    --bright-purple-rgb: 214, 137, 227;
    --washed-blue: #74859a;
    --washed-blue-rgb: 116, 133, 154;
    --almost-white: #f7f5e9;
    --soft-white: #eeead1;
    --basic-gray: #cfd1d1;
    --blue-gray: #c4d1d1;

}

.theme-dark {

    /*COLORS*/

    /*Surface colors*/
    --background-primary: var(--dark-blue);
    --background-primary-alt: var(--soft-dark-blue);	
    --background-secondary: var(--dark-blue);
    --background-secondary-alt: var(--soft-dark-blue);	

    --background-modifier-hover: var(--mid-blue);
    --background-modifier-active-hover: var(--dark-blue);
    --background-modifier-border: none;	
    --background-modifier-border-hover: none;
    --background-modifier-border-focus: none;	

    --background-modifier-error-rgb: var(--bright-red-rgb);	
    --background-modifier-error: var(--bright-red);
    --background-modifier-error-hover: var(--bright-red);	
    --background-modifier-success-rgb: var(--bright-green-rgb);	
    --background-modifier-success: var(--bright-green);	
    --background-modifier-message: var(--bright-orange);	
    --background-modifier-form-field: var(--light-blue);
    
    /*Exended colors*/ 
    --color-red: var(--bright-red);
    --color-orange: var(--bright-orange);
    --color-yellow: var(--bright-yellow);
    --color-green: var(--bright-green);
    --color-cyan: var(--bright-blue);
    --color-blue: var(--ocean-blue);
    --color-purple: var(--bright-purple);
    --color-pink: var(--bright-orange);

    --color-red-rgb: var(--bright-red-rgb);
    --color-orange-rgb: var(--bright-orange-rgb);
    --color-yellow-rgb: var(--soft-yellow-rgb);
    --color-green-rgb: var(--bright-green-rgb);
    --color-cyan-rgb: var(--percy-blue-rgb);
    --color-blue-rgb: var(--bright-blue-rbg);
    --color-purple-rgb: var(--bright-purple-rgb);
    --color-pink-rgb: var(--bright-orange-rgb);

    /*Interactive colors for elements*/
    --interactive-normal: var(--bright-orange);
    --interactive-hover: rgba(var(--bright-orange-rgb), 0.9);
    --interactive-accent: var(--bright-blue);
    --interactive-accent-hsl: hsl(202.5, 38.89%, 28.24%);
    --interactive-accent-hover:	rgba(var(--ocean-blue-rgb), 0.8); 

    /*Accent color*/
    --accent-h: 140; 
    --accent-s: 56%; 	
    --accent-l: 69%; 	


    /*TEXT*/

    --bold-color: var(--bright-green);
    --code-normal: var(--blue-gray); 
    --italic-color: var(--bright-yellow);
    --italic-weight: bold;
    
    /*Text foreground colors*/
    --text-normal: var(--soft-white);
    --text-muted: var(--basic-gray)	;
    --text-faint: var(--bright-blue); 
    --text-on-accent: var(--ocean-blue);
    --text-on-accent-inverted: var(--ocean-blue);
    --text-error: var(--bright-red);
    --text-success: var(--bright-green);

    /*Text background colors*/
    --text-selection: 	var(--bright-red);
    --text-highlight-bg: rgba(var(--percy-blue-rgb),0.5);


    /*TITLES*/

    --h1-color: var(--bright-red);
    --h2-color: var(--bright-orange);
    --h3-color: var(--bright-yellow);
    --h4-color: var(--bright-green);
    --h5-color: var(--percy-blue);
    --h6-color: var(--bright-blue);

    --h1-size: 2.3em;
    --h2-size: 2.1em;
    --h3-size: 1.9em;
    --h4-size: 1.7em;
    --h5-size: 1.6em;
    --h6-size: 1.5em;


    /* BLOCKS*/

    --blockquote-border-color: var(--percy-blue);
    --blockquote-border-thickness: 0.2em;
    --blockquote-background-color: var(--background-primary-alt);
    

    /*CANVAS*/
	
    --canvas-color: var(--percy-blue-rgb) !important;
    --canvas-card-label-color: 	var(--washed-blue);
    --canvas-dot-pattern: var(--ocean-blue);
    --canvas-color-1: var(--bright-red-rgb);
    --canvas-color-2: var(--bright-orange-rgb);
    --canvas-color-3: var(--soft-yellow-rgb);
    --canvas-color-4: var(--bright-green-rgb);
    --canvas-color-5: var(--bright-blue-rbg);	
    --canvas-color-6: var(--bright-purple-rgb);


    /*CHECKLIST*/

    --checkbox-color: var(--soft-yellow);
    --checkbox-color-hover: rgba(var(--soft-yellow-rgb), 0.8);
    --checkbox-border-color: rgba(var(--soft-yellow-rgb), 0.8); 
    --checkbox-border-color-hover: rgba(var(--soft-yellow-rgb), 0.6);
    --checklist-done-color: var(--washed-blue);
    --checkbox-marker-color: var(--background-primary);
    --checklist-done-decoration: unset;
  

    /*LISTS (UNORDERED)*/

    --list-marker-color: var(--percy-blue);
    --list-marker-color-collapsed: var(--list-marker-color);
    

    /*INDENTATION*/

    --indentation-guide-width: 2px;
    --indentation-guide-color: rgba(var(--ocean-blue-rgb), 0.4);
    --indentation-guide-width-active: 2px;
    --indentation-guide-color-active: rgba(var(--ocean-blue-rgb), 1);


    /*TABS*/

    --tab-container-background: var(--background-primary-alt);
    --tab-radius: 5px;
    --tab-radius-active: 5px;
    --tab-curve: none; /*la mierdecilla de la curva de las tabs activas*/
    --tab-text-color: var(--washed-blue); /*para cuando sales, las tabs no activas*/


    /*LINKS*/

    --link-color: var(--bright-orange);
    --link-color-hover: rgba(var(--bright-orange-rgb), 0.8);
    --link-unresolved-color: var(--basic-gray);	 
    --link-external-color: var(--bright-blue);
    --link-external-color-hover: rgba(var(--bright-blue-rbg), 0.8);


    /*CALLOUTS*/

    --callout-border-width: 2px;
    --callout-border-opacity: 0.05;
    --callout-radius: 10px;
    --callout-title-color: none;

    --callout-bug: var(--bright-purple-rgb);
    --callout-default: var(--bright-blue-rbg);
    --callout-error: var(--bright-red-rgb);
    --callout-example: var(--bright-purple-rgb);
    --callout-fail: var(--bright-red-rgb);
    --callout-important: var(--bright-orange-rgb);
    --callout-info: var(--bright-blue-rbg);
    --callout-question: var(--soft-yellow-rgb);
    --callout-success: var(--bright-green-rgb);
    --callout-summary:var(--washed-blue-rgb);
    --callout-tip: var(--bright-orange-rgb);
    --callout-todo: var(--bright-blue-rbg);
    --callout-warning: var(--bright-red-rgb);
    --callout-quote: var(--soft-yellow-rgb);


    /*TAGS*/

    --tag-background: var(--ocean-blue);
    --tag-background-hover: var(--light-blue);
    --tag-color: var(--bright-green);
    --tag-color-hover: var(--percy-blue);
    --tag-border-color: none;
    --tag-border-width: 0px;
    --tag-radius: 15px;
    --tag-weight: 600;


    /*SCROLLBAR*/
    
    --scrollbar-thumb-bg: var(--mid-blue);
    --scrollbar-active-thumb-bg: var(--percy-blue);


    /*GRAPHS*/

    --graph-text: var(--washed-blue);
    --graph-line: var(--light-blue);
    --graph-node: var(--soft-yellow);
    --graph-node-unresolved: var(--washed-blue);
    --graph-node-focused: var(--bright-orange);
    --graph-node-tag: var(--bright-blue);
    --graph-node-attachment: var(--bright-red);


    /*CODE*/

    --code-comment: var(--washed-blue);


    /*RANDOM SHIT*/

    --divider-color: var(--background-primary-alt); 
    --file-header-active: var(--almost-white);
    --hr-color: var(--percy-blue);
    --icon-color-focused: var(--bright-blue);
    --icon-color-hover: var(--soft-yellow);
    --ribbon-background: var(--background-primary-alt);
    --nav-collapse-icon-color: var(--percy-blue);
    --slider-track-background: var(--ocean-blue);

}


/*LAYOUT*/

div.cm-line {
    text-align: justify;
}

.workspace-tab-container {
    margin: 7px;
    border-radius: 20px;
}

.workspace-tabs { 
    background-color: var(--background-primary-alt);
}

.side-dock-actions {
    background-color: var(--background-primary) !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    margin: 0px !important;
    padding: 4px !important;
    margin-top: 7px !important;
}

.side-dock-settings {
    background-color: var(--background-primary) !important;
    border-top-right-radius: 10px !important;
    padding: 4px;
}

.workspace-ribbon {
    padding: 0px !important;
    background-color: var(--background-primary-alt) !important;
}

.workspace-tab-header-container {
    background-color: var(--background-primary-alt) !important;
}


/*TABLE + CALENDAR*/

table {
    overflow: hidden !important;
    margin: auto;
    border-radius: 5px;
    border-collapse: collapse;
}

th {
    border-radius: 0px !important;
    padding: 5px !important;
    background-color: var(--bright-red) !important; 
}

td {
    border-radius: 0px !important;
    background-color: var(--light-blue) !important; 
}

tr {
    border-bottom: 2px solid var(--background-primary);
}

.day.today {
    --color-text-today: var(--bright-blue) !important;
    font-weight: 600;
    --color-background-day: var(--mid-blue) !important;
}

th.svelte-pcimu8 {
    color: var(--soft-white) !important;
}


/*LISTS(ORDERED)*/

.list-number {
    color: var(--bright-blue);
}

ol > :nth-child(6n + 1)::marker {
    color: var(--bright-red) !important;
}
ol > :nth-child(6n + 2)::marker {
    color: var(--bright-orange) !important;
}
ol > :nth-child(6n + 3)::marker {
    color: var(--soft-yellow) !important;
}
ol > :nth-child(6n + 4)::marker {
    color: var(--bright-green) !important;
}
ol > :nth-child(6n + 5)::marker {
    color: var(--percy-blue) !important;
}
ol > :nth-child(6n + 6)::marker {
    color: var(--bright-blue) !important;
}


/*BUTTONS & STUFF*/

button.mod-cta { 
    background-color: var(--ocean-blue);
    color: var(--almost-white);
}

button {
    color: var(--almost-white);
}

.canvas-control-item {
    color: var(--almost-white);
}


/*MEDIA*/

iframe {
    border-radius: 10px;
    width: 100%;
    height: 500px;
}


img {
    border-radius: 10px;
}

video {
    border-radius: 10px;
}


/*MENU BOXES*/

.community-item {
    background-color: var(--background-primary-alt) !important;
}

.community-item:hover {
    background-color: var(--light-blue) !important;
}

.community-item.is-selected, .community-item.is-selected > * {
    color: var(--soft-white) !important;
    background-color: var(--ocean-blue) !important;
}


/* STUFF*/

.token.bold, .token.bold > * {
    color: var(--bold-color) !important;
}

.checkbox-container {
    background-color: var(--ocean-blue);
}

.canvas-control-item.is-disabled svg {
    color: var(--ocean-blue) !important;
}

.vertical-tab-nav-item.is-active {
    background-color: var(--ocean-blue) !important;
    color: var(--almost-white);
}

.cm-lineNumbers { 
    color: var(--light-blue);
}

input[type=checkbox]:checked:hover {
    border-color: rgba(var(--soft-yellow-rgb), 0.1) !important;
}

em {
    font-weight: var(--italic-weight);
}

.cm-strong {
    color: var(--bold-color) !important;
}