MediaWiki:Timeless.css
From HandWiki
Revision as of 14:59, 22 December 2022 by MainEditor (talk | contribs)
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; }