bubbletea & I's collab CSS
by mchang, Jul 23, 2020, 1:18 AM
this one was ez fix
just da bkgd change
and a few things
done with this image below

css
i also took some things from my blog and added it to make it different then usual css
please note i was too lazy to change the loading animation text
next i have brightmonkey's second css and then arty's css
ps this may take a while since i have other things to do
thx for waiting!
just da bkgd change
and a few things
done with this image below

css
/** This sets the background color of your blog posts. Try changing the color and see what happens! **/
div .entrywrap, div .entrywrap-hover {
background-color : #c4c4c4;
}
/*!
* 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 polls and trolls";
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 polls and trolls!";
text-align: center;
}
}
html::before{
content: "Welcome to polls and trolls";
height: 100px;
position: fixed !important;
margin: 0px;
padding: 0px;
top: calc(150vh - 50px);
left: calc(50vw - 150px);
background-color: lightpink;
color: #72a1ab !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)*/
}
/* 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: autumn;
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: #faa2e5;
}
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: #ffffff;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #72a1ab;
border: 0.25rem solid #faa2e5;
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: #72a1ab;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #aaa;
}
.blog-shout-wrapper .aops-scroll-content {
width: 95%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: autumn;
font-size: 1rem;
color: #rgb;
overflow-x: hidden;
background: #72a1ab
}
body::after {
/* Rule extends */
position: fixed;
background-image: url("https://media0.giphy.com/media/A4wSE2GQGTpfi/giphy.gif");
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: #rgb;
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;
}
#main::after {
content: "City CSS edited by mchang
";
white-space: pre;
position: relative;
top: 2em;
font-size: 0.8em;
font-family: courier;
color: #737373;
display: block;
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;
}
};}
div .entrywrap, div .entrywrap-hover {
background-color : #c4c4c4;
}
/*!
* 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 polls and trolls";
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 polls and trolls!";
text-align: center;
}
}
html::before{
content: "Welcome to polls and trolls";
height: 100px;
position: fixed !important;
margin: 0px;
padding: 0px;
top: calc(150vh - 50px);
left: calc(50vw - 150px);
background-color: lightpink;
color: #72a1ab !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)*/
}
/* 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: autumn;
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: #faa2e5;
}
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: #ffffff;
height: 0.6rem;
}
::-webkit-scrollbar-thumb {
background-color: #72a1ab;
border: 0.25rem solid #faa2e5;
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: #72a1ab;
border-width: 0.2rem;
}
::-webkit-scrollbar-thumb:active {
background-color: #aaa;
}
.blog-shout-wrapper .aops-scroll-content {
width: 95%;
}
/**
* Layout module
*
* Encompasses body, wrapper, and general layout
*/
body {
font-family: autumn;
font-size: 1rem;
color: #rgb;
overflow-x: hidden;
background: #72a1ab
}
body::after {
/* Rule extends */
position: fixed;
background-image: url("https://media0.giphy.com/media/A4wSE2GQGTpfi/giphy.gif");
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: #rgb;
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;
}
#main::after {
content: "City CSS edited by mchang

white-space: pre;
position: relative;
top: 2em;
font-size: 0.8em;
font-family: courier;
color: #737373;
display: block;
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;
}
};}
i also took some things from my blog and added it to make it different then usual css

please note i was too lazy to change the loading animation text

next i have brightmonkey's second css and then arty's css
ps this may take a while since i have other things to do
thx for waiting!
This post has been edited 3 times. Last edited by mchang, Jul 23, 2020, 1:30 AM