MediaWiki:Common.css
From Official Barotrauma Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */ body.page-Main_Page h1 { display: none; } h1, h2 { border-bottom: 0 } table { background: rgb(9,9,8) !important; z-index: 100 } th { background: rgb(9,9,8) !important } tr { background: #121212; padding: 0.5em } td { padding: 0.5em; background: #121212 } td a img { padding: 0.2em 1em } .roundy table { width: 100% } .mp-section { -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 1em; border: 1px solid #080808; background: rgb(9,9,8); background: -moz-radial-gradient(circle, rgba(9,9,8,1) 0%, rgba(9,9,8,1) 50%, rgba(9,9,8,1) 100%); background: -webkit-radial-gradient(circle, rgba(9,9,8,1) 0%, rgba(9,9,8,1) 50%, rgba(9,9,8,1) 100%); background: radial-gradient(circle, rgba(9,9,8,1) 0%, rgba(9,9,8,1) 50%, rgba(9,9,8,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#090908",endColorstr="#090908",GradientType=1); } .universal-nav { border-radius:1em;width:80%; margin: auto; background:#121212 } .universal-nav td { padding: 0.5em 5%; text-align: left; } .universal-nav .category-header { padding: 0.2em; font-size:110%; text-align: center; } .universal-nav .mw-collapsible { width:100%; margin: auto } .universal-nav h1, .universal-nav h2 { border-bottom: 0 } .universal-nav table { background: rgb(9,9,8); z-index: 100 } .universal-nav th { background: rgb(9,9,8) } .universal-nav tr { background: #121212; padding: 0.5em } .universal-nav td { padding: 0.5em; background: #121212 } .universal-nav td a img { padding: 0.2em 1em } .universal-nav th { padding: 0.5rem } .universal-nav td ul { list-style: none; text-align: justify; margin: 0; background-color: #121212; padding: 0.3rem 0; } .universal-nav td ul li { margin: 0; } .universal-nav td ul li a { vertical-align: middle; } .universal-nav td ul li > :first-child { display: inline-flex; min-width: 35px; min-height: 30px; justify-content: center; align-items: center; } .universal-nav td ul li img { vertical-align: middle; max-width: 30px; max-height: 25px; width: auto; height: auto; padding-left: 0; padding-right: 0; } /* Responsive universal nav: Fallback */ .universal-nav td ul { -webkit-column-count: 1; -webkit-column-gap: 1%; /* Saf3, Chrome*/ -moz-column-count: 1; -moz-column-gap: 1%; /* FF3.5+ */ column-count: 1; column-gap: 1%; /* Opera 11+*/ } /* Mobile */ @media all and (max-width: 768px) { .universal-nav td ul { -webkit-column-count: 1; -webkit-column-gap: 1%; /* Saf3, Chrome*/ -moz-column-count: 1; -moz-column-gap: 1%; /* FF3.5+ */ column-count: 1; column-gap: 1%; /* Opera 11+*/ } } /* Tablet */ @media all and (min-width: 992px) { .universal-nav td ul { -webkit-column-count: 2; -webkit-column-gap: 1%; /* Saf3, Chrome*/ -moz-column-count: 2; -moz-column-gap: 1%; /* FF3.5+ */ column-count: 2; column-gap: 1%; /* Opera 11+*/ } } /* Large screen */ @media all and (min-width: 1200px) { .universal-nav td ul { -webkit-column-count: 3; -webkit-column-gap: 1%; /* Saf3, Chrome*/ -moz-column-count: 3; -moz-column-gap: 1%; /* FF3.5+ */ column-count: 3; column-gap: 1%; /* Opera 11+*/ } } /* Responsive table: By adding responsive-table class to a table it will make it in to a responsive one */ .responsive-table, .responsive-table table { margin-bottom: 1.5em; border: 0 !important; box-sizing: border-box; } .responsive-table thead { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .responsive-table thead th { vertical-align: bottom; font-size: 13px; padding: 1rem 1.5rem; font-weight: normal; text-align: left; color: white; } .responsive-table thead th:first-of-type { text-align: left; } .responsive-table tbody, .responsive-table tr, .responsive-table th, .responsive-table td { padding: 0; text-align: left; white-space: normal; box-sizing: border-box; } .responsive-table th, .responsive-table td { padding: 1rem; vertical-align: top; } .responsive-table caption { margin-bottom: 1em; font-size: 1em; font-weight: bold; text-align: center; } .responsive-table tfoot { font-size: 0.8em; font-style: italic; } .responsive-table tbody tr { margin-bottom: 0.5em; } .responsive-table tbody tr:last-of-type { margin-bottom: 0; } .responsive-table tbody th[scope="row"] { color: white; } .responsive-table tbody td[data-type="currency"] { text-align: right; } .responsive-table tbody td[data-title]:before { content: attr(data-title); float: left; font-size: 1em; color: rgba(94, 93, 82, 0.75); } .responsive-table tbody td { text-align: left; } @media (min-width: 75em) { .responsive-table th, .responsive-table td { padding: 0.75em; } } @media (min-width: 62em) { .responsive-table { font-size: 1em; width: 100% !important; } .responsive-table th, .responsive-table td { padding: 0.75em 0.5em; } .responsive-table tfoot { font-size: 0.9em; } } @media (min-width: 52em) { .responsive-table { font-size: 0.9em; width: 100% !important; } .responsive-table thead { position: relative; clip: auto; height: auto; width: auto; overflow: auto; } .responsive-table tr { display: table-row; } .responsive-table th, .responsive-table td { display: table-cell; padding: 1em; } .responsive-table caption { font-size: 1.5em; } .responsive-table tbody { display: table-row-group; } .responsive-table tbody tr { display: table-row; border-width: 1px; } .responsive-table tbody tr:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.1); } .responsive-table tbody th[scope="row"] { background-color: transparent; padding: 1rem 1.5rem; font-weight: 400; vertical-align: top; color: #707070; text-align: left; } .responsive-table tbody td { text-align: left; } .responsive-table tbody td[data-title]:before { content: none; } } .mainleft { float: left; width: 25%; } .mainright { float: right; width: 25%; } .maincenter { margin: auto; width: 48%; } /* Discord invite button */ div#mw-panel li a[href="https://discord.gg/undertow"] { display:inline-block; position:relative; height:20px; width:119px; margin-top:5px; } div#mw-panel li a[href="https://discord.gg/undertow"]::before { position: absolute; width:100%; height:100%; top:0; left:0; content:""; background:url(https://discordapp.com/api/guilds/103209684680323072/embed.png) no-repeat; } /* [[Template:Connection panels]] */ .cp-tooltip { pointer-events: none; position:absolute; top:0; right:50%; transition-timing-function: ease-out; background-color: rgba(255,80,0,0); color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0); /*transition: background-color 0.4s, color 0.4s, transform 0.4s, border 0.4s;*/ transform: translate(50%,0) translateZ(0) scale(1.0, 1.0); text-align: center; overflow: hidden; z-index: 5; min-width: 160px; max-width: 200px; } .cp-hover:hover + .cp-tooltip { background-color: #000000; color: #ffffff; padding: 2px; border: 1px solid #ffffff; transform: translate(50%,-100%) translateZ(0) scale(1.0, 1.0); } .cp-hover { transform: translate(0,0) translateZ(0) scale(1.0, 1.0); z-index:10; background-color: transparent; } /* Override table styling from quotes */ .noborder { background: transparent } .noborder tr { background: transparent } .noborder td { background: transparent } /* html a, html .mw-body a.external, html .mw-body a.extiw, html .uls-language-list a { color: #00ffff; } html a:visited, html .mw-body a.external:visited, html .mw-body a.extiw:visited { color: #00eeff; } html body .wikiEditor-ui-toolbar .tabs span.tab a { color: #00eeff; } html body .oo-ui-buttonElement-button, html body .mw-ui-button, html body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, html body .oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button { color: #ffffff; background-color: #00ffff; border-color: #00ffff; } html #left-navigation div.darkvectorbaroTabs li.selected, html #right-navigation div.darkvectorbaroTabs li.selected { background-color: #0c0d0b; background-image: -moz-linear-gradient(top, #00ffff 0, #0c0d0b 10%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ffff), color-stop(10%, #0c0d0b)); background-image: -webkit-linear-gradient(top, #00ffff 0, #0c0d0b 10%); background-image: linear-gradient(#00ffff 0, #0c0d0b 10%) } html #left-navigation div.darkvectorbaroTabs li.selected a, html #right-navigation div.darkvectorbaroTabs li.selected a, html #left-navigation div.darkvectorbaroTabs li.selected a:visited, html #right-navigation div.darkvectorbaroTabs li.selected a:visited { color: #00eeff } html #left-navigation div.darkvectorbaroTabs li a, html #right-navigation div.darkvectorbaroTabs li a { color: #00ffff } html div#mw-panel div.portal div.body ul li a:visited{color:#00eeff} html div#mw-panel div.portal div.body ul li a{color:#00ffff} html #mw-head div.darkvectorbaroMenu h3 span { color: #00ffff } */