User:GoboZen/Theme-gobo-extras.css

/* common part */
@import url(https://enshrouded.wiki.gg/wiki/User:GoboZen/Theme-gobo.css?action=raw&ctype=text/css);


/** Dark theme **/

:root.theme-gobo-dark {
	--textcolor-1: #fff;
	--content--textcolor: #ddd;
	--textcolor-3: #bbb;
	--textcolor-4: #999;

	--linkcolor-1: #ddf;
	--linkcolor-2: #bbf;
	--linkcolor-3: #99f;
	--linkcolor-4: #66f;
	--link--bgcolor--focus: #48ad;

	--bg-overlay-0: #0008;
	--bg-shadow-0: #000a;
	--bg-shadow-1: var(--bgcolor-0);
	--popup-bg: #222e;  /* alpha(var(--editor--bgcolor), #d); */
	--popup-anim-bg: #fff6;

	--bgcolor-0: #000;
	--bgcolor-1: #181818;
	--editor--bgcolor: #222;
	--content--bgcolor: #3338;
	--bordercolor-3: var(--bgcolor-5);
	--bgcolor-3a: #3a3a3a;
	--bgcolor-box: #444;
	--bordercolor-4: var(--bgcolor-5);
	--bgcolor-box8: #484848;
	--bgcolor-boxa: #4a4a4a;
	--bgcolor-50: #505050;
	--bgcolor-5: #555;
	--bgcolor-6: #666;

	/* Difference view: gray, red and green with highlights */
	--diff--bgcolor: var(--bgcolor-box);
	--diff--bgcolor: #fff1;  /* brighten -- add some white with transparency -> #414141 */
	/* --diff--bgcolor: #fff2; */  /* bit bright -> #4f4f4f */
	--diff--textcolor: var(--content--textcolor);
	--diff--textcolor-1: var(--textcolor-1);
	--diff--textcolor-1: unset;  /* inherit var(--diff--textcolor); */

	/* --diff-add--bgcolor: #0f04; */  /* bit bright */
	--diff-add--bgcolor: #0f03;  /* add some green to --content--bgcolor -> #2a5a2e */
	--diff-add--bgcolor: #353;  /* #444 + #0f03 -> #2a5a2e rounded */
	--diff-add--bgcolor-1: #0f05;  /* add more green -> #258b2a */
	--diff-add--bgcolor-1: #282;  /* #353 + #0f05 -> #258b2a rounded */

	/* --diff-del--bgcolor: #f004; */  /* bit bright */
	--diff-del--bgcolor: #f003;  /* add some red to --content--bgcolor -> #5d2d2d */
	--diff-del--bgcolor: #533;  /* #444 + #f003 -> #5d2d2d rounded, bit dimmer */
	--diff-del--bgcolor-1: #f005;  /* add more red -> #8f2829 */
	--diff-del--bgcolor-1: #833;  /* #533 + #f005 -> #8f2829 rounded */

	/* --warn-bg-1: #b71; */
	/* --warn-bg-1: #cb6; */
	--image-invert: invert(1);
}
:root.theme-gobo-dark.a1 {
	--textcolor-1: #dde;
	--content--textcolor: #bbc;
	--textcolor-3: #99a;
	--textcolor-4: #778;
}
:root.theme-gobo-dark.a2 {
	--textcolor-1: #eef;
	--content--textcolor: #ccd;
	--textcolor-3: #aab;
	--textcolor-4: #889;
}




/** Light gray palette **/

:root.theme-gobo-light {
	/* Dark theme colors inverted for text */
	--textcolor-1: #000;
	--content--textcolor: #222;
	--textcolor-3: #444;
	--textcolor-4: #666;

  /* bluetext theme */
	/* --textcolor-1: skyblue; */
	/* --content--textcolor: dodgerblue; */
	/* --textcolor-3: royalblue; */
	--textcolor-1: #eef;
	--content--textcolor: #cce;
	--textcolor-3: #aac;
	--textcolor-4: #88a;

	/* Handpicked green palette for links
	--linkcolor-1: #060;
	--linkcolor-2: #482;
	--linkcolor-3: #460;
	--linkcolor-4: #4a4;
  /**/

	/* Darkened blue palette for links */
	--linkcolor-4: #99d;
	--linkcolor-3: #66b;
	--linkcolor-2: #449;
	--linkcolor-1: #227;
	--link--bgcolor--focus: #4169e140;  /* royalblue + alpha 25% */
	--link--bgcolor--focus: #46d3;  /* royalblue + alpha 20%, rounded */

  /* bluetext theme */
	/* --linkcolor-2: dodgerblue; */
	/* --linkcolor-3: royalblue; */
	--linkcolor-1: #ccf;
	--linkcolor-2: #aaf;
	--linkcolor-3: #88d;
	--linkcolor-4: #66b;

	/* Handpicked light gray palette for background */
	--bg-overlay-0: #9998;
	--bg-shadow-0: #0004;
	--popup-bg: #cccd;
	--popup-anim-bg: var(--bgcolor-6);
	--popup-anim-bg: #999c;  /* darken(var(--popup-bg), 2) */
	--popup-anim-bg: #333c;
	--popup-anim-bg: #0006;  /* invert dark */
	--bg-shadow-1: var(--bgcolor-0);
	--bgcolor-0: #999;
	--bgcolor-1: #aaa;
	--editor--bgcolor: #bbb;
	--content--bgcolor: #ddd8;
	--bordercolor-3: var(--editor--bgcolor);
	--bgcolor-3a: #e1e1e1;  /* +7: +4 */
	/* --bgcolor-box: #e5e5e5; */  /* +6: +4 */
	--bgcolor-box: #e8e8e8;  /* +6: +7 */  /* table row 1 */
	--bordercolor-4: var(--editor--bgcolor);
	--bgcolor-box8: #e8e8e8;  /* +4 :+3 */
	--bgcolor-boxa: #eaeaea;  /* +2 */
	--bgcolor-50: #eeeeee;  /* +6: +4 */
	--bgcolor-5: #f2f2f2;  /* +5: +4 */  /* table row 2 */
	--bgcolor-6: #fff;  /* +17: +13 */

	/* Difference view: gray, red and green with highlights */
	--diff--bgcolor: #fff2;  /* brighten -- add some white with transparency -> #e1e1e1 */
	--diff--bgcolor: #fff4;  /* brighten -- add some white with transparency -> #e6e6e6 */
	--diff--bgcolor: #fff5;  /* brighten -- add some white with transparency -> #e8e8e8 */
	--diff--bgcolor: #fff7;  /* brighten -- add some white with transparency -> #ededed */
	--diff--bgcolor: #fff8;  /* brighten -- add some white with transparency -> #efefef */
	--diff--bgcolor: var(--bgcolor-box);  /* #e8e8e8 */
	--diff--textcolor: #222;
	--diff--textcolor: var(--content--textcolor);  /* #222 */

	/* --diff-add--bgcolor: #0f04; */  /* bit bright */
	--diff-add--bgcolor: #0f03;  /* add some green to --content--bgcolor -> #b1e2b6 */
	--diff-add--bgcolor: #aea;  /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
	--diff-add--bgcolor: #beb;  /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
	--diff-add--bgcolor: #bdb;  /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
	--diff-add--bgcolor: #ada;  /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
	--diff-add--bgcolor-1: #0f05;  /* add more green -> #3fef47 */
	--diff-add--bgcolor-1: #4e4;  /* #ada + #0f05 -> #3fef47 rounded */
	--diff-add--bgcolor-1: #6d6;  /* #ada + #0f05 -> #3fef47, darker */
	--diff-add--bgcolor-1: #5d5;  /* #ada + #0f05 -> #3fef47, darker */

	/* --diff-del--bgcolor: #f004; */  /* bit bright */
	--diff-del--bgcolor: #f003;  /* add some red to --content--bgcolor -> #e6b5b5 */
	--diff-del--bgcolor: #eaa;  /* #e8e8e8 + #f003 -> #e6b5b5 rounded */
	--diff-del--bgcolor-1: #f005;  /* add more red -> #f57978 */
	--diff-del--bgcolor-1: #e77;  /* #533 + #f005 -> #f57978 rounded */
	--diff-del--bgcolor-1: #e66;  /* #533 + #f005 -> #f57978 rounded, bit darker */
	--diff-del--bgcolor-1: #e55;  /* #533 + #f005 -> #f57978, darker */

	--image-invert: '';
}


:root.theme-gobo-light.b0 {
	--bg-overlay-0: #aaa8;
	--bg-shadow-1: var(--bgcolor-0);
	--bgcolor-0: #aaa;
	--bgcolor-1: #ccc;
	--bgcolor-1: #bbb;
	--editor--bgcolor: #ccc;
	--content--bgcolor: #e7e7e788;
	--bgcolor-3a: #eee;
	--bgcolor-box: #f4f4f4;
	--bgcolor-box8: #f7f7f7;
	--bgcolor-boxa: #f8f8f8;
	--bgcolor-50: #fafafa;
	--bgcolor-5: #fcfcfc;
	--bgcolor-6: #fff;
}
:root.theme-gobo-light.b1 {
	--bg-overlay-0: #9998;
	--bg-shadow-1: var(--bgcolor-0);
	--bgcolor-0: #999;
	--bgcolor-1: #aaa;
	--editor--bgcolor: #bbb;
	--content--bgcolor: #ccc8;
	--bgcolor-3a: #cacaca;
	--bgcolor-box: #ddd;
	--bgcolor-box8: #d8d8d8;
	--bgcolor-boxa: #dadada;
	--bgcolor-50: #e0e0e0;
	--bgcolor-5: #eee;
	--bgcolor-6: #fff;
}
:root.theme-gobo-light.b2 {
	--bg-overlay-0: #aaa8;
	--bg-shadow-1: var(--bgcolor-0);
	--bgcolor-0: #aaa;
	--bgcolor-1: #bbb;
	--editor--bgcolor: #ccc;
	--content--bgcolor: #ddd8;
	--bgcolor-3a: #dadada;
	--bgcolor-box: #eee;
	--bgcolor-box8: #e8e8e8;
	--bgcolor-boxa: #eaeaea;
	--bgcolor-50: #f0f0f0;
	--bgcolor-5: #f8f8f8;
	--bgcolor-6: #fff;
}
:root.theme-gobo-light.a1 {
	--textcolor-1: #221;
	--content--textcolor: #443;
	--textcolor-3: #665;
	--textcolor-4: #887;
}
:root.theme-gobo-light.a2 {
	--textcolor-1: #110;
	--content--textcolor: #332;
	--textcolor-3: #554;
	--textcolor-4: #776;
}



/** Gray palette **/

:root.theme-gobo-gray {
	/* .theme-gobo-dark inverted */
	--textcolor-1: #000;
	--content--textcolor: #222;
	--textcolor-3: #444;
	--textcolor-4: #666;
	--linkcolor-1: #220;
	--linkcolor-2: #440;
	--linkcolor-3: #662;
	--linkcolor-4: #884;

	--bg-overlay-0: #fff8;
	--bg-shadow-1: var(--bgcolor-0);
	--bgcolor-0: #fff;
	--bgcolor-1: #e7e7e7;
	--editor--bgcolor: #ddd;
	--content--bgcolor: #ccc8;
	--bgcolor-3a: #c5c5c5;
	--bgcolor-box: #bbb;
	--bgcolor-box8: #b7b7b7;
	--bgcolor-boxa: #b5b5b5;
	--bgcolor-50: #afafaf;
	--bgcolor-5: #aaa;
	--bgcolor-6: #999;

	--image-invert: '';
}



/** Dark theme inverted (binary complement) **/

:root.theme-gobo-darkinvert {
	--textcolor-1: #000;
	--content--textcolor: #222;
	--textcolor-3: #444;
	--textcolor-4: #666;
	--linkcolor-1: #220;
	--linkcolor-2: #440;
	--linkcolor-3: #662;
	--linkcolor-4: #884;

	--bg-overlay-0: #fff8;
	--bg-shadow-1: var(--bgcolor-3);
	--bgcolor-0: #fff;
	--bgcolor-1: #e7e7e7;
	--editor--bgcolor: #ddd;
	--content--bgcolor: #ccc8;
	--bgcolor-3a: #c5c5c5;
	--bgcolor-box: #bbb;
	--bgcolor-box8: #b7b7b7;
	--bgcolor-boxa: #b5b5b5;
	--bgcolor-50: #afafaf;
	--bgcolor-5: #aaa;
	--bgcolor-6: #999;

	--image-invert: '';
}
:root.theme-gobo-darkinvert.a1 {
	--textcolor-1: #221;
	--content--textcolor: #443;
	--textcolor-3: #665;
	--textcolor-4: #887;
}
:root.theme-gobo-darkinvert.a2 {
	--textcolor-1: #110;
	--content--textcolor: #332;
	--textcolor-3: #554;
	--textcolor-4: #776;
}



/** Blue palette -- just background **/
:root.theme-gobo-blue {
	--bgcolor-1: #122;
	--editor--bgcolor: #233;
	--content--bgcolor: #3348;
	--bgcolor-3a: #3a3a4a;
	--bgcolor-box: #445;
	--bgcolor-5: #556;
	--bgcolor-6: #667;

	--image-invert: invert(1);
}