MediaWiki:Common.css/src/theme.scss
< MediaWiki:Common.css | src
Jump to navigation
Jump to search
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
@use 'lib';
/***********************************************************************************************************
* theming.
***********************************************************************************************************/
/* @import themeLegacy.css */
:root {
/* floating scroll for wide table */
--theme-wide-table-shadow-color: #999;
/* background & logo */
--theme-site-background: #b8bad0 url(https://terraria.wiki.gg/images/0/0e/Site-background-overworld.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/9/99/Site-logo-overworld.png);
--theme-site-logo-width: 421px;
--theme-site-logo-height: 140px;
--theme-site-logo-filter: none;
@theme Underground{
--theme-site-background: #000 url(https://terraria.wiki.gg/images/1/1b/Site-background-underground.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/d/d2/Site-logo-underground.png);
}
@theme Snow{
--theme-site-background: #9079c8 url(https://terraria.wiki.gg/images/a/af/Site-background-snow.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/3/34/Site-logo-snow.png);
--theme-site-logo-width: 343px;
--theme-site-logo-height: 156px;
}
@theme Jungle{
--theme-site-background: #dddac7 url(https://terraria.wiki.gg/images/f/f1/Site-background-jungle.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/e/e8/Site-logo-jungle.png);
--theme-site-logo-width: 418px;
--theme-site-logo-height: 151px;
}
@theme Hallowed{
--theme-site-background: #c8a7fe url(https://terraria.wiki.gg/images/d/d3/Site-background-hallowed.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/0/03/Site-logo-hallowed.png);
--theme-site-logo-width: 416px;
--theme-site-logo-height: 159px;
}
@theme Crimson{
--theme-site-background: #78516c url(https://terraria.wiki.gg/images/c/c6/Site-background-crimson.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/f/f1/Site-logo-crimson.png);
--theme-site-logo-width: 416px;
}
@theme Corruption{
--theme-site-background: #6a5a89 url(https://terraria.wiki.gg/images/e/e3/Site-background-corruption.jpg) center top / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/d/d6/Site-logo-corruption.png);
}
@theme Legacy{
--theme-site-background: #bbcce8 url(https://terraria.wiki.gg/images/3/3e/Site-background-hydra.jpg) center bottom / cover no-repeat fixed;
--theme-site-logo-image: url(https://terraria.wiki.gg/images/9/99/Site-logo-overworld.png);
}
/* content background */
--theme-background: #5a433a;
@theme Underground{
--theme-background: #3e393d;
}
@theme Snow{
--theme-background: #eaeef1;
}
@theme Jungle{
--theme-background: #4a422d;
}
@theme Hallowed{
--theme-background: #806760;
}
@theme Crimson{
--theme-background: #5b3e40;
}
@theme Corruption{
--theme-background: #55424b;
}
@theme Legacy{
--theme-background: #fcfcfc;
}
/* background for accent block */
--theme-background-accent: rgba(20,20,20,0.5);
@theme Snow{
--theme-background-accent: rgba(20,20,20,0.2);
}
@theme Legacy{
--theme-background-accent: #e4f0f7;
}
/* the "grass" */
--theme-top-background: url(https://terraria.wiki.gg/images/e/ef/Grass-top-overworld.png) top left repeat-x; /*<< the "grass" */
--theme-top-background-height: 13px; /*<< height of the image above. */
--theme-top-background-offset: -6px; /*<< top */
@theme Underground{
--theme-top-background: url(https://terraria.wiki.gg/images/1/15/Grass-top-underground.png) top left repeat-x; /*<< the "grass" */
}
@theme Snow{
--theme-top-background: url(https://terraria.wiki.gg/images/5/53/Grass-top-snow.png) top left repeat-x; /*<< the "grass" */
}
@theme Jungle{
--theme-top-background: url(https://terraria.wiki.gg/images/4/41/Grass-top-jungle.png) top left repeat-x; /*<< the "grass" */
}
@theme Hallowed{
--theme-top-background: url(https://terraria.wiki.gg/images/f/f1/Grass-top-hallowed.png) top left repeat-x; /*<< the "grass" */
}
@theme Crimson{
--theme-top-background: url(https://terraria.wiki.gg/images/b/b5/Grass-top-crimson.png) top left repeat-x; /*<< the "grass" */
}
@theme Corruption{
--theme-top-background: url(https://terraria.wiki.gg/images/a/ac/Grass-top-corruption.png) top left repeat-x; /*<< the "grass" */
}
@theme Legacy{
--theme-top-background: none; /*<< the "grass" */
--theme-top-background-height: 0px; /*<< height of the image above. */
--theme-top-background-offset: 0px; /*<< top */
}
/* text color */
--theme-text-color: #eae3d1;
--theme-text-color-note: #b5bdb2;
--theme-text-color-em: #c4ebd0;
--theme-text-color-highlight: #fff;
--theme-heading-color: var(--theme-text-color);
--theme-text-color-green: #00d400;
--theme-text-color-red: #fe9b9b;
@theme Underground{
--theme-text-color: #f7e8d1; /*<< main text color. 234,227,209 */
--theme-text-color-note: #b5bdb2; /*<< note text */
--theme-text-color-em: #f7e8d1; /*<< 196,235,208 */
--theme-text-color-green: #00be00;
--theme-text-color-red: #fe7c7c;
}
@theme Snow{
--theme-text-color: #080a13; /* main text color. 234,227,209 */
--theme-text-color-note: #666; /* note text */
--theme-text-color-em: #080a13; /* 196,235,208 */
--theme-text-color-highlight: #000;
--theme-text-color-green: #007e00;
--theme-text-color-red: #d61616;
}
@theme Jungle{
--theme-text-color: #eae3d1; /* main text color. 234,227,209 */
--theme-text-color-note: #b5bdb2; /* note text */
--theme-text-color-em: #eae3d1; /* 196,235,208 */
--theme-text-color-green: #00cb00;
--theme-text-color-red: #fe8f8f;
}
@theme Hallowed{
--theme-text-color: #fee2c1; /* main text color. 234,227,209 */
--theme-text-color-note: #ddd; /* note text */
--theme-text-color-em: #c4ebd0; /* 196,235,208 */
--theme-text-color-green: #6bff6b;
--theme-text-color-red: #ffb0b0;
}
@theme Crimson{
--theme-text-color: #fcd1c1; /* main text color. 234,227,209 */
--theme-text-color-note: #b5bdb2; /* note text */
--theme-text-color-em: #c4ebd0; /* 196,235,208 */
--theme-text-color-green: #00d000;
--theme-text-color-red: #fe9595;
}
@theme Corruption{
--theme-text-color: #eae3d1;
--theme-text-color-note: #b5bdb2; /* note text */
--theme-text-color-em: #bcddec;
--theme-text-color-green: #00d200;
}
@theme Legacy{
--theme-text-color: #000; /* main text color */
--theme-text-color-note: #808080; /* note text */
--theme-text-color-em: #063b5e;
--theme-text-color-highlight: #000;
--theme-text-color-green: #080;
--theme-text-color-red: #e71818;
}
/* link text color */
$theme-link-color: #9fecf0;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #86dcdf;
--theme-link-color-visited: #86dcdf;
--theme-link-color-redlink: #f66;
--theme-link-color-accent: var(--theme-text-color-em);
@theme Underground{
$theme-link-color: #9cfffd;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
}
@theme Snow{
$theme-link-color: #2d4068;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
--theme-link-color-redlink: #9f0000;
}
@theme Jungle{
$theme-link-color: #ddffbd;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
}
@theme Hallowed{
$theme-link-color: #bcf4ff;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
}
@theme Crimson{
$theme-link-color: #ffeec3;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
}
@theme Corruption{
$theme-link-color: #bcddec;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #{$theme-link-color};
--theme-link-color-visited: #{$theme-link-color};
}
@theme Legacy{
$theme-link-color: #07398b;
--theme-link-color: #{$theme-link-color};
--theme-link-color--rgb: #{lib.to-rgb($theme-link-color)};
--theme-link-color-hover: #021d4a;
--theme-link-color-visited: #{$theme-link-color};
--theme-link-color-redlink: #bf0017;
}
/* icon color */
--theme-icon-color: var(--theme-text-color);
--theme-icon-color-link: var(--theme-link-color);
--theme-icon-color-hover: var(--theme-link-color-hover);
--theme-icon-color-redlink: var(--theme-link-color-redlink);
/* hover mask */
--theme-highlight-background: rgba(20,20,20,0.25);
@theme Snow{
--theme-highlight-background: rgba(20,20,20, 0.1);
}
@theme Legacy{
--theme-highlight-background: rgba(38, 150, 218, 0.2);
}
//--theme-highlight-mask: rgba(214,255,228,0.12);/*<< from TCF */
/* "box" style for interface */
--theme-widget-shadow: 0px 0px 15px 0px rgba(10,10,10, 0.7);
--theme-widget-border-color: rgba(255,255,255, 0.1) rgba(13, 4, 2, 0.2) rgba(13, 4, 2, 0.2) rgba(255,255,255, 0.1);
--theme-widget-border-radius: 6px;
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#60473b url(https://terraria.wiki.gg/images/2/26/Content-background-overworld.jpg);
@theme Underground{
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#444041 url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
}
@theme Snow{
--theme-widget-shadow: 0px 0px 15px 0px rgba(10,10,40, 0.45);
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#d6dbdf url(https://terraria.wiki.gg/images/1/10/Content-background-snow.jpg);
}
@theme Jungle{
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#534939 url(https://terraria.wiki.gg/images/a/a1/Content-background-jungle.jpg);
}
@theme Hallowed{
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#776259 url(https://terraria.wiki.gg/images/1/1a/Content-background-hallowed.jpg);
}
@theme Crimson{
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#513a3b url(https://terraria.wiki.gg/images/3/3f/Content-background-crimson.jpg);
}
@theme Corruption{
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#4c3d44 url(https://terraria.wiki.gg/images/f/f7/Content-background-corruption.jpg);
}
@theme Legacy{
--theme-widget-shadow: 0px 0px 6px 0px rgba(0,0,0, 0.1);
--theme-widget-border-color: transparent;
--theme-widget-background: rgba(252,525,252,0.7);
}
/* "box" style for content */
--theme-box-border-color: #000;
--theme-box-background: rgba(20,20,20,0.12); //old: rgba(234,227,209, 0.05);
--theme-box-border-radius: 3px;
--theme-box-inset-shadow: inset 0 0 4px 1px rgba(255,255,255, 0.08);
--theme-border-color: var(--theme-box-border-color);/*<< inner separate border line */
--theme-border-color-accent: #999;
@theme Snow{
--theme-box-border-color: #aaa;
--theme-box-background: rgba(200, 200, 210, 0.15);
--theme-box-inset-shadow: inset 0 0 4px 1px rgba(0,0,0, 0.05);
--theme-border-color-accent: #333;
}
@theme Legacy{
--theme-box-border-color: rgb(179, 179, 179);
--theme-box-background: rgba(230, 230, 230, 0.25);
--theme-box-inset-shadow: none;
--theme-border-color-accent: #333;
}
/* "horizontal rule" */
--theme-hr-color-top: rgb(20,20,20);
--theme-hr-color-bottom: rgba(255,255,255, 0.1);
@theme Snow{
--theme-hr-color-bottom: rgba(255,255,255, 0.5);
}
@theme Legacy{
--theme-hr-color-top: #808080;
--theme-hr-color-bottom: transparent;
}
/* dropdown menu body */
--theme-dropdown-border-width: 1px;/*<< single value */
--theme-dropdown-border-style: solid;
--theme-dropdown-border-radius: var(--theme-widget-border-radius);
--theme-dropdown-border-color: var(--theme-widget-border-color);
--theme-dropdown-background: #60473b url(https://terraria.wiki.gg/images/2/26/Content-background-overworld.jpg);
--theme-dropdown-shadow: 0px 0 5px 0px rgba(10,10,10, 0.3);
@theme Underground{
--theme-dropdown-background: #444041 url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
}
@theme Snow{
--theme-dropdown-background: #d6dbdf url(https://terraria.wiki.gg/images/1/10/Content-background-snow.jpg);
}
@theme Jungle{
--theme-dropdown-background: #534939 url(https://terraria.wiki.gg/images/a/a1/Content-background-jungle.jpg);
}
@theme Hallowed{
--theme-dropdown-background: #776259 url(https://terraria.wiki.gg/images/1/1a/Content-background-hallowed.jpg);
}
@theme Crimson{
--theme-dropdown-background: #513a3b url(https://terraria.wiki.gg/images/3/3f/Content-background-crimson.jpg);
}
@theme Corruption{
--theme-dropdown-background: #4c3d44 url(https://terraria.wiki.gg/images/f/f7/Content-background-corruption.jpg);
}
@theme Legacy{
--theme-dropdown-background: #fcfcfc;
}
/* border and background colors for various "notices", e.g. boxes like [[Template:Msgbox]] */
--theme-notice-blue-background-color: hsla(200, 80%, 90%, 20%);
--theme-notice-blue-border-color: hsl(200, 60%, 72%);
--theme-notice-red-text-color: hsl(0, 100%, 70%);
--theme-notice-red-background-color: hsla(0, 80%, 90%, 20%);
--theme-notice-red-border-color: hsl(0, 60%, 72%);
--theme-notice-purple-background-color: hsla(228, 80%, 90%, 20%);
--theme-notice-purple-border-color: hsl(243, 60%, 72%);
--theme-notice-green-background-color: hsla(84, 80%, 90%, 20%);
--theme-notice-green-border-color: hsl(84, 60%, 72%);
--theme-notice-yellow-background-color: hsla(58, 80%, 90%, 20%);
--theme-notice-yellow-border-color: hsl(58, 60%, 72%);
--theme-notice-orange-text-color: hsl(28, 100%, 70%);
--theme-notice-orange-background-color: hsla(28, 80%, 90%, 20%);
--theme-notice-orange-border-color: hsl(28, 60%, 72%);
--theme-notice-pink-background-color: hsla(324, 80%, 90%, 20%);
--theme-notice-pink-border-color: hsl(324, 60%, 72%);
}
/* @import theme/sidebar.css */
/* @import theme/navbar.css */
/* @import theme/footer.css */
/* @import theme/catlinks.css */
/* @import theme/OOUI.css */