This theme was adapted by Kai4C from the legacy M.E.G. Archive theme created by
ShroomDispencer, which is no longer in use on the wiki. Updates for parity with
TrailmixNCocoa's M.E.G. theme are underway!
27th January 2023
- Collapsible is now 🌟fancy🌟 and matches the M.E.G. theme! Thank you Trailmix for the code!
- Updated SD classes!
- Image demo changed, as original did not abide by CC guidelines.
4th January 2023
- Fixed margin issue with blockquotes. FINALLY got around to it; it's been bugging me for ages.
24th August 2022
- Logo image stolen borrowed from Trailmix's M.E.G. theme for parity
- Justified and slightly larger text! Big plus for readability! (Note that justified text may not work on browsers other than Chrome and Microsoft Edge)
- Mild coloration adjustments for increased edginess
- Tables now look better! Or maybe worse!
- Updated CECS support! Now with ✨✨icons✨✨!
Kai plans to use this page for Project Holy Grail. Feel free to use this theme for edgy M.E.G. secret pages, etc.
I wonder what links look like?
Level 0
Okay…
To import this theme to your page, put the following text anywhere inside it:
[[include :backrooms-wiki:theme:meg-edgy]]
Examples
We are the glimmer of hope.
HABITAT(S): N/A
[[include :kai4c:component:concord
|primary-color= rgb(var(--dark-accent-red))
|secondary-color= rgb(var(--pale-gray-monochrome))
|accent-color= rgb(var(--blinding-red))
|number=193
|habitat=N/A
|goi-specification=[https://en.backrooms-wiki.ru/iets IETS]:
|sin=X
|danger=0
|intel=A
|class=Anthropoid
|properties=BNV UNQ MCH
]]
Concord looks good on here, don't it? :D
SURVIVAL DIFFICULTY:
Class 0
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class 1
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class 2
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class 3
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class 4
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class 5
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class unknown
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class habitable
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class amended
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class deadzone
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class pending
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class n/a
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class omega
- {$one}
- {$two}
- {$three}
SURVIVAL DIFFICULTY:
Class Integral
- Important Files
- Varied Reality
- Documented Phenomena
SURVIVAL DIFFICULTY:
Class Razor's Edge
- Testing to see
- If the new logo
- Works on this
Security Classification: PUBLIC
Security Classification: RESTRICTED
Security Classification: CLASSIFIED
Security Classification: SECRET
Security Classification: TOP SECRET
Security Classification: OTHER (PLEASE SPECIFY)
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (e.g. a blockquote) or blocked by something (e.g. an image). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
Edgy Gamercore text here
Get coconut mall'd here
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot Of text.
This is a long tab. It contains a lot Kf text.
This is a long tab. It contains a lot Bf text.
This is a long tab. It contains a lot Of text.
This is a long tab. It contains a lot Of text.
This is a long tab. It contains a lot Mf text.
This is a long tab. It contains a lot Ef text.
This is a long tab. It contains a lot Rf text.
TESTING
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Quick Brown Fox:
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Kai's personal testing space.
Level 206 - "Bones of Bones" - 0 - 174436
You shouldn't be here! Shoo!
Blanche Net Page 3 - 0 - 60813
You shouldn't be here! Shoo!
Blanche Net Page 1 - 0 - 53239
You shouldn't be here! Shoo!
Level 206 1 - 1 - 44039
You shouldn't be here! Shoo!
Blanche Net Page 2 - 0 - 41755
You shouldn't be here! Shoo!
Blanche Net Page 4 - 0 - 38434
You shouldn't be here! Shoo!
Level 12.1 // Offset 1 - 0 - 34903
You shouldn't be here! Shoo!
Icarus 2 - 0 - 30337
You shouldn't be here! Shoo!
Level 132 1 - 0 - 30109
You shouldn't be here! Shoo!
Icarus 3 - 0 - 30090
You shouldn't be here! Shoo!
Log 906-2 - 2 - 29459
You shouldn't be here! Shoo!
Level M 1 - 0 - 26938
You shouldn't be here! Shoo!
The Missing Link 3 - 0 - 25538
You shouldn't be here! Shoo!
Offset Guide 0 - 0 - 22884
You shouldn't be here! Shoo!
Kimiko 0 - 0 - 22643
You shouldn't be here! Shoo!
The Hub 1 - 3 - 19983
You shouldn't be here! Shoo!
The Star - 0 - 19769
You shouldn't be here! Shoo!
Icarus 1 - 0 - 18190
You shouldn't be here! Shoo!
Entity 73 0 - 0 - 17883
You shouldn't be here! Shoo!
Level 42 - 0 - 17185
You shouldn't be here! Shoo!
don't do drugs, kids.
THIS IS A LARGE HEADER
This is a blockquote, created by putting "> " at the start of each line.
Smol Header:
Level 0 That’s a link
Nested blockquotes
And another1
Lightblock
[[div class="lightblock"]]
This is a lightblock! In case your quoteblock feels just a bit too edgy…
[[/div]]
Darkblock
[[div class="darkblock"]]
This is a darkblock! In case your quoteblock isn’t edgy enough!
[[/div]]
Styled quote
[[div class="styled-quote"]]
This is a styled quote! In case your lightblock feels just a bit too boring…
[[/div]]
Dark styled quote
[[div class="dark-styled-quote"]]
This is a dark styled quote! In case your darkquote still isn’t spicy enough!
[[/div]]
Report: Blocks that work nice in blockquotes!
[[div class="styled-quote2"]]
Description:
Context context context context!<— Note the difference in border color from a regular styled quote!
[[/div]]
<BEGIN RECORDING>
Man: Isn't this an awesome theme?Woman: No, it's too edgy!
[[div class="darkblock2"]]
He pauses and frowns. Man is confused - isn't it supposed to be edgy?
Text works as normal here btw but I think it looks cooler in teletype.
[[/div]]Man: Look at how groovy that block above this line is! Now we don't have to use ugly square brackets and stuff between our speaking lines!
WOman: No I don't care I don't like it, it's still too edgy
<END RECORDING>
Logo block
[[div class="logoblock"]]
This is a logo block! It comes with a pre-built M.E.G. Logo at the bottom! Wow!
Use this block for extra edgy Overseer directives. Teehee!
One more thing — you should probably fill in at least a full line in this thing…
[[/div]]
…or it might look slightly wonky, like this.
Sorry :/
This is a table | |
---|---|
||~ for a header|| | and || for a cell|| |
Adding an extra || like ||||this|| should break to the next line… I think? |
The Header & Body font is Share Tech Mono.
The Header font is Oxygen Mono.
The Title font WAS Anonymous Pro and is now Kelly Slab. Please appreciate the font and the title gradient… it took me FOUR DAYS… T_T
The monospace font used is PT Mono.
Foot2
/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800|Share+Tech+Mono|Anonymous+Pro'); @import url('https://fonts.googleapis.com/css2?family=Baumans&family=Graduate&family=Kelly+Slab&family=Kumar+One&family=Tulpen+One&family=ZCOOL+QingKe+HuangYou&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&display=swap'); /* All Vars Used */ :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "nuscp"; /* mua be either "nuscp" or "sigma9" */ --theme-id: "meg-edgy"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "MEG EDGY"; /* set this to your theme's full name */ /* Header */ --logo-image: url("http://backrooms-sandbox-2.wikidot.com/local--files/trailmixncocoa-meg-theme/IMG_3129.PNG"); --header-title: "M.E.G. Records"; --header-subtitle: "The M.E.G. Classified Database"; /* Typefaces */ --body-font: 'Share Tech Mono', monospace; --header-font: 'Oxygen Mono', monospace; --title-font: 'Kelly Slab', cursive; --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 185, 185, 185; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 170, 170, 170; /* light accent gray for login status */ --gray-monochrome: 66, 66, 72; /* gray */ --grayer-monochrome: 130, 130, 135; --dark-gray-monochrome: 48, 48, 52; /* dark accent gray for sidebar background */ --black-monochrome: 30, 20, 20; /* black */ --bright-accent: 125, 25, 25; /* Some sidebar text, edit button text etc */ --medium-accent: 74, 0, 0; /* the annoying header thing */ --dark-accent: 12, 12, 12; /* search bar and edit button */ --newpage-color: 230, 10, 10; /* text highlight colour, url link */ --terminal-medium: 74, 0, 0; /* edit button borders */ --pale-accent: 0, 221, 221; /* dark yellow-brown */ --tester-blue: 0, 0, 221; /* blue for testing */ --tester-green: 0, 221, 0; /*green for testing */ --tester-purple: 221, 0, 221; /*purple for testing */ --tester-yellow: 221, 221, 0; /*yellow for testing */ --dark-accent-red: 74, 0, 0; --mid-accent-red: 140, 25, 30; --bright-red: 170, 15, 15; --shadow-red: 30, 20, 20; --darkish-red: 95, 10, 10; --blinding-red: 230, 10, 10; --contrast-salmon: 250, 160, 160; /* Primary Theme Colors */ --swatch-background: var(--grayer-monochrome); --swatch-primary: var(--newpage-color); --swatch-primary-darker: var(--mid-accent-red); --swatch-primary-darkest: var(--shadow-red); /* Primary Text Colors */ --swatch-text-dark: var(--darkish-red); --swatch-text-light: var(--light-gray-monochrome); --swatch-important-text: var(--tester-purple); /* Primary Menu Colors */ --swatch-menubg-color: var(--shadow-red); --swatch-menubg-light-color: var(--dark-accent); --swatch-menubg-medium-color: var(--mid-accent-red); --swatch-menubg-medium-dark-color: var(--bright-red); --swatch-menubg-dark-color: var(--mid-accent-red); --swatch-menubg-black-color: var(--mid-accent-red); --swatch-menubg-hover-color: var(--mid-accent-red); --swatch-menutxt-dark-color: var(--bright-red); --swatch-menutxt-light-color: var(--light-gray-monochrome); --swatch-border-color: var(--dark-gray-monochrome); /* Primary Header Colors */ --swatch-headerh1-color: var(--light-gray-monochrome); --swatch-headerh2-color: var(--blinding-red); --swatch-topmenu-border-color: var(--dark-accent-red); --swatch-topmenu-bg-color: var(--dark-accent-red); /* Header Gradients*/ --gradient-header: linear-gradient(to bottom, rgba(var(--dark-accent-red),0.97) 10%, rgba(var(--dark-accent-red),0.97) 40%, rgb(var(--black-monochrome)) 100%); --gradient-topmenu: linear-gradient(to bottom, white 0%, white 7.5rem, rgba(var(--swatch-topmenu-border-color), 1) 7.5rem, rgba(var(--swatch-topmenu-bg-color), 1) 7.625rem, rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 3rem); --diagonal-stripes: linear-gradient(transparent 0); --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--mid-accent-red), 0.45) 0%, rgba(var(--mid-accent-red), 0.55) 100%); --header-background-image-size: 100% 7.5rem; /* Sidebar */ --sidebar-transition-timing: 0.5s ease-in-out 0.1s; --sidebar-internal-border-thickness: 0.16rem; --background-gradient-color: var(--grayer-monochrome); --background-gradient-distance: 50rem; } /* sd banner colours */ .sd-container { --sd-border:74,0,0; } #container { background-image: radial-gradient(circle, rgb(var(--light-gray-monochrome), 0.05) 50%, transparent 0); background-size: 0.25em 0.25em; background-repeat: repeat; background-attachment: fixed; text-align: justify; text-justify: inter-word; font-size: 1.1em; } html, body, #side-bar:hover { scrollbar-color: rgb(var(--tester-blue)) rgb(var(--tester-green)); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgb(var(--shadow-red)); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--mid-accent-red)); } .scp-image-block .scp-image-caption { font-size: .8em; background-color:rgb(var(--dark-accent)); color: rgb(var(--bright-red)); } #header h1 { color: rgb(var(--tester-green)); } #page-title { font-family: 'Kelly Slab', cursive; border-color: rgba(var(--mid-accent-red))!important; background: linear-gradient(to bottom, rgba(var(--shadow-red),0.97) 0%, rgba(var(--dark-accent-red),0.97) 35%, rgb(var(--bright-red)) 80%); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent; } #side-bar div.menu-item .sub-text { color: rgb(var(--pale-gray-monochrome)); } #login-status { color: rgb(var(--medium-accent)); } .code { padding: 5px 5px 5px 15px; margin-bottom:10px; width: 100%; font-family: var(--header-font); font-size: 1.1em; background-color:rgb(var(--shadow-red)); border: 2px dashed rgb(var(--mid-accent-red)); color: rgb(var(--bright-red)); } .hl-main { filter: invert(1) hue-rotate(180deg); } .page-options-bottom a { background-color:rgb(var(--shadow-red)) !important; color: rgb(var(--blinding-red)) !important; font-family: var(--header-font); } table.wiki-content-table th { text-align: left !important; font-family: var(--title-font) !important; color: rgb(var(--pale-gray-monochrome)); background-color: rgb(var(--dark-accent-red)) !important; border: 1px solid rgb(var(--mid-accent-red)) !important; } table.wiki-content-table tr { background-color:rgba(var(--gray-monochrome), 0.15) !important; border: 1px solid rgb(var(--mid-accent-red)) !important; color: rgb(var(--tester-purple)); } table.wiki-content-table td { background-color: rgba(var(--gray-monochrome), 0.15)!important; border: 1px solid rgb(var(--mid-accent-red)) !important; color: rgb(var(--dark-accent-red)); } .footnotes-footer { margin-bottom:10px; width: 100%; font-family: var(--body-font); font-size: 1.1em; background-color: rgba(var(--mid-accent-red), 0.20)!important; border-left: 0.5rem solid rgba(var(--dark-accent-red)); color: rgb(var(--dark-accent-red)); } span.printuser { color: rgb(var(--light-gray-monochrome)) !important; } table.wiki-content-table { border: 2px solid rgb(var(--mid-accent-red)); } hr { background-color: rgb(var(--bright-accent)) !important; /* TABS */ } .yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em { color: rgb(var(--bright-red)); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { color: rgb(var(--light-gray-monochrome)); } /* RATING MODULE */ .page-rate-widget-box { background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--dark-accent),1)), to(rgba(var(--dark-accent), 1))); background: -webkit-linear-gradient(bottom, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); background: -o-linear-gradient(bottom, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); background: linear-gradient(to top, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); border: 2px solid rgb(var(--mid-accent-red)); } #page-content .rate-box-with-credit-button { background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--dark-accent),1)), to(rgba(var(--dark-accent), 1))); background: -webkit-linear-gradient(bottom, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); background: -o-linear-gradient(bottom, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); background: linear-gradient(to top, rgba(var(--dark-accent),1) 0%, rgba(var(--dark-accent), 1) 100%); border-color: rgb(var(--mid-accent-red)); } .page-rate-widget-box .rate-points { color: rgb(var(--bright-red)) !important; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { background-color: rgb(var(--dark-accent-red)) !important; } #page-content .rate-box-with-credit-button > .creditButton > p > a::before { background-color: rgb(var(--dark-accent-red)); } #page-content .rate-box-with-credit-button > .creditButton:hover { background: rgba(var(--tester-green), 0.8); } .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .cancel a:hover { background-color: rgb(var(--bright-red)) !important; } .scp-image-block { border: solid .1625rem rgb(var(--mid-accent-red)); } .blockquote { padding: 5px 15px 5px 15px; margin-bottom:10px; font-size: 1rem; background-color:rgb(var(--shadow-red)); border: 3px solid rgb(var(--mid-accent-red)); color: rgb(var(--light-gray-monochrome)); margin: 10px auto 0; } blockquote { padding: 5px 15px 5px 15px; margin-bottom:10px; font-size: 1rem; background-color:rgb(var(--shadow-red)); border: 3px solid rgb(var(--mid-accent-red)); color: rgb(var(--light-gray-monochrome)); margin: 10px auto 0; } blockquote blockquote, .blockquote blockquote { padding: 5px 15px 5px 15px; border: 3px solid rgb(var(--mid-accent-red)); color: rgb(var(--bright-red)); margin: 0 auto 10px; font-size: 1rem; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { background-color: rgb(var(--dark-accent)); } #search-top-box:not(:focus-within)::before { color: rgb(var(--dark-accent)); } #top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > a { color: rgb(var(--pale-gray-monochrome)); } #top-bar div.mobile-top-bar > ul > li > a:hover, #top-bar div.top-bar > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li:hover > a { color: rgb(var(--white-monochrome)); } .open-menu a { color: rgb(var(--tester-purple)) !important; } @-webkit-keyframes marquee { 0% { -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } } @keyframes marquee { 0% { -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } } @media only screen and (max-width: 768px) { #header h2 { overflow: hidden; height: 100%; pointer-events: none; } #header h2 span { -webkit-animation: marquee linear 10s infinite; animation: marquee linear 10s infinite; width: 150% !important; margin-left: 0; margin-right: 0; padding: 0; } #header h1 span { font-size: 75%; } #top-bar { font-size: calc(var(--base-font-size)*0.70); } } .hovertip{ background-color:rgb(var(--shadow-red)) !important; background-image:radial-gradient(ellipse 1000% 100% at 50% 90%, transparent,rgb(var(--shadow-red))) !important; } #side-bar { background-size: 0%; } .blockquote h1, .blockquote h2, .blockquote h3, .blockquote h4, .blockquote h5, blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5 { color: rgb(var(--bright-red)); } .styled-quote { text-align: justify; text-justify: inter-word; color: rgb(var(--dark-accent-red)); background-color:rgb(var(--pale-gray-monochrome)); border-left: 0.5rem solid rgba(var(--dark-accent-red)); } .styled-quote2 { color: rgb(var(--dark-accent-red)); background-color:rgb(var(--pale-gray-monochrome)); border-left: 0.5rem solid rgba(var(--mid-accent-red)); padding: 5px 15px 5px 15px; margin-right: 5px; } .dark-styled-quote { color:rgb(var(--blinding-red)); background-color:rgb(var(--dark-accent-red)); border-left: 0.5rem solid rgba(var(--bright-red)); } .lightblock { background-color:rgb(var(--pale-gray-monochrome)); } .darkblock { background-color:rgb(var(--dark-accent-red)); color:rgb(var(--blinding-red)); } .darkblock2 { background-color:rgb(var(--dark-accent-red)); color:rgb(var(--blinding-red)); display: grid; text-align: justify; word-wrap: normal; font-size: 85%; padding: 5px 10px 5px 15px; margin-right: 5px; } .testingblock{ color: rgb(var(--mid-accent-red)); border: solid 2px rgb(var(--mid-accent-red)); padding: 0.01rem 1rem 1rem 1rem; margin: 0.5rem 0 0.5rem 0.20rem; box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,.25); background: url(https://files.en.backrooms-wiki.ru/local--files/theme%3Ameg-edgy/F59005DF-954F-4EB8-8116-2E7F06FB4211.png) center/20% no-repeat; background-color: rgb(var(--pale-gray-monochrome));; background-position: right 50% bottom 25px; padding-bottom: 65px; position: relative; /* clear: both; */ display: table; } .testingblock::after{ content: "M.E.G. - Bettering Humanity"; display: flex !important; justify-content: center !important; font-family: 'Kelly Slab', cursive; font-weight: bold; font-size: 80%; color: black; background-color: rgb(var(--pale-gray-monochrome)); position: relative; transform: translateY(325%); } .logoblock{ padding: 5px 15px 5px 15px; /* adds space - up right down left */ font-size: 1rem; font-family: 'Share Tech Mono'; background: url(https://files.en.backrooms-wiki.ru/local--files/theme%3Ameg-edgy/F59005DF-954F-4EB8-8116-2E7F06FB4211.png) center/20% no-repeat; background-color: rgb(var(--pale-gray-monochrome)); background-position: right 50% bottom 25px; border: 3px solid rgb(var(--mid-accent-red)); border-radius: 15px; color: rgb(var(--black-monochrome)); margin: 10px auto 0; /* Adds a space above the box */ padding-bottom: 65px; position: relative; /*clear: both; */ display: table; } .logoblock::after{ content: "M.E.G. - Bettering Humanity"; display: flex !important; justify-content: center !important; font-family: 'Kelly Slab', cursive; font-weight: bold; font-size: 80%; color: black; background-color: rgb(var(--pale-gray-monochrome)); position: relative; transform: translateY(325%); } .logoblock h2{ color: rgb(var(--dark-accent-red)); } #toc_container { background: blue none repeat scroll 0 0; border: 1px solid #aaa; display: table; font-size: 95%; margin-left: 1em; margin-bottom: 1em; padding: 20px; width: auto; } .toc_title { font-weight: 700; text-align: center; } #toc_container li, #toc_container ul, #toc_container ul li{ list-style: outside none none !important; } /* SD Classes */ .sd-container { /* font */ --sd-font:'PT Mono'; /* borders */ --sd-border:var(--dark-accent-red); /* for most classes */ --sd-border-secondary:0,0,0; /* for n/a */ --sd-border-deadzone:20,0,0; /* for deadzone */ /* symbols */ --sd-symbol:var(--sd-border) !important; /* for most symbols */ --sd-symbol-secondary: 255,255,255; /* white for class 4 and higher */ /* text */ --sd-bullets:var(--sd-border) !important; /* the colour of the bullet point text */ --sd-text:var(--white-monochrome); /* the colour of the text in the top box */ /* class colours */ --class-0:217, 197, 97; --class-1:247,227,117; --class-1:255,201,14; --class-2:245,156,0; --class-3:249,90,0; --class-4:254,23,1; --class-5:175,6,6; --class-unknown:38,38,38; --class-habitable:26,128,111; --class-deadzone:44,13,12; --class-pending:182,182,182; --class-n-a:38,38,38; --class-amended:185,135,212; --class-omega:45,55,255; } /* Collapsible code from Trailmix */ :root{ --base-color: rgb(var(--dark-accent-red)); --hover-color: rgb(var(--blinding-red)); --click-color: green; } /* #page-content is shoved everywhere to make sure it's the most specific thingy */ /* Styling! */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; /* Animated things */ transition: background 0.2s linear; background: var(--base-color); /* Technical bits */ width: min-content; white-space: nowrap; overflow: hidden; } /* The Clicky Text */ #page-content .collapsible-block-link { color: rgb(var(--pale-gray-monochrome)); font-weight: bold; text-decoration: none; } /* Gets rid of the underline when hovering over the collapsible */ #page-content .collapsible-block-link:hover { text-decoration: none } /* Collapsible content */ #page-content .collapsible-block-content { /* Animated things */ transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear; border-top: solid var(--base-color) 5px; border-bottom: solid var(--base-color) 3px; } /* Folded blocks are animated, unfolded ones are not */ #page-content .collapsible-block-folded { max-width: 100%; } #page-content .collapsible-block-unfolded-link{ width: min-content; } /* Addendum counter */ /* Addendum prefixes */ #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷"; color: rgb(var(--blinding-red)); border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽"; color: rgb(0,128,0); border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } /* Hovering effects */ #page-content .collapsible-block-folded:hover { background: var(--hover-color); max-width: 100%; } #page-content .collapsible-block-unfolded-link:hover { background: var(--click-color); max-width: 100%; } /* Collapsible borders - because it looks prettier this way */ #page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{ border-top-color: green; border-bottom-color: green; } /* When hovering over link, change addendum tag to hover-color */ #page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after { background: green; } /* Click flash when clicking, also forces the collapsible to expand */ #page-content .collapsible-block-folded:active { transition: background 0s, max-width 0s; background: var(--click-color); max-width: 100%; } #page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after { transition: background 0s, max-width 0s; background: var(--hover-color); max-width: 100%; } /* On click, change borders to click-color */ #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content { transition: border-top-color 0s, border-bottom-color 0s; border-top-color: var(--hover-color); border-bottom-color: var(--hover-color); } /* Done with normal collapsibles, now we do all the variations */ /* Unfolded collapsible */ #page-content .unfolded-collapse { margin-top: 10px; padding-left: 1rem; padding-right: 1rem; box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px; background: var(--base-color); /* Text */ color: white; font-weight: bold; /* Technical bits */ width: min-content; white-space: nowrap; overflow: hidden; } /* Addendum prefix */ #page-content .unfolded-collapse::before { content: "▽"; color: green !important; border-right: none; padding-right: 0rem; margin-right: 1rem; font-weight: normal; font-family: var(--mono-font); } /* Bottom border */ #page-content .unfolded-collapse-border { display: block; width: 700px; border-top: solid var(--base-color) 5px; } /* Centering, very simple */ #page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{ margin:auto; margin-top: 10px; }