Skip to content

OP.GG (Darker) by zaltroscrown

Screenshot of OP.GG (Darker)
Write a review Install Get Stylus

Details

Authorzaltroscrown

LicenseNo License

Categoryop.gg

Created

Updated

Size41 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

An even darker theme for op.gg by Zaltros Crown.

Notes

If you encounter anything you don’t like and would like to have changed or would like for me to make a dark theme for a different site please contact me on zaltros.work@gmail.com or over on Discord - zaltroscrownwork

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         OP.GG (Darker)
@version      20231215.15.07
@namespace    userstyles.world/user/zaltroscrown
@description  An even darker theme for op.gg by Zaltros Crown.
@author       zaltroscrown
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.op.gg/") {
/*//Adds//*/

html body div#__next div#content-header div.css-kr2gqb.eioz3425 div.wrapper div#vm-av.vm-placement.css-vnx270.e17e77tq5, html body div#__next div#banner-container.css-1ee8xg9.e17e77tq12, html body div.vm-skin.vm-skin-right, html body div.vm-skin.vm-skin-left, html body div#__next div#content-container.css-8whjbz.e8nboil0 div div.css-1pirsze.e17e77tq9, html body div#__next div.css-wlca88.e17e77tq7, html body div#__next div#content-container.css-8whjbz.e8nboil0 div.css-150oaqg.e1shm8tx0 div.css-164r41r.e1r5v5160 li.css-1qq23jn.e1iiyghw3 div.css-1qokdr2.e17e77tq8, .css-1d2nav3 .wrapper .e17e77tq5, html body div#__next div#content-header div.css-y2r7n3.eioz3425 div.wrapper div#vm-av.vm-placement.css-vnx270.e17e77tq5, .css-3jn9p9, .css-1dehupl, .css-zgeufe, .ns-a0u2f-l-tower, .css-1pirsze, .css-19606bc .wrapper > div + div, .css-1qokdr2, .css-1ee8xg9, .css-z3i874 .wrapper > div + div,.css-wyjug3, .css-wlca88, .css-1ahw3km, .css-1gjl1u0 .wrapper > div + div, .css-xwuiww, .css-vnx270, .css-85l9ui > :last-of-type, .css-85l9ui > :first-of-type, .css-1vc3ec5, .vm-footer-content, .css-ytp8yd, .css-1qccar5, .css-y13hw7, .css-160wr62 .wrapper > div + div, .css-suuv7k,.css-1hzbub9,.css-1r57q1t, .css-11grdfo .wrapper > div + div, .css-1luqd1q, .css-aqnik6 .wrapper > div + div, .css-8kcwtz, .css-127c483, .css-1d4wmq3{
	display: none!important;
}
}

@-moz-document url-prefix("https://www.op.gg/") {
/*//Header//*/
:root {
    --bg1: #111;
    --bg2: #191919;
    --bg3: #252525;
    --bg4: #333;
    --border: #444;
    --fg: #999999;
	--gray400: #999999!important; /*"Search a Champion" cant find the element*/
	--gray500: #999999!important; /*Commonly used text color*/
	--gray600: #999999!important; /*More commonly used text*/
	--gray700: #999999!important; /*More commonly used text 2*/
	--fg-extra: #fff;
    --button-hover: #666;
    --scroll: #252525;
    --scroll-blank: #151515;
	--defeat: #ff5859;
	--victory: #2DEB90;
	--remake: #888;
	--rank: #5383E8;
	
}
    body, html {
        scrollbar-color: var(--scroll) var(--scroll-blank);
    }

/*      Header     */
.css-1kmtcjv nav ul li:nth-of-type(1), .css-1kmtcjv{ /*The header with the search bar.*/
    background-color: var(--bg1);
    color: var(--fg);
	border-color: var(--border);
}
.css-1kmtcjv nav ul li > a, .css-1kmtcjv nav ul li > span, .css-1kmtcjv nav ul li:nth-of-type(1) > span, .css-1djc818, .css-b3s17d{ /*Text color for all of the options there*/
    color: var(--fg);
}
.css-1kmtcjv nav ul li > a:hover{
    background-color: var(--bg4);
    color: var(--fg);
}
[data-theme="dark"] .css-zx4hnl, .css-1i10ah0 > img, .css-1d1j04j button[type="submit"], .css-1d0m9ic, .css-zx4hnl{
    filter: grayscale(100%);
}
.css-6c6v7u{ /*The log in button*/
    background-color: var(--bg3);
    color: var(--fg);
}
.css-6c6v7u:hover{
    background-color: var(--bg4);
    color: var(--fg);
}
.css-1kmtcjv .logo{
	background-color: var(--bg1);
}
.css-1nh7cj8 > div > button + div{ /*Language selector drop down*/
	background-color: var(--bg2)!important;
}
.css-1nh7cj8 > div > button + div > button{
	color: var(--fg)!important;
}
.css-1nh7cj8 > div > button + div > button:hover{
	background-color: var(--bg3)!important;
}

/*/// Search Box at the Header ///*/

.css-1961c94{ /*Background for Search bar*/
	background-color: var(--bg3)!important;
}
.css-1f7picx{ /*The ".GG" Confirmation button.*/
	border-radius: 20px!important;
	background-color: var(--bg2)!important;
	border: solid 1px var(--border)!important;
}
.desktop-header .css-1f7picx > button[type="submit"]{
	filter: grayscale(100%)!important;
}
.desktop-header .css-1f7picx > button[type="submit"]:hover{
	background-color: var(--bg3)!important;
	border-radius: 20px!important;
}
.css-1f7picx input{ /*The Search Area*/
	background-color: var(--bg2)!important;
	color: var(--fg)!important;
}
.css-1r43vte > div > button{ /*The Region Selection button*/
	background-color: var(--bg2)!important;
	border-bottom-left-radius: 20px!important;
	border-top-left-radius: 20px!important;
}
.css-1r43vte > div > button + div > button{ /*Server Selection drop down*/
	border-color: var(--border)!important;
	background-color: var(--bg3)!important;
}
.css-1r43vte > div > button + div > button:hover{ /*Server Selection drop down hover*/
	background-color: var(--bg4)!important;
}
.css-1f7picx button > span{ /*Selected Server name*/
	color: var(--fg)!important;
}
.css-1r43vte > div > button::after{
	filter: grayscale(100%)!important;
}
.css-vcolox, .css-143qkf1{ /*Recent Searches and Favorites background*/
	background-color: var(--bg3)!important;
}
.css-119naj3:hover, .css-20yflr:hover{
	background-color: var(--bg4)!important;
}
[data-theme="dark"] .css-c6ufcg, .css-c6ufcg{ /*Recent Searches/Favorites currently selected*/
	background-color: var(--bg4)!important;
}
[data-theme="dark"] .css-1g3eq2,.css-1g3eq2{ /*Recent Searches/Favorites not selected*/
	background-color: var(--bg3)!important;
}
.css-149bjbf .summoner .region, .css-ftnhmd .summoner .region{ /*Region icons in search bar*/
	filter: grayscale(100%)brightness(80%)!important
}
.css-149bjbf .favorite-summoner-chk input:checked + label{ /*Favorite buttons*/
	filter: grayscale(100%)!important;
}
.css-xjq157{ /*Searching for spmething*/
	background-color: var(--bg3)!important;
}
.css-xjq157 .head{
	color: var(--fg)!important;
	border-color: var(--border)!important;
}
.css-12ed8hc:hover{
	background-color: var(--bg4)!important;
}

.css-yam19l .custom-placeholder__tagline{ /* Players Tag */
	background-color: var(--bg3)!important;
}
/*/// The Bar containing "Home" "Champions" "Arena" etc ///*/

.css-7rk75k{ /*Currently selected option*/
	color: var(--fg-extra)!important;
	border-color: var(--fg-extra)!important;
}
.css-q3uz41, .css-1af1vos{ /*Non selected options*/
	color: var(--fg)!important;
}
.css-4llake{
	background-color: var(--bg2)!important;
	border-color: var(--border)!important;
}

/*/// Patch Notes ///*/
.css-iiwlde{ /*The patch notes button*/
	background-color: var(--bg3)!important;
	color: var(--fg)!important;
}
.css-iiwlde:hover{ /*The patch notes button hover*/
	background-color: var(--bg4)!important;
	color: var(--fg)!important;
}
/*/// Notifications ///*/
.css-iknk2{
	display: none;
}
}

@-moz-document url-prefix("https://www.op.gg/") {
/*//Home Page//*/
:root {
    --bg1: #111;
    --bg2: #191919;
    --bg3: #252525;
    --bg4: #333;
    --border: #444;
    --fg: #999999;
	--gray400: #999999!important; /*"Search a Champion" cant find the element*/
	--gray500: #999999!important; /*Commonly used text color*/
	--gray600: #999999!important; /*More commonly used text*/
	--gray700: #999999!important; /*More commonly used text 2*/
	--fg-extra: #fff;
    --button-hover: #666;
    --scroll: #252525;
    --scroll-blank: #151515;
	--defeat: #ff5859;
	--victory: #2DEB90;
	--remake: #888;
	--rank: #5383E8;
	
}
    body, html {
        scrollbar-color: var(--scroll) var(--scroll-blank);
    }
/* ///  Body for Home /// */

body{
    background-color: var(--bg2);
}

/*/// Search Box ///*/
.css-9px0pz, .css-9px0pz label + input, .css-a9yqak > div > button{ /*Search bar and region selector background*/
	background-color: var(--bg3)!important;
}
.css-9px0pz button[type="submit"]{ /*The ".GG" Confirmation button.*/
	filter: grayscale(100%)!important
}
.css-9px0pz > div:first-of-type::after{ /*The small line between the search section and region section*/
	background-color: var(--border)!important;
}
.css-9px0pz small, .css-9px0pz label{ /*"Region" and "Search" titles*/
	color: var(--fg-extra)!important;
}
.css-a9yqak > div > button + div > button{ /*The border between the regions*/
	border-color: var(--border)!important;
}
.css-10m1zhr{ /*Background for regions*/
	background-color: var(--bg3)!important;
}
.css-10m1zhr:hover{
	background-color: var(--bg4)!important;
}
.css-a9yqak .e49ipbx1 + div{ /*Border around regions in drop down*/
	border-radius: 10px!important;
	border: solid 1px var(--border)!important;
}
.css-a9yqak > div > div{
	background-color: transparent!important;
}

.css-1ylkbfp .setting__button, [data-theme="dark"] .css-1aoc24, [data-theme="light"] .css-1aoc24, [data-ie="true"] .css-1aoc24{ /*"Download Now" button in the middle*/
    background-color: var(--border);
    border-color: var(--button-hover);
    border-radius: 20px;
}
.css-1ylkbfp .setting__button:hover, [data-theme="dark"] .css-1aoc24:hover{
    background-color: var(--button-hover) !important;
}
.css-1301arq button[type="submit"]{
	filter: grayscale(100%);
}

/*/// Boxes under Search ///*/

.css-19r14bn > :first-of-type, .css-19r14bn > :last-of-type{ /*The boxes under search*/
	background-color: var(--bg3)!important;
	color: var(--fg);
	border-radius: 20px;
	border-color: var(--border);
}
.css-1cg8thk ul, .css-1cg8thk h2{
	background-color: var(--bg3)!important;
}
.css-1q4ozys *{ /*Color for the text in the right box*/
	color: var(--fg-extra)!important;
}
.css-1q4ozys .border-gray, .css-1cg8thk h2{
	border-color: var(--border)!important;
}
.css-m7794i .esports-prediction .esports-prediction-ratio-container .esports-prediction-ratio{
	background-color: var(--border)
}
.css-1q4ozys .esports-logo-img{
	filter: grayscale(100%) brightness(1000%)!important;
}
.css-1q4ozys .esports-header-pow .esports-logo-pow .esports-logo-player{
	filter: brightness(100%)!important;
}

}

@-moz-document url-prefix("https://www.op.gg/") {
/*//Players Profile//*/

:root {
    --bg1: #111;
    --bg2: #191919;
    --bg3: #252525;
    --bg4: #333;
    --border: #444;
    --fg: #999999;
	--gray400: #999999!important; /*"Search a Champion" cant find the element*/
	--gray500: #999999!important; /*Commonly used text color*/
	--gray600: #999999!impo...

Reviews

No reviews yet.