Tuflow

MediaWiki:Common.css: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 278:
 
/* Make the Example Model Catalogue accessible on narrow screens */
 
/* Example Model Catalogue wrapper */
 
.example-model-table-wrapper {
Line 284 ⟶ 286:
width: 100%;
max-width: 100%;
overflow-x: autovisible;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
 
Line 309:
width: 100%;
max-width: 100%;
overflow-x: hiddenauto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
 
Line 364 ⟶ 366:
footer [class*="last-modified"] {
display: none !important;
}
 
/* -------------------------------------------------------------------------
* Final compact sizing for all searchable table controls
* ------------------------------------------------------------------------- */
 
.benchmark-table-controls {
float: none !important;
clear: both !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 400px !important;
margin: 0.5rem 0 0.4rem auto !important;
align-items: stretch !important;
}
 
input.benchmark-search-input {
box-sizing: border-box !important;
width: 100% !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 2px 0.65rem 2px 2rem !important;
border-radius: 4px !important;
background-position: 0.55rem center !important;
background-size: 14px 14px !important;
font-size: 0.84rem !important;
line-height: 22px !important;
appearance: none !important;
-webkit-appearance: none !important;
}
 
button.benchmark-search-clear {
box-sizing: border-box !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 0 0.65rem !important;
font-size: 0.84rem !important;
line-height: 26px !important;
}
 
.benchmark-result-count {
min-height: 1rem !important;
margin-top: 0.1rem !important;
font-size: 0.78rem !important;
line-height: 1rem !important;
}
 
/* Keep all search controls full width on mobile */
 
@media screen and (max-width: 900px) {
.benchmark-table-controls {
width: 100% !important;
max-width: none !important;
margin: 0 0 0.4rem !important;
}
}
 
/* Dark mode toggle fallback position */
 
#tuflow-dark-mode-fallback {
position: fixed;
top: 8px;
right: 12px;
z-index: 10000;
padding: 5px 9px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
}
 
#tuflow-dark-mode-fallback a {
color: #0645ad;
text-decoration: none;
white-space: nowrap;
}
 
/* -------------------------------------------------------------------------
* TUFLOW Wiki dark mode colours
* ------------------------------------------------------------------------- */
 
html.tuflow-dark-mode,
html.tuflow-dark-mode body {
background-color: #15181d !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode #content,
html.tuflow-dark-mode .mw-body,
html.tuflow-dark-mode .mw-body-content,
html.tuflow-dark-mode #mw-content-text,
html.tuflow-dark-mode .vector-body {
background-color: #1d2127 !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode h1,
html.tuflow-dark-mode h2,
html.tuflow-dark-mode h3,
html.tuflow-dark-mode h4,
html.tuflow-dark-mode h5,
html.tuflow-dark-mode h6 {
color: #f4f5f7 !important;
border-color: #4a515c !important;
}
 
html.tuflow-dark-mode a {
color: #8ab4f8 !important;
}
 
html.tuflow-dark-mode a:visited {
color: #c6a0f6 !important;
}
 
html.tuflow-dark-mode #mw-panel,
html.tuflow-dark-mode #mw-head,
html.tuflow-dark-mode #p-personal,
html.tuflow-dark-mode .vector-menu-content,
html.tuflow-dark-mode .vector-header-container {
background-color: #171a1f !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode .wikitable,
html.tuflow-dark-mode table.wikitable {
background-color: #20252c !important;
color: #e6e8eb !important;
border-color: #59616d !important;
}
 
html.tuflow-dark-mode .wikitable th,
html.tuflow-dark-mode .wikitable td {
border-color: #59616d !important;
}
 
html.tuflow-dark-mode .wikitable td {
background-color: #20252c !important;
}
 
html.tuflow-dark-mode input,
html.tuflow-dark-mode textarea,
html.tuflow-dark-mode select,
html.tuflow-dark-mode button {
background-color: #242a32 !important;
color: #f1f3f4 !important;
border-color: #68717d !important;
}
 
html.tuflow-dark-mode input::placeholder,
html.tuflow-dark-mode textarea::placeholder {
color: #aeb4bd !important;
}
 
html.tuflow-dark-mode pre,
html.tuflow-dark-mode code,
html.tuflow-dark-mode .mw-code {
background-color: #111418 !important;
color: #e8eaed !important;
border-color: #4d5560 !important;
}
 
html.tuflow-dark-mode .toc,
html.tuflow-dark-mode .catlinks,
html.tuflow-dark-mode .thumbinner,
html.tuflow-dark-mode .mw-message-box,
html.tuflow-dark-mode .warningbox,
html.tuflow-dark-mode .successbox {
background-color: #242a31 !important;
color: #e6e8eb !important;
border-color: #59616d !important;
}
 
html.tuflow-dark-mode hr {
border-color: #4a515c !important;
}
 
html.tuflow-dark-mode #footer,
html.tuflow-dark-mode .mw-footer {
background-color: #15181d !important;
color: #c9cdd3 !important;
}
 
/* -------------------------------------------------------------------------
* Dark mode support for Vector Legacy desktop skin
* ------------------------------------------------------------------------- */
 
html.tuflow-dark-mode #mw-page-base,
html.tuflow-dark-mode #mw-head-base,
html.tuflow-dark-mode #content,
html.tuflow-dark-mode .mw-body,
html.tuflow-dark-mode .mw-body-content,
html.tuflow-dark-mode #mw-content-text,
html.tuflow-dark-mode #bodyContent {
background: #1d2127 !important;
background-image: none !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode #mw-panel,
html.tuflow-dark-mode #mw-navigation,
html.tuflow-dark-mode #p-logo,
html.tuflow-dark-mode #left-navigation,
html.tuflow-dark-mode #right-navigation,
html.tuflow-dark-mode #p-personal,
html.tuflow-dark-mode #mw-head {
background: #171a1f !important;
background-image: none !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode .vectorTabs,
html.tuflow-dark-mode .vectorTabs ul,
html.tuflow-dark-mode .vectorTabs li,
html.tuflow-dark-mode .vectorTabs span,
html.tuflow-dark-mode .vectorMenu,
html.tuflow-dark-mode .vectorMenu h3,
html.tuflow-dark-mode .vectorMenu .menu {
background: #242a32 !important;
background-image: none !important;
border-color: #59616d !important;
color: #e6e8eb !important;
}
 
html.tuflow-dark-mode .vectorTabs a,
html.tuflow-dark-mode .vectorMenu a,
html.tuflow-dark-mode #mw-panel a,
html.tuflow-dark-mode #p-personal a {
color: #8ab4f8 !important;
}
 
html.tuflow-dark-mode #searchInput,
html.tuflow-dark-mode .searchButton,
html.tuflow-dark-mode #simpleSearch {
background-color: #242a32 !important;
color: #f1f3f4 !important;
border-color: #68717d !important;
}
 
html.tuflow-dark-mode .mw-editsection,
html.tuflow-dark-mode .mw-editsection a {
color: #8ab4f8 !important;
}
 
html.tuflow-dark-mode #footer,
html.tuflow-dark-mode #footer-info,
html.tuflow-dark-mode #footer-places {
background-color: #15181d !important;
color: #c9cdd3 !important;
}
 
/* -------------------------------------------------------------------------
* Dark mode support for homepage panels and styled content tables
* ------------------------------------------------------------------------- */
 
/* Let the browser choose suitable colours for standard controls */
html.tuflow-dark-mode {
color-scheme: dark;
}
 
/* General borders and text for styled wiki tables */
html.tuflow-dark-mode .mw-parser-output table {
border-color: #59616d !important;
}
 
html.tuflow-dark-mode .mw-parser-output table[style],
html.tuflow-dark-mode .mw-parser-output td[style],
html.tuflow-dark-mode .mw-parser-output th[style] {
color: #e6e8eb !important;
}
 
/*
* Convert pale custom table and panel backgrounds
* into a consistent dark surface.
*/
html.tuflow-dark-mode .mw-parser-output table[style*="background"],
html.tuflow-dark-mode .mw-parser-output td[style*="background"] {
background-color: #252b33 !important;
}
 
/* Preserve dark blue section headings */
html.tuflow-dark-mode .mw-parser-output th[style*="background"],
html.tuflow-dark-mode .mw-parser-output td[style*="#005581"],
html.tuflow-dark-mode .mw-parser-output td[style*="#335f8c"],
html.tuflow-dark-mode .mw-parser-output th[style*="#005581"],
html.tuflow-dark-mode .mw-parser-output th[style*="#335f8c"] {
background-color: #294f75 !important;
color: #ffffff !important;
}
 
/* Improve links inside dark homepage panels */
html.tuflow-dark-mode .mw-parser-output table[style*="background"] a,
html.tuflow-dark-mode .mw-parser-output td[style*="background"] a {
color: #9ec1ff !important;
}
 
html.tuflow-dark-mode .mw-parser-output table[style*="background"] a:visited,
html.tuflow-dark-mode .mw-parser-output td[style*="background"] a:visited {
color: #d6b5ff !important;
}
 
/* Keep images, logos, maps and plots unchanged */
html.tuflow-dark-mode .mw-parser-output img,
html.tuflow-dark-mode .mw-parser-output svg,
html.tuflow-dark-mode .mw-parser-output canvas {
filter: none !important;
}
 
/* Restore sticky Example Model Catalogue headers */
 
.example-model-results-table > thead,
.example-model-results-table > tbody {
overflow: visible;
}
 
.example-model-results-table tr:first-child th {
position: sticky !important;
top: 0 !important;
z-index: 12 !important;
}
 
.example-model-results-table tr:nth-child(2) th {
position: sticky !important;
top: 2.2em !important;
z-index: 11 !important;
}
 
/* Sticky header colours in dark mode */
 
html.tuflow-dark-mode
.example-model-results-table tr:first-child th {
background-color: #294f75 !important;
color: #fff !important;
}
 
html.tuflow-dark-mode
.example-model-results-table tr:nth-child(2) th {
background-color: #252b33 !important;
color: #f4f5f7 !important;
}
Retrieved from "https://wiki.tuflow.com/MediaWiki:Common.css"