2020-01-21 18:12:31 +00:00
/ * !
* City . css v2 . 0 . 0
*
* Inspired by Air ( by asf ) , Libre ( by PythonNut ) , and Grey ( by Tungsten )
*
* https : / / github . com / tyxchen / aops-city | Released under the MIT License
* /
/ * *
* Components
* /
@ import url ( / / brick . a . ssl . fastly . net / Raleway : 200 , 300 / Merriweather : 200 , 200i , 700 , 700i / Lato : 400 , 700 ) ;
2020-01-22 16:55:26 +00:00
@ import url ( "https://fonts.googleapis.com/css?family=Titillium+Web:100,200,300,375,400,500,600,700,800,900" ) ;
2020-01-22 16:50:01 +00:00
@ import url ( "https://fonts.googleapis.com/css?family=VT323:100,200,300,375,400,500,600,700,800,900" ) ;
2020-01-21 18:12:31 +00:00
/ * *
* Groups
* /
/* Reset background, padding, border & margin */
# main , # navigation_box , # header h1 , . cmty-hide-content , . bbcode_quote ,
. bbcode_quote_head ,
. bbcode_quote_body , fieldset {
/* Source for %reset-all */
background : none ;
padding : 0 ;
border : none ;
margin : 0 ;
}
/* Set box-sizing to border-box */
input [ type = 'text' ] ,
textarea , . cmty-poll-question ,
. cmty-poll-inputs , # wrapper , # main , # right_navigation_box a , . cmty-posting-modal {
/* Source for %border-box */
box-sizing : border-box ;
}
/* Set box-sizing to content-box */
# navigation_box , # blog_keywords + div , . cmty-posting-modal . aops-close-x {
/* Source for %content-box */
box-sizing : content-box ;
}
/* No user select */
# navigation_box , # header h1 , . cmty-posting-preview-bar {
/* 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 {
/* Source for %pseudo */
content : '' ;
position : absolute ;
}
/* Headings */
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 , # navigation_box a , # header h1 , . bbcode_quote_head , # user-menu-widget . username-colored , # blog_keywords , . cmty-posting-environ . cmty-heading-text ,
. cmty-posting-environ . cmty-posting-box-container :: before , . cmty-posting-subject-line . cmty-subject-input , . cmty-tags-line . cmty-items-input , . aops-modal-title {
/* Source for %heading */
font-family : Raleway , Lato , Roboto , 'Segoe UI' , 'Lucida Grande' , 'DejaVu Sans' , sans-serif ;
}
/* Import font for modals */
: root . btn , : root . cmty-editable-item-close , . blog-reply-window , # post-new-entry , . aops-modal-body ,
# flyout , # main :: after {
/* Source for %modal-font */
font-family : Lato , 'Helvetica Neue' , HelveticaNeue , Helvetica , Arial , sans-serif ;
}
/* Transitions */
input [ type = 'text' ] ,
textarea , . cmty-poll-question ,
. cmty-poll-inputs , : root . btn , : root . cmty-editable-item-close , # navigation_box , # right_navigation_box a , div . entry h2 > a :: before , div . comment h2 > a :: before , pre :: before , # blog_keywords , . cmty-item-tag , . entrywrap . cmty-items-input , div . commentwrap . cmty-items-input {
/* Source for %transition03 */
transition : 0 . 3s ease ;
}
/ * *
* Modules
* /
/ * *
* General module
*
* Encompasses shared styles for individual component elements
* /
a : link ,
a : hover ,
a : visited {
color : # 2b2b2b ;
}
a : focus {
border-bottom : 1px dotted # ccc ! important ;
}
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
/* Rule extends %heading */
color : inherit ;
}
h1 {
font-size : 1 . 7em ;
}
h2 {
font-size : 1 . 2em ;
}
[ style * = 'underline' ] , . message a : link ,
. message a : hover ,
. message a : visited , . cmty-post-preview-text a : link ,
. cmty-post-preview-text a : hover ,
. cmty-post-preview-text a : visited {
/* Source for %link-underline */
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 ;
}
[ style * = 'underline' ] {
/* Rule extends %link-underline */
}
input [ type = 'text' ] ,
textarea ,
. cmty-poll-question ,
. cmty-poll-inputs {
/* Rule extends %border-box */
/* Rule extends %transition03 */
background-color : # fff ;
font-size : inherit ;
}
: root input [ type = 'text' ] ,
: root
textarea ,
: root . cmty-poll-question ,
: root
. cmty-poll-inputs {
border-width : 0 0 1px ;
border-color : # d9d9d9 ;
}
: root input [ type = 'text' ] : hover ,
: root
textarea : hover ,
: root . cmty-poll-question : hover ,
: root
. cmty-poll-inputs : hover {
border-color : # ccc ;
}
: root input [ type = 'text' ] : focus ,
: root
textarea : focus ,
: root . cmty-poll-question : focus ,
: root
. cmty-poll-inputs : focus {
border-width : 0 0 1px ;
border-style : solid ;
border-color : # aaa ;
}
: root . btn , : root . cmty-editable-item-close {
/* Rule extends %modal-font */
/* Rule extends %transition03 */
background-color : # fff ;
color : # 444 ;
font-size : inherit ;
line-height : 1 . 4em ;
padding : 0 0 . 8em ;
background : none ;
border : none ;
margin : 0 ;
width : auto ;
height : 1 . 4em ;
}
: root . btn : hover , : root . cmty-editable-item-close : hover {
color : # 444 ;
background-color : # f2f2f2 ;
}
: root . btn : focus , : root . cmty-editable-item-close : focus {
background-color : # e6e6e6 ;
}
:: -webkit-scrollbar {
background-color : # fff ;
width : 0 . 6rem ;
height : 0 . 6rem ;
}
:: -webkit-scrollbar-thumb {
background-color : # ccc ;
border : solid # fff ;
border-width : 0 . 2rem 0 . 25rem ;
border-radius : 0 . 5rem ;
}
:: -webkit-scrollbar-thumb : hover {
background-color : # bfbfbf ;
border-width : 0 . 2rem ;
}
:: -webkit-scrollbar-thumb : active {
background-color : # aaa ;
}
:: -webkit-scrollbar-thumb : horizontal {
border-width : 0 . 2rem ;
}
:: -webkit-scrollbar-thumb : horizontal : hover {
border-width : 0 . 15rem ;
}
/ * *
* Layout module
*
* Encompasses body , wrapper , and general layout
* /
body {
2020-01-22 16:55:26 +00:00
font-family : 'Titillium Web' , sans-serif ;
2020-01-21 18:12:31 +00:00
font-size : 1rem ;
color : # 444 ;
overflow-x : hidden ;
}
body :: after {
/* Rule extends %pseudo */
position : fixed ;
2020-01-23 18:26:59 +00:00
background-image : url ( "https://cdn.artofproblemsolving.com/images/6/a/2/6a28bd61ace416f184719463cacd5268c000cee3.png" ) ;
2020-01-21 18:12:31 +00:00
background-position : 0 ;
background-size : cover ;
z-index : -1 ;
top : 0 ;
left : 0 ;
right : 0 ;
bottom : 25vh ;
}
# wrapper {
/* Rule extends %border-box */
width : 100 % ;
padding : 0 ;
background : none ;
border : none ;
}
# content {
position : relative ;
background-color : # fff ;
padding : 0 calc ( ( 100 % - 48em ) / 2 ) ;
padding-top : 5vh ;
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 % ;
}
# main {
/* Rule extends %reset-all */
/* Rule extends %border-box */
position : relative ;
width : 100 % ;
padding-bottom : 3em ;
}
/ * *
* 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 : # fff ;
font-size : 1em ;
white-space : nowrap ;
padding : 0 1em ;
border-bottom : 1px solid # e6e6e6 ;
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 . 2em solid # 333 ;
margin : 0 -0 . 3em ;
transition : 0 . 3s ease ;
}
# left_navigation_box {
height : 100 % ;
font-size : inherit ;
line-height : inherit ;
}
# left_navigation_box a : hover ,
# left_navigation_box a : focus ,
# left_navigation_box a : last-child {
padding-top : 0 . 75em ;
color : # 1a1a1a ;
}
# right_navigation_box {
position : relative ;
margin-right : 2 . 7rem ;
width : 7 . 5em ;
height : 3em ;
}
# right_navigation_box a {
/* Rule extends %border-box */
/* Rule extends %transition03 */
position : absolute ;
color : transparent ;
font-size : 0 . 01px ;
background-color : transparent ;
background-repeat : no-repeat ;
background-size : auto 40 % ;
background-position : center ;
width : 2 . 5rem ;
height : 3rem ;
}
# right_navigation_box a : hover , # right_navigation_box a : focus {
background-color : # e6e6e6 ;
border-bottom : none ! important ;
}
# right_navigation_box . blog-info {
left : 0 ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" ) ;
}
# right_navigation_box # blog-subscribe {
left : 2 . 5rem ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggaWQ9Im1hcmsiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTAuNSwxbDI1LjUsMGwwLDI4LjVsLTEyLjUsLTkuNWwtMTIuNSw5LjVsMCwtMjguNXoiLz48L2c+PC9zdmc+" ) ;
}
# right_navigation_box # blog-subscribe [ title * = 'stop' ] {
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggaWQ9Im1hcmsiIGZpbGw9IiMzMzMiIHN0cm9rZT0iIzMzMyIgZD0ibTAuNSwxbDI1LjUsMGwwLDI4LjVsLTEyLjUsLTkuNWwtMTIuNSw5LjVsMCwtMjguNXoiLz48L2c+PC9zdmc+" ) ;
}
# right_navigation_box . blog-login ,
# right_navigation_box . blog-logout {
left : 5rem ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggaWQ9ImRvb3IiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTEsMWwxOCwwbDAsMTIuNW0wLDRsMCwxMi41bC0xOCwwTDEsLjUiLz48cGF0aCBpZD0iYXJyb3ciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTEyLDE1LjVsMTQuNSwwTTE2LDExbC00LjUsNC41bDQuNSw0LjUiLz48L2c+PC9zdmc+" ) ;
}
# right_navigation_box . blog-logout {
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggaWQ9ImRvb3IiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTEsMWwxOCwwbDAsMTIuNW0wLDRsMCwxMi41bC0xOCwwTDEsLjUiLz48cGF0aCBpZD0iYXJyb3ciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTEyLDE1LjVsMTQuNSwwTTIyLDExbDQuNSw0LjVsLTQuNSw0LjUiLz48L2c+PC9zdmc+" ) ;
}
# right_navigation_box . blog-login + . blog-info {
left : 2 . 5rem ;
background-color : # fff ;
z-index : 12 ;
}
# right_navigation_box . blog-login + . blog-info : hover {
background-color : # e6e6e6 ;
}
# header {
position : fixed ;
height : 2em ;
z-index : 0 ;
top : calc ( 36vh - 2 . 5rem ) ;
left : 0 ;
right : 0 ;
background : none ;
border : none ;
}
# header h1 {
/* Rule extends %title */
/* Rule extends %reset-all */
/* Rule extends %no-user-select */
font-size : 5rem ;
font-weight : 200 ;
text-decoration : none ;
z-index : 10 ;
}
# header a : focus h1 :: before {
content : '\f015' ;
position : absolute ;
font-family : FontAwesome ;
font-size : 0 . 6em ;
opacity : 0 . 3 ;
margin-left : -1em ;
}
/ * *
* Entry module
*
* Encompasses entries and comments
* /
div . actions ,
div . modactions {
font-size : 0 . 7em ;
}
# main > div : first-child {
margin-top : 1em ;
}
div . entrywrap , div . commentwrap ,
div . entry ,
div . comment {
line-height : 2em ;
background-color : transparent ;
border : none ;
}
div . entrywrap a , div . commentwrap a {
text-decoration : none ! important ;
}
div . entry , div . comment {
position : relative ;
padding : 0 1 . 2em ;
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 : # 090909 ! important ;
font-weight : normal ;
}
div . entry : hover h2 > a :: before , div . comment : hover h2 > a :: before {
color : # ccc ;
}
div . commentwrap {
/* Rule extends .entrywrap */
padding : 0 . 5em ;
margin : 0 . 5em ;
}
div . comment {
/* Rule extends .entry */
}
. cfooter . author {
margin : 0 . 7em 0 ;
}
. cfooter . author :: before {
content : '\2767' ;
vertical-align : middle ;
font-size : 1 . 3em ;
margin-right : 0 . 1em ;
}
. cfooter . author img {
display : none ;
}
. cfooter . author strong {
font-weight : normal ;
}
. message {
overflow-x : auto ;
}
. message a : link ,
. message a : hover ,
. message a : visited {
/* Rule extends %link-underline */
}
. message a : visited {
color : # 444 ;
}
. cmty-hide-heading : link ,
. cmty-hide-heading : hover {
border-bottom : none ;
background-image : linear-gradient ( to right , currentColor 0 % , currentColor 50 % , # fff 50 % , # fff 100 % ) ;
background-size : 2px 1px ;
}
. cmty-hide-content {
/* Rule extends %reset-all */
}
. bbcode_quote ,
. bbcode_quote_head ,
. bbcode_quote_body {
/* Rule extends %reset-all */
}
. bbcode_quote {
width : 90 % ;
margin : auto ;
}
. bbcode_quote_head {
/* Rule extends %heading */
color : # aaa ;
font-size : 1 . 1em ;
font-weight : normal ;
margin-left : 1rem ;
}
. bbcode_quote_head :: before {
content : '' ;
}
. bbcode_quote_body {
font-size : 1 . 4em ;
margin : 0 . 5em 1rem ;
}
. bbcode_quote_body . bbcode_quote_head {
font-size : 0 . 7em ;
margin-top : 1rem ;
}
. bbcode_quote_body . bbcode_quote_body {
font-size : 0 . 8em ;
}
pre {
position : relative ;
font-family : Monaco , 'DejaVu Mono' , Consolas , monospace ;
white-space : pre ;
overflow-x : auto ;
margin : 0 . 5em 1rem ;
}
pre [ class ] a : link {
background-image : none ;
}
pre :: before {
/* Rule extends %transition03 */
content : 'code' ;
position : absolute ;
background-color : # fff ;
color : # aaa ;
opacity : 0 . 8 ;
padding : 0 0 . 7em ;
top : 0 ;
right : 0 ;
}
pre [ class ] :: before {
content : attr ( class ) ;
}
pre : hover :: before {
opacity : 0 . 2 ;
}
pre . cpp :: before {
content : 'c++' ;
}
. cmty-poll-display {
margin-top : 0 ;
margin-bottom : 1em ;
background-color : transparent ;
padding : 0 ;
border : none ;
}
. cmty-poll-display . cmty-poll-result-bar {
background-color : # d9d9d9 ;
}
/ * *
* Side module
*
* Encompasses sidebar
* /
# side {
padding : 0 ;
width : 0 ;
height : 0 ;
}
# side > div {
display : none ;
}
# user-menu-widget {
display : block ! important ;
font-size : 0 . 01px ;
}
# user-menu-widget p {
display : none ;
}
# user-menu-widget . avatar {
position : absolute ;
display : block ;
margin-left : -2 . 5rem ;
top : -2 . 95rem ;
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 . username-colored {
/* Rule extends %heading */
position : absolute ;
display : block ;
color : transparent ;
font-size : 0 . 8rem ;
text-overflow : ellipsis ;
line-height : 5rem ;
border-radius : 50 % ;
padding : 0 . 1rem ;
margin-left : -2 . 5rem ;
overflow : hidden ;
z-index : 1 ;
transition : 0 . 15s 0 . 06s ease-in ;
top : -2 . 55rem ;
left : 50 % ;
width : 5rem ;
height : 5rem ;
}
# user-menu-widget . username-colored :: 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 . 3s ease-out ;
top : 0 ;
left : 0 ;
right : 0 ;
bottom : 0 ;
}
# user-menu-widget . username-colored : hover {
color : # fff ;
text-shadow : 1px 1px 1px rgba ( 51 , 51 , 51 , 0 . 6 ) ;
}
# user-menu-widget . username-colored : hover :: after {
opacity : 1 ;
}
# search-widget {
display : block ! important ;
z-index : 10 ;
}
# search-widget . widget-header ,
# search-widget . widget-content div {
display : none ;
}
fieldset {
/* Rule extends %reset-all */
}
# blog_keywords {
/* Rule extends %heading */
/* Rule extends %transition03 */
position : fixed ;
top : 0 ;
right : 0 ;
display : block ;
background-color : transparent ;
border-left : 2 . 4em solid # fff ! important ;
z-index : 100 ;
cursor : pointer ;
transition : all 0s linear , width 0 . 3s ease , background-color 0s 0 . 3s linear ;
border : none ;
box-shadow : none ;
border-radius : 0 ;
width : 0 ;
height : 3rem ;
}
# blog_keywords : focus {
width : 15em ;
background-color : # e6e6e6 ;
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 ;
display : block ! important ;
font-size : 0 ;
overflow : hidden ;
pointer-events : none ;
z-index : 100 ;
background-color : transparent ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjEwIiBjeD0iMTEiIGN5PSIxMSIvPjxwYXRoIGlkPSJsaW5lIiBzdHJva2U9IiMzMzMiIGQ9Im0yNy4wNjk2OTEsMzAuMTUxMTFsLTkuNjQxODIxLC0xMS40OTA2NjkiLz48L2c+PC9zdmc+" ) ;
background-repeat : no-repeat ;
background-size : auto 40 % ;
background-position : center ;
border-left : 1px solid # e6e6e6 ;
transition : background-color 0 . 3s ease 0 . 114s , border-right-color 0 . 3s ease 0 . 114s ;
width : 2 . 6rem ;
height : 3rem ;
}
# blog_keywords : hover + div {
background-color : # e6e6e6 ;
transition : background-color 0 . 3s ease ;
}
# blog_keywords : focus + div {
background-color : # e6e6e6 ;
border-right-color : # e6e6e6 ;
transition : background-color 0 . 3s ease , border-right-color 0 . 3s ease ;
}
# blog_keywords + div input {
display : none ;
}
/ * *
* Posting module
*
* Encompasses posting & commenting forms
* /
@ -webkit-keyframes flash-post-fields {
0 % {
opacity : 1 ;
}
5 % {
opacity : 1 ;
}
20 % {
opacity : 0 . 5 ;
}
27 % {
opacity : 1 ;
}
42 % {
opacity : 0 . 5 ;
}
49 % {
opacity : 1 ;
}
64 % {
opacity : 0 . 5 ;
}
71 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes flash-post-fields {
0 % {
opacity : 1 ;
}
5 % {
opacity : 1 ;
}
20 % {
opacity : 0 . 5 ;
}
27 % {
opacity : 1 ;
}
42 % {
opacity : 0 . 5 ;
}
49 % {
opacity : 1 ;
}
64 % {
opacity : 0 . 5 ;
}
71 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
. cmty-posting-modal {
/* Rule extends %border-box */
border-width : 1 . 8rem ;
border-color : # fff ;
box-shadow : 0 0 10 % # 444 ;
max-width : 100 % ! important ;
max-height : 100 % ! important ;
/* autoprefixer: off */
-webkit-transform : none ! important ;
transform : none ! important ;
top : 0 ! important ;
left : 0 ! important ;
right : 0 ! important ;
bottom : 0 ! important ;
width : 100 % ! important ;
height : 100 % ! important ;
}
. cmty-posting-modal . aops-close-x {
/* Rule extends %content-box */
top : -32px ;
right : -32px ;
color : transparent ;
padding : 1em ;
border-radius : 0 ;
background-color : transparent ;
background-image : url ( "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PHBhdGggaWQ9IngiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMyIgZD0ibTEsMWwyOCwyOG0wLC0yOGwtMjgsMjgiLz48L2c+PC9zdmc+" ) ;
background-repeat : no-repeat ;
background-size : 40 % ;
background-position : center ;
background-clip : content-box ;
}
. cmty-posting-modal . cmty-posting-box-container ,
. cmty-posting-modal . cmty-post-preview {
width : 50 % ;
height : calc ( 100 % - 11 . 9rem ) ! important ;
margin-top : 1rem ;
}
. cmty-posting-modal . cmty-posting-box-container {
float : left ;
}
. cmty-posting-modal . cmty-posting-box-container . cmty-post-textarea ,
. cmty-posting-modal . cmty-posting-box-container . cmty-post-textarea : focus {
border-width : 0 ;
}
. cmty-posting-modal . cmty-post-preview {
display : block ! important ;
float : right ;
border-left : 1px solid # d9d9d9 ;
}
. cmty-posting-modal . cmty-edit-post . cmty-posting-box-container ,
. cmty-posting-modal . cmty-edit-post . cmty-post-preview {
height : calc ( 100 % - 9 . 5rem ) ! important ;
}
. cmty-posting-modal . cmty-posting-with-poll . cmty-posting-box-container ,
. cmty-posting-modal . cmty-posting-with-poll . cmty-post-preview {
height : calc ( 100 % - 26 . 8rem ) ! important ;
}
. cmty-posting-modal . cmty-posting-preview-bar {
position : fixed ;
left : -100 % ;
}
. cmty-posting-modal . cmty-posting-preview-bar-hidden {
display : none ! important ;
}
. cmty-posting-modal . cmty-posting-preview-bar-shown {
display : block ! important ;
}
. cmty-posting-modal . cmty-refresh-preview ,
. cmty-posting-modal . cmty-preview-bar-attachments {
position : fixed ;
bottom : 0 ;
font-size : 0 . 8rem ;
padding : 0 . 5em ;
margin : 0 ;
}
. cmty-posting-modal . cmty-refresh-preview {
z-index : 1 ;
border-top : 1px solid # d9d9d9 ;
left : 1 . 8rem ;
right : 1 . 8rem ;
}
. cmty-posting-modal . cmty-preview-bar-attachments {
z-index : 10 ;
left : 1 . 5rem ;
}
. cmty-posting-subject-line . cmty-subject-input , . cmty-tags-line . cmty-items-input , . cmty-posting-box-container . cmty-post-textarea {
/* Source for %faux-placeholder-input */
position : relative ;
background-color : transparent ! important ;
transition : background-color 0 . 3s 6s ease , border-color 0 . 3s ease ;
}
. cmty-posting-subject-line . cmty-subject-input : focus , . cmty-tags-line . cmty-items-input : focus , . cmty-posting-box-container . cmty-post-textarea : focus {
background-color : # fff ! important ;
transition : background-color 0 . 3s 0s ease , border-color 0 . 3s ease ;
}
. cmty-posting-environ . cmty-heading-text ,
. cmty-posting-environ . cmty-posting-box-container :: before {
/* Rule extends %heading */
position : absolute ;
opacity : 0 ;
color : # aaa ;
font-size : inherit ;
-webkit-animation : flash-post-fields 6s ease ;
animation : flash-post-fields 6s ease ;
}
. cmty-posting-subject-line {
position : relative ;
font-size : 2 . 5em ;
padding : 10px 0 ;
}
. cmty-posting-subject-line . cmty-heading-text {
margin : 0 . 3em 0 . 1em ;
}
. cmty-posting-subject-line . cmty-subject-input {
/* Rule extends %heading */
/* Rule extends %faux-placeholder-input */
padding-left : 0 . 1rem ! important ;
width : 100 % ;
height : 2em ;
}
. cmty-posting-subject-line . cmty-subject-input : focus {
padding-left : 0 . 1rem ! important ;
}
. cmty-posting-subject-line . cmty-post-in {
display : none ;
}
. cmty-tags-line {
padding : 0 ;
}
. cmty-tags-line . cmty-heading-text {
text-align : left ;
margin : 0 . 2em 0 . 3em ;
}
. cmty-tags-line . cmty-items-input-box {
background-color : transparent ;
padding : 0 ;
border : none ;
}
. cmty-tags-line . cmty-items-input {
/* Rule extends %heading */
/* Rule extends %faux-placeholder-input */
padding : 0 . 3em ! important ;
margin-bottom : 0 . 5em ;
/* Following styles copied from text inputs; see general.scss */
border-width : 0 0 1px ! important ;
border-style : solid ! important ;
border-color : # d9d9d9 ! important ;
}
. cmty-tags-line . cmty-items-input : hover {
border-color : # ccc ! important ;
}
. cmty-tags-line . cmty-items-input : focus {
padding : 0 . 3em ! important ;
border-color : # aaa ! important ;
}
. cmty-poll-build {
background-color : # fff ;
color : # 444 ;
border-bottom : 1px solid # d9d9d9 ;
}
. cmty-poll-build . cmty-poll-inputs {
height : 6em ;
resize : none ;
}
. cmty-poll-question ,
. cmty-poll-inputs {
/* Rule extends textarea */
padding : 0 . 3em 0 . 2em ;
}
. cmty-poll-question : focus ,
. cmty-poll-inputs : focus {
padding : 0 . 3em 0 . 2em ;
}
. cmty-poll-left ,
. cmty-poll-right {
width : 100 % ;
}
. cmty-posting-box-container :: before {
content : 'Message' ;
font-size : 1 . 2em ;
margin : 0 . 3em ;
}
. cmty-posting-box-container . cmty-post-textarea {
/* Rule extends %faux-placeholder-input */
padding : 0 0 . 3em ;
}
. cmty-posting-box-container . cmty-post-textarea : focus {
padding : 0 0 . 3em ;
}
. cmty-posting-preview-bar {
/* Rule extends %no-user-select */
background-color : # fff ;
color : # 444 ;
}
. cmty-post-preview-text {
2020-01-22 16:55:26 +00:00
font-family : 'Titillium Web' , sans-serif ;
2020-01-21 18:12:31 +00:00
word-wrap : break-word ;
padding : 0 1em 1em ! important ;
}
. cmty-post-preview-text a : link ,
. cmty-post-preview-text a : hover ,
. cmty-post-preview-text a : visited {
/* Rule extends %link-underline */
}
. cmty-post-preview-text a : visited {
color : # 444 ;
}
. cmty-posting-top ,
. cmty-posting-button-row {
color : # 444 ;
background : none ;
}
. cmty-posting-environ-buttons . btn , . cmty-posting-environ-buttons . cmty-editable-item-close {
vertical-align : top ;
}
. cmty-bbcode-btn {
height : 1 . 4em ;
}
. cmty-bbcode-other {
color : # 444 ;
z-index : 0 ;
}
. blog-reply-window {
/* Rule extends %modal-font */
position : relative ;
z-index : 1 ;
background-color : # fff ;
display : none ! important ;
padding : 0 1em ;
border : 1px solid # fff ;
border-top-color : # e6e6e6 ;
}
. blog-reply-window . blog-reply-open {
display : block ! important ;
}
. blog-reply-window . blog-reply-open :: before {
content : '' ;
display : table ;
clear : both ;
}
. blog-reply-window . cmty-posting-box-container :: before {
content : 'Comment' ;
}
. blog-reply-window . cmty-posting-environ {
top : -2 . 1em ;
z-index : 1 ;
margin-bottom : -2 . 1em ;
}
. blog-reply-window . cmty-posting-button-row {
background-color : # fff ;
}
. blog-reply-window . cmty-cancel-posting-x {
color : # 444 ;
}
. blog-reply-window . cmty-submit-button {
float : left ;
}
. blog-reply-window . cmty-posting-button-row . cmty-phone {
margin-bottom : 1 . 1em ;
}
. blog-reply-window . cmty-post-preview {
border : none ;
}
. cmty-edit-post . cmty-heading-text ,
. cmty-edit-post . cmty-posting-box-container :: before {
-webkit-animation : none ;
animation : none ;
}
/ * *
* Miscellaneous stuff
* /
# post-new-entry {
/* Rule extends %modal-font */
}
# 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 {
background-color : # e6e6e6 ! important ;
}
. entrywrap . cmty-items-input , div . commentwrap . cmty-items-input {
/* Rule extends %transition03 */
display : inline ;
width : auto ;
background-color : transparent ! important ;
padding : 0em 0 . 2em ! important ;
/* Following styles copied from text inputs; see general.scss */
border-width : 0 0 1px ! important ;
border-style : solid ! important ;
border-color : # d9d9d9 ! important ;
}
. entrywrap . cmty-items-input : hover , div . commentwrap . cmty-items-input : hover {
border-color : # ccc ! important ;
}
. entrywrap . cmty-items-input : focus , div . commentwrap . cmty-items-input : focus {
padding : 0em 0 . 2em ! important ;
border-color : # aaa ! important ;
}
. cmty-editable-item-close {
/* Rule extends .btn */
font-family : AoPS ;
}
. cmty-editable-item-close : hover {
background-color : # fff ;
}
# feed-wrapper {
display : none ;
}
# main > h1 {
padding-bottom : 0 . 2em ;
border-bottom : 1px solid # e6e6e6 ;
margin-top : 0 . 5em ;
margin-bottom : 1 . 3em ;
}
# main > p : not ( [ id ] ) {
position : relative ;
float : right ;
z-index : 1 ;
margin-top : 1 . 5em ;
}
# main > p : not ( [ id ] ) a : link ,
# main > p : not ( [ id ] ) a : hover ,
# main > p : not ( [ id ] ) a : visited {
color : # aaa ;
}
. aops-modal-title {
/* Rule extends %heading */
}
. aops-modal-body ,
# flyout {
/* Rule extends %modal-font */
}
# flyout {
text-align : left ;
padding-right : 5px ;
}
# main :: after {
/* Rule extends %modal-font */
2020-01-21 18:30:23 +00:00
content : "City made by NMK, with \262d." ;
2020-01-21 18:12:31 +00:00
position : relative ;
top : 2em ;
display : block ;
color : # aaa ;
font-size : 0 . 8em ;
text-align : center ;
}
/ * *
* @ media module
* /
@ media all {
html {
font-size : 17px ;
}
}
@ media only screen and ( max-width : 1000px ) {
body :: after {
height : 16rem ;
}
# content {
margin-top : 16rem ;
padding-top : 2em ;
padding-left : 2em ;
padding-right : 2em ;
}
# content :: before {
display : none ;
}
# header {
top : 5 . 75rem ;
}
# header h1 {
font-size : 2 . 5rem ;
text-overflow : ellipsis ;
overflow : hidden ;
}
# navigation_box {
font-size : 0 ;
opacity : 1 ;
}
# left_navigation_box a : nth-last-child ( 2 ) {
display : inline-block ;
font-size : 1rem ;
padding : 0 0 . 7em ;
border-top : none ;
}
# left_navigation_box a : nth-last-child ( 2 ) : hover {
background-color : # e6e6e6 ;
}
# left_navigation_box a : nth-last-child ( 2 ) :: before {
content : "\3008" ;
font-size : 0 . 9em ;
padding-right : 0 . 2em ;
}
# right_navigation_box {
display : none ;
}
# blog_keywords + div {
height : calc ( 3rem + 1px ) ;
}
# blog_keywords : focus {
width : 100 % ;
}
# user-menu-widget . avatar {
top : -2 . 45rem ;
margin-left : -2rem ;
}
# user-menu-widget . avatar img {
width : 4rem ;
height : 4rem ;
}
# user-menu-widget . username-colored {
display : none ;
}
div . quotetitle ,
div . quotecontent {
border-left : 1px solid # ccc ;
padding-left : 0 . 5rem ;
margin : 0 ;
}
div . quotecontent {
padding-top : 0 . 5em ;
}
. codetitle {
display : block ;
margin-top : 1em ;
}
. codetitle b {
font-weight : normal ;
}
pre :: before {
display : none ;
}
. cmty-posting-modal {
border-top-width : 0 ;
border-bottom-width : 0 . 8rem ;
}
. aops-modal-open {
position : fixed ;
overflow : hidden ;
width : 100 % ;
height : 100 % ;
}
. cmty-posting-modal . cmty-post-preview ,
. cmty-posting-preview-bar {
display : none ! important ;
}
. cmty-posting-modal . cmty-posting-box-container {
width : 100 % ;
float : none ;
}
. cmty-posting-modal . cmty-posting-button-row {
display : none ;
}
. cmty-posting-modal . cmty-posting-button-row . cmty-phone {
display : block ;
}
. cmty-posting-modal . cmty-posting-button-row . cmty-phone . cmty-posting-environ-buttons {
width : auto ;
}
. cmty-posting-modal . cmty-posting-button-row . cmty-phone . btn , . cmty-posting-modal . cmty-posting-button-row . cmty-phone . cmty-editable-item-close {
display : inline-block ;
width : auto ;
}
. cmty-post-textarea ,
. cmty-post-textarea : focus {
border-width : 0 0 1px ;
border-radius : 0 ;
}
}
2020-01-22 16:50:01 +00:00
/*Loading bar*/
@ keyframes loading {
0 % {
width : 0px ;
top : calc ( 50vh - 50px ) ;
font-family : VT323 ;
content : "Loading..." ;
transition : ease ;
text-align : center ;
}
75 % {
width : 300px ;
top : calc ( 50vh - 50px ) ;
font-family : VT323 ;
content : "Loading..." ;
text-align : center ;
}
75 . 1 % {
width : 300px ;
top : calc ( 50vh - 50px ) ;
font-family : VT323 ;
content : "Done!" ;
text-align : center ;
}
85 % {
top : calc ( 50vh - 100px ) ;
width : 300px ;
font-family : VT323 ;
content : "Done!" ;
text-align : center ;
}
100 % {
top : calc ( 150vh - 50px ) ;
width : 300px ;
font-family : VT323 ;
content : "Done!" ;
text-align : center ;
}
}
html :: before {
font-family : VT323 ;
content : "Loading..." ;
height : 100px ;
position : fixed ! important ;
margin : 0px ;
padding : 0px ;
top : calc ( 150vh - 50px ) ;
left : calc ( 50vw - 150px ) ;
background-color : black ;
color : white ! important ;
line-height : 100px ;
white-space : nowrap ;
font-size : 50px ! important ;
z-index : 1000000000 ! important ;
animation : loading 2s ease ! important ;
width : 300px ! important ;
box-shadow : 0px 0px 0px 5px white , 0px 50vw 0px calc ( 50vw + 50vh - 50px ) black , 0px 0px 0px 5px 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)*/
display : block ! important ;
}
html :: after {
font-family : VT323 ;
content : "Loading... please wait" ;
height : 100px ;
width : 0px ;
position : fixed ! important ;
margin : 0px ;
padding : 0px ;
top : calc ( 150vh - 50px ) ;
left : calc ( 50vw - 150px ) ;
background-color : white ;
color : black ! important ;
line-height : 100px ;
z-index : 1000000001 ! important ;
white-space : nowrap ;
font-size : 50px ! important ;
animation : loading 2s ease ! important ;
overflow : hidden ! important ;
}