From Brotato Wiki
(.mw-templatedata-doc-wrap) |
(add minor fixes for the StatsCard tabs (.cardtabs) to make the new icons for Info/Unlock tabs look slightly better) |
||
Line 242: | Line 242: | ||
opacity: 0.2; | opacity: 0.2; | ||
} | } | ||
/* Info/Unlock panels */ | |||
.cardtabs__button--icon-info img { | |||
position: relative; | |||
top: -2px; | |||
} | |||
.cardtabs__button--icon-unlock img { | |||
position: relative; | |||
top: -1px; | |||
} | |||
.cardtabs__button--icon-unlock { | |||
padding-bottom: 0; | |||
} | |||
/*============================================================= | |||
Toggle Buttons (Template:ToggleStart + Template:ToggleButton) | |||
==============================================================*/ | |||
.btn { | |||
background: rgba(255,255,255,0.05); | |||
border-radius: 3px; | |||
border: 1px solid white; | |||
display: inline-block; | |||
font-size: 0.85rem; | |||
font-weight: bold; | |||
padding: 6px 10px; | |||
} | |||
.btn:hover { | |||
background: rgba(255,255,255,0.1); | |||
} | |||
Line 264: | Line 293: | ||
} | } | ||
/* | /* Use on lists (ul), ideal for lists inside tables (eg Mod:Extatonion) */ | ||
ul.list-remove-left-margin, | ul.list-remove-left-margin, | ||
ol.list-remove-left-margin { | ol.list-remove-left-margin { | ||
Line 270: | Line 299: | ||
} | } | ||
/* | /* Weird table hack that makes ibox items (Template:Itembox) equal height */ | ||
/* needs to be in a table with the class .itembox-table */ | /* needs to be in a table with the class .itembox-table */ | ||
table.itembox-table td .ibox { | table.itembox-table td .ibox { | ||
Line 280: | Line 309: | ||
table.itembox-table { | table.itembox-table { | ||
height: 1px; | height: 1px; | ||
} | } |
Revision as of 18:52, 11 December 2022
/* CSS placed here will be applied to all skins */ .infobox { background: #eee; border: 1px solid #aaa; float: right; margin: 0 0 1em 1em; padding: 1em; width: 400px; } .infobox-title { font-size: 2em; text-align: center; } .infobox-image { text-align: center; } .infobox th { text-align: right; vertical-align: top; width: 120px; } .infobox td { vertical-align: top; } .wikitable { font-size: min(max(1vw,10px), 16px); } .box-content h3 { font-size: 18px; } /* Template docs: separate the auto-generated content off from the custom content */ .mw-templatedata-doc-wrap { margin-top: 40px; border-top: 1px dashed #333; padding-top: 5px; } /*============================================================= Colors (Dark) ==============================================================*/ :root { --danger-4: 255, 119, 59; --danger-5: 208, 193, 66; --rarity-0-dark: 0, 0, 0; --rarity-1-dark: 32, 32, 32; --rarity-2-dark: 15, 32, 40; --rarity-3-dark: 16, 10, 27; --rarity-4-dark: 36, 9, 9; --rarity-5-dark: 26, 24, 8; --danger-4-dark: 36, 17, 8; --danger-5-dark: 26, 24, 8; } .danger4 { border: 1px solid rgb(var(--danger-4),.5); background: linear-gradient(360deg,rgb(var(--danger-4),.5),rgba(0,0,0,0.5)); } .danger5 { border: 1px solid rgb(var(--danger-5),.5); background: linear-gradient(360deg,rgb(var(--danger-5),.5),rgba(0,0,0,0.5)); } .rarity0dark { background: rgb(var(--rarity-0-dark)); } .rarity1dark { background: rgb(var(--rarity-1-dark)); } .rarity2dark { background: rgb(var(--rarity-2-dark)); } .rarity3dark { background: rgb(var(--rarity-3-dark)); } .rarity4dark { background: rgb(var(--rarity-4-dark)); } .rarity5dark { background: rgb(var(--rarity-5-dark)); } .danger4dark { background: rgb(var(--danger-4-dark)); } .danger5dark { background: rgb(var(--danger-5-dark)); } /*============================================================= Comments ==============================================================*/ #comments-body { background: rgba(38, 38, 38, 0.5); content: 'Comments'; display: inline-block; margin-bottom: 20px; margin-top: 20px; padding: 10px 10px 10px 10px; } #comments-body:before { content: 'Comments'; padding: 10px 20px 0; display: inline-block; font-size: 18px; font-weight: bold; } #comments-body .c-order { border-bottom: 1px solid grey; margin-bottom: 10px; padding: 20px; } #comments-body .c-avatar { display: none; /* avatars aren't used anyway */ } #comments-body .c-container { margin-left: 20px; } #comments-body .c-item { border-color: #666; padding-bottom: 10px; } #comments-body .c-delete a { color: #9f3232 !important; } #comments-body .c-form-title { color: white; } #comments-body textarea#comment { background-color: #222222; color: white; padding: 10px; width: 100%; } #comments-body > form { padding: 0 20px 20px; } /*============================================================= Templates ==============================================================*/ /* Template:MiniIconbox */ .iconbox--inline { margin: 0; vertical-align: baseline; } /* Template:NavBoxCharacters */ .navbox-characters { font-size: 11px; max-width: 750px; } /* Template:NavBoxStats */ .navbox-stats { margin: 0 auto 30px; } .navbox-stats--topmargin { margin-top: 40px !important; } .navbox-stats td { width: 160px; } /*============================================================= Item Box (Template:Itembox) ==============================================================*/ .ibox { width: 200px; padding: 10px; } .ibox__top { display: flex; margin-bottom: 10px; } .ibox__icon { background-color: rgba(255,255,255, 0.1); margin-right: 10px; width: 60px; height: 60px; padding: 3px; flex-shrink: 0; } .ibox__icon p { margin: 0; } .ibox__name { font-weight: bold; } .ibox__stats { font-size: 15px; line-height: 1.2; } .ibox__stats ul { margin: 0; } .ibox__stats li { list-style: none; margin-bottom: 3px; } /*============================================================= Tabs (Template:StatsCardWeaponTabs) ==============================================================*/ /* See also: MediaWiki:Common.js */ .cardtabs__panel { position: relative; z-index: 1; } .cardtabs__panel--js-hidden { display: none; } .cardtabs__button { border-radius: 0 0 5px 5px; display: inline-block; font-size: 13px; line-height: 1.5; margin-left: 8px; padding: 2px 3px 1px; position: relative; top: -2px; } .cardtabs__button:not(.cardtabs__button--disabled):hover { cursor: url('/skins/ScratchWikiSkin2/resources/custom-cursorlink.png?bccaa') 4 4, auto; } .cardtabs__button--active { border-top: 0; z-index: 1; } .cardtabs__button--disabled { opacity: 0.2; } /* Info/Unlock panels */ .cardtabs__button--icon-info img { position: relative; top: -2px; } .cardtabs__button--icon-unlock img { position: relative; top: -1px; } .cardtabs__button--icon-unlock { padding-bottom: 0; } /*============================================================= Toggle Buttons (Template:ToggleStart + Template:ToggleButton) ==============================================================*/ .btn { background: rgba(255,255,255,0.05); border-radius: 3px; border: 1px solid white; display: inline-block; font-size: 0.85rem; font-weight: bold; padding: 6px 10px; } .btn:hover { background: rgba(255,255,255,0.1); } /*============================================================= Special Classes ==============================================================*/ /* Character's "Starting Weapons" table */ .starting-weapons-table { margin: 0.4em 0 0.5em 0; } .starting-weapons-table td { text-align: center; vertical-align: top; width: 85px; } @media only screen and (max-width: 640px) { .starting-weapons-table td { font-size: 12px; } } /* Use on lists (ul), ideal for lists inside tables (eg Mod:Extatonion) */ ul.list-remove-left-margin, ol.list-remove-left-margin { margin-left: 25px; } /* Weird table hack that makes ibox items (Template:Itembox) equal height */ /* needs to be in a table with the class .itembox-table */ table.itembox-table td .ibox { height: calc(100% - 20px); } table.itembox-table td { height: 100%; } table.itembox-table { height: 1px; }