User:Dorsal Axe/common.css

/*================================================== VARIABLES

=
=====================================*/

/* Do NOT edit these unless you know what you're doing */ /* These properties are used by many different classes */
 * root {

/* Global border radius */ --default-border-radius: 20px; --template-outer-radius: 14px; --template-inner-radius: 9px;

/* NIWA link formatting */ --niwa-icon: no-repeat scroll right center transparent; --niwa-padding: padding-right: 18px;

/* N/A color */ --not-applicable: hsl(0 0% 90%);

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

/* Item colors */ --color-red: hsl(12 87% 79%); --color-orange: hsl(32 92% 80%); --color-yellow: hsl(42 96% 81%); --color-green: hsl(135 47% 71%); --color-aqua: hsl(196 50% 80%); --color-blue: hsl(197 39% 66%); --color-purple: hsl(331 33% 73%); --color-pink: hsl(11 85% 87%); --color-beige: hsl(50 54% 80%); --color-brown: hsl(31 47% 80%); --color-gray: hsl(0 0% 80%); --color-black: hsl(0 0% 70%); --color-white: hsl(0 0% 100%)

/* Pocket Camp theme colors*/ --theme-civic: hsl(234 50% 80%); --theme-cool: hsl(208 96% 80%); --theme-cute: hsl(345 70% 80%); --theme-elegant: hsl(282 63% 80%); --theme-harmonious: hsl(12 74% 80%); --theme-hip: hsl(30 90% 80%); --theme-historical: hsl(341 45% 80%); --theme-modern: hsl(177 58% 80%); --theme-natural: hsl(44 96% 80%); --theme-rustic: hsl(71 98% 80%); --theme-sporty: hsl(161 93% 80%); --theme-generic: hsl(0 0% 80%); --theme-special: hsl(53 100% 80%);

/* Template Alpha values */ --opacity-full: 100%; --opacity-high: 80%; --opacity-mid: 60%; --opacity-low: 40%; /* Template Lightness values */ --primary-lightness: 70%; --secondary-lightness: 85%; --tertiary-lightness: 90%; --shadow-lightness: 40%; --text-lightness: 30%;

/* Test color */ --test-color: 0 100%;

/* Template Hue & Saturation values */ --template-color: 0 0%; --art-color: 23 61%; --bug-color: 78 76%; --event-color: 215 100%; --fashion-color: 322 49%; --fashion-subcolor: 320 45%; --film-color: 318 69%; --fish-color: 200 100%; --flora-color: 350 100%; --fossil-color: 43 74%; --furniture-color: 106 50%; --gameplay-color: 163 58%; --gameplay-subcolor: 160 61%; --geography-color: 120 50%; --islander-color: 45 75%; --location-color: 146 42%; --manga-color: 318 34%; --merchandise-color: 193 53%; --minigame-color: 782 75%; --museum-color: 60 31%; --music-color: 0 59%; --nookipedia-color: 99 45%; --publication-color: 248 53%; --pwp-color: 50 95%; --realworld-color: 60 20%; --seacreature-color: 215 100%; --special-color: 81 87%; --species-color: 276 56%; --ssb-color: 34 57%; --ssb-subcolor: 39 77%; --system-color: 0 0%; --series-color: 39 100%; --series-subcolor: 42 73%; --tools-color: 34 93%; --updates-color: 144 39%; --villager-color: 195 52%; --season-color: 96 70%; --spring-color: 333 83%; --summer-color: 191 84%; --autumn-color: 29 87%; --winter-color: 241 59%; /* Skin theme colors */ /* MOST OF THESE AREN'T READY TO USE YET */ --th-spring-primary: hsl(95 39% 48%); --th-spring-secondary: hsl(95 36% 84%); /*--th-summer-primary: hsl; --th-summer-secondary: hsl; --th-autumn-primary: hsl; --th-autumn-secondary: hsl; --th-winter-primary: hsl; --th-winter-secondary: hsl; --th-dark-primary: hsl; --th-dark-secondary: hsl; */ /* Special theme colors */ /* THESE AREN'T READY TO USE YET */ /*--th-halloween-primary: hsl; --th-halloween-secondary: hsl; --th-pc-primary: hsl; --th-pc-secondary: hsl; --th-nh-primary: hsl; --th-nh-secondary: hsl; */ }

/*================================================== COLORS

=
=====================================*/ /* Template colors */ /* Classes without subcolors fallback to their regular Hue and Saturation values */ .color-art { --template-color: var(--art-color); } .color-bug { --template-color: var(--bug-color); } .color-event { --template-color: var(--event-color); } .color-fashion { --template-color: var(--fashion-color); --template-subcolor: var(--fashion-subcolor); } .color-film { --template-color: var(--film-color); } .color-fish { --template-color: var(--fish-color); } .color-flora { --template-color: var(--flora-color); } .color-fossil { --template-color: var(--fossil-color); } .color-furniture { --template-color: var(--furniture-color); } .color-gameplay { --template-color: var(--gameplay-color); --template-subcolor: var(--gameplay-subcolor); } .color-geography { --template-color: var(--geography-color); } .color-islander { --template-color: var(--islander-color); } .color-location { --template-color: var(--location-color); } .color-manga { --template-color: var(--manga-color); } .color-merchandise { --template-color: var(--merchandise-color); } .color-minigame { --template-color: var(--minigame-color); } .color-museum { --template-color: var(--museum-color); } .color-music { --template-color: var(--music-color); } .color-nookipedia { --template-color: var(--nookipedia-color); } .color-publication { --template-color: var(--publication-color); } .color-pwp { --template-color: var(--pwp-color); } .color-realworld { --template-color: var(--realworld-color); } .color-seacreature { --template-color: var(--seacreature-color); } .color-special { --template-color: var(--special-color); } .color-species { --template-color: var(--species-color); } .color-ssb { --template-color: var(--ssb-color); --template-subcolor: var(--ssb-subcolor); } .color-system { --template-color: var(--system-color); } .color-series { --template-color: var(--series-color); --template-subcolor: var(--series-subcolor); } .color-tools { --template-color: var(--tools-color); } .color-updates { --template-color: var(--updates-color); } .color-villager { --template-color: var(--villager-color); } .color-season { --template-color: var(--season-color); } .color-spring { --template-color: var(--spring-color); } .color-summer { --template-color: var(--summer-color); } .color-autumn { --template-color: var(--autumn-color); } .color-winter { --template-color: var(--winter-color); } .color-test { --template-color: var(--test-color); }

/* Theme primary/secondary colors */ /* THESE AREN'T READY TO USE YET */ .th-spring { --th-color-primary: var(--th-spring-primary); --th-color-secondary: var(--th-spring-secondary); } /*.th-summer { --th-color-primary: var(--th-summer-primary); --th-color-secondary: var(--th-summer-secondary); } .th-autumn { --th-color-primary: var(--th-autumn-primary); --th-color-secondary: var(--th-autumn-secondary); } .th-winter { --th-color-primary: var(--th-winter-primary); --th-color-secondary: var(--th-winter-secondary); } .th-dark { --th-color-primary: var(--th-dark-primary); --th-color-secondary: var(--th-dark-secondary); } .th-halloween { --th-color-primary: var(--th-halloween-primary); --th-color-secondary: var(--th-halloween-secondary); } .th-pc { --th-color-primary: var(--th-pc-primary); --th-color-secondary: var(--th-pc-secondary); } .th-nh { --th-color-primary: var(--th-nh-primary); --th-color-secondary: var(--th-nh-secondary); } */

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

=
=====================================*/

/* Style tables with 'styled' class */ table.styled { margin: 10px; background: hsl(var(--template-color) var(--primary-lightness)); border: 4px solid hsl(var(--template-color) var(--primary-lightness)); border-radius: 14px; } table.styled td { background: var(--cell-background); } table.styled th { background: hsl(var(--template-subcolor, var(--template-color)) var(--tertiary-lightness)); /* Will fallback to regular color if subcolor undefined */ } table.styled tr:first-child th { font-weight: normal; font-family: Coustard; font-size: 1.0em; padding: 0 5px; text-align: center; background-color: hsl(var(--template-subcolor, var(--template-color)) var(--secondary-lightness)); /* Will fallback to regular color if subcolor undefined */ }

/*================================================== BOXES

=
=====================================*/ /* Themed divs */ .theme-background { background-color: var(--th-color-secondary); } .theme-border { border: 3px solid var(--th-color-primary); } .theme-text { color: (--th-color-primary); } .theme-hr { background-color: (--th-color-primary); }

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */ /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */ /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */

/*================================================== STATIONERY TEST

=
=====================================*/ .stationery { background: url(https://dodo.ac/np/images/5/59/Notebook_paper.png); background-size: 250px 100px; }

/*================================================== 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; } }