/* This file defines CSS variables for different color themes on the site. There are currently two themes defined - 'main' and 'grey'. More themes can be added by defining new CSS rules. To use a theme, add the 'theme' attribute to the tag, e.g. */ @font-face { font-family: "bone"; src: url("../media/nasalization-rg.otf") format("opentype"); } :root { --font: Ubuntu, sans-serif; --background-filter: blur(3px) brightness(80%); --bg: #000000; --alt: rgb(255, 255, 255); --logo: #ffffff; --button: #303030; --border: var(--button) !important; --textcolor: #ffffff; } body[theme="new"] { --background-filter: blur(3px) brightness(80%); --textcolor: #fff; --alt: rgb(135, 51, 245); --button: rgb(131, 36, 255); --bg: ; --rounded: 30.4px; --logo: #aa09ac; --rounded2: 10px; background: hsla(256, 100%, 43%, 1); background: linear-gradient( 180deg, hsla(256, 100%, 43%, 1) 0%, hsla(280, 99%, 50%, 1) 100% ); background-repeat: no-repeat; background-attachment: fixed; height: 100%; } body[theme="default"] { --background-filter: blur(3px) brightness(80%); --bg: #000000; --alt: rgb(255, 255, 255); --logo: #ffffff; --button: #303030; --textcolor: #ffffff; .st0 { fill: rgb(93, 0, 255) !important; } .st1 { fill: rgb(75, 0, 206) !important; } } body[theme="new"] .card { background: var(--background-filter); backdrop-filter: var(--background-filter); } body[theme="grey"] { --background-filter: blur(3px) brightness(80%); --textcolor: #fff; --alt: #333333; --logo: #888888; --button: rgb(56, 56, 56); --bg: #141414; --rounded: 30.4px; --rounded2: 10px; } .st0 { fill: var(--alt) !important; } .st1 { fill: var(--button) !important; } body[theme="greyblack"] { --background-filter: blur(3px) brightness(80%); background: rgb(106, 97, 97); --logo: #888888; background: linear-gradient( 156deg, rgba(106, 97, 97, 1) 0%, rgba(0, 0, 0, 1) 100% ); --bg: rgb(106, 97, 97); --alt: rgba(27, 27, 27, 0.5); --button: #707070; --textcolor: #fff; background-attachment: fixed; } body[theme="ghost"] { --background-filter: blur(3px) brightness(80%); background: rgb(0, 0, 0); background: linear-gradient( 153deg, rgba(0, 0, 0, 1) 0%, rgba(149, 43, 43, 1) 100% ); --bg: rgb(0, 0, 0); --textcolor: #fff; --button: rgb(90, 48, 48); --logo: #ffffff; --alt: #00000054; background-attachment: fixed; } /* body[theme="yourthemename"] { --background-filter: blur(3px) brightness(80%); --bg: #00b6ad4b; --alt: rgba(27, 27, 27, 0.5); --button: #444444; --textcolor: #fff; } */ body[theme="bone"] { --background-filter: blur(3px) brightness(80%); --logo: #888888; --background-filter: blur(3px) brightness(80%); font-family: "bone" !important; --bg: #000; --textcolor: #fff; --button: #1b1b1b; --alt: rgb(56, 56, 56); --border: var(--button); } body[theme="bone"] * { font-family: "bone"; } body[theme="bone"] i { font-family: "Font Awesome 6 Pro"; } body[theme="gb"] { --background-filter: blur(3px) brightness(80%); --bg: #4a4e69; --logo: var(--button); --textcolor: #f2e9e4; --button: #22223b; --alt: rgb(8, 11, 43); --border: var(--button); } body[theme="gg"] { --background-filter: blur(3px) brightness(80%); --bg: #2f3e46; --textcolor: #cad2c5; --alt: #48606d; --button: rgb(94, 153, 155); --border: var(--button); --logo: var(--logo); } body[theme="brown"] { --background-filter: blur(3px) brightness(80%); --bg: #463f3a; --logo: var(--button); --textcolor: #f4f3ee; --button: #8a817c; --alt: rgb(56, 56, 56); --border: var(--button); } body[theme="dg"] { --background-filter: blur(3px) brightness(80%); --bg: #293241; --textcolor: #e0fbfc; --button: #ee6c4d; --alt: #f08f77; --border: var(--button); } body[theme="moon"] { --background-filter: blur(3px) brightness(80%); --bg: #22223b; --textcolor: #f2e9e4; --button: #4a4e69; --alt: #37375f; --border: var(--button); } body[theme="red"] { --background-filter: blur(3px) brightness(80%); --bg: #a4161a; --textcolor: #ffffff; --button: #660708; --alt: rgb(71, 0, 0); --border: var(--button); } body[theme="sblue"] { --background-filter: blur(3px) brightness(80%); --bg: #001f54; --textcolor: #fefcfb; --alt: #034078; --button: rgb(0, 72, 180); --border: var(--button); } body[theme="candy"] { --background-filter: blur(3px) brightness(80%); --bg: #bdb2ff; --textcolor: #fefcfb; --button: #ffc6ff; --alt: rgb(218, 151, 250); --border: var(--button); } body[theme="yellow"] { --bg: #fff248; --logo: var(--button); --button: #8a8701; --alt: rgb(119, 111, 0); --textcolor: #000; --rounded: 0px !important; --rounded2: 0px !important; } body[theme="yellow"] .btn { border-radius: 0px; } body[theme="yellow"] #particles-js { filter: invert(100%); } body[theme="light"] { --bg: #fff; --textcolor: #000; --alt: #222121; --button: #000; } body[theme="light"] #particles-js { filter: invert(100%); } body[theme="light"] input[type="text"], body[theme="light"] .search-right, body[theme="light"] button, body[theme="light"] select { background-color: transparent !important; border: #000 1px solid; } body[theme="mocha"] { --bg: #1e1e2e; --logo: var(--button); --button: #caa6f7; --textcolor: #cdd6f4; --alt: #45475a; --rounded: 40px !important; --rounded2: 40px !important; } body[theme="orange"] { --bg: #000; --button: rgb(255, 166, 0); --alt: #000000; --logo: orange; } body[theme="orange"] .st0 { fill: var(--button) !important; } body[theme="youtube-dark"] { --bg: #000; --button: red; --logo: red; --alt: rgb(185, 0, 0); --textcolor: #fff; } body[theme="youtube-dark"] .nav, body[theme="orange"] .nav { border: 2px solid var(--button); } [theme="bone"] h1, [theme="bone"] a, [theme="bone"] select, [theme="bone"] input { font-family: "bone" !important; } body[theme="3kh0"] { --bg: #121212; --alt: #1caa50; --logo: rgb(3, 156, 79) 55e; --button: #22c55e; --textcolor: #fff; } body[theme="artclass"] { --bg: #1a2023; --alt: #0567a3; --logo: #0284d4; --button: #0284d4; --textcolor: #fff; }