Cobalt Blank Canvas by zodiacbadcoderacc2415346346

/* ==UserStyle==
@name         Cobalt Blank Canvas
@version      20240407.03.54
@namespace    https://userstyles.world/user/zodiacbadcoderacc2415346346
@description  a more easily customizable version of my cobalt theme!
@author       zodiacbadcoderacc2415346346
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://cobalt.tools/") {
/*this is my first time doing anything with css so this probably sucks*/ 
/* this was very much helped by chatgpt i am not a good coder */
/* if theres a huge update that causes this to go to crap feel free to update it yourself since im probably not going to be doing anything after this */


/*changelog:
v1.35
yo, i updated it, thats wild
so i made the code a bit cleaner but root can be edited now, the +05 is for cooler looking text (customizable)*/

/*this is the blank canvas version, use the directions directions and change the colors to your liking to create the perfect cobalt for you!*/
/*this might not get updated i might forget im not sure if i do remind me on the cobalt discord server*/

body {
  background: #000; /* this is the main background */ 
  color: #fff; /* this is for the "cobalt" at the front page */ 
  --accent-button: #fff; /* this colors all of the buttons*/ 
    --accent: #878787; /*this effects text i think*/ 
--accent-hover: #fff /* hover color */
--accent-subtext: #fff
}


/*hey if you want a gif or image file as the background you can go on google or whatever, right click any image and click copy image address and then paste it into url, then delete the note thingies above body and below the } */
/*
body {
    background: url() no-repeat;
    background-size: cover;
}
*/

.urgent-text {
    text-shadow: 
        -1px -1px 0 #878787,  
        1px -1px 0 #878787,
        -1px 1px 0 #878787,
        1px 1px 0 #878787;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff /*this colors the top text that shows updates or news*/
}

.switch[data-enabled=true], .popup-tabs .switch[data-enabled=true] {
    color: #000; /*this colors selected button text*/
    background: #4a4a4a!important;  /*this colors the background of the text*/
    cursor: default;
}

.box {
    background: #fff; /*effects the background of the window*/
    color: #000; /*effects the color of selected text in the window*/
    --accent: #000; /*effects the color of unselected text in the window*/
    --accent-highlight: rgb(225, 225, 225, 4%);
    --accent-subtext: rgb(3, 3, 3); /*effects the subtext that explains stuff*/
    --accent-hover: rgb(30, 30, 30);
    --accent-hover-elevated: rgb(48, 48, 48);
    --accent-hover-transparent: rgba(48, 48, 48, .5);
    --accent-button: #4a4a4a; /*effects unselected setting buttons*/
    --accent-button-elevated: rgb(42, 42, 42);
    --glass: rgba(255, 255, 255, .85); /*effects the side borders*/
    --glass-lite: rgba(255, 255, 255, .85); /*effects the main borders*/
    --subbackground: rgb(10, 10, 10);
    --background: rgb(0, 0, 0);
    --background-backdrop: rgba(0, 0, 0, .5);
}

.collapse-list {
    background: #fff; /*this is the background in the list that collapses open in the about section, like supported services*/
}

:root {
    --accent: rgb(255, 255, 255); /*this is what the highlight for the line of text when you select it*/
    --accent-highlight: rgb(110, 110, 110); /*this is a highlight around all the buttons*/
    --accent-subtext: rgb(110, 110, 110);
    --accent-hover: rgb(30, 30, 30);
    --accent-hover-elevated: rgb(48, 48, 48); 
    --accent-hover-transparent: rgba(48, 48, 48, .5);
    --accent-button: rgb(25, 25, 25);
    --accent-button-elevated: rgb(42, 42, 42);
    --glass: rgba(25, 25, 25, .85);
    --glass-lite: rgba(25, 25, 25, .98);
    --subbackground: rgb(10, 10, 10);
    --background: rgb(0, 0, 0);
    --background-backdrop: rgba(0, 0, 0, .5);
}

#logo {
    text-align: center;
    font-size: 1rem;
    height: 2.5rem;
    align-items: center;
    display: flex;
    gap: 0.3rem;
    text-shadow: 
        -1px -1px 0 #878787,  
        1px -1px 0 #878787,
        -1px 1px 0 #878787,
        1px 1px 0 #878787;
}







}