License Proposal Option 7 Blackhighlighter
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900|Roboto+Mono:400,500,700|Source+Sans+Pro:400,400i,600,600i,700,700i,900,900i&display=swap&subset=latin-ext'); @supports(display:grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "nuscp"; /* must be either "nuscp" or "sigma9" */ --theme-id: "uiu-bhl-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Unusual Incidents Unit BHL Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:uiu-bhl-theme/UIU_Logo.svg"); --header-title: "FBI"; --header-subtitle: "Unusual Incidents Unit"; /* Typefaces */ --body-font: 'Source Sans Pro', 'Lato', sans-serif; --header-font: 'Source Sans Pro', 'Poppins', sans-serif; --title-font: 'Merriweather', 'Poppins', sans-serif; --mono-font: 'Roboto Mono', "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 230, 234, 246; /* off-blue white */ --pale-gray-monochrome: 204, 216, 239; /* v light blue for blockquotes and stuff */ --light-gray-monochrome: 118, 137, 174; /* light accent blue for login status */ --gray-monochrome: 36, 59, 120; /* blue */ --dark-gray-monochrome: 26, 20, 71; /* deep blue */ --black-monochrome: 15, 11, 12; /* off-blue black */ --bright-accent: 239, 221, 27; /* bright yellow */ --medium-accent: 227, 69, 38; /* medium red */ --dark-accent: 148, 26, 29; /* deep red */ --newpage-color: var(--bright-accent); /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); /* Primary Text Colors */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--white-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--black-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--black-monochrome); /* Primary Header Colors */ --header-gradient-color-bottom: var(--black-monochrome); --header-gradient-color-middle: var(--dark-gray-monochrome); --header-gradient-color-top: var(--dark-gray-monochrome); --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--black-monochrome); --swatch-topmenu-bg-color: var(--pale-gray-monochrome); --link-color: var(--dark-accent); --visited-link-color: var(--medium-accent); --hover-link-color: var(--medium-accent); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /* Header Gradients */ --gradient-header: linear-gradient(35deg, rgb(var(--header-gradient-color-bottom)) 0, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, rgba(var(--swatch-topmenu-bg-color), 1) -webkit-calc(100% - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -webkit-calc(100% - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, rgba(var(--swatch-topmenu-bg-color), 1) -moz-calc(100% - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -moz-calc(100% - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) .125rem, rgba(var(--swatch-topmenu-bg-color), 1) -webkit-calc(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -webkit-calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) .125rem, rgba(var(--swatch-topmenu-bg-color), 1) -moz-calc(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -moz-calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) .125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --diagonal-stripes: inherit; --header-height-on-desktop: 12.25rem; --header-background-image-size: 100% 12.25rem; --base-font-size: 1rem; --sidebar-width-on-desktop: -webkit-calc(var(--base-font-size) * 16); --sidebar-width-on-desktop: -moz-calc(var(--base-font-size) * 16); --sidebar-width-on-desktop: calc(var(--base-font-size) * 16); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgba(var(--pale-gray-monochrome), 1); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--dark-gray-monochrome), 1); } ::-moz-selection { background: rgba(var(--bright-accent), 0.5); } ::selection { background: rgba(var(--bright-accent), 0.5); } html { background: white; } html, body { -webkit-font-feature-settings: "onum"0; -moz-font-feature-settings: "onum"0; font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--pale-gray-monochrome)); } #page-content span > a, #page-content div:not([id*="wiki-tabview"]) a { -webkit-transition: -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-box-shadow: inset 0 0 0 0.01px rgba(var(--swatch-primary), 1); -moz-box-shadow: inset 0 0 0 0.01px rgba(var(--swatch-primary), 1); box-shadow: inset 0 0 0 0.01px rgba(var(--swatch-primary), 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .owindow .title { background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--white-monochrome)); } .title.modal-header, .owindow { background: var(--gradient-header); color: rgb(var(--white-monochrome)); } .hovertip { background: var(--gradient-header); background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--white-monochrome)); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } .owindow .button-bar a { background-color: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--white-monochrome)); } .title.modal-header h1, .owindow h1, .hovertip h1 { color: rgb(var(--white-monochrome)); } #lock-info { background-color: rgb(var(--pale-gray-monochrome)); } #main-content { margin-top: 2.1em; } #page-content span > a:hover, #page-content div:not([id*="wiki-tabview"]) a:hover { -webkit-transition: -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-box-shadow: inset 100vw 0 0 0 rgba(var(--swatch-primary), 1); -moz-box-shadow: inset 100vw 0 0 0 rgba(var(--swatch-primary), 1); box-shadow: inset 100vw 0 0 0 rgba(var(--swatch-primary), 1); text-decoration: none; } body { -webkit-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); -moz-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); -o-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); } hr { background: rgb(0, 0, 0, 0); border: 0; height: 1.5rem; width: 90%; position: relative; margin: 1.875rem auto; } #page-title::before, hr::before { content: " "; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 447.1 202.4' xml:space='preserve'%3E%3Cg%3E%3Cpolygon fill='%23E34526' points='223.5,45.7 208,90.5 160.6,91.4 198.4,120.1 184.6,165.5 223.5,138.4 262.5,165.5 248.7,120.1 286.5,91.4 239.1,90.5 '/%3E%3Cpolygon fill='%23E34526' points='89,58.3 77.7,90.7 43.4,91.4 70.8,112.2 60.9,145 89,125.4 117.2,145 107.2,112.2 134.6,91.4 100.3,90.7 '/%3E%3Cpolygon fill='%23E34526' points='403.6,91.4 369.4,90.7 358.1,58.3 346.8,90.7 312.5,91.4 339.9,112.2 329.9,145 358.1,125.4 386.2,145 376.3,112.2 '/%3E%3C/g%3E%3C/svg%3E%0A"); color: rgb(var(--medium-accent)); display: inline-block; position: absolute; top: 0.1em; left: 0; margin: 0 0 0 -0.188rem; font-size: 0.938rem; line-height: 0; height: 1.5rem; width: 4rem; background-repeat: no-repeat; background-position: center center; margin-left: -webkit-calc(50% - 2rem); margin-left: -moz-calc(50% - 2rem); margin-left: calc(50% - 2rem); background-color: transparent; z-index: 1; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } #page-title::after, hr::after { content: " "; height: 0.125rem; width: 100%; position: absolute; margin: 0 auto; background: rgb(var(--gray-monochrome)); left: 0; top: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 630 23' xml:space='preserve'%3E%3Cpath fill='%23E6EAF6' d='M0,0v23h630V0H0z M334.9,15.9l1.4,4.6l-13.9,2.3h-14.8l-13.9-2.3l1.4-4.6l0.8-2.6l-2.1-1.6l-3.9-2.9l4.9-0.1 l2.7-0.1l0.9-2.5l1.6-4.6L315,0.1l15.1,1.4l1.6,4.6l0.9,2.5l2.7,0.1l4.9,0.1l-3.9,2.9l-2.1,1.6L334.9,15.9z'/%3E%3C/svg%3E%0A"); -webkit-mask-size: 43.375rem auto; mask-size: 43.375rem auto; -webkit-mask-position: center center; mask-position: center center; } #header { background-position: left .75rem top 1rem; -webkit-background-size: auto 10.375rem; -moz-background-size: auto 10.375rem; -o-background-size: auto 10.375rem; background-size: auto 10.375rem; height: 12.25rem; -webkit-filter: initial; filter: initial; } #header h1 { max-height: 12.75rem; } #header h1, #header h1 a, #header h2, #header h2 span { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } #header h1 a { margin-left: 11rem; margin-top: -1em; position: relative; height: 12.75rem; width: auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; } #header h1 a::before { --wght: 900; font-size: 7rem; font-weight: 900; } #header h2, #header h2 span { --wght: 600; width: 15rem; margin-left: 10.75rem; height: 12.25rem; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-family: var(--title-font); font-weight: 600; } #header h2 span { line-height: 1.15; font-size: 1.45rem; margin-top: 0rem; } #top-bar { --wght: 900; font-size: var(--base-font-size); font-weight: 900; margin: 12.25rem 0 1.75rem 0; height: 1.875rem; } #side-bar { margin: 2em 0 0 0; } #side-bar:hover { background: rgb(var(--white-monochrome)); } #top-bar div.top-bar > ul > li:hover, #top-bar div.mobile-top-bar > ul > li:hover { background-color: rgb(var(--gray-monochrome)); } #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { color: rgb(var(--swatch-menutxt-dark-color)) !important; } #top-bar div.top-bar > ul > li > a::before, #top-bar div.top-bar > ul > li > a::after, #top-bar div.mobile-top-bar > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > a::after { background-color: rgb(var(--dark-accent)); } #top-bar div.top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li.sfhover > a, #top-bar div.top-bar > ul > li.sfhover > a, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li.sfhover > a, #top-bar div.mobile-top-bar > ul > li.sfhover > a { color: rgb(var(--white-monochrome)) !important; } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background-color: rgb(var(--dark-gray-monochrome)); background-image: var(--gradient-header); margin-top: 1.875rem; margin-left: -0.0625rem; -webkit-box-shadow: inherit; -moz-box-shadow: inherit; box-shadow: inherit; } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul, #top-bar div.top-bar > ul > li > ul > li, #top-bar div.mobile-top-bar > ul > li > ul > li { border-color: rgb(var(--light-gray-monochrome)); } #top-bar div.top-bar > ul > li > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a { --wght: 600; font-weight: 600; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before, #top-bar div.mobile-top-bar > ul > li > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > ul > li > a:hover::before { background-color: rgb(var(--dark-accent)); } #side-bar:hover { background: rgb(var(--white-monochrome)); } #side-bar .heading, #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded { background: rgba(var(--pale-gray-monochrome), 0.5); font-family: var(--title-font); min-height: 1.5rem; } #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { --wght: 900; text-shadow: inherit; color: rgb(var(--dark-gray-monochrome)); font-weight: 900; letter-spacing: 0.15em; font-size: -webkit-calc(var(--base-font-size) * 0.95); font-size: -moz-calc(var(--base-font-size) * 0.95); font-size: calc(var(--base-font-size) * 0.95); height: 1.5rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background-color: rgb(var(--light-gray-monochrome), 0.5); } #side-bar div.menu-item .sub-text { color: rgb(var(--medium-accent)); } #page-title { font-family: var(--title-font); position: relative; border: 0px; text-align: center; } #page-title:before { top: -webkit-calc(100% - 0.75rem); top: -moz-calc(100% - 0.75rem); top: calc(100% - 0.75rem); } #page-title:after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: -webkit-calc(100%); top: -moz-calc(100%); top: calc(100%); max-width: 43.375rem; } #content-wrap h1, #content-wrap h2, #content-wrap h3, #content-wrap h4, #content-wrap h5, #content-wrap #page-title { --wght: 700; line-height: 1.25; font-weight: 700; } #content-wrap h1, #content-wrap #page-title { font-size: 2.45rem; } #content-wrap h2 { font-size: 1.7rem; } #content-wrap h3 { font-size: 1.25rem; } #content-wrap h4 { font-size: 1rem; } #content-wrap h5 { font-size: .9rem; } #content-wrap * > #page-title, #content-wrap * > h1:first-of-type, #content-wrap * > h2:first-of-type, #content-wrap * > h3:first-of-type, #content-wrap * > h4:first-of-type, #content-wrap * > h5:first-of-type, #content-wrap * > h6:first-of-type { margin-bottom: 0; margin-top: 0; } #content-wrap * + h1, #content-wrap * + h2, #content-wrap * + h3, #content-wrap * + h4, #content-wrap * + h5, #content-wrap * + h6 { margin-top: 1.5em; } #content-wrap #page-title + *, #content-wrap h1 + *, #content-wrap h2 + *, #content-wrap h3 + *, #content-wrap h4 + *, #content-wrap h5 + *, #content-wrap h6 + * { margin-top: 1em; } #content-wrap p + * { margin-top: 1em; } #content-wrap ol:not([class*="yui-nav"]), #content-wrap ul:not([class*="yui-nav"]) { margin-bottom: 1em; margin-top: 1em; line-height: 1.5; padding-left: 3ch; } #content-wrap ol:not([class*="yui-nav"]) li, #content-wrap ul:not([class*="yui-nav"]) li { margin-bottom: .25em; max-width: 75ex; } .page-rate-widget-box .cancel a, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a::before, .page-rate-widget-box .rateup a::before, .page-rate-widget-box .ratedown a::before { -webkit-transition: background-color 500ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 500ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 500ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } .page-rate-widget-box .cancel a:hover { background-color: rgba(var(--gray-monochrome), 0.2); } .page-rate-widget-box .rateup a:hover { background-color: rgba(0, 200, 0, 0.2); } .page-rate-widget-box .ratedown a:hover { background-color: rgba(var(--dark-accent), 0.2); } .page-rate-widget-box .cancel a { -webkit-box-shadow: inset 0 0 0 0 rgba(var(--gray-monochrome), 1) !important; -moz-box-shadow: inset 0 0 0 0 rgba(var(--gray-monochrome), 1) !important; box-shadow: inset 0 0 0 0 rgba(var(--gray-monochrome), 1) !important; } .page-rate-widget-box .rateup a { -webkit-box-shadow: inset 0 0 0 0 rgba(0, 200, 0, 1) !important; -moz-box-shadow: inset 0 0 0 0 rgba(0, 200, 0, 1) !important; box-shadow: inset 0 0 0 0 rgba(0, 200, 0, 1) !important; } .page-rate-widget-box .ratedown a { -webkit-box-shadow: inset 0 0 0 0 rgba(var(--dark-accent), 1) !important; -moz-box-shadow: inset 0 0 0 0 rgba(var(--dark-accent), 1) !important; box-shadow: inset 0 0 0 0 rgba(var(--dark-accent), 1) !important; } .page-rate-widget-box .cancel a:hover { -webkit-box-shadow: inset 100vw 0 0 0 rgba(var(--gray-monochrome), 1) !important; -moz-box-shadow: inset 100vw 0 0 0 rgba(var(--gray-monochrome), 1) !important; box-shadow: inset 100vw 0 0 0 rgba(var(--gray-monochrome), 1) !important; } .page-rate-widget-box .cancel a:hover::before { background-color: rgb(var(--white-monochrome)); } .page-rate-widget-box .rateup a:hover { -webkit-box-shadow: inset 100vw 0 0 0 rgba(0, 200, 0, 0.8) !important; -moz-box-shadow: inset 100vw 0 0 0 rgba(0, 200, 0, 0.8) !important; box-shadow: inset 100vw 0 0 0 rgba(0, 200, 0, 0.8) !important; } .page-rate-widget-box .rateup a:hover::before { background-color: rgb(var(--white-monochrome)); } .page-rate-widget-box .ratedown a:hover { -webkit-box-shadow: inset 100vw 0 0 0 rgba(var(--dark-accent), 1) !important; -moz-box-shadow: inset 100vw 0 0 0 rgba(var(--dark-accent), 1) !important; box-shadow: inset 100vw 0 0 0 rgba(var(--dark-accent), 1) !important; } .page-rate-widget-box .ratedown a:hover::before { background-color: rgb(var(--white-monochrome)); } #content-wrap table { font-size: 1rem; line-height: 1.5; border-spacing: 0; margin: 1.25rem auto !important; border-collapse: collapse !important; } #content-wrap table td, #content-wrap table th, #content-wrap td, #content-wrap th { --wght: 400; border: 1px solid rgb(var(--gray-monochrome)); background-color: rgb(var(--white-monochrome)); font-weight: 400; padding: .25rem 0.5rem !important; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-auto-flow: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } #content-wrap thead td, #content-wrap thead th, #content-wrap th { --wght: 700; background-color: rgb(var(--pale-gray-monochrome)) !important; color: rgb(var(--dark-gray-monochrome)); font-weight: 700 !important; } #content-wrap table thead th, #content-wrap thead th { --wght: 700; font-weight: 700; } #content-wrap table th, #content-wrap th { text-align: left; } table.form, table.form > tbody, table.form > tr, table.form td, table.form input { display: -ms-grid; display: grid; -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: stretch; -webkit-justify-content: stretch; -moz-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } table.form tr { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { --box-shadow: rgb(var(--dark-accent)); --wght: 700; -webkit-box-shadow: 0 -webkit-calc(0.0625rem * 5) 0 0 var(--box-shadow); -moz-box-shadow: 0 -moz-calc(0.0625rem * 5) 0 0 var(--box-shadow); box-shadow: 0 calc(0.0625rem * 5) 0 0 var(--box-shadow); font-weight: 700; } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { --box-shadow: rgb(var(--dark-gray-monochrome)); -webkit-box-shadow: 0 0 0 .0625rem var(--box-shadow); -moz-box-shadow: 0 0 0 .0625rem var(--box-shadow); box-shadow: 0 0 0 .0625rem var(--box-shadow); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); overflow: hidden; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgb(var(--gray-monochrome)); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { background-color: rgba(0, 0, 0, 0) !important; } .yui-navset .yui-nav *, .yui-navset .yui-nav *:hover { -webkit-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .yui-navset .yui-nav li:hover * { color: rgb(var(--white-monochrome)); } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: rgba(var(--dark-accent), 0.1); } .yui-navset .yui-nav a::before, .yui-navset .yui-nav .selected a::before { content: " "; width: 125%; height: 100%; position: absolute; top: 0; background-color: rgb(var(--dark-accent), 1); opacity: 1; z-index: 0; -webkit-clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%); clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%); -webkit-transform: translateX(-webkit-calc(-100% - 4rem)); -moz-transform: translateX(-moz-calc(-100% - 4rem)); -ms-transform: translateX(calc(-100% - 4rem)); -o-transform: translateX(calc(-100% - 4rem)); transform: translateX(calc(-100% - 4rem)); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none } .yui-navset .yui-nav a:hover::before, .yui-navset .yui-nav a:focus::before, .yui-navset .yui-nav .selected a:hover::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { padding: 0.5em 2em; } sup { top: -0.3em; } .footnotes-footer, .code { background-image: -webkit-gradient(linear, left top, right top, color-stop(2.35rem, transparent), color-stop(2.35rem, #abced4), color-stop(2.5rem, #abced4), color-stop(2.5rem, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(.1rem, rgba(var(--light-gray-monochrome), 0.5)), color-stop(.1625rem, transparent)); background-image: -webkit-linear-gradient(left, transparent 2.35rem, #abced4 2.35rem, #abced4 2.5rem, transparent 2.5rem), -webkit-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: -moz-linear-gradient(left, transparent 2.35rem, #abced4 2.35rem, #abced4 2.5rem, transparent 2.5rem), -moz-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: -o-linear-gradient(left, transparent 2.35rem, #abced4 2.35rem, #abced4 2.5rem, transparent 2.5rem), -o-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: linear-gradient(90deg, transparent 2.35rem, #abced4 2.35rem, #abced4 2.5rem, transparent 2.5rem), linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-position: 1rem 0.75rem; -webkit-background-size: 100% 1.8rem; -moz-background-size: 100% 1.8rem; -o-background-size: 100% 1.8rem; background-size: 100% 1.8rem; font-size: 0.9rem; font-family: var(--mono-font); } .code pre { white-space: pre; white-space: normal; width: 100%; overflow: hidden; } .code > *, .footnotes-footer > * { --wght: 400; padding: 0 0 0 3rem; line-height: 2; font-weight: 400; letter-spacing: 0.05em; outline: none; } .footnotes-footer div:not([id*="footnote-1"]) { padding: 0 0 0 3rem; } .footnote-footer { display: block; position: relative; width: 90%; margin: 0; } .footnote-footer > a:nth-of-type(1) { margin-left: 0; } .footnotes-footer .title { --wght: 900; margin: 0; font-size: 1.5em; font-weight: 900; margin-bottom: -0.3em; padding: 0.2em 0 0 3rem !important; } div.buttons.alignleft > input, div#page-options-bottom > a, div#page-options-bottom-2 > a { -webkit-border-radius: 0rem; -moz-border-radius: 0rem; border-radius: 0rem; background-color: rgba(var(--pale-gray-monochrome), 1); border: .125rem solid rgba(var(--dark-gray-monochrome), 1); color: rgb(var(--link-color)) !important; -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } div.buttons.alignleft > input:hover, div.buttons.alignleft > input:active, div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active { background-color: rgba(var(--dark-gray-monochrome), 1); color: rgba(var(--swatch-menutxt-light-color), 1) !important; } .scp-image-block { -moz-box-shadow: initial; box-shadow: initial; -webkit-box-shadow: initial; } form#edit-page-form { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #footer a { color: rgb(var(--swatch-primary)); } #footer { color: rgba(var(--white-monochrome)); background: rgba(var(--dark-gray-monochrome)); } @media only screen and (max-width: 768px) { #header { background-position: left .5rem top 2rem; -webkit-background-size: auto 8.375rem; -moz-background-size: auto 8.375rem; -o-background-size: auto 8.375rem; background-size: auto 8.375rem; height: 12.25rem; top: -12.25rem; } #header h1 a { margin-left: 9rem; margin-top: -4.5rem; } #header h1 a::before { font-size: 6rem; } #header h2 { width: -webkit-calc(100% - 9.5rem); width: -moz-calc(100% - 9.5rem); width: calc(100% - 9.5rem); height: -webkit-calc(100% - 7.5rem); height: -moz-calc(100% - 7.5rem); height: calc(100% - 7.5rem); margin-left: 9.35rem; margin-top: 7.5rem; text-align: left; } #header h2 span { width: 10rem; height: 100%; margin: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: -webkit-calc(var(--base-font-size) * 1); font-size: -moz-calc(var(--base-font-size) * 1); font-size: calc(var(--base-font-size) * 1); } #header h2 span::before { position: absolute; top: 0; left: 0; width: 90%; margin: 0; } #top-bar { font-size: -webkit-calc(var(--base-font-size) * 0.8); font-size: -moz-calc(var(--base-font-size) * 0.8); font-size: calc(var(--base-font-size) * 0.8); height: 2.5rem; top: -12.25rem; } #top-bar > div.mobile-top-bar > div.open-menu { font-size: -webkit-calc(var(--base-font-size) * 0.65); font-size: -moz-calc(var(--base-font-size) * 0.65); font-size: calc(var(--base-font-size) * 0.65); width: 2.5rem; height: 2.5rem; } #top-bar > div.mobile-top-bar > div.open-menu > p > a { color: rgb(var(--swatch-menutxt-dark-color)) !important; } #top-bar div.mobile-top-bar > ul > li > a { letter-spacing: 0; } #top-bar > div.top-bar > ul > li:last-of-type > ul, #top-bar > div.mobile-top-bar > ul > li:last-of-type > ul { left: 50%; } #top-bar div.mobile-top-bar > ul > li > ul { margin-top: 2.5rem; } #login-status { right: -webkit-calc(3% + 30px); right: -moz-calc(3% + 30px); right: calc(3% + 30px); } #search-top-box:not(:focus-within)::before { top: 5.625rem; } #search-top-box, #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { height: 12.25rem; } #side-bar:target .close-menu { width: -webkit-calc(100% - 15em - var(--scrollbar-width)); width: -moz-calc(100% - 15em - var(--scrollbar-width)); width: calc(100% - 15em - var(--scrollbar-width)); } .footnotes-footer, .code { background-image: -webkit-gradient(linear, left top, right top, color-stop(1.35rem, transparent), color-stop(1.35rem, #abced4), color-stop(1.5rem, #abced4), color-stop(1.5rem, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(.1rem, rgba(var(--light-gray-monochrome), 0.5)), color-stop(.1625rem, transparent)); background-image: -webkit-linear-gradient(left, transparent 1.35rem, #abced4 1.35rem, #abced4 1.5rem, transparent 1.5rem), -webkit-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: -moz-linear-gradient(left, transparent 1.35rem, #abced4 1.35rem, #abced4 1.5rem, transparent 1.5rem), -moz-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: -o-linear-gradient(left, transparent 1.35rem, #abced4 1.35rem, #abced4 1.5rem, transparent 1.5rem), -o-linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-image: linear-gradient(90deg, transparent 1.35rem, #abced4 1.35rem, #abced4 1.5rem, transparent 1.5rem), linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem); background-position: 1rem 0.45rem; -webkit-background-size: 100% 1.25rem; -moz-background-size: 100% 1.25rem; -o-background-size: 100% 1.25rem; background-size: 100% 1.25rem; font-size: 0.7rem; font-family: var(--mono-font); } .code > *, .footnotes-footer > * { line-height: 1.75; padding-left: 2.5rem; } .footnotes-footer .title { padding-left: 2.5rem !important; ; } .footnotes-footer div:not([id*="footnote-1"]) { padding: 0 0 0 2.5rem; } #content-wrap h1, #content-wrap #page-title { font-size: 1.9rem; } #content-wrap h2 { font-size: 1.5rem; } #content-wrap h3 { font-size: 1.1rem; } #content-wrap h4 { font-size: 0.9rem; } #content-wrap h5 { font-size: .8rem; } } }
I see a lot of support for options 2 and 4. How would you gusy feel about this amalgamation of the two?
Option 2 & 4 combo
Addendum 1333.1: Additional Notes
Pros
Inherits parent page's color scheme and style
Box indicates it is separate from content
Symbol literally means "Citation here"Cons
People may complain about aesthetics?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cite this page as:
"SCP-1333" by CityToast, from the [http://scp-wiki.net SCP Wiki. Source: http://www.scp-wiki.net/scp-1333. Licensed under CC-BY-SA.
For more information, see Licensing Guide.
Licensing Disclosures
Images:
Images: (or audio, if applicable)
- "Robbie Knievel - Airborn Texas Motor Speedway" by Bo Nash, 2008, CC-BY-SA 2.0 (via Flickr)
- "Warbirds Display Wanaka" by Bernard Spragg, CC-by-SA 2.0 (Flickr)
computer metamorphic safe scp self-replicating transmission visual
page revision: 28, last edited: 27 May 2020, 16:52 (5 days ago)
Stop watching site www.scp-wiki.net[?]
