uk's Gray Theme 2.0
/* ===== ===== ===== ===== Variables for uk's Gray Theme 2.0 author: ukwhatn target version: 1.0.1 copyright: ukwhatn license: MIT License ---- ---- *You can't use this variables alone. ===== ===== ===== ===== */ /* IMPORT OPEN COLOR VARIABLES */ @import url('//ukwhatn-tp.wikidot.com/css:open-color/code/1'); /* IMPORT CUSTOM FONTS */ @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,700,900&display=swap&subset=japanese'); /* DEFAULT SETTINGS */ :root { --rem: 16px; --default-font-size: 0.95rem; --default-font-family: sans-serif; --default-monoscape-family: Courier, monospace; } @media (max-width: 896px) {} @media (max-width: 480px) {} /* DEFAULT STRUCTURE SETTINGS */ :root { --default-nest-size: 1rem; --default-block-margin: 1rem 0; --default-block-padding: 0.5rem; --default-block-radius: 1px; } /* DEFAULT COLORS */ :root { --default-font-color: var(--oc-gray-9); --default-background: #f4f5f7; --default-accent-color: var(--oc-orange-6); --default-accent-color-light: var(--oc-orange-4); --default-9-color: var(--oc-gray-9); --default-8-color: var(--oc-gray-8); --default-7-color: var(--oc-gray-7); --default-6-color: var(--oc-gray-6); --default-5-color: var(--oc-gray-5); --default-4-color: var(--oc-gray-4); --default-3-color: var(--oc-gray-3); --default-2-color: var(--oc-gray-2); --default-1-color: var(--oc-gray-1); --default-0-color: var(--oc-gray-0); --default-dark-color: var(--default-9-color); --default-mid-color: var(--default-4-color); --default-light-color: var(--default-3-color); --default-thin-color: var(--default-2-color); } /* TEXT FORMATTING */ :root { --a-color: var(--oc-orange-9); --a-newpage-color: var(--default-accent-color-light); --a-hover-decoration: none; --heading-margin-y: 0.5rem; --heading-family: 'M PLUS 1p', var(--default-font-family); --heading-weight: 400; --h1-size: 1.802em; --h2-size: 1.602em; --h3-size: 1.424em; --h4-size: 1.266em; --h5-size: 1.125em; --h6-size: 1em; /*12.44px*/ --h1-margin-left: calc(-1 * var(--default-nest-size)); --h2-margin-left: calc(-1 * var(--default-nest-size) * 0.5); } /*-- ANIMATION SETTINGS --*/ :root { --default-transition-time: 0.5s; --side-nav-transition-time: var(--default-transition-time); --global-nav-transition-time: var(--default-transition-time); } /*-- BLOCK FORMATTING --*/ :root { --quote-margin: var(--default-block-margin); --quote-padding: var(--default-block-padding); --quote-border: dashed 0.5px var(--default-mid-color); --quote-background: var(--default-thin-color); --quote-radius: var(--default-block-radius); --quote-margin-left: var(--default-nest-size); --code-margin: var(--default-block-margin); --code-padding: var(--default-block-padding); --code-border: dashed 0.5px var(--default-mid-color); --code-background: var(--default-thin-color); --code-radius: var(--default-block-radius); --code-family: var(--default-monoscape-family); --code-margin-left: var(--default-nest-size); } /*-- WRAPPER STRUCTURE --*/ :root { --max-content-width: 1180px; --content-side-margin: 0.25rem; --header-height: 4.75rem; --global-nav-height: 1.25rem; --global-nav-position-top: calc(var(--header-height) - var(--global-nav-height)); --content-margin-top: 1rem; --side-nav-width: 14rem; --side-nav-and-content-margin: 1rem; --main-content-margin-left: calc(var(--side-nav-width) + var(--side-nav-and-content-margin)); --footer-width: calc(100% - calc(var(--content-side-margin) * 2)); --license-area-padding-x: 1rem; } @media (max-width: 896px) { :root { --content-side-margin: 0.1rem; --h1-margin-left: -0.4em; --h2-margin-left: -0.2em; } } /*-- HEADER BACKGROUND --*/ :root { --header-background: var(--default-dark-color); } /*-- HEADER LOGO --*/ :root { --header-logo-image: url("http://scp-jp-storage.wdfiles.com/local--files/file%3A3396310-54-tma0/logo-gray.svg"); --header-logo-margin-x: 0.5rem; --header-logo-margin-y: 0.5rem; --header-logo-x: var(--header-logo-margin-x); --header-logo-y: var(--header-logo-margin-y); --header-logo-size: calc(var(--header-height) - var(--global-nav-height) - var(--header-logo-margin-y)); } /*-- HEADER TITLE --*/ :root { --header-logo-and-title-margin: 0.25rem; --header-top-margin: 0.75rem; --header-title-margin-x: calc(var(--header-logo-x) + var(--header-logo-size) + var(--header-logo-and-title-margin)); --header-title-margin-y: var(--header-top-margin); --header-h2-balance: 0.8; --header-h1-color: var(--default-thin-color); --header-h1-family: 'M PLUS 1p', var(--default-font-family); --header-h1-weight: 700; --header-h1-size: 1.7rem; --header-h2-color: var(--default-accent-color); --header-h2-family: 'M PLUS 1p', var(--default-font-family); --header-h2-weight: 300; --header-h2-size: calc( calc(var(--header-height) - var(--global-nav-height) - var(--header-top-margin) - var(--header-h1-size)) * var(--header-h2-balance)); } /*-- HEADER ACCOUNT BOX --*/ :root { --header-loginstatus-size: var(--default-font-size); --header-accountname-color: var(--default-thin-color); --header-myaccount-color: var(--default-thin-color); --header-avatar-opacity: 1; --header-menubutton-size: 0.5rem; --header-menubutton-color: var(--default-thin-color); --header-menubutton-border: solid 1px var(--header-menubutton-color); --header-menubutton-background: transparent; --header-menubutton-margin-left: 1px; /*img: 1px, txt: -5px*/ --header-custom-menubutton-text: 'MENU'; --header-custom-menubutton-size: 0; --header-custom-menubutton-family: var(--default-font-family); --header-custom-menubutton-weight: normal; --header-accountmenu-width: 7.5rem; --header-accountmenu-background: var(--header-background); --header-accountmenu-border: solid 0.5px var(--default-mid-color); --header-accountmenu-color: solid 0.5px var(--default-mid-color); --header-accountmenu-padding: 0.25rem 0.5rem; --header-accountmenu-hover-color: var(--default-dark-color); --header-accountmenu-hover-background: var(--default-mid-color); } @media (max-width: 896px) { :root { --header-loginstatus-size: 0.7rem; --header-avatar-opacity: 0; --header-menubutton-size: 0px; --header-menubutton-border: none; --header-menubutton-margin-left: -5px; /*img: 1px, txt: -5px*/ --header-custom-menubutton-text: '| Menu'; --header-custom-menubutton-size: 0px; } } /*-- HEADER SEARCH BOX --*/ :root { --header-search-box-margin-bottom: 2.5px; --header-search-box-input-width: 10rem; --header-search-box-input-height: 1.25rem; --header-search-box-input-background: transparent; --header-search-box-input-focus-background: transparent; --header-search-box-input-border: solid 0.5px var(--default-mid-color); --header-search-box-input-color: var(--default-thin-color); --header-search-box-input-size: 1em; --header-search-box-input-placeholdercolor: var(--default-mid-color); --header-search-box-input-placeholdersize: var(--header-search-box-input-size); --header-search-box-button-display: none; --header-search-box-button-width: 4rem; --header-search-box-button-height: var(--header-search-box-input-height); --header-search-box-button-background: transparent; --header-search-box-button-border: var(--header-search-box-input-border); --header-search-box-button-color: var(--header-search-box-input-color); } @media (max-width:896px) { /* NO DISPLAYED */ } @media (max-width: 480px) { /* NO DISPLAYED */ } /*-- GLOBAL NAVIGATION --*/ :root { --global-nav-item-count: 3; --global-nav-item-size: var(--default-font-size); --global-nav-item-width: calc( 100% / var(--global-nav-item-count)); --global-nav-item-color: var(--default-mid-color); --global-nav-item-background: var(--default-dark-color); --global-nav-item-hover-color: var(--default-thin-color); --global-nav-item-hover-background: var(--default-dark-color); --global-nav-sub-border: solid 0.5px var(--default-dark-color); --global-nav-sub-item-heading-line-height: 2; --global-nav-sub-item-heading-border: solid 2px var(--default-7-color); --global-nav-sub-item-heading-background: var(--default-9-color); --global-nav-sub-item-heading-padding-left: calc( var(--global-nav-sub-item-padding-left) / 2); --global-nav-sub-item-heading-color: var(--global-nav-item-color); --global-nav-sub-item-heading-size: calc( var(--global-nav-item-size) * 1.1); --global-nav-sub-item-heading-weight: bold; --global-nav-sub-item-height: 2em; --global-nav-sub-item-padding-left: 1rem; --global-nav-sub-item-background: var(--global-nav-item-hover-background); --global-nav-sub-item-border: solid 0.1px var(--default-8-color); --global-nav-sub-item-hover-background: var(--default-8-color); } /*-- SIDE NAVIGATION --*/ :root { --side-nav-background: transparent; --side-nav-border: none; --side-nav-heading-size: 1.05em; --side-nav-heading-line-height: 1.2; --side-nav-heading-margin-top: 1em; --side-nav-heading-border: solid 0.5px var(--default-dark-color); --side-nav-heading-color: inherit; --side-nav-item-padding-left: 0.5rem; --side-nav-item-line-height: 2.5; --side-nav-item-size: 0.9em; --side-nav-item-color: var(--default-font-color); --side-nav-item-background: transparent; --side-nav-item-color-hover: var(--default-thin-color); --side-nav-item-background-hover: var(--default-dark-color); --side-nav-item-twitter-logo-color: var(--side-nav-item-color); --side-nav-item-twitter-logo-color-hover: var(--side-nav-item-color-hover); } /*-- MAIN CONTENTS --*/ :root { --page-title-margin-right: 1rem; --page-title-margin-bottom: 0.75rem; --page-title-size: 1.803em; --page-title-border: solid 0.5px var(--default-dark-color); --page-title-family: 'M PLUS 1p', var(--default-font-family); --page-title-weight: 300; --page-content-family: var(--default-font-family); --page-content-margin-top: 0.5rem; --page-info-size: 0.6rem; --page-info-margin-x: 3px; --page-info-margin-y: 3px; --page-tags-margin-top: 10px; --page-tags-margin-left: 2px; --page-tags-border: solid 1px var(--default-light-color); --page-tags-padding-top: 2px; --page-tags-between: 0.25rem; --page-tags-size: 0.7rem; --page-tags-color: var(--a-color); --page-watch-options-size: 0.85em; --page-watch-options-margin-y: 0.5em; } /*-- FOOTER --*/ :root { --footer-color: var(--default-thin-color); --footer-background: var(--default-dark-color); --footer-a-color: var(--default-accent-color); --footer-options-size: 0.7rem; --footer-options-padding-x: 5px; --footer-options-bar-color: var(--default-mid-color); } /*-- LICENSE AREA --*/ :root { --license-area-color: var(--default-thin-color); --license-area-background: var(--default-dark-color); --license-area-a-color: var(--default-accent-color); } /*-- COMPONENTS --*/ :root { --default-button-size: var(--default-font-size); --default-button-line-height: 2; --default-button-color: var(--default-thin-color); --default-button-border: solid 1px var(--default-thin-color); --default-button-background: var(--default-dark-color); --default-button-color-hover: var(--default-dark-color); --default-button-border-hover: solid 1px var(--default-thin-color); --default-button-background-hover: var(--default-accent-color); --standalone-button-size: var(--default-button-size); --standalone-button-line-height: var(--default-button-line-height); --standalone-button-color: var(--default-button-color); --standalone-button-border: var(--default-button-border); --standalone-button-background: var(--default-button-background); --standalone-button-color-hover: var(--default-button-color-hover); --standalone-button-border-hover: var(--default-button-border-hover); --standalone-button-background-hover: var(--default-button-background-hover); --page-options-button-size: var(--default-button-size); --page-options-button-line-height: var(--default-button-line-height); --page-options-button-color: var(--default-button-color); --page-options-button-border: var(--default-button-border); --page-options-button-background: var(--default-button-background); --page-options-button-color-hover: var(--default-button-color-hover); --page-options-button-border-hover: var(--default-button-border-hover); --page-options-button-background-hover: var(--default-button-background-hover); --action-area-border: solid 0.5px var(--default-light-color); --action-area-background: var(--default-thin-color); --action-area-close-button-size: var(--default-button-size); --action-area-close-button-line-height: var(--default-button-line-height); --action-area-close-button-color: var(--default-button-color); --action-area-close-button-border: var(--default-button-border); --action-area-close-button-background: var(--default-button-background); --action-area-close-button-color-hover: var(--default-button-color-hover); --action-area-close-button-border-hover: var(--default-button-border-hover); --action-area-close-button-background-hover: var(--default-button-background-hover); --action-area-button-size: var(--default-button-size); --action-area-button-line-height: var(--default-button-line-height); --action-area-button-color: var(--default-button-color); --action-area-button-border: var(--default-button-border); --action-area-button-background: var(--default-button-background); --action-area-button-color-hover: var(--default-button-color-hover); --action-area-button-border-hover: var(--default-button-border-hover); --action-area-button-background-hover: var(--default-button-background-hover); --editpage-textsize: 0.8rem; --tab-content-background: var(--default-thin-color); --tab-button-background: var(--default-thin-color); --tab-button-color: var(--default-dark-color); --tab-button-selected-background: var(default-dark-color); --tab-button-selected-color: var(default-thin-color); --tab-button-focused-background: var(--default-dark-color); --tab-border: var(--default-dark-color); } /*-- OTHER --*/ :root { --hr-color: var(--default-mid-color); }
/* ===== ===== ===== ===== uk's Gray Theme 2.0 [2019 Wikidot Theme] author: ukwhatn version: 1.0.1 released: 2019/12/31 copyright: ukwhatn license: MIT License ---- ---- *This template is made for Wikidot. *This includes many formats just for me. ===== ===== ===== ===== */ /*===== IMPORTS =====*/ /*-- VARIABLES --*/ @import url('http://ukwhatn-tp.wdfiles.com/local--code_/theme%3Auk-gray/1'); /*-- FONT AWESOME --*/ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css'); /*-- NORMALIZE --*/ @import url('http://ukwhatn-tp.wikidot.com/css:normalize/code/1'); /*===== RESETS AND PRESETS =====*/ * { margin: 0; padding: 0; width: auto; height: auto; line-height: 1; } *, ::before, ::after { box-sizing: border-box; background-repeat: no-repeat; overflow-wrap: break-word; } #page-content * { /* It doesn't work on iOS Safari */ scroll-behavior: smooth; } .btn { transition-property: all; transition-duration: var(--default-transition-time); } html { line-height: 1; -moz-tab-size: 4; tab-size: 4; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } img { border: none; } #header * { top: auto; left: auto; right: auto; bottom: auto; } /*===== DEFAULT SETTINGS =====*/ /*-- CANVAS --*/ html { background: var(--default-background); } /*-- FONT --*/ html { font-size: var(--rem); } body { font-family: var(--default-font-family); font-size: var(--default-font-size); } tt { font-family: var(--default-font-family)!important; } /*-- BASIC TEXT FORMATTING --*/ a { color: var(--a-color); text-decoration: var(--a-hover-decoration); } a.newpage { color: var(--a-newpage-color); } a:hover { background-color: transparent; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-family); font-weight: var(--heading-weight); margin: var(--heading-margin-y) 0; padding: 0; } h1 { font-size: var(--h1-size); } #page-content *{ line-height: 1.3; } #page-content h1 { margin-left: var(--h1-margin-left); } #page-content div h1 { margin-left: 0; } h2 { font-size: var(--h2-size); } #page-content h2 { margin-left: var(--h2-margin-left); } #page-content div h2 { margin-left: 0; } h3 { font-size: var(--h3-size); } h4 { font-size: var(--h4-size); } h5 { font-size: var(--h5-size); } h6 { font-size: var(--h6-size); } #page-content tt { font-family: var(--default-monoscape-family); font-size: 1em; } #page-content pre { font-family: var(--code-family); } #page-content hr { margin: 1em 2em; padding: 0; height: 1px; background-color: var(--hr-color); } #page-content ul, #page-content ol { margin-left: calc(var(--default-nest-size) * 2); } #page-content ul * { list-style-type: disc; } #page-content ol * { list-style-type: decimal; } #page-content ul ul, #page-content ol ol { margin-left: var(--default-nest-size); } #page-content p { margin: 1.2em 0; } /*-- BASIC BLOCK FORMATTING --*/ blockquote, .blockquote { margin: var(--quote-margin); margin-left: var(--quote-margin-left); padding: var(--quote-padding); border: var(--quote-border); border-radius: var(--quote-radius); background-color: var(--quote-background); } .code { margin: var(--code-margin); margin-left: var(--code-margin-left); padding: var(--code-padding); border: var(--code-border); border-radius: var(--code-radius); background-color: var(--code-background); font-family: Courier, monospace; } code { font-family: var(--default-monoscape-family); } /*===== WRAPPER STRUCTURE =====*/ #container-wrap-wrap { position: static; width: 100%; margin: 0 auto; padding: 0; } #container-wrap { position: inherit; margin: 0 auto; padding: 0; } #container { position: relative; margin: 0 auto; padding: 0; } /*===== HEADER =====*/ /*-- HEADER STRUCTURE --*/ #header { position: inherit; width: 100%; max-width: var(--max-content-width); height: var(--header-height); z-index: 1; margin: 0 auto; padding: 0; } /*-- HEADER BACKGROUND --*/ #container-wrap-wrap::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: -10; background-color: var(--header-background); } /*-- HEADER LOGO --*/ #header::before { content: " "; position: absolute; top: 0; left: 0; width: calc(var(--header-logo-size) + var(--header-logo-x)); height: calc(var(--header-logo-size) + var(--header-logo-y)); background: var(--header-logo-image) var(--header-logo-x) var(--header-logo-y) no-repeat; background-size: var(--header-logo-size); } @media (max-width: 896px) { /* ALL INHERIT */ } @media (max-width: 480px) { #header::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: calc( var(--header-height) - var(--global-nav-height)); background: var(--header-logo-image) 50% 60% no-repeat; background-size: var(--header-logo-size); } } /*-- SITE TITLES --*/ #header h1 { margin: 0; padding: var(--header-title-margin-y) 0 0 var(--header-title-margin-x); } #header h1 a { display: inline-block; margin: 0; color: var(--header-h1-color); background: transparent; font-family: var(--header-h1-font); font-weight: var(--header-h1-weight); font-size: var(--header-h1-size); text-decoration: none; } #header h2 { margin: 0; padding: 0 0 0 var(--header-title-margin-x); } #header h2 span { display: inline-block; margin: 0; color: var(--header-h2-color); background: transparent; font-family: var(--header-h2-font); font-weight: var(--header-h2-weight); font-size: var(--header-h2-size); text-decoration: none; } @media (max-width: 896px) { /* ALL INHERIT */ } @media (max-width: 480px) { #header h1 { margin: 0; padding: 0; } #header h1 a { display: block; width: 100%; height: calc( var(--header-height) - var(--global-nav-height)); font-size: 0px; } #header h2 { margin: 0; padding: 0; display: none; } } #login-status { position: absolute; top: var(--header-logo-margin-y); right: var(--content-side-margin); overflow: visible; color: var(--header-accountname-color); font-size: var(--header-loginstatus-size); } #login-status a { color: var(--header-myaccount-color); } #login-status img { opacity: var(--header-avatar-opacity); } #account-topbutton { font-size: var(--header-menubutton-size); padding: 0 0.3rem; border: var(--header-menubutton-border); margin: 0 0 0 var(--header-menubutton-margin-left); background-color: var(--header-menubutton-background); } #login-status #account-topbutton::before { font-size: var(--header-custom-menubutton-size); content: var(--header-custom-menubutton-text); font-family: var(--header-custom-menubutton-family); font-weight: var(--header-custom-menubutton-weight); } #account-options { position: absolute; width: var(--header-accountmenu-width); right: 0 z-index: 40; background: var(--header-accountmenu-background); display: none; border: var(--header-accountmenu-border); } #account-options ul { display: block; margin: 0; padding: 0; list-style: none; } #account-options ul li a { color: var(--header-accountmenu-color); padding: var(--header-accountmenu-padding); background: transparent; } #account-options ul li, #account-options ul li a { transition-property: all; transition-duration: var(--default-transition-time); } #account-options ul li:hover { background: var(--header-accountmenu-hover-background); } #account-options ul li a:hover { color: var(--header-accountmenu-hover-color); } @media (max-width: 896px) { #login-status { top: 2px; right: 2px; } } @media (max-width: 480px) {} /*-- HEADER SEARCH BOX --*/ #search-top-box { position: absolute; top: auto; bottom: calc(var(--global-nav-height) + var(--header-search-box-margin-bottom)); right: var(--content-side-margin); width: auto; z-index: 1; } #search-top-box-input { width: var(--header-search-box-input-width); height: var(--header-search-box-input-height); margin: 0 5px; padding: 0 5px; line-height: 1; background: var(--header-search-box-input-background); border: var(--header-search-box-input-border); font-size: var(--header-search-box-input-size); } #search-top-box-input:focus { background: var(--header-search-box-input-focus-background); color: var(--header-search-box-input-color); } #search-top-box-input.empty { color: var(--header-search-box-input-placeholdercolor); font-size: var(--header-search-box-input-placeholdersize); } #search-top-box .btn { display: var(--header-search-box-button-display); width: var(--header-search-box-button-width); height: var(--header-search-box-button-height); margin: 0; padding: 0 5px; text-align: center; background: var(--header-search-box-button-background); line-height: var(--header-search-box-button-height); color: var(--header-search-box-button-color); border: var(--header-search-box-button-border); } @media (max-width: 896px) { #search-top-box { display: none; } } @media (max-width: 480px) {} #top-bar { position: absolute; top: var(--global-nav-position-top); width: 100%; max-width: var(--max-content-width); right: auto; bottom: auto; height: var(--global-nav-height); z-index: 1; margin: 0 auto; padding: 0; } #top-bar * { list-style: none; transition-property: all; transition-duration: var(--global-nav-transition-time); } #top-bar .top-bar br, #top-bar .mobile-top-bar br { display: none; } #top-bar ul { display: block; width: 100%; margin: 0; padding: 0; } #top-bar ul li { float: left; margin: 0; padding: 0; width: var(--global-nav-item-width); height: var(--global-nav-height); background-color: var(--global-nav-sub-item-background); } #top-bar ul li a { display: block; width: 100%; font-size: var(--global-nav-item-size); line-height: var(--global-nav-height); margin: 0; padding: 0 5px; text-align: center; background: var(--global-nav-item-background); color: var(--global-nav-item-color); } #top-bar ul li a:hover { background: var(--global-nav-item-hover-background); color: var(--global-nav-item-hover-color); text-decoration: none; } #top-bar ul li ul { position: relative; display: block; padding: 0; margin: 0; width: auto; border: var(--global-nav-sub-border); } #top-bar ul li .global-heading span, #top-bar ul li .global-heading a { display: block; position: relative; background: var(--global-nav-sub-item-heading-background); line-height: var(--global-nav-sub-item-heading-line-height); border-bottom: var(--global-nav-sub-item-heading-border); padding-left: var(--global-nav-sub-item-heading-padding-left); color: var(--global-nav-sub-item-heading-color); font-size: var(--global-nav-sub-item-heading-size); font-weight: var(--global-nav-sub-item-heading-weight); text-align: left; } #top-bar ul li .global-heading a:hover { background: var(--global-nav-sub-item-hover-background); } #top-bar ul li ul li { width: auto; height: auto; padding: 0; margin: 0; display: block; float: none; } #top-bar ul li ul li a { display: block; position: relative; padding-left: var(--global-nav-sub-item-padding-left); line-height: var(--global-nav-sub-item-height); width: 100%; text-align: left; background: var(--global-nav-sub-item-background); border-bottom: var(--global-nav-sub-item-border); } #top-bar li ul li a:hover { background: var(--global-nav-sub-item-hover-background); } /*-- CHANGE GLOBAL NAV FOR MOBILE --*/ #top-bar .top-bar { display: block; } #top-bar .mobile-top-bar { display: none; } @media (max-width: 896px) {} @media (max-width: 480px) { #top-bar .top-bar { display: none; } #top-bar .mobile-top-bar { display: block; } #top-bar ul li ul { position: absolute; top: var(--global-nav-height); left: 0; width: 100vw; } #top-bar ul li ul { position: absolute; top: var(--global-nav-height); width: 100vw; } } /* hide global sub list */ #top-bar .top-bar ul li .global-heading, #top-bar .top-bar ul li .global-heading span, #top-bar .top-bar ul li .global-heading a, #top-bar .top-bar ul li ul, #top-bar .top-bar ul li ul li, #top-bar .top-bar ul li ul li a, #top-bar .mobile-top-bar ul li .global-heading, #top-bar .mobile-top-bar ul li .global-heading a, #top-bar .mobile-top-bar ul li ul, #top-bar .mobile-top-bar ul li ul li, #top-bar .mobile-top-bar ul li ul li a { display: none; } #top-bar .top-bar ul li:hover .global-heading, #top-bar .top-bar ul li:hover .global-heading span, #top-bar .top-bar ul li:hover .global-heading a, #top-bar .top-bar ul li:hover ul, #top-bar .top-bar ul li:hover ul li, #top-bar .top-bar ul li:hover ul li a, #top-bar .mobile-top-bar ul li:hover .global-heading, #top-bar .mobile-top-bar ul li:hover .global-heading a, #top-bar .mobile-top-bar ul li:hover ul, #top-bar .mobile-top-bar ul li:hover ul li, #top-bar .mobile-top-bar ul li:hover ul li a { display: block; } /*===== MAIN CONTENTS =====*/ #content-wrap { position: inherit; width: auto; max-width: var(--max-content-width); padding: var(--content-margin-top) var(--content-side-margin) 0 var(--content-side-margin); margin: 0 auto; } /*===== SIDE NAVIGATION =====*/ #side-bar { position: inherit; width: var(--side-nav-width); float: left; clear: left; margin: 0; padding: 0; } #side-bar .side-block * { transition-property: all; transition-duration: var(--default-transition-time); } #side-bar .side-block br { display: none!important; } #side-bar .side-block { width: 100%; height: auto; background: var(--side-nav-background); border: var(--side-nav-border); } #side-bar a { margin: 0; padding: 0; } #side-bar .side-block a { display: inline-block; padding-left: var(--side-nav-item-padding-left); line-height: var(--side-nav-item-line-height); margin: 0; width: 100%; height: auto; font-size: var(--side-nav-item-size); color: var(--side-nav-item-color); background: var(--side-nav-item-background); } #side-bar .side-block a:hover { color: var(--side-nav-item-color-hover); background: var(--side-nav-item-background-hover); } #side-bar .side-block a[href*="twitter.com"]::before { content: '\f099'; font-size: 0.825rem; font-family: 'Font Awesome 5 Brands'; color: var(--side-nav-item-twitter-logo-color); margin-right: 0.25rem; } #side-bar .side-block a[href*="twitter.com"]:hover::before { color: var(--side-nav-item-twitter-logo-color-hover); } #side-bar .side-block .side-heading span, #side-bar .side-block .side-heading a { display: block; font-size: var(--side-nav-heading-size); line-height: var(--side-nav-heading-line-height); padding-top: var(--side-nav-heading-margin-top); border-bottom: var(--side-nav-heading-border); color: var(--side-nav-heading-color); padding-left:0; } #side-bar .side-block .side-heading a:hover { color: var(--side-nav-item-color-hover); background: var(--side-nav-item-background-hover); } #top-bar .open-menu { display: none; } @media (max-width: 896px) { #top-bar .open-menu { display: block; } #top-bar .open-menu a { position: fixed; bottom: 10px; left: 10px; z-index: 15; font-family: san-serif; font-size: 30px; font-weight: normal; line-height: 25px; width: 30px; height: 30px; text-align: center; border: 0.1px solid var(--default-thin-color)!important; background-color: var(--default-dark-color)!important; border-radius: 5px; color: var(--default-thin-color)!important; } #top-bar .open-menu a:hover { text-decoration: none !important; -webkit-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); -moz-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); -ms-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); -o-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1); } #side-bar { display: block; position: fixed; top: 0; left: -25em; width: var(--side-nav-width); height: 100%; background-color: var(--default-background); overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; -webkit-transition: left 0.5s ease-out 0.1s; -moz-transition: left 0.5s ease-out 0.1s; -ms-transition: left 0.5s ease-out 0.1s; -o-transition: left 0.5s ease-out 0.1s; transition: left 0.5s ease-out 0.1s; } #side-bar:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.2); } #side-bar:target { display: block; left: 0; width: var(--side-nav-width); margin: 0; border: 1px solid #dedede; z-index: 10; } #side-bar:target+#main-content { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; -webkit-tap-highlight-color: transparent!important; } } @media (max-width: 480px) {} /*===== PAGE CONTENTS =====*/ #page-title { position: inherit; width: 100%; margin: 0; margin-right: var(--page-title-margin-right); margin-bottom: var(--page-title-margin-bottom); padding: 0; font-size: var(--page-title-size); font-family: var(--page-title-family); border-bottom: var(--page-title-border); font-weight: var(--page-title-weight); } #page-content { position: inherit; width: auto; margin-top: var(--page-content-margin-top); padding: 0; margin-left: var(--default-nest-size); min-height: 100vh; font-family: var(--page-content-family); } @media (max-width: 896px) { #main-content { margin-left: var(--content-side-margin); } #page-content { margin-left: 0; } } @media (max-width: 480px) {} /*===== FOOTER =====*/ #footer { position: inherit; width: 100vw; margin: 0 auto; padding: 1rem 1rem 0 1rem; color: var(--footer-color); background: var(--footer-background); } #footer a { margin: var(--footer-options-padding-x) 0; padding: 0; color: var(--footer-a-color); } #footer .options { float: right; font-size: var(--footer-options-size); padding: var(--footer-options-padding-x) 0; color: var(--footer-options-bar-color); } /*===== LICENSE AREA =====*/ #license-area { position: inherit; width: 100vw; margin: 0; padding: var(--license-area-padding-x) 0; color: var(--license-area-color); background: var(--license-area-background); } #license-area-a { color: var(--license-area-a-color); } /*===== COMPONENTS =====*/ /*- COMPONENT - BUTTONS --*/ .wiki-standalone-button { display: inline-block; margin: 0.25rem; padding: 0.25rem 0.5rem; font-size: var(--standalone-button-size); line-height: var(--standalone-button-line-height); color: var(--standalone-button-color); border: var(--standalone-button-border); border-radius: 5px; background: var(--standalone-button-background); transition-property: all; transition-duration: var(--default-transition-time); } .wiki-standalone-button:hover { background-color: transparent; color: var(--standalone-button-color-hover); border: var(--standalone-button-border-hover); background: var(--standalone-button-background-hover); } #page-options-bottom .btn, #page-options-bottom-2 .btn { display: inline-block; margin: 0.25rem; padding: 0.25rem 0.5rem; font-size: var(--page-options-button-size); line-height: var(--page-options-button-line-height); color: var(--page-options-button-color); border: var(--page-options-button-border); border-radius: 5px; background: var(--page-options-button-background); transition-property: all; transition-duration: var(--default-transition-time); } #page-options-bottom .btn:hover, #page-options-bottom-2 .btn:hover { background-color: transparent; color: var(--page-options-button-color-hover); border: var(--page-options-button-border-hover); background: var(--page-options-button-background-hover); } #action-area .btn { display: inline-block; margin: 0.25rem; padding: 0.25rem 0.5rem; font-size: var(--action-area-button-size); line-height: var(--action-area-button-line-height); color: var(--action-area-button-color); border: var(--action-area-button-border); border-radius: 5px; background: var(--action-area-button-background); transition-property: all; transition-duration: var(--default-transition-time); } #action-area .btn:hover { background-color: transparent; color: var(--action-area-button-color-hover); border: var(--action-area-button-border-hover); background: var(--action-area-button-background-hover); } #action-area .action-area-close.btn { float: right; display: inline-block; margin: 0.25rem; padding: 0.25rem 0.5rem; font-size: var(--action-area-close-button-size); line-height: var(--action-area-close-button-line-height); color: var(--action-area-close-button-color); border: var(--action-area-close-button-border); border-radius: 5px; background: var(--action-area-close-button-background); transition-property: all; transition-duration: var(--default-transition-time); } #action-area .action-area-close.btn:hover { background-color: transparent; color: var(--action-area-close-button-color-hover); border: var(--action-area-close-button-border-hover); background: var(--action-area-close-button-background-hover); } /*-- COMPONENT - PRINTUSER --*/ .printuser { width: auto; height: auto; } .printuser span { display: inline-block; margin: 0 0.25rem 0 -0.25rem; } .printuser img.small { height: 18px; margin: 0; padding: 1px 9px 1px 8px; vertical-align: -0.25rem; width: 33px; z-index: -1; } .printuser .ip { font-size: 0.9em; } /*-- COMPONENT - ACTION AREA --*/ #action-area { width: 100%; padding: 1rem; border: var(--action-area-border); background: var(--action-area-background); border-radius: 10px; } #action-area h1, #action-area h2 { margin: 1rem 0 0.5rem 0; } #action-area form[action="dummy"] { margin-top: 1rem; } #action-area table.form td, #action-area table.form th { vertical-align: top; padding: 0; margin: auto 1rem; line-height: 1.9; } /*-- COMPONENT - WDEDITOR --*/ #action-area #edit-page-textarea { font-size: var(--editpage-textsize); } #action-area .edit-help-34 { display: none; } .wd-editor-toolbar-panel { display: none; } /*-- COMPONENT - INFO BLOCK --*/ #page-info { clear: both; text-align: right; font-size: var(--page-info-size); margin: var(--page-info-margin-y) var(--page-info-margin-x); } /*-- COMPONENT - PAGE TAGS --*/ #main-content .page-tags { clear: both; text-align: left; margin: var(--page-tags-margin-top) 0 0 var(--page-tags-margin-left); padding: 0; } #main-content .page-tags span { padding-top: var(--page-tags-padding-top); padding-left: var(--page-tags-between); border-top: var(--page-tags-border); font-size: 85%; } #main-content .page-tags a { margin: 0 var(--page-tags-between) 0 0; size: var(--page-tags-size); color: var(--page-tags-color); } #main-content .page-tags a[href*="/system:page-tags/tag/_"] { display: none; } /*-- COMPONENT - PAGE WATCH OPTIONS --*/ .page-watch-options { font-size: var(--page-watch-options-size); padding: var(--page-watch-options-margin-y) 0; text-align: right; } .page-watch-options a { text-decoration: none; transition-property: all; transition-duration: var(--default-transition-time); } .page-watch-options a:hover { text-decoration: underline; } /*-- COMPONENT - TABVIEW --*/ .yui-navset .yui-content { background: var(--tab-content-background); padding: 0.3rem; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-image: url(../images/yuitabs.png); background-color: var(--tab-button-background); color: var(--tab-button-color); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { background-image: url(../images/yuitabs.png); background-color: var(--tab-button-selected-background); color: var(--tab-button-selected-color); } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background: var(--tab-button-focused-background) url(../images/yuitabs.png) repeat-x left -1300px; text-decoration: none; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: var(--tab-border); margin: 0; } #page-content .yui-navset ul, #page-content .yui-navset ol { margin-left: 0; } .yui-navset li { line-height: normal; } /*===== USER OPTION CLASSES =====*/ /*-- SHOW TWITTER ICON WITH LINK TO TWITTER IN .snsicon --*/ .snsicon a[href*="twitter.com"]:before { content: '\f099'; font-size: var(--default-font-size); font-family: 'Font Awesome 5 Brands'; color: #1da1f2; margin-right: 0.25rem; } /*===== UTILITY CLASSES =====*/ .margin-cancel * { margin: 0; } .padding-cancel * { padding: 0; } .inline { display: inline-block; } .block { margin: var(--default-block-margin); padding: var(--default-block-padding); background: var(--default-background); border: solid 1px var(--default-mid-color); margin-left: auto; margin-right: auto; } .block.center { text-align: center; } .block.dark { color: var(--default-thin-color); background: var(--default-dark-color); border: solid 1px var(--default-accent-color); } .block.width90 { width: 90%; } .block.width80 { width: 80%; } .block.width70 { width: 70%; } .block.width60 { width: 60%; } .block.width50 { width: 50%; } .block.width45 { width: 45%; } @media (max-width: 896px) { .block.width90, .block.width80, .block.width70, .block.width60, .block.width50, .block.width45{ width: 100%; } } .block blockquote { margin-left: 1em; margin-right: 1em; } .warning-box { max-width: 100%; margin: 2em 0; border: solid 2px #ea0032; background-color: #f1f1f1; } .block .warning-box { max-width: 100%; margin: 2em 0; } .warning-box .heading { width: 100%; padding: 2px; margin: 0; text-align: center; background: #ea0032; color: white; font-size: 1.25rem; line-height: 1.25rem; font-family: var(--heading-family); font-weight: 700; box-sizing: border-box; } .warning-box .inner { padding: 5px 10px; } .nest { margin-left: var(--default-nest-size); } .flex{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; } .flex.inline{ display: inline-flex } .flex .item { order: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto; } img, embed, video, object, iframe, table, #page-content div, #page-content div table { max-width: 100%; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background-color: var(--default-dark-color); } ::-webkit-scrollbar-thumb { background: var(--default-accent-color); border-radius: 3px; }