Difference between revisions of "User:Dorsal Axe/common.css"

From Nookipedia, the Animal Crossing wiki
Line 344: Line 344:
 
#mw-header-hack.color-bar {
 
#mw-header-hack.color-bar {
 
     background-image: var(--th-leaves);  
 
     background-image: var(--th-leaves);  
     -webkit-mask-image: url(https://www.animal-crossing.com/new-horizons/assets/img/global/masks/content-mask.png);
+
     -webkit-mask-image: url();
     mask-image: url(https://www.animal-crossing.com/new-horizons/assets/img/global/masks/content-mask.png);
+
     mask-image: url();
 
     -webkit-mask-position: center top;
 
     -webkit-mask-position: center top;
 
     mask-position: center top;
 
     mask-position: center top;

Revision as of 09:00, March 16, 2022

/* Tables */
.table-top {
	background: hsl(var(--template-color, 47 96%) var(--lightness-primary-override, var(--lightness-primary, 70%)));
}
.table-top tr {
	border-bottom: 4px solid hsl(var(--template-color, 47 96%) var(--lightness-primary-override, var(--lightness-primary, 70%)));;
}
.table-top td {
	padding: 8px 0;
}
.table-top th {
	padding: 8px 0;
}

/*==================================================
  TABS
==================================================*/
.tabs-tabbox > .tabs-label {
    margin: 0 3px 5px 3px;
    border: none;
    border-radius: 7px;
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    font-family: 'Coustard';
    color: #555;
}

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: #d5f3ba;
}

.tabs-tabbox > .tabs-container {
    margin-top: -1px;
    padding: 2px 6px;
    border-radius: 8px;
    position: relative;
    border: none;
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    z-index: 1;
}

/* Tabs */
.tab-article {
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	-khtml-border-radius: 7px 7px 0 0;
	-icab-border-radius: 7px 7px 0 0;
	-o-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;
	text-align:center;
	padding: 3px 5px;
	margin: 0;
	border: 2px solid #78AB46;
	background-color: #A5D97B;
	white-space: nowrap;
	cursor:pointer;
}
span.tab-article:hover, div.tab:hover, td.tab:hover {
	background-color:#B1E48C;
}
.tabselected {
	background-color:#9ACE74 !important;
	border-bottom: 2px solid #9ACE74;
}
.tabcontainer p {
	margin:0;
}


/*==================================================
  STATIONERY TEST
==================================================*/
.stationery {
 background: url(https://dodo.ac/np/images/1/1c/Notebook_Paper_CF.png);
 background-size: 256px 192px;
}

/*==================================================
  STAFF LINKS
==================================================*/
/* Patrollers */
.mw-userlink[title="User:Decomposer"],
.mw-userlink[title="User:Paviinka"],
.mw-userlink[title="User:Ruthless Cutie"],
.mw-userlink[title="User:AgentParadox"],
.mw-userlink[title="User:BladeofEvilsBane"],
.mw-userlink[title="User:HylianAngel"],
.mw-userlink[title="User:TurtleCrossing"],
.mw-userlink[title="User:PanchamBro"],
a.whopatrol, #whopatrollers a {
	background:url(//dodo.ac/np/images/thumb/1/16/Villager_NH_Character_Icon.png/16px-Villager_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important;
}

/* Administrators */
.mw-userlink[title="User:Mario"],
.mw-userlink[title="User:ZCJigglypuff"],
.mw-userlink[title="User:Dorsal Axe"],
.mw-userlink[title="User:AlexBot2004"],
.mw-userlink[title="User:Lampshade59276"],
a.whoadmin, #whoadmins a {
	background:url(//dodo.ac/np/images/thumb/9/91/Isabelle_NH_Character_Icon.png/16px-Isabelle_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important;
}

/* Bureaucrats */
.mw-userlink[title="User:Drago"],
.mw-userlink[title="User:Sunmarsh"],
.mw-userlink[title="User:Vmario97"],
a.whocrat, #whocrats a {
	background:url(//dodo.ac/np/images/thumb/6/68/Lottie_PC_icon.png/16px-Lottie_PC_icon.png) center left no-repeat; padding-left: 17px !important;
}

/* Directors */
.mw-userlink[title="User:Jake"],
.mw-userlink[title="User:SuperHamster"],
a.whodirector, #whodirectors a {
	background:url(//dodo.ac/np/images/thumb/6/68/Tom_Nook_NH_Character_Icon.png/16px-Tom_Nook_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important;
}

/* Bots */
.mw-userlink[title="User:Autotroph"],
.mw-userlink[title="User:Bot"],
.mw-userlink[title="User:HamsterMech"],
.mw-userlink[title="User:Puppet"],
.mw-userlink[title="User:Weavile"],
.mw-userlink[title="User:Ribbot"],
a.whobot, #whobots a {
	background:url(//dodo.ac/np/images/thumb/8/87/Ribbot_NH_Villager_Icon.png/16px-Ribbot_NH_Villager_Icon.png) center left no-repeat; padding-left: 17px !important;
}

/* Former Staff */
.mw-userlink[title="User:AnimalCrossingFan12"],
.mw-userlink[title="User:DataWizard"],
.mw-userlink[title="User:AgentCarmen12"],
.mw-userlink[title="User:Anteater99"],
.mw-userlink[title="User:SnorlaxMonster"],
.mw-userlink[title="User:Crazyguy20076"],
.mw-userlink[title="User:RAP"],
.mw-userlink[title="User:Zharkaer"],
.mw-userlink[title="User:Pakkun"],
.mw-userlink[title="User:SpideyCanThrash"],
.mw-userlink[title="User:Grekox"],
.mw-userlink[title="User:Imjon"],
.mw-userlink[title="User:Miku51"],
.mw-userlink[title="User:Heidy Isabel"],
.mw-userlink[title="User:Trainiax"],
.mw-userlink[title="User:Username1770"],
.mw-userlink[title="User:Lotter"],
.mw-userlink[title="User:Ocre"],
.mw-userlink[title="User:Vulpes"],
.mw-userlink[title="User:Dabtowner"],
.mw-userlink[title="User:mlnintendo97"],
.mw-userlink[title="User:Minifig-me"],
.mw-userlink[title="User:C-Star55"],
.mw-userlink[title="User:GoalieGuy6"],
.mw-userlink[title="User:Sailor sofia"],
.mw-userlink[title="User:MerrytonRyan"],
.mw-userlink[title="User:Dragonfree97"],
.mw-userlink[title="User:Leem01"],
.mw-userlink[title="User:SuperAlpaca"],
.mw-userlink[title="User:Sky"],
.mw-userlink[title="User:LoneShadowStar"],
a.whoformer, #whoformers a {
	background:url(//dodo.ac/np/images/thumb/8/8c/Tortimer_aF_Character_Icon.png/16px-Tortimer_aF_Character_Icon.png) center left no-repeat; padding-left: 17px !important;
}

/*==================================================
  MISC
==================================================*/
.main-flex-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.main-flex-item {
	flex: 1;
	margin: 0 auto;
}
.main-img {
	width: 360px;
	max-height: 275px;
}
.main-img img {
	max-width: 100%;
	width: 360px;
	max-height: 275px;
	height: auto;
	object-fit: contain;
}
@media (max-width: 1500px) {
	.main-flex-container {
    	display: block;
	}
	.main-img {
		 max-height: none;
	}
	.main-img img {
		 width: 360px;
		 max-height: none;
    		height: auto;
	}
}


/* Zilla Slab font */
@font-face {
	font-family: 'Zilla Slab';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/zillaslab/v6/dFa6ZfeM_74wlPZtksIFajo6_Q.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libre Franklin font */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhHMWkANDJ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*==================================================
  DARK THEME TEST
==================================================*/
:root {
	--th-color-primary: hsl(290 25% 48%) !important;
	--th-color-secondary: hsl(268 29% 20%) !important;
	--th-color-tertiary: hsl(267 29% 15%) !important;
	--th-color-shadow: hsl(291, 25%, 35%) !important;
	--th-background: #141952 url(https://dodo.ac/np/images/6/6f/NH_Entering_Dream_1_Free_Summer_Update.png) top left repeat;
	--th-leaves: url(https://i.imgur.com/DxNTMSn.png); 
	--th-img-thumbnail: hsl(268 29% 20%);
	--th-list: url(https://dodo.ac/np/images/8/80/Leaf_Icon_%28Brown%29.png);
	--th-nookipedia-text-main-page: url(https://dodo.ac/np/images/8/81/Nookipedia_Logo_Outlined_%28NH%29.png);
	--th-discord: url(https://dodo.ac/np/images/8/80/Discord_Icon_Stylized_%28NH%29.png);
	--th-twitter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path fill="%23703a3c" d="M33.136 2.936c-4.392.026-8.662 2.451-10.952 6.196-.841 1.345-1.436 2.844-1.743 4.4-4.473-1.085-8.551-3.637-11.543-7.127-1.353-1.498-3.741-1.862-5.48-.837C2.1 6.281 1.426 7.691.993 9.061c-.913 2.84-.858 5.997.204 8.79C.24 19.068.141 20.72.483 22.181c.453 2.414 1.595 4.698 3.28 6.487-.296 1.339.232 2.669.921 3.797a13.53 13.53 0 0 0 1.884 2.575c-1.502.236-3.166-.07-4.486.851-1.856 1.105-2.615 3.654-1.686 5.6.523 1.242 1.675 2.047 2.876 2.561 3.56 1.747 7.476 2.776 11.434 3.006 2.782.017 5.595.041 8.32-.603 6.626-1.353 12.704-5.149 16.849-10.49 3.668-4.73 6.037-10.515 6.486-16.501.073-.558.023-1.166.133-1.694 1.11-1.096 2.402-2.098 3.09-3.534.685-1.459.512-3.265-.446-4.563.511-2.071-.731-4.374-2.729-5.109-1.33-.554-2.836-.286-4.097.328a16.96 16.96 0 0 1-1.33.503c-2.261-1.637-5.059-2.503-7.847-2.461z"/><path fill="%23fff" d="M42.476 15.927l.027 1.183c0 12.09-9.204 26.034-26.034 26.034v-.007c-4.972.007-9.84-1.417-14.025-4.102a18.61 18.61 0 0 0 2.178.132c4.12.004 8.122-1.379 11.364-3.924a9.16 9.16 0 0 1-8.548-6.354 9.12 9.12 0 0 0 4.131-.158 9.15 9.15 0 0 1-7.34-8.969v-.116a9.09 9.09 0 0 0 4.153 1.145c-4.02-2.687-5.26-8.035-2.832-12.217a25.97 25.97 0 0 0 18.858 9.559c-.737-3.178.27-6.508 2.647-8.742 3.685-3.464 9.481-3.287 12.946.397a18.36 18.36 0 0 0 5.811-2.221c-.683 2.118-2.113 3.917-4.022 5.06 1.814-.214 3.586-.699 5.254-1.44a18.59 18.59 0 0 1-4.566 4.74z"/></svg>');
	--th-instagram: url(https://dodo.ac/np/images/0/09/Instagram_Icon_Stylized_%28NH%29.png);
	--th-facebook: url(https://dodo.ac/np/images/a/a9/Facebook_Icon_Stylized_%28NH%29.png);
	
	--nookipedia-bg-color: var(--th-color-tertiary);
	--border: none;
	--height: unset;
	--p-personal-color: transparent;
/*	--th-nookipedia-footer: url(https://i.imgur.com/eXTXhZj.jpg) !important; */
	--th-footer-size: unset;

	--sidebar-color: var(--th-color-primary);
	--sidebar-text: var(--th-color-tertiary);
	--sidebar-background: var(--th-color-tertiary);

	--text-color: hsl(0 0% 89%);
	--link-color: hsl(200 100% 90%);
	--link-color-visited: hsl(245 100% 25%);
	--editor-color: hsl(0 0% 0%);
	--editor-background: hsl(210 17% 98%);
	--editor-background-2: hsl(220 17% 93%);
	--editor-border: hsl(220 17% 93%);
	--editor-border-2: 	hsl(213 9% 80%);
	--ace-gutter: hsl(0 0% 94%);
	--ace-gutter-active: hsl(0 0% 86%);
	--brightness: unset;
	--selection: unset;;
	--cell-background: hsl(0 100% 100%);
    --th-rc-border: hsl(212 9% 66%) ;
/*    --th-logo: url(https://i.imgur.com/KGRN41q.png); */

    --th-discord-sidebar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(290 25% 48%)" width="24" height="24" viewBox="0 0 24 24"><path d="M5 0a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5H5zm4.625 5.686c.022-.003.044.006.055.025a8.72 8.72 0 0 1 .428.861 12.62 12.62 0 0 1 3.789 0c.113-.266.274-.602.42-.861.011-.02.031-.029.053-.025 1.184.205 2.319.56 3.375 1.045.009.004.017.01.021.02 1.872 2.753 2.795 5.859 2.449 9.434-.001.015-.009.03-.021.039-1.418 1.041-2.79 1.673-4.145 2.092-.022.007-.046-.001-.059-.02-.313-.435-.597-.895-.846-1.377-.014-.028-.002-.063.027-.074.451-.17.882-.374 1.295-.615.033-.019.034-.066.004-.088l-.258-.201c-.016-.013-.037-.016-.055-.008-2.68 1.238-5.616 1.238-8.328 0a.05.05 0 0 0-.053.008l-.258.201c-.03.022-.027.069.006.088.413.237.842.444 1.293.615.029.011.042.046.027.074-.244.483-.527.942-.846 1.377-.014.018-.037.026-.059.02-1.348-.419-2.721-1.051-4.139-2.092-.012-.009-.02-.024-.021-.039-.289-3.092.301-6.224 2.449-9.434.005-.009.012-.016.021-.02 1.057-.485 2.189-.841 3.373-1.045zm-.373 5.273c-.83 0-1.49.751-1.49 1.672s.674 1.67 1.49 1.67c.83 0 1.488-.749 1.488-1.67.013-.914-.652-1.672-1.488-1.672zm5.506 0c-.83 0-1.488.751-1.488 1.672s.672 1.67 1.488 1.67c.836 0 1.49-.749 1.49-1.67.013-.914-.654-1.672-1.49-1.672z"/></svg>');
	--th-twitter-sidebar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(290 25% 48%)" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"/></svg>');
	--th-instagram-sidebar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(290 25% 48%)" width="24" height="24" viewBox="0 0 24 24"><path d="M15.233 5.488c-.843-.038-1.097-.046-3.233-.046s-2.389.008-3.232.046c-2.17.099-3.181 1.127-3.279 3.279-.039.844-.048 1.097-.048 3.233s.009 2.389.047 3.233c.099 2.148 1.106 3.18 3.279 3.279.843.038 1.097.047 3.233.047 2.137 0 2.39-.008 3.233-.046 2.17-.099 3.18-1.129 3.279-3.279.038-.844.046-1.097.046-3.233s-.008-2.389-.046-3.232c-.099-2.153-1.111-3.182-3.279-3.281zm-3.233 10.62c-2.269 0-4.108-1.839-4.108-4.108 0-2.269 1.84-4.108 4.108-4.108s4.108 1.839 4.108 4.108c0 2.269-1.839 4.108-4.108 4.108zm4.271-7.418c-.53 0-.96-.43-.96-.96s.43-.96.96-.96.96.43.96.96-.43.96-.96.96zm-1.604 3.31c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667zm4.333-12h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm.952 15.298c-.132 2.909-1.751 4.521-4.653 4.654-.854.039-1.126.048-3.299.048s-2.444-.009-3.298-.048c-2.908-.133-4.52-1.748-4.654-4.654-.039-.853-.048-1.125-.048-3.298 0-2.172.009-2.445.048-3.298.134-2.908 1.748-4.521 4.654-4.653.854-.04 1.125-.049 3.298-.049s2.445.009 3.299.048c2.908.133 4.523 1.751 4.653 4.653.039.854.048 1.127.048 3.299 0 2.173-.009 2.445-.048 3.298z"/></svg>');
	--th-facebook-sidebar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(290 25% 48%)" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>');

	/* Table cell color HSL */
	--cell-background: hsl(0 0% 20%);

	/* Template Lightness values */
	--lightness-full: 0%;
	--lightness-primary: 30%;
	--lightness-secondary: 25%;
	--lightness-tertiary: 15%;
	--lightness-shadow: 60%;
	--lightness-text: 80%;
	
	--lightness-primary-flora: 84%;
	--lightness-secondary-flora: 93%;
	--lightness-tertiary-flora: 96%;
	--lightness-shadow-flora: 50%;
	--lightness-text-flora: 30%;

	--art-hs: 23 61%;
	--bug-hs: 78 76%;
	--design-hs: 353 72%;
	--event-hs: 215 100%;
	--fashion-hs: 322 49%;
	--fashion-hs-sub: 320 45%;
	--film-hs: 318 69%;
	--fish-hs: 200 100%;
	--flora-hs: 350 100%;
	--fossil-hs: 43 74%;
	--furniture-hs: 106 50%;
	--gameplay-hs: 163 58%;
	--gameplay-hs-sub: 160 61%;
	--geography-hs: 120 50%;
	--image-hs: 269 74%;
	--islander-hs: 45 75%;
	--item-hs: 50 95%;
	--location-hs: 146 42%;
	--manga-hs: 318 34%;
	--merchandise-hs: 193 53%;
	--minigame-hs: 782 75%;
	--museum-hs: 60 31%;
	--music-hs: 0 59%;
	--nookipedia-hs: 99 45%;
	--publication-hs: 248 53%;
	--reaction-hs: 277 57%;
	--realworld-hs: 60 20%;
	--seacreature-hs: 215 100%;
	--special-hs: 81 87%;
	--species-hs: 276 56%;
	--ssb-hs: 34 57%;
	--ssb-hs-sub: 39 77%;
	--system-hs: 0 0%;
	--series-hs: 39 100%;
	--series-hs-sub: 42 73%;
	--tool-hs: 34 93%;
	--town-hs: 101 28%;
	--update-hs: 144 39%;
	--user-hs: 50 70%;
	--villager-hs: 195 52%;
	--season-hs: 96 70%;
	--spring-hs: 333 83%;
	--summer-hs: 191 84%;
	--autumn-hs: 29 87%;
	--winter-hs: 241 59%;
}

/* Leaves  */
#mw-header-hack.color-bar {
    background-image: var(--th-leaves); 
    -webkit-mask-image: url();
    mask-image: url();
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Body text color */
body {
	color: var(--text-color);
}

a {
	color: hsl(238 88% 75%);
}

/* Heading line color */
#firstHeading {
    border-bottom: solid 2px hsl(280 12% 44%);
}

/* Sub-heading line color */
.mw-body .mw-parser-output h1::after, .mw-body .mw-parser-output h2::after {
    border-bottom: solid 2px hsl(280 12% 44%);
}

/* Top links line color */
#mw-page-header-links li.selected {
    border-bottom-color: hsl(280 12% 44%);
    color: hsl(0 0% 100%);
}

/* Background color for code text box */
pre, .mw-code {
   background-color: hsl(268 29% 20%);
   border: hsl(235 61% 30%);
}

#mw-content-container .sidebar-inner h3, #personal-inner h3 {
	background-color: var(--th-color-primary) !important;
}

/* Dropdown stylings on mobile and tablet */
@media screen and (max-width: 1099px) {
	.sidebar-inner {
		background-color: var(--th-color-tertiary) !important;
		border: solid var(--th-color-primary) 2px !important;
	}
}

@media screen and (min-width: 1100px) {
	/* Sidebar padding on desktop */
	#mw-site-navigation {
		padding-top: 35px;
	}
	/* Style sidebar chunks on desktop */
	.sidebar-chunk {
		background-color: var(--th-color-tertiary) !important;
		border: solid var(--th-color-primary) 2px !important;
	}
}

/*==================================================
  TABLES
==================================================*/

/* Styled tables */
/* Use class="styled" to make a table use this appearance. You can combine this with one of the color classes below to theme the styled table */
table.styled {
	margin: 10px;
	background: hsl(var(--template-color, 0 0%) var(--lightness-primary-override, var(--lightness-primary, 20%)));
	border: 4px solid hsl(var(--template-color) var(--lightness-primary-override, var(--lightness-primary, 20%)));
	border-radius: 14px;
}
table.styled td {
	background: var(--cell-background, hsl(0 100% 100%));
}
/* This class will try to fallback to regular color if subcolor is undefined */
table.styled th {
	background: hsl(var(--template-subcolor, var(--template-color, 0 0%)) var(--lightness-tertiary-override, var(--lightness-tertiary, 30%))); 
}
/* This class will try to fallback to regular color if subcolor is undefined */
table.styled tr:first-child th {
	font-weight: normal;
	font-family: Coustard;
	font-size: 1.0em;
	height: 40px;
	padding: 0 5px;
	text-align: center;
	background-color: hsl(var(--template-subcolor, var(--template-color, 0 0%)) var(--lightness-secondary-override, var(--lightness-secondary, 25%))); 
	color: hsl(var(--template-color, 0 0%) var(--lightness-text-override, var(--lightness-text, 70%)));
}
table.styled tr:first-child th:first-child {
	border-top-left-radius: 9px;
	border-bottom-left-radius: 0;
}
table.styled tr:first-child th:last-child {
	border-top-right-radius: 9px;
	border-bottom-left-radius: 0;
}
table.styled tr:last-child > :first-child {
	border-bottom-left-radius: 9px;
}
table.styled tr:last-child > :last-child {
	border-bottom-right-radius: 9px;
}