From Brotato Wiki
(.btn--active / .btn--inactive) |
(make H4s bigger, and make them bold like other headings. Previously, H4 would appear smaller than regular text, making them hard to see among other text) |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* | |||
https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css | |||
*/ | |||
.infobox { | .infobox { | ||
background: #eee; | background: #eee; | ||
Line 30: | Line 35: | ||
font-size: 18px; | font-size: 18px; | ||
} | } | ||
.box-content h4 { | |||
font-size: 16px; | |||
font-weight: bold; | |||
} | |||
/* Template docs: separate the auto-generated content off from the custom content */ | /* Template docs: separate the auto-generated content off from the custom content */ | ||
.mw-templatedata-doc-wrap { | .mw-templatedata-doc-wrap { | ||
Line 35: | Line 46: | ||
border-top: 1px dashed #333; | border-top: 1px dashed #333; | ||
padding-top: 5px; | padding-top: 5px; | ||
} | |||
/* fixed collapsed tables having squashed captions */ | |||
table.mw-collapsed { | |||
min-width: 200px; | |||
} | |||
/* Add a small top margin above TOCs if they're directly below a margin */ | |||
/* (without this the spacing looks too cramped) */ | |||
p + #toc { | |||
margin-top: 30px; | |||
} | } | ||
Line 40: | Line 62: | ||
Colors (Dark) | Colors (Dark) | ||
==============================================================*/ | ==============================================================*/ | ||
.danger4 { | .danger4 { | ||
Line 166: | Line 175: | ||
.navbox-stats td { | .navbox-stats td { | ||
width: 160px; | width: 160px; | ||
} | } | ||
Line 177: | Line 186: | ||
width: 200px; | width: 200px; | ||
padding: 10px; | padding: 10px; | ||
transition: 0.1s; | |||
opacity: 1; | |||
} | } | ||
.ibox__top { | .ibox__top { | ||
Line 206: | Line 217: | ||
list-style: none; | list-style: none; | ||
margin-bottom: 3px; | margin-bottom: 3px; | ||
} | |||
.ibox--hidden { | |||
display: none; | |||
} | |||
/*============================================================= | |||
StatsCard Grid | |||
==============================================================*/ | |||
.statscard-grid { | |||
margin: 0 auto; | |||
max-width: 1230px; | |||
} | |||
.statscard-grid--fullheight { | |||
min-height: calc(80vh + 60px); | |||
} | |||
.statscard-grid__main { | |||
display: flex; | |||
flex-wrap: wrap; | |||
max-height: 80vh; | |||
overflow: auto; | |||
} | |||
.statscard-grid__item { | |||
flex: 0 0 auto; | |||
/* margin-left: -20px; */ | |||
/* padding: 0 20px 20px; */ | |||
} | |||
.statscard-grid__main .ibox { | |||
height: calc(100% - 40px); /*makes all items equal height*/ | |||
margin: 0 20px 20px 0; | |||
} | |||
/*============================================================= | |||
StatsCard Grid: Options | |||
==============================================================*/ | |||
/* 👁️ Filtered items become transparent, instead of being fully hidden */ | |||
.statscard-grid__main--transparent-hidden-items .ibox--hidden { | |||
display: block; | |||
opacity: 0.2; | |||
} | |||
/* 📦 Only show icons */ | |||
.statscard-grid__main--only-show-icons .ibox { | |||
height: auto; | |||
margin: 0 5px 5px 0; | |||
padding: 0; | |||
width: auto; | |||
} | |||
.statscard-grid__main--only-show-icons .ibox__top { | |||
margin-bottom: 0; | |||
} | |||
.statscard-grid__main--only-show-icons .ibox__icon { | |||
margin-right: 0; | |||
} | |||
.statscard-grid__main--only-show-icons .ibox__top-right, | |||
.statscard-grid__main--only-show-icons .ibox__stats { | |||
display: none; | |||
} | } | ||
Line 233: | Line 308: | ||
} | } | ||
.cardtabs__button:not(.cardtabs__button--disabled):hover { | .cardtabs__button:not(.cardtabs__button--disabled):hover { | ||
cursor: url('/skins/ScratchWikiSkin2/resources/custom-cursorlink.png?bccaa') 4 4, auto; | cursor: url('/skins/ScratchWikiSkin2/resources/custom-cursorlink.png?bccaa') 4 4, auto; | ||
} | } | ||
.cardtabs__button--active { | .cardtabs__button--active { |
Latest revision as of 05:45, 18 June 2023
/* CSS placed here will be applied to all skins */ /* https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css */ .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; } .box-content h4 { font-size: 16px; font-weight: bold; } /* 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; } /* fixed collapsed tables having squashed captions */ table.mw-collapsed { min-width: 200px; } /* Add a small top margin above TOCs if they're directly below a margin */ /* (without this the spacing looks too cramped) */ p + #toc { margin-top: 30px; } /*============================================================= Colors (Dark) ==============================================================*/ .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; transition: 0.1s; opacity: 1; } .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; } .ibox--hidden { display: none; } /*============================================================= StatsCard Grid ==============================================================*/ .statscard-grid { margin: 0 auto; max-width: 1230px; } .statscard-grid--fullheight { min-height: calc(80vh + 60px); } .statscard-grid__main { display: flex; flex-wrap: wrap; max-height: 80vh; overflow: auto; } .statscard-grid__item { flex: 0 0 auto; /* margin-left: -20px; */ /* padding: 0 20px 20px; */ } .statscard-grid__main .ibox { height: calc(100% - 40px); /*makes all items equal height*/ margin: 0 20px 20px 0; } /*============================================================= StatsCard Grid: Options ==============================================================*/ /* 👁️ Filtered items become transparent, instead of being fully hidden */ .statscard-grid__main--transparent-hidden-items .ibox--hidden { display: block; opacity: 0.2; } /* 📦 Only show icons */ .statscard-grid__main--only-show-icons .ibox { height: auto; margin: 0 5px 5px 0; padding: 0; width: auto; } .statscard-grid__main--only-show-icons .ibox__top { margin-bottom: 0; } .statscard-grid__main--only-show-icons .ibox__icon { margin-right: 0; } .statscard-grid__main--only-show-icons .ibox__top-right, .statscard-grid__main--only-show-icons .ibox__stats { display: none; } /*============================================================= 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); } .btn--link { padding: 0; } .btn--link > a { padding: 6px 15px 6px 10px; padding-right: 15px !important; /* override needed due to exteral link bg image icon */ display: inline-block; } .btn--active { border-color: #366436; } .btn--inactive { border-color: #643636; } /*============================================================= 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; }