MediaWiki:Timeless.css
From HandWiki
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.
/* All CSS here will be loaded for users of the Timeless skin */
/* Color variable for dark mode defined in Timeless/resources/screen-common.less */
/* search results use all space */
.mw-search-results {
max-width: 100%;
width:100%;
}
.tocnumber {
color: var(--text-color);
}
.thumbcaption, .thumbinner {
color: var(--text-color) !important;
background-color: var(--toc-background-color) !important;
}
.toctogglelabel {
color: var(--external-link-color);
}
.tools-inline li.selected a {
color: var(--text-color);
}
.mw-parser-output .sidebar {
color: var(--text-color);
}
div.editOptions {
background-color: var(--white-background-color);
}
.handboxtitle {
background-color: var(--white-background-color);
color: var(--text-color);
box-sizing: border-box;
float:left;
flex: 1 0 33%;
width:33%; border: 2px solid #eaecf0;
padding: 1em;
min-width: 20em;
overflow:hidden;
}
.mbox-text, .site-navigation {
background-color: var(--toc-background-color);
color: var(--text-color);
}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
background-color: var(--toc-background-color);
color: var(--text-color);
}
#mw-site-navigation, #mw-content-block {
background-color: var(--toc-background-color) !important;
color: var(--text-color) !important;
}
.dropdown, #personal .dropdown {
background-color: var(--toc-background-color);
color: var(--text-color);
}
.wikitable th {
background-color: var(--white-background-color) !important;
color: var(--text-color) !important;
}
table {
background-color: var(--toc-background-color) !important;
color: var(--text-color) !important;
}
a {
color: var(--link-color);
}
a:hover {
text-decoration: underline;
color: var(--hover-color);
}
.mw-parser-output a.external {
color: var(--external-link-color);
}
#toc, #toccolours {
background-color: var(--toc-background-color);
color: var(--text-color);
}
.navbox th, .navbox-title {
background-color: var(--head-background-color);
color: var(--text-color);
}
.infobox, .navbox, .navbox-list, .infobox, .sidebar-content, .sidebar, .blockquote {
background-color: var(--toc-background-color);
color: var(--text-color);
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
background-color: var(--head-background-color) !important;
color: var(--text-color) !important;
}
.mw-parser-output .sidebar {
background-color: var(--toc-background-color);
color: var(--text-color);
}
.mw-parser-output .quotebox .quotebox.floatleft {
background-color: var(--toc-background-color) !important;
color: var(--text-color) !important;
}
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
background-color: var(--head-background-color) !important;
color: var(--text-color) !important;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#google_translate_element img
{
display: none !important;
}
.goog-te-gadget-simple {
font-size: 16px !important;
}
#google_translate_element img
{
display: none !important;
}
.mw-headline:target {
background-color: var( --yellow-background-color);
}
/* Edit textarea */
#wpTextbox1 {
font-size: 1.1em;
}
/* Edit summary */
#wpSummary {
font-size: 1.1em;
}
/* reduce white space left */
#mw-site-navigation .sidebar-chunk {
padding: 0.8em 0.8em 0;
margin: 0.8em 0;
}
/* reduce white space right */
#mw-related-navigation .sidebar-chunk {
padding: 0.8em 0.8em 0;
margin: 0.8em 0;
}
/* Indefinite content width */
@media screen and (min-width: 851px) {
.color-middle-container,
.ts-inner { max-width: none; }
}
/* HandWiki Changes the default font used for MediaWiki headings to Noto Serif: */
#content h1,
#content h2 {
font-family: arial, serif;
}
#siteSub {
display: block; font-weight: normal; font-size: normal; margin-top: -15px;
}
.goog-logo-link img {
display: none;
}
/* Buttons to create article*/
.mw-ui-button.mw-ui-progressive:hover {
background-color: orange;
font-weight: normal;
}
.mw-ui-button.mw-ui-progressive {
background-color: #ffb84d;
color: black;
font-weight: normal;
}
/* Fix so <tt>, <code>, and <pre> display in a suitable size in firefox, chrome, etc */
code {
font-size: 1.0em;
background-color: var(--background-color-white);
}
tt {
font-size: 1.0em;
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, Verdana, sans-serif;
}
/* categories at the bottom */
#catlinks {
display: block !important;
/* from #mw-site-navigation .sidebar-chunk */
background-color: var(--head-background-color);
color: var(--text-color);
border: solid #ffb84d;
border-width: 1px;
padding: 0.5em 0.5em 0;
margin: 1em 0;
line-height: 1.2;
word-wrap: break-word;
}
#catlinks > div {
margin-bottom: 0.5em;
background-color: var(--head-background-color);
color: var(--text-color);
}
/* keep showing categories on right
#catlinks-sidebar {
display:none;
}
*/
#mw-footer-container {
background: #045f64;
}
#mw-header-container {
background: #d1ffff;
background-color: #d1ffff;
background-image: linear-gradient(#d1ffff, #fffffa);
}
/* custom search */
/* Style the search field */
form.hwiki-search input[type=text] {
font-size: 1.0em;
border: 1px solid grey;
float: left;
width: 85%;
background: white;
}
/* Style the submit button */
form.hwiki-search button {
float: left;
width: 20%;
background: #2196F3;
color: white;
font-size: 1.0em;
border: 1px solid grey;
border-left: none; /* Prevent double borders */
cursor: pointer;
}
form.hwiki-search button:hover {
background: #0b7dda;
}
/* Clear floats */
form.hwiki-search::after {
content: "";
clear: both;
display: table;
}
/* introduce small shift from top */
input#submit.mw-ui-button{
margin-top: 6px;
}
/* create HandWiki simple search mobile friendly buttons*/
.hwsimple {
float: center;
margin-left: 3px;
margin-right: 3px;
position: relative;
display: inline-block;
white-space: nowrap;
width: 290px;
}
.hwsimple .search-container {
display: block;
position: relative;
white-space: nowrap;
width: 94%;
}
.hwsimple input[type=text] {
padding: 6px;
margin-top: 4px;
font-size: 1.1em;
padding: 6px;
border: 1px solid #ccc;
height: 32px;
background-color: #ffffff;
border: 1px solid #1d5f64;
text-align: left;
}
.hwsimple .search-container button {
margin-top: 4px;
padding: 6px 6px;
background-color: #1d5f64;
color: #ffff;
font-size: 1.1em;
border: 1px solid #1d5f64;
cursor: pointer;
text-align: center;
height: 44px;
}
.hwsimple .search-container button:hover {
border: 1px solid #1d5f64;
background-color: #278188;
color: #ffff;
}
/* small screen smartphones */
@media all and (max-width: 479px) {
.infobox, .navbox, .navbox-list, .short-description {
width: 97% !important;
margin-left:8px;
margin-right:4px;
}
.hwsimple {
float: center;
margin-left: -10px;
margin-left: 2px;
margin-right: 2px;
width: 290px;
height: 33px;
}
.hwsimple input[type=text] {
float: center;
display: block;
width: 94%;
margin-left: -10px;
margin-right: 2px;
padding: 4px;
}
.hwsimple button {
float: center;
display: block;
text-align: center;
width: 200px;
padding: 6px;
margin-top: 14px;
}
}
/* small screen smartphones for portrait */
@media all and (max-width: 360px) and (orientation: portrait) {
.infobox, .navbox, .navbox-list, .short-description {
width: 99% !important;
margin-left:2px;
margin-right:2px;
}
}
@media (min-width: 850px) and (max-width: 1024px) and (orientation: landscape) {
.hwsimple {
float: center;
width: 94%;
}
}
/* for mobile view only */
.deskContent {
display: block;
}
.phoneContent {
display: none;
}
@media all and (max-width: 850px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
@media screen and (max-width:1024px){
.deskContent {display:none;}
.phoneContent {display:block;}
}
@media screen and (min-width:850px) and (max-width:1024px) and (orientation:landscape){
.deskContent {display:none;}
.phoneContent {display:block;}
}
@media all and (max-width: 850px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
/* This only works for desktops */
@media screen and (min-width: 850px) {
/* drop down for computers */
.dropbtn {
background-color: #045f64;
color: white;
font-size: 1.05em;
width: 100%;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
font-size: 0.96em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f8f9fa;
min-width: 160px;
width: 100%;
font-size: 0.96em;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 4px 6px;
font-size: 0.96em;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ffb84d; color: black;}
}
@media only screen and (max-width: 850px) {
.dropbtn {display:none;}
}
/* show portal */
#handportal {
font-size:1.0em;
text-align:center;
border-bottom: 3px solid #ffb84d;
}
#handportal a {
color: var(--link-color);
}
#handportal a:hover {
text-decoration: underline;
color: var(--hover-color);
}
/* show left title */
#handtitleleft {
font-size:16px;
color: var(--text-color);
text-align:center;
margin-top:-20px;
margin-left:2px;
}
