BrightMonkey's CSS (2)
by mchang, Aug 2, 2020, 6:35 PM
lavender thingy
random image used (below)

css
random image used (below)

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
*
*edited by mchang
*
*
* Released under the MIT license (see LICENSE.md)
*/
/** Loading Animation **/
@keyframes fakeloadinganimation{
0%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "welcome to Brightmonkey's blog!";
text-align: center;
}
5%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "5% there
";
text-align: center;
}
10%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "10% there
";
text-align: center;
}
15%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "15% there
";
text-align: center;
}
20%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "20% there
";
text-align: center;
}
25%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "25% there
";
text-align: center;
}
30%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "30% there
%";
text-align: center;
}
35%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "35% there
";
text-align: center;
}
40%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "40% there
";
text-align: center;
}
45%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "45% there
";
text-align: center;
}
50%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "50% there
";
text-align: center;
}
55%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "55% there
";
text-align: center;
}
60%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "60% there
";
text-align: center;
}
65%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "65% there
";
text-align: center;
}
70%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "70% there
";
text-align: center;
}
75%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "75% there
";
text-align: center;
}
80%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "80% there
";
text-align: center;
}
80.01%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "Finished!";
text-align: center;
}
85%{
top: calc(50vh - 100px);
width: 300px;
font-family: 'Ink Free';
content: "Finished!";
text-align: center;
}
100%{
top: calc(150vh - 50px);
width: 300px;
font-family: 'Ink Free';
content: "Welcome to BrightMonkey's blog!";
text-align: center;
}
}
html::before{
content: "Welcome to BrightMonkey's blog!";
height: 100px;
position: fixed !important;
margin: 0px;
padding: 0px;
top: calc(150vh - 50px);
left: calc(50vw - 150px);
background-color: #efd5f7;
color: #e986f0 !important;
line-height: 100px;
white-space: nowrap;
font-size: 15px !important;
z-index: 1000000000 !important;
animation: fakeloadinganimation 2s ease !important;
width: 300px !important;
box-shadow: 0px 0px 0px 8px #00000, 0px 50vw 0px calc(50vw + 50vh - 50px) black, 0px 0px 0px 8px white !important;
/*The box shadow that makes the border is put before and after the background shadow, because of order issues (Firefox displays the first one on top, chrome displays the last one on top)*/
}
/* 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-boxcc */
#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, 'Segoe UI', 'Lucida Grande', 'DejaVu Sans', sans-serif;
}
h1, h2, #left_navigation_box {
font-family: Raleway, Lato, Roboto, 'Segoe UI', 'Lucida Grande', 'DejaVu Sans', sans-serif;
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: #cea4eb;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* Rule extends %heading */
color: inherit;
}
h1 {
font-size: 1.7em;
}
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: #e6e6fa;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border: 0.25rem solid #e6e6fa;
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: #e6e6fa;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #e6e6fa;
}
.blog-shout-wrapper .aops-scroll-content {
width: 85%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: Roboto, sans-serif;
font-size: 1rem;
color: #000000;
overflow-x: hidden;
}
body::after {
/* Rule extends %pseudo */
position: fixed;
background-image: url("https://cdn.shopify.com/s/files/1/1867/4131/products/Pastel_pink_brush_1800x1800.jpg?v=1569582344");
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: #e6e6fa;
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%, transparent100%);
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: #fff;
text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6);
}
#navigation_box {
/* Rule extends %reset-all */
/* Rule extends %content-box */
/* Rule extends %no-user-select */
/* Rule extends %transition03 */
position: fixed;
color: transparent;
background-color: #aaaaee;
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: #333;
text-shadow: none;
font-size: inherit;
font-weight: 300;
line-height: 3rem;
padding: 1.1em 0.4em;
border-top: 0.3em solid #aaaaee;
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: #ededed;
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 #ededed;
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: #aaaaee;
}
#right_navigation_box #blog-subscribe[title*="stop"]::before {
border-width: 1px 0 5px 0;
border-bottom-color: #e6e6fa;
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 #e6e6fa;
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: ededed;
border: 1px solid #ededed;
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 #e6e6fa;
top: 1.1em;
left: 7em;
width: 1em;
height: 1.61803em;
}
#right_navigation_box .blog-login + .blog-info {
left: 2.5rem;
background-color: #e6e6fa;
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;
}
.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 > h1 {
padding-bottom: 0.2em;
border-bottom: 1px solid #e6e6e6;
margin-top: 0.5em;
margin-bottom: 1.3em;
}
#main::after {
content: "Hi! You reached the bottom! \
/**
* @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;
}
}
body {
background:
url(https://i.pinimg.com/originals/db/8b/91/db8b91fe71c87617747804ce472e72b6.gif)
}
/* Normal User Color */
.cmty-post-left a {
color: #000 !important;
}
/* Mod User Color */
.cmty-forum-mod a {
color: #090 !important;
}
/* Admin User Color */
.cmty-forum-admin a {
color: #900 !important;
}
/* Site Admin User Color */
.cmty-post .cmty-user-admin a, .cmty-post .cmty-user-admin::before {
color: #009fad !important;
}
/*Blog block math adder by happycupcake. Please do not remove this information if used.*/
span[style="font-family:'block-math-question'"]{
display: block !important;
background-color: #cbe86c;
margin: 20px 10px;
padding: 20px 30px;
border: 1px solid #82b44a;
font-family: "Roboto", sans-serif !important;
}
span[style="font-family:'block-math-solution'"]{
display: block;
background-color: #6cbfe8;
margin: 20px 10px;
padding: 20px 30px;
border: 1px solid #ccc;
font-family: "Roboto", sans-serif !important;
}
span[style="font-family:'block-math-question'"] > .aops-font,
span[style="font-family:'block-math-solution'"] > .aops-font{
font-family: "Roboto", sans-serif !important;
}
* 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
*
*edited by mchang

*
*
* Released under the MIT license (see LICENSE.md)
*/
/** Loading Animation **/
@keyframes fakeloadinganimation{
0%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "welcome to Brightmonkey's blog!";
text-align: center;
}
5%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "5% there

text-align: center;
}
10%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "10% there

text-align: center;
}
15%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "15% there

text-align: center;
}
20%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "20% there

text-align: center;
}
25%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "25% there

text-align: center;
}
30%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "30% there

text-align: center;
}
35%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "35% there

text-align: center;
}
40%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "40% there

text-align: center;
}
45%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "45% there

text-align: center;
}
50%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "50% there

text-align: center;
}
55%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "55% there

text-align: center;
}
60%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "60% there

text-align: center;
}
65%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "65% there

text-align: center;
}
70%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "70% there

text-align: center;
}
75%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "75% there

text-align: center;
}
80%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "80% there

text-align: center;
}
80.01%{
width: 0px;
top: calc(50vh - 50px);
font-family: 'Ink Free';
content: "Finished!";
text-align: center;
}
85%{
top: calc(50vh - 100px);
width: 300px;
font-family: 'Ink Free';
content: "Finished!";
text-align: center;
}
100%{
top: calc(150vh - 50px);
width: 300px;
font-family: 'Ink Free';
content: "Welcome to BrightMonkey's blog!";
text-align: center;
}
}
html::before{
content: "Welcome to BrightMonkey's blog!";
height: 100px;
position: fixed !important;
margin: 0px;
padding: 0px;
top: calc(150vh - 50px);
left: calc(50vw - 150px);
background-color: #efd5f7;
color: #e986f0 !important;
line-height: 100px;
white-space: nowrap;
font-size: 15px !important;
z-index: 1000000000 !important;
animation: fakeloadinganimation 2s ease !important;
width: 300px !important;
box-shadow: 0px 0px 0px 8px #00000, 0px 50vw 0px calc(50vw + 50vh - 50px) black, 0px 0px 0px 8px white !important;
/*The box shadow that makes the border is put before and after the background shadow, because of order issues (Firefox displays the first one on top, chrome displays the last one on top)*/
}
/* 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-boxcc */
#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, 'Segoe UI', 'Lucida Grande', 'DejaVu Sans', sans-serif;
}
h1, h2, #left_navigation_box {
font-family: Raleway, Lato, Roboto, 'Segoe UI', 'Lucida Grande', 'DejaVu Sans', sans-serif;
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: #cea4eb;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* Rule extends %heading */
color: inherit;
}
h1 {
font-size: 1.7em;
}
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: #e6e6fa;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
border: 0.25rem solid #e6e6fa;
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: #e6e6fa;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #e6e6fa;
}
.blog-shout-wrapper .aops-scroll-content {
width: 85%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: Roboto, sans-serif;
font-size: 1rem;
color: #000000;
overflow-x: hidden;
}
body::after {
/* Rule extends %pseudo */
position: fixed;
background-image: url("https://cdn.shopify.com/s/files/1/1867/4131/products/Pastel_pink_brush_1800x1800.jpg?v=1569582344");
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: #e6e6fa;
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%, transparent100%);
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: #fff;
text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6);
}
#navigation_box {
/* Rule extends %reset-all */
/* Rule extends %content-box */
/* Rule extends %no-user-select */
/* Rule extends %transition03 */
position: fixed;
color: transparent;
background-color: #aaaaee;
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: #333;
text-shadow: none;
font-size: inherit;
font-weight: 300;
line-height: 3rem;
padding: 1.1em 0.4em;
border-top: 0.3em solid #aaaaee;
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: #ededed;
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 #ededed;
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: #aaaaee;
}
#right_navigation_box #blog-subscribe[title*="stop"]::before {
border-width: 1px 0 5px 0;
border-bottom-color: #e6e6fa;
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 #e6e6fa;
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: ededed;
border: 1px solid #ededed;
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 #e6e6fa;
top: 1.1em;
left: 7em;
width: 1em;
height: 1.61803em;
}
#right_navigation_box .blog-login + .blog-info {
left: 2.5rem;
background-color: #e6e6fa;
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;
}
.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 > h1 {
padding-bottom: 0.2em;
border-bottom: 1px solid #e6e6e6;
margin-top: 0.5em;
margin-bottom: 1.3em;
}
#main::after {
content: "Hi! You reached the bottom! \
/**
* @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;
}
}
body {
background:
url(https://i.pinimg.com/originals/db/8b/91/db8b91fe71c87617747804ce472e72b6.gif)
}
/* Normal User Color */
.cmty-post-left a {
color: #000 !important;
}
/* Mod User Color */
.cmty-forum-mod a {
color: #090 !important;
}
/* Admin User Color */
.cmty-forum-admin a {
color: #900 !important;
}
/* Site Admin User Color */
.cmty-post .cmty-user-admin a, .cmty-post .cmty-user-admin::before {
color: #009fad !important;
}
/*Blog block math adder by happycupcake. Please do not remove this information if used.*/
span[style="font-family:'block-math-question'"]{
display: block !important;
background-color: #cbe86c;
margin: 20px 10px;
padding: 20px 30px;
border: 1px solid #82b44a;
font-family: "Roboto", sans-serif !important;
}
span[style="font-family:'block-math-solution'"]{
display: block;
background-color: #6cbfe8;
margin: 20px 10px;
padding: 20px 30px;
border: 1px solid #ccc;
font-family: "Roboto", sans-serif !important;
}
span[style="font-family:'block-math-question'"] > .aops-font,
span[style="font-family:'block-math-solution'"] > .aops-font{
font-family: "Roboto", sans-serif !important;
}