a more easily customizable version of my cobalt theme!
Cobalt Blank Canvas by zodiacbadcoderacc2415346346
Details
Authorzodiacbadcoderacc2415346346
LicenseNo License
Categorycobalt.tools
Created
Updated
Size4.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
README: you have to customize colors by opening the stylus menu and clicking the pencil icon that is corresponding to the style itself, then you can change the hex color values and background in there, there are further instructions within there
Source code
/* ==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;
}
}