bubbletea and I's collab css
by mchang, Jul 4, 2020, 6:03 PM
its basically bubbletea's css edited to be more colorful since hers is gray

^made to match this picture
css

^made to match this picture
css
/*!
* City.css v1.0.2
*
* Inspired by Air (by asf), Libre (by PythonNut), and Grey (by Tungsten)
*
* View the source at https://github.com/tyxchen/aops-city
*
*
*
* /** Loading Animation **/
*
* Released under the MIT license (see LICENSE.md)
*/
v
/**
* Groups
*/
/* Reset background, padding, border & margin */
button, #navigation_box, #header h1, #main, fieldset {
/* Source for %reset-all */
background: none;
padding: 0;
border: none;
margin: 0;
}
/* Set box-sizing to border-box */
[type="text"],
textarea, #wrapper, #right_navigation_box a, #main, #blog_keywords + div::before,
#blog_keywords + div::after {
/* Source for %border-box */
box-sizing: border-box;
}
/* Set box-sizing to content-box */
#navigation_box, #right_navigation_box .blog-login::before,
#right_navigation_box .blog-logout::before, #blog_keywords + div {
/* Source for %content-box */
box-sizing: content-box;
}
/* No user select */
#navigation_box, #header h1 {
/* Source for %no-user-select */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Pseudo-element shared styles */
body::after, #content::before, #right_navigation_box::before, #right_navigation_box::after,
#right_navigation_box a::before,
#right_navigation_box a::after, #blog_keywords + div::before,
#blog_keywords + div::after {
/* Source for %pseudo */
content: "";
position: absolute;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6, #navigation_box a, .bbcode_quote_head, #user-menu-widget strong a, #blog_keywords, #post-new-entry, .aops-modal-title,
#flyout {
/* Source for %heading */
font-family: Roboto, 'Lucida Grande', 'DejaVu Sans', sans-serif;
}
h1, h2, #left_navigation_box {
font-family: american typewriter;
font-weight: bold;
}
/* Transitions */
#navigation_box, #right_navigation_box a, div.entry h2 > a::before, div.comment h2 > a::before, pre::before, #blog_keywords, .cmty-item-tag {
/* Source for %transition03 */
transition: 0.3s ease;
}
/**
* Modules
*/
/**
* General module
*
* Encompasses links, buttons, etc.
*/
a:link,
a:hover,
#left_navigation_box a:last-child,
a#blog_keywords:focus,
a:visited {
color: #eac09d;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* Rule extends %heading */
color: inherit;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
[style="text-decoration: underline"], .message a:link,
.message a:hover,
.message #left_navigation_box a:last-child,
#left_navigation_box .message a:last-child,
.message a#blog_keywords:focus,
.message a:visited,
.hidden-label {
text-decoration: none !important;
background-image: linear-gradient(to bottom, currentColor, currentColor);
background-size: 1px 1px;
background-repeat: repeat-x;
background-position: 0 1.06em;
}
[type="text"],
textarea {
font-size: inherit;
}
textarea {
resize: vertical;
}
.aops-scroll-bar, .aops-scroll-slider {
width: 3px;
}
::-webkit-scrollbar {
background-color: #9dead8;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #9dead8;
border: 0.25rem solid #ea9ddf;
border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover, #left_navigation_box a:last-child::-webkit-scrollbar-thumb, #blog_keywords:focus::-webkit-scrollbar-thumb {
background-color: #ea9ddf;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #ea9ddf;
}
.blog-shout-wrapper .aops-scroll-content {
width: 95%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: Roboto, american typewriter;
font-size: 1rem;
color: #444;
overflow-x: hidden;
background: #ffc3f9
}
body::after {
/* Rule extends %pseudo
https://pm1.narvii.com/6791/e2b9271a38259f5dc71b7a263e8317310366f8e3v2_hq.jpg
https://cdna.artstation.com/p/assets/images/images/003/496/026/large/kailah-valentine-pastelgalaxy.jpg
https://wallpaperplay.com/walls/full/3/e/f/217893.jpg*/
position: fixed;
background-image: url("https://i.pinimg.com/originals/b7/3d/4c/b73d4c5893800d24b20dd46972b63206.jpg");
background-position: 42% 80%;
background-size: cover;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wrapper {
/* Rule extends %border-box */
width: 100%;
padding: 0;
background: none;
border: none;
}
#content {
position: relative;
background-color: #fff;
padding: 5vh 10% 0;
margin-top: 72vh;
}
#content::before {
/* Rule extends %pseudo */
background-image: linear-gradient(to top, rgba(51, 51, 51, 0.4) 0, rgba(51, 51, 51, 0.1) 60%, transparent 100%);
top: -15vh;
left: 0;
right: 0;
bottom: 100%;
}
/**
* Header module
*
* Encompasses the header and the navigation bar
*/
#navigation_box a, #header h1 {
/* Source for %title */
/* Rule extends %heading */
color: #ffffff;
}
#navigation_box {
/* Rule extends %reset-all */
/* Rule extends %content-box */
/* Rule extends %no-user-select */
/* Rule extends %transition03 */
position: fixed;
color: transparent;
background-color: #fff;
font-size: 0.9em;
white-space: nowrap;
padding: 0 1em;
border-bottom: 1px solid #ededed;
opacity: 0.95;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: auto;
height: 3rem;
}
#navigation_box a {
/* Rule extends %title */
display: inline;
color: #000000;
text-shadow: none;
font-size: inherit;
font-weight: 300;
line-height: 3rem;
padding: 1.1em 0.4em;
border-top: 0.3em solid #383838;
margin: 0 -0.3em;
transition: 0.2s ease;
}
#navigation_box a:hover, #navigation_box #left_navigation_box a:last-child, #left_navigation_box #navigation_box a:last-child, #navigation_box a#blog_keywords:focus {
padding-top: 0.8em;
color: #1a1a1a;
}
#left_navigation_box {
height: 100%;
font-size: inherit;
line-height: inherit;
}
#right_navigation_box {
position: relative;
margin-right: 2.8rem;
width: 7.5em;
height: 3em;
}
#right_navigation_box a {
/* Rule extends %border-box */
/* Rule extends %transition03 */
position: absolute;
color: transparent;
font-size: 0.01px;
width: 2.5rem;
height: 3rem;
/* autoprefixer: off */
border-bottom: -webkit-calc(1px) solid #ededed;
}
#right_navigation_box a:hover, #right_navigation_box #left_navigation_box a:last-child, #left_navigation_box #right_navigation_box a:last-child, #right_navigation_box a#blog_keywords:focus, #right_navigation_box a:focus {
background-color: whitesmoke;
}
#right_navigation_box::before, #right_navigation_box::after,
#right_navigation_box a::before,
#right_navigation_box a::after {
/* Rule extends %pseudo */
background-color: #555555;
font-size: 0.8rem;
pointer-events: none;
}
#right_navigation_box::before, #right_navigation_box::after {
z-index: 11;
}
#right_navigation_box .blog-info {
left: 0;
}
#right_navigation_box .blog-info::before {
top: 1.8em;
left: 1.5em;
width: 1px;
height: 0.85em;
}
#right_navigation_box .blog-info::after {
border-radius: 3px;
top: 1.2em;
left: calc(1.5em - 1px);
width: 3px;
height: 3px;
}
#right_navigation_box #blog-subscribe {
left: 2.5rem;
}
#right_navigation_box #blog-subscribe::before, #right_navigation_box #blog-subscribe::after {
background-color: transparent;
border: solid #555555;
border-width: 1px 1px 0 0;
}
#right_navigation_box #blog-subscribe::before {
border-top-right-radius: 1.5em;
top: 1.2em;
left: 0.8em;
width: 1.5em;
height: 1.5em;
}
#right_navigation_box #blog-subscribe::after {
border-top-right-radius: 0.9em;
top: 1.8em;
left: 0.8em;
width: 0.9em;
height: 0.9em;
}
#right_navigation_box #blog-subscribe[title*="stop"] {
background-color: #f2f2f2;
}
#right_navigation_box #blog-subscribe[title*="stop"]::before {
border-width: 1px 0 5px 0;
border-bottom-color: #f2f2f2;
border-radius: 0;
z-index: 12;
transform: rotate(50deg);
top: calc(2em + 3px);
left: calc(0.2em + 3px);
width: 0.9em;
height: 0;
}
#right_navigation_box #blog-subscribe[title*="stop"]::after {
width: 1.8em;
border-width: 1px 0 0 0;
border-radius: 0;
transform: rotate(-50deg);
top: 1.8em;
left: 1.3em;
}
#right_navigation_box::before {
border-radius: 0.3em;
top: 2.4em;
left: 3.95em;
width: 0.3em;
height: 0.3em;
}
#right_navigation_box .blog-login,
#right_navigation_box .blog-logout {
left: 5rem;
}
#right_navigation_box .blog-login::before, #right_navigation_box .blog-login::after,
#right_navigation_box .blog-logout::before,
#right_navigation_box .blog-logout::after {
z-index: 12;
}
#right_navigation_box .blog-login::before,
#right_navigation_box .blog-logout::before {
/* Rule extends %content-box */
border: 3px solid #fff;
border-left: none;
top: calc(1.8092em - 3px);
left: 1.3em;
width: 0.7em;
height: 1px;
}
#right_navigation_box .blog-login::after,
#right_navigation_box .blog-logout::after {
background-color: transparent;
border: 1px solid #555555;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
top: 1.7092em;
left: 1.8em;
width: 0.4em;
height: 0.4em;
}
#right_navigation_box .blog-login:hover::before, #right_navigation_box #left_navigation_box a.blog-login:last-child::before, #left_navigation_box #right_navigation_box a.blog-login:last-child::before, #right_navigation_box .blog-login#blog_keywords:focus::before,
#right_navigation_box .blog-logout:hover::before,
#right_navigation_box #left_navigation_box a.blog-logout:last-child::before,
#left_navigation_box #right_navigation_box a.blog-logout:last-child::before,
#right_navigation_box .blog-logout#blog_keywords:focus::before {
border-color: whitesmoke;
}
#right_navigation_box .blog-login::before {
left: 1.4em;
}
#right_navigation_box .blog-login::after {
left: 1.2em;
transform: rotate(-135deg);
}
#right_navigation_box::after {
background-color: transparent;
border: 1px solid #555555;
top: 1.1em;
left: 7em;
width: 1em;
height: 1.61803em;
}
#right_navigation_box .blog-login + .blog-info {
left: 2.5rem;
background-color: #fff;
z-index: 12;
}
#right_navigation_box .blog-login + .blog-info:hover, #right_navigation_box #left_navigation_box .blog-login + a.blog-info:last-child, #left_navigation_box #right_navigation_box .blog-login + a.blog-info:last-child, #right_navigation_box .blog-login + .blog-info#blog_keywords:focus {
background-color: whitesmoke;
}
#header {
position: fixed;
height: 2em;
z-index: 0;
top: 31vh;
left: 0;
right: 0;
background: none;
border: none;
}
#header h1 {
/* Rule extends %title */
/* Rule extends %reset-all */
/* Rule extends %no-user-select */
font-size: 0.6em;
font-weight: 200;
text-decoration: none;
z-index: 10;
}
#header h1::first-letter {
/* autoprefixer: off */
margin-right: -webkit-calc(-0.08em);
}
/**
* Main module
*
* Encompasses #main, entries, comments, and postform
*/
#main {
/* Rule extends %reset-all */
/* Rule extends %border-box */
position: relative;
width: 70%;
padding-bottom: 3em;
}
#main > div:first-child {
margin-top: 1em;
}
div.entrywrap, div.entry{
line-height: 1.8em;
background-color: transparent;
border: none;
}
div.comment, div.commentwrap{
line-height: 1.7em;
background-color: transparent;
}
div.entrywrap a, div.commentwrap a {
text-decoration: none !important;
}
div.entry, div.comment {
position: relative;
padding: 0 1em;
margin: 0 -1.4em;
}
div.entry h1, div.comment h1 {
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0;
}
div.entry h2, div.comment h2 {
font-size: 0.9em;
margin-left: 0.3em;
}
div.entry h2 > a::before, div.comment h2 > a::before {
/* Rule extends %transition03 */
content: "\00B6";
position: absolute;
color: transparent;
font-size: 1.7em;
margin-right: 0.3em;
top: -2.15rem;
left: -1em;
}
div.entry h2 img, div.comment h2 img {
display: none;
}
div.entry h2 .username-colored, div.comment h2 .username-colored,
div.entry h2 .username-coloured,
div.comment h2 .username-coloured {
color: #444 !important;
}
div.entry:hover h2 > a::before, div.comment:hover h2 > a::before, div.comment#blog_keywords:focus h2 > a::before, div.entry#blog_keywords:focus h2 > a::before {
color: #ccc;
}
div.commentwrap {
/* Rule extends .entrywrap */
}
div.comment {
/* Rule extends .entry */
}
.message {
overflow-x: auto;
}
.message a:link,
.message a:hover,
.message #left_navigation_box a:last-child,
#left_navigation_box .message a:last-child,
.message a#blog_keywords:focus,
.message a:visited {
/* Rule extends [style="text-decoration: underline"] */
}
.message a:visited {
color: #444;
}
div.actions,
div.modactions {
font-size: 1em;
}
div.modactions div.modactions {
font-size: 1em;
}
div.quotetitle,
div.quotecontent {
/* Rule extends %reset-all */
}
div.quotetitle {
/* Rule extends %heading */
color: #aaa;
font-size: 1.4em;
font-weight: normal;
margin-left: 1rem;
}
div.quotecontent {
font-size: 1.7em;
margin: 0.5em 1rem;
}
div.quotecontent div.quotetitle {
font-size: 0.7em;
margin-top: 1rem;
}
div.quotecontent div.quotecontent {
font-size: 0.8em;
}
.codetitle {
display: none;
}
.codecontent {
position: relative;
font-family: Monaco, 'DejaVu Mono', Consolas, monospace;
white-space: pre;
overflow-x: auto;
margin: 0.5em 1rem;
}
.codecontent a:link {
background-image: none;
}
.codecontent > div::before {
/* Rule extends %transition03 */
content: attr(class);
position: absolute;
background-color: #fff;
color: #aaa;
opacity: 0.8;
padding: 0 0.7em;
top: 0;
right: 0;
}
.codecontent:hover > div::before, #left_navigation_box a.codecontent:last-child > div::before, .codecontent#blog_keywords:focus > div::before {
opacity: 0.2;
}
.codecontent > .cpp::before {
content: "c++";
}
.codecontent > .csharp::before {
content: "c#";
}
.codecontent > .objc::before {
content: "objective-c";
}
.codecontent ol {
margin-top: 0;
overflow-x: auto;
}
/**
* Side module
*
* Encompasses sidebar
*/
#side {
padding: 0;
width: 20%;
height: 100%;
}
#user-menu-widget {
font-size: 0.01px;
}
#user-menu-widget p {
display: none;
}
#user-menu-widget .avatar {
position: absolute;
display: block;
margin-left: -2.5rem;
top: -2.6rem;
left: 50%;
}
#user-menu-widget .avatar img {
background-color: #ccc;
display: block;
color: transparent;
border-radius: 50%;
border: 1px solid #ccc;
width: 5rem;
height: 5rem;
}
#user-menu-widget strong a {
/* Rule extends %heading */
position: absolute;
display: block;
font-size: 0.7rem;
text-overflow: ellipsis;
color: transparent;
line-height: 5rem;
border-radius: 50%;
padding: 0.2rem;
margin-left: -2.5rem;
overflow: hidden;
z-index: 1;
transition: 0.15s 0.02s ease-in;
top: -2.7rem;
left: 50%;
width: 4.8rem;
height: 4.8rem;
}
#user-menu-widget strong a::after {
content: "";
position: absolute;
background-image: linear-gradient(to bottom, transparent, transparent 30%, rgba(51, 51, 51, 0.3));
background-position: 50% 0;
opacity: 0;
z-index: -1;
transition: 0.25s ease-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#user-menu-widget strong a:hover, #user-menu-widget strong #left_navigation_box a:last-child, #left_navigation_box #user-menu-widget strong a:last-child, #user-menu-widget strong a#blog_keywords:focus {
color: #fff;
text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6);
}
#user-menu-widget strong a:hover::after, #user-menu-widget strong #left_navigation_box a:last-child::after, #left_navigation_box #user-menu-widget strong a:last-child::after, #user-menu-widget strong a#blog_keywords:focus::after {
opacity: 1;
}
#search-widget {
display: block !important;
z-index: 10;
}
#search-widget .widget-header,
#search-widget .widget-content div {
display: none;
}
#blog_keywords {
/* Rule extends %heading */
/* Rule extends %transition03 */
position: fixed;
top: 0;
right: 0;
display: block;
background-color: transparent;
color: gray;
border-left: 2.5em solid #fff !important;
z-index: 100;
cursor: pointer;
transition: all 0s linear, width 0.4s ease, background-color 0s linear 0.4s;
border: none;
box-shadow: none;
border-radius: 0;
width: 0;
height: 3em;
}
#blog_keywords:focus {
width: 15em;
background-color: #f2f2f2;
color: #333;
padding-left: 0.5em;
padding-right: 3.1em;
border-left: none !important;
cursor: auto;
transition: all 0s linear, width 0.3s ease, background-color 0s linear;
}
#blog_keywords + div {
/* Rule extends %content-box */
position: fixed;
top: -3px;
right: 0;
background-color: transparent;
display: block !important;
font-size: 0;
overflow: hidden;
pointer-events: none;
z-index: 100;
border-left: 1px solid #e6e6e6;
transition: background-color 0.3s ease 0.13s, border-right-color 0.3s ease 0.13s;
width: 2.6rem;
height: 3rem;
/* autoprefixer: off */
border-bottom: -webkit-calc(1px) solid #ededed;
}
#blog_keywords + div input {
display: none;
}
#blog_keywords + div::before,
#blog_keywords + div::after {
/* Rule extends %border-box */
/* Rule extends %pseudo */
background-color: transparent;
top: 1rem;
left: 0.8rem;
width: 0.8rem;
height: 0.8rem;
}
#blog_keywords + div::before {
border: 1px solid #333;
border-radius: 1rem;
}
#blog_keywords + div::after {
background-color: #333;
transform: rotate(-40deg);
top: 1.6rem;
left: 1.6rem;
width: 1.4px;
height: 0.6rem;
}
#blog_keywords + div::after {
/* autoprefixer: off */
width: -webkit-calc(1px);
}
#blog_keywords:hover + div, #left_navigation_box a#blog_keywords:last-child + div, #blog_keywords:focus + div {
background-color: whitesmoke;
transition: background-color 0.3s ease;
}
#blog_keywords:focus + div {
background-color: #f2f2f2;
border-right-color: #f2f2f2;
transition: background-color 0.3s ease, border-right-color 0.3s ease;
}
/**
* Posting module
*
* Encompasses posting & commenting forms
*/
fieldset {
/* Rule extends %reset-all */
}
#postform {
position: relative;
font-family: Lato, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif;
}
#postform > fieldset {
color: transparent;
margin-top: 1.5em;
}
#postform > fieldset > p:first-child {
margin-top: -1em;
}
.comment:nth-child(2)::after,
#postform:first-child::after {
/* Rule extends %pseudo */
position: fixed;
background-color: #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.comment:nth-child(2) *,
#postform:first-child * {
position: relative;
z-index: 1;
}
input.btnbbcode, .genmed {
/* Rule extends %reset-all */
/* Rule extends %transition03 */
font-size: inherit;
font-family: inherit;
width: auto !important;
color: #444;
margin: 0 0.2em;
cursor: pointer;
}
input.btnbbcode:hover, input.btnbbcode#blog_keywords:focus, #blog_keywords.genmed:focus, .genmed:hover, #left_navigation_box a.genmed:last-child {
color: #090909;
}
input.btnbbcode[value~="u"], [value~="u"].genmed, input.btnbbcode[value~="i"], [value~="i"].genmed {
text-transform: uppercase;
}
.genmed {
/* Rule extends input.btnbbcode */
cursor: auto;
}
.submit-buttons,
#message-box {
margin-top: 1em;
}
#smiley-box {
display: none;
}
#tabs {
text-align: center;
}
#tabs li {
display: inline-block;
padding: 0 0.5em;
border-right: 1px solid #aaa;
}
#tabs li:last-child {
border-right: none;
}
#tabs .activetab a {
color: #090909;
outline: none;
}
.panel {
margin-bottom: 0.5em;
}
.panel [style*="font-size"] {
font-size: inherit !important;
}
#category-new,
#category-sel-add {
display: block;
margin: 0.5em 0;
}
#category-new {
width: 20%;
}
.error {
color: #f00;
background-color: #ffffcf;
line-height: 2em;
padding: 0.5em 1em;
margin-top: 0.5em !important;
}
/**
* Miscellaneous stuff
*/
#post-new-entry {
/* Rule extends %heading */
}
#post-new-entry-img {
display: none;
}
div.post-tags {
font-size: 0.9em;
margin-top: 2em;
}
.cmty-item-tag {
/* Rule extends %transition03 */
background-color: #fff !important;
color: #aaa !important;
font-size: 0.7em;
}
.cmty-item-tag:hover, #left_navigation_box a.cmty-item-tag:last-child, .cmty-item-tag#blog_keywords:focus {
background-color: #e6e6e6 !important;
}
.cmty-items-input {
display: inline;
width: auto;
background-color: #e6e6e6;
}
.cmty-post-edited .cmty-post-edit-info{
display: none;
}
#main > p:not([id]) a:link,
#main > p:not([id]) a:hover,
#main > p:not([id]) #left_navigation_box a:last-child,
#left_navigation_box #main > p:not([id]) a:last-child,
#main > p:not([id]) a#blog_keywords:focus,
#main > p:not([id]) a:visited {
color: #aaa;
}
#main > h1 {
padding-bottom: 0.2em;
border-bottom: 1px solid #e6e6e6;
margin-top: 0.5em;
margin-bottom: 1.3em;
}
#main::after {
content: ";
white-space: pre;
position: relative;
top: 2em;
font-size: 0.8em;
font-family: Lato, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif;
color: #aaa;
display: bold;
text-align: center;
}
/**
* @media module
*/
@media all {
html {
font-size: 17px;
}
}
@media (max-width:960px) {
html {
font-size: 1em;
}
}
@media (max-width:400px) {
#main {
width: 100%;
}
#side {
display: none;
}
};}
* City.css v1.0.2
*
* Inspired by Air (by asf), Libre (by PythonNut), and Grey (by Tungsten)
*
* View the source at https://github.com/tyxchen/aops-city
*
*
*
* /** Loading Animation **/
*
* Released under the MIT license (see LICENSE.md)
*/
v
/**
* Groups
*/
/* Reset background, padding, border & margin */
button, #navigation_box, #header h1, #main, fieldset {
/* Source for %reset-all */
background: none;
padding: 0;
border: none;
margin: 0;
}
/* Set box-sizing to border-box */
[type="text"],
textarea, #wrapper, #right_navigation_box a, #main, #blog_keywords + div::before,
#blog_keywords + div::after {
/* Source for %border-box */
box-sizing: border-box;
}
/* Set box-sizing to content-box */
#navigation_box, #right_navigation_box .blog-login::before,
#right_navigation_box .blog-logout::before, #blog_keywords + div {
/* Source for %content-box */
box-sizing: content-box;
}
/* No user select */
#navigation_box, #header h1 {
/* Source for %no-user-select */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Pseudo-element shared styles */
body::after, #content::before, #right_navigation_box::before, #right_navigation_box::after,
#right_navigation_box a::before,
#right_navigation_box a::after, #blog_keywords + div::before,
#blog_keywords + div::after {
/* Source for %pseudo */
content: "";
position: absolute;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6, #navigation_box a, .bbcode_quote_head, #user-menu-widget strong a, #blog_keywords, #post-new-entry, .aops-modal-title,
#flyout {
/* Source for %heading */
font-family: Roboto, 'Lucida Grande', 'DejaVu Sans', sans-serif;
}
h1, h2, #left_navigation_box {
font-family: american typewriter;
font-weight: bold;
}
/* Transitions */
#navigation_box, #right_navigation_box a, div.entry h2 > a::before, div.comment h2 > a::before, pre::before, #blog_keywords, .cmty-item-tag {
/* Source for %transition03 */
transition: 0.3s ease;
}
/**
* Modules
*/
/**
* General module
*
* Encompasses links, buttons, etc.
*/
a:link,
a:hover,
#left_navigation_box a:last-child,
a#blog_keywords:focus,
a:visited {
color: #eac09d;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* Rule extends %heading */
color: inherit;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
[style="text-decoration: underline"], .message a:link,
.message a:hover,
.message #left_navigation_box a:last-child,
#left_navigation_box .message a:last-child,
.message a#blog_keywords:focus,
.message a:visited,
.hidden-label {
text-decoration: none !important;
background-image: linear-gradient(to bottom, currentColor, currentColor);
background-size: 1px 1px;
background-repeat: repeat-x;
background-position: 0 1.06em;
}
[type="text"],
textarea {
font-size: inherit;
}
textarea {
resize: vertical;
}
.aops-scroll-bar, .aops-scroll-slider {
width: 3px;
}
::-webkit-scrollbar {
background-color: #9dead8;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #9dead8;
border: 0.25rem solid #ea9ddf;
border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover, #left_navigation_box a:last-child::-webkit-scrollbar-thumb, #blog_keywords:focus::-webkit-scrollbar-thumb {
background-color: #ea9ddf;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #ea9ddf;
}
.blog-shout-wrapper .aops-scroll-content {
width: 95%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: Roboto, american typewriter;
font-size: 1rem;
color: #444;
overflow-x: hidden;
background: #ffc3f9
}
body::after {
/* Rule extends %pseudo
https://pm1.narvii.com/6791/e2b9271a38259f5dc71b7a263e8317310366f8e3v2_hq.jpg
https://cdna.artstation.com/p/assets/images/images/003/496/026/large/kailah-valentine-pastelgalaxy.jpg
https://wallpaperplay.com/walls/full/3/e/f/217893.jpg*/
position: fixed;
background-image: url("https://i.pinimg.com/originals/b7/3d/4c/b73d4c5893800d24b20dd46972b63206.jpg");
background-position: 42% 80%;
background-size: cover;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wrapper {
/* Rule extends %border-box */
width: 100%;
padding: 0;
background: none;
border: none;
}
#content {
position: relative;
background-color: #fff;
padding: 5vh 10% 0;
margin-top: 72vh;
}
#content::before {
/* Rule extends %pseudo */
background-image: linear-gradient(to top, rgba(51, 51, 51, 0.4) 0, rgba(51, 51, 51, 0.1) 60%, transparent 100%);
top: -15vh;
left: 0;
right: 0;
bottom: 100%;
}
/**
* Header module
*
* Encompasses the header and the navigation bar
*/
#navigation_box a, #header h1 {
/* Source for %title */
/* Rule extends %heading */
color: #ffffff;
}
#navigation_box {
/* Rule extends %reset-all */
/* Rule extends %content-box */
/* Rule extends %no-user-select */
/* Rule extends %transition03 */
position: fixed;
color: transparent;
background-color: #fff;
font-size: 0.9em;
white-space: nowrap;
padding: 0 1em;
border-bottom: 1px solid #ededed;
opacity: 0.95;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: auto;
height: 3rem;
}
#navigation_box a {
/* Rule extends %title */
display: inline;
color: #000000;
text-shadow: none;
font-size: inherit;
font-weight: 300;
line-height: 3rem;
padding: 1.1em 0.4em;
border-top: 0.3em solid #383838;
margin: 0 -0.3em;
transition: 0.2s ease;
}
#navigation_box a:hover, #navigation_box #left_navigation_box a:last-child, #left_navigation_box #navigation_box a:last-child, #navigation_box a#blog_keywords:focus {
padding-top: 0.8em;
color: #1a1a1a;
}
#left_navigation_box {
height: 100%;
font-size: inherit;
line-height: inherit;
}
#right_navigation_box {
position: relative;
margin-right: 2.8rem;
width: 7.5em;
height: 3em;
}
#right_navigation_box a {
/* Rule extends %border-box */
/* Rule extends %transition03 */
position: absolute;
color: transparent;
font-size: 0.01px;
width: 2.5rem;
height: 3rem;
/* autoprefixer: off */
border-bottom: -webkit-calc(1px) solid #ededed;
}
#right_navigation_box a:hover, #right_navigation_box #left_navigation_box a:last-child, #left_navigation_box #right_navigation_box a:last-child, #right_navigation_box a#blog_keywords:focus, #right_navigation_box a:focus {
background-color: whitesmoke;
}
#right_navigation_box::before, #right_navigation_box::after,
#right_navigation_box a::before,
#right_navigation_box a::after {
/* Rule extends %pseudo */
background-color: #555555;
font-size: 0.8rem;
pointer-events: none;
}
#right_navigation_box::before, #right_navigation_box::after {
z-index: 11;
}
#right_navigation_box .blog-info {
left: 0;
}
#right_navigation_box .blog-info::before {
top: 1.8em;
left: 1.5em;
width: 1px;
height: 0.85em;
}
#right_navigation_box .blog-info::after {
border-radius: 3px;
top: 1.2em;
left: calc(1.5em - 1px);
width: 3px;
height: 3px;
}
#right_navigation_box #blog-subscribe {
left: 2.5rem;
}
#right_navigation_box #blog-subscribe::before, #right_navigation_box #blog-subscribe::after {
background-color: transparent;
border: solid #555555;
border-width: 1px 1px 0 0;
}
#right_navigation_box #blog-subscribe::before {
border-top-right-radius: 1.5em;
top: 1.2em;
left: 0.8em;
width: 1.5em;
height: 1.5em;
}
#right_navigation_box #blog-subscribe::after {
border-top-right-radius: 0.9em;
top: 1.8em;
left: 0.8em;
width: 0.9em;
height: 0.9em;
}
#right_navigation_box #blog-subscribe[title*="stop"] {
background-color: #f2f2f2;
}
#right_navigation_box #blog-subscribe[title*="stop"]::before {
border-width: 1px 0 5px 0;
border-bottom-color: #f2f2f2;
border-radius: 0;
z-index: 12;
transform: rotate(50deg);
top: calc(2em + 3px);
left: calc(0.2em + 3px);
width: 0.9em;
height: 0;
}
#right_navigation_box #blog-subscribe[title*="stop"]::after {
width: 1.8em;
border-width: 1px 0 0 0;
border-radius: 0;
transform: rotate(-50deg);
top: 1.8em;
left: 1.3em;
}
#right_navigation_box::before {
border-radius: 0.3em;
top: 2.4em;
left: 3.95em;
width: 0.3em;
height: 0.3em;
}
#right_navigation_box .blog-login,
#right_navigation_box .blog-logout {
left: 5rem;
}
#right_navigation_box .blog-login::before, #right_navigation_box .blog-login::after,
#right_navigation_box .blog-logout::before,
#right_navigation_box .blog-logout::after {
z-index: 12;
}
#right_navigation_box .blog-login::before,
#right_navigation_box .blog-logout::before {
/* Rule extends %content-box */
border: 3px solid #fff;
border-left: none;
top: calc(1.8092em - 3px);
left: 1.3em;
width: 0.7em;
height: 1px;
}
#right_navigation_box .blog-login::after,
#right_navigation_box .blog-logout::after {
background-color: transparent;
border: 1px solid #555555;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
top: 1.7092em;
left: 1.8em;
width: 0.4em;
height: 0.4em;
}
#right_navigation_box .blog-login:hover::before, #right_navigation_box #left_navigation_box a.blog-login:last-child::before, #left_navigation_box #right_navigation_box a.blog-login:last-child::before, #right_navigation_box .blog-login#blog_keywords:focus::before,
#right_navigation_box .blog-logout:hover::before,
#right_navigation_box #left_navigation_box a.blog-logout:last-child::before,
#left_navigation_box #right_navigation_box a.blog-logout:last-child::before,
#right_navigation_box .blog-logout#blog_keywords:focus::before {
border-color: whitesmoke;
}
#right_navigation_box .blog-login::before {
left: 1.4em;
}
#right_navigation_box .blog-login::after {
left: 1.2em;
transform: rotate(-135deg);
}
#right_navigation_box::after {
background-color: transparent;
border: 1px solid #555555;
top: 1.1em;
left: 7em;
width: 1em;
height: 1.61803em;
}
#right_navigation_box .blog-login + .blog-info {
left: 2.5rem;
background-color: #fff;
z-index: 12;
}
#right_navigation_box .blog-login + .blog-info:hover, #right_navigation_box #left_navigation_box .blog-login + a.blog-info:last-child, #left_navigation_box #right_navigation_box .blog-login + a.blog-info:last-child, #right_navigation_box .blog-login + .blog-info#blog_keywords:focus {
background-color: whitesmoke;
}
#header {
position: fixed;
height: 2em;
z-index: 0;
top: 31vh;
left: 0;
right: 0;
background: none;
border: none;
}
#header h1 {
/* Rule extends %title */
/* Rule extends %reset-all */
/* Rule extends %no-user-select */
font-size: 0.6em;
font-weight: 200;
text-decoration: none;
z-index: 10;
}
#header h1::first-letter {
/* autoprefixer: off */
margin-right: -webkit-calc(-0.08em);
}
/**
* Main module
*
* Encompasses #main, entries, comments, and postform
*/
#main {
/* Rule extends %reset-all */
/* Rule extends %border-box */
position: relative;
width: 70%;
padding-bottom: 3em;
}
#main > div:first-child {
margin-top: 1em;
}
div.entrywrap, div.entry{
line-height: 1.8em;
background-color: transparent;
border: none;
}
div.comment, div.commentwrap{
line-height: 1.7em;
background-color: transparent;
}
div.entrywrap a, div.commentwrap a {
text-decoration: none !important;
}
div.entry, div.comment {
position: relative;
padding: 0 1em;
margin: 0 -1.4em;
}
div.entry h1, div.comment h1 {
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0;
}
div.entry h2, div.comment h2 {
font-size: 0.9em;
margin-left: 0.3em;
}
div.entry h2 > a::before, div.comment h2 > a::before {
/* Rule extends %transition03 */
content: "\00B6";
position: absolute;
color: transparent;
font-size: 1.7em;
margin-right: 0.3em;
top: -2.15rem;
left: -1em;
}
div.entry h2 img, div.comment h2 img {
display: none;
}
div.entry h2 .username-colored, div.comment h2 .username-colored,
div.entry h2 .username-coloured,
div.comment h2 .username-coloured {
color: #444 !important;
}
div.entry:hover h2 > a::before, div.comment:hover h2 > a::before, div.comment#blog_keywords:focus h2 > a::before, div.entry#blog_keywords:focus h2 > a::before {
color: #ccc;
}
div.commentwrap {
/* Rule extends .entrywrap */
}
div.comment {
/* Rule extends .entry */
}
.message {
overflow-x: auto;
}
.message a:link,
.message a:hover,
.message #left_navigation_box a:last-child,
#left_navigation_box .message a:last-child,
.message a#blog_keywords:focus,
.message a:visited {
/* Rule extends [style="text-decoration: underline"] */
}
.message a:visited {
color: #444;
}
div.actions,
div.modactions {
font-size: 1em;
}
div.modactions div.modactions {
font-size: 1em;
}
div.quotetitle,
div.quotecontent {
/* Rule extends %reset-all */
}
div.quotetitle {
/* Rule extends %heading */
color: #aaa;
font-size: 1.4em;
font-weight: normal;
margin-left: 1rem;
}
div.quotecontent {
font-size: 1.7em;
margin: 0.5em 1rem;
}
div.quotecontent div.quotetitle {
font-size: 0.7em;
margin-top: 1rem;
}
div.quotecontent div.quotecontent {
font-size: 0.8em;
}
.codetitle {
display: none;
}
.codecontent {
position: relative;
font-family: Monaco, 'DejaVu Mono', Consolas, monospace;
white-space: pre;
overflow-x: auto;
margin: 0.5em 1rem;
}
.codecontent a:link {
background-image: none;
}
.codecontent > div::before {
/* Rule extends %transition03 */
content: attr(class);
position: absolute;
background-color: #fff;
color: #aaa;
opacity: 0.8;
padding: 0 0.7em;
top: 0;
right: 0;
}
.codecontent:hover > div::before, #left_navigation_box a.codecontent:last-child > div::before, .codecontent#blog_keywords:focus > div::before {
opacity: 0.2;
}
.codecontent > .cpp::before {
content: "c++";
}
.codecontent > .csharp::before {
content: "c#";
}
.codecontent > .objc::before {
content: "objective-c";
}
.codecontent ol {
margin-top: 0;
overflow-x: auto;
}
/**
* Side module
*
* Encompasses sidebar
*/
#side {
padding: 0;
width: 20%;
height: 100%;
}
#user-menu-widget {
font-size: 0.01px;
}
#user-menu-widget p {
display: none;
}
#user-menu-widget .avatar {
position: absolute;
display: block;
margin-left: -2.5rem;
top: -2.6rem;
left: 50%;
}
#user-menu-widget .avatar img {
background-color: #ccc;
display: block;
color: transparent;
border-radius: 50%;
border: 1px solid #ccc;
width: 5rem;
height: 5rem;
}
#user-menu-widget strong a {
/* Rule extends %heading */
position: absolute;
display: block;
font-size: 0.7rem;
text-overflow: ellipsis;
color: transparent;
line-height: 5rem;
border-radius: 50%;
padding: 0.2rem;
margin-left: -2.5rem;
overflow: hidden;
z-index: 1;
transition: 0.15s 0.02s ease-in;
top: -2.7rem;
left: 50%;
width: 4.8rem;
height: 4.8rem;
}
#user-menu-widget strong a::after {
content: "";
position: absolute;
background-image: linear-gradient(to bottom, transparent, transparent 30%, rgba(51, 51, 51, 0.3));
background-position: 50% 0;
opacity: 0;
z-index: -1;
transition: 0.25s ease-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#user-menu-widget strong a:hover, #user-menu-widget strong #left_navigation_box a:last-child, #left_navigation_box #user-menu-widget strong a:last-child, #user-menu-widget strong a#blog_keywords:focus {
color: #fff;
text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6);
}
#user-menu-widget strong a:hover::after, #user-menu-widget strong #left_navigation_box a:last-child::after, #left_navigation_box #user-menu-widget strong a:last-child::after, #user-menu-widget strong a#blog_keywords:focus::after {
opacity: 1;
}
#search-widget {
display: block !important;
z-index: 10;
}
#search-widget .widget-header,
#search-widget .widget-content div {
display: none;
}
#blog_keywords {
/* Rule extends %heading */
/* Rule extends %transition03 */
position: fixed;
top: 0;
right: 0;
display: block;
background-color: transparent;
color: gray;
border-left: 2.5em solid #fff !important;
z-index: 100;
cursor: pointer;
transition: all 0s linear, width 0.4s ease, background-color 0s linear 0.4s;
border: none;
box-shadow: none;
border-radius: 0;
width: 0;
height: 3em;
}
#blog_keywords:focus {
width: 15em;
background-color: #f2f2f2;
color: #333;
padding-left: 0.5em;
padding-right: 3.1em;
border-left: none !important;
cursor: auto;
transition: all 0s linear, width 0.3s ease, background-color 0s linear;
}
#blog_keywords + div {
/* Rule extends %content-box */
position: fixed;
top: -3px;
right: 0;
background-color: transparent;
display: block !important;
font-size: 0;
overflow: hidden;
pointer-events: none;
z-index: 100;
border-left: 1px solid #e6e6e6;
transition: background-color 0.3s ease 0.13s, border-right-color 0.3s ease 0.13s;
width: 2.6rem;
height: 3rem;
/* autoprefixer: off */
border-bottom: -webkit-calc(1px) solid #ededed;
}
#blog_keywords + div input {
display: none;
}
#blog_keywords + div::before,
#blog_keywords + div::after {
/* Rule extends %border-box */
/* Rule extends %pseudo */
background-color: transparent;
top: 1rem;
left: 0.8rem;
width: 0.8rem;
height: 0.8rem;
}
#blog_keywords + div::before {
border: 1px solid #333;
border-radius: 1rem;
}
#blog_keywords + div::after {
background-color: #333;
transform: rotate(-40deg);
top: 1.6rem;
left: 1.6rem;
width: 1.4px;
height: 0.6rem;
}
#blog_keywords + div::after {
/* autoprefixer: off */
width: -webkit-calc(1px);
}
#blog_keywords:hover + div, #left_navigation_box a#blog_keywords:last-child + div, #blog_keywords:focus + div {
background-color: whitesmoke;
transition: background-color 0.3s ease;
}
#blog_keywords:focus + div {
background-color: #f2f2f2;
border-right-color: #f2f2f2;
transition: background-color 0.3s ease, border-right-color 0.3s ease;
}
/**
* Posting module
*
* Encompasses posting & commenting forms
*/
fieldset {
/* Rule extends %reset-all */
}
#postform {
position: relative;
font-family: Lato, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif;
}
#postform > fieldset {
color: transparent;
margin-top: 1.5em;
}
#postform > fieldset > p:first-child {
margin-top: -1em;
}
.comment:nth-child(2)::after,
#postform:first-child::after {
/* Rule extends %pseudo */
position: fixed;
background-color: #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.comment:nth-child(2) *,
#postform:first-child * {
position: relative;
z-index: 1;
}
input.btnbbcode, .genmed {
/* Rule extends %reset-all */
/* Rule extends %transition03 */
font-size: inherit;
font-family: inherit;
width: auto !important;
color: #444;
margin: 0 0.2em;
cursor: pointer;
}
input.btnbbcode:hover, input.btnbbcode#blog_keywords:focus, #blog_keywords.genmed:focus, .genmed:hover, #left_navigation_box a.genmed:last-child {
color: #090909;
}
input.btnbbcode[value~="u"], [value~="u"].genmed, input.btnbbcode[value~="i"], [value~="i"].genmed {
text-transform: uppercase;
}
.genmed {
/* Rule extends input.btnbbcode */
cursor: auto;
}
.submit-buttons,
#message-box {
margin-top: 1em;
}
#smiley-box {
display: none;
}
#tabs {
text-align: center;
}
#tabs li {
display: inline-block;
padding: 0 0.5em;
border-right: 1px solid #aaa;
}
#tabs li:last-child {
border-right: none;
}
#tabs .activetab a {
color: #090909;
outline: none;
}
.panel {
margin-bottom: 0.5em;
}
.panel [style*="font-size"] {
font-size: inherit !important;
}
#category-new,
#category-sel-add {
display: block;
margin: 0.5em 0;
}
#category-new {
width: 20%;
}
.error {
color: #f00;
background-color: #ffffcf;
line-height: 2em;
padding: 0.5em 1em;
margin-top: 0.5em !important;
}
/**
* Miscellaneous stuff
*/
#post-new-entry {
/* Rule extends %heading */
}
#post-new-entry-img {
display: none;
}
div.post-tags {
font-size: 0.9em;
margin-top: 2em;
}
.cmty-item-tag {
/* Rule extends %transition03 */
background-color: #fff !important;
color: #aaa !important;
font-size: 0.7em;
}
.cmty-item-tag:hover, #left_navigation_box a.cmty-item-tag:last-child, .cmty-item-tag#blog_keywords:focus {
background-color: #e6e6e6 !important;
}
.cmty-items-input {
display: inline;
width: auto;
background-color: #e6e6e6;
}
.cmty-post-edited .cmty-post-edit-info{
display: none;
}
#main > p:not([id]) a:link,
#main > p:not([id]) a:hover,
#main > p:not([id]) #left_navigation_box a:last-child,
#left_navigation_box #main > p:not([id]) a:last-child,
#main > p:not([id]) a#blog_keywords:focus,
#main > p:not([id]) a:visited {
color: #aaa;
}
#main > h1 {
padding-bottom: 0.2em;
border-bottom: 1px solid #e6e6e6;
margin-top: 0.5em;
margin-bottom: 1.3em;
}
#main::after {
content: ";
white-space: pre;
position: relative;
top: 2em;
font-size: 0.8em;
font-family: Lato, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif;
color: #aaa;
display: bold;
text-align: center;
}
/**
* @media module
*/
@media all {
html {
font-size: 17px;
}
}
@media (max-width:960px) {
html {
font-size: 1em;
}
}
@media (max-width:400px) {
#main {
width: 100%;
}
#side {
display: none;
}
};}
This post has been edited 1 time. Last edited by mchang, Jul 4, 2020, 6:10 PM