531 lines
10 KiB
CSS
531 lines
10 KiB
CSS
|
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:100,200,300,375,400,500,600,700,800,900");
|
||
|
@import url("https://fonts.googleapis.com/css?family=VT323:100,200,300,375,400,500,600,700,800,900");
|
||
|
body {
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
}
|
||
|
|
||
|
|
||
|
#navigation_box{
|
||
|
height:40px;
|
||
|
position:fixed;
|
||
|
top:0;
|
||
|
border-style:none;
|
||
|
padding:0;
|
||
|
transition:0.25s;
|
||
|
color:rgba(0,0,0,0);
|
||
|
}
|
||
|
#left_navigation_box{
|
||
|
color: rgba(0,0,0,0);
|
||
|
padding:0;
|
||
|
}
|
||
|
#right_navigation_box{
|
||
|
color: rgba(0,0,0,0);
|
||
|
}
|
||
|
#navigation_box a{
|
||
|
font-size:18px;
|
||
|
padding:10px;
|
||
|
padding-top:13px;
|
||
|
padding-bottom:13px;
|
||
|
transition:0.25s;
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
font-weight:100;
|
||
|
}
|
||
|
#navigation_box a:nth-child(2){
|
||
|
border-left-style:solid;
|
||
|
border-right-style:solid;
|
||
|
border-width:1px;
|
||
|
border-color:#f2f2f2;
|
||
|
}
|
||
|
#navigation_box a:nth-last-child(2){
|
||
|
border-right-style:solid;
|
||
|
border-width:1px;
|
||
|
border-color:#f2f2f2;
|
||
|
}
|
||
|
#right_navigation_box a:nth-child(3){
|
||
|
border-right-style:solid;
|
||
|
border-right-width:1px;
|
||
|
border-color:#f2f2f2;
|
||
|
}
|
||
|
#left_navigation_box a{
|
||
|
margin-left:-9px;
|
||
|
margin-right:-9px;
|
||
|
}
|
||
|
#right_navigation_box a{
|
||
|
margin-left:-7px;
|
||
|
margin-right:-7px;
|
||
|
}
|
||
|
#left_navigation_box{
|
||
|
margin-left:9px;
|
||
|
}
|
||
|
#right_navigation_box {
|
||
|
margin-left:7px;
|
||
|
}
|
||
|
#navigation_box a:hover{
|
||
|
background-color:#f2f2f2;
|
||
|
color:#20458c;
|
||
|
}
|
||
|
|
||
|
#header{
|
||
|
margin-top:34px;
|
||
|
}
|
||
|
#wrapper{
|
||
|
border-style:none;
|
||
|
width:100%;
|
||
|
background: #f9f9f9 !important;
|
||
|
padding:0;
|
||
|
}
|
||
|
#content{
|
||
|
max-width:1100px;
|
||
|
background: #f9f9f9 !important;
|
||
|
margin:auto;
|
||
|
}
|
||
|
#header{
|
||
|
border-style:none;
|
||
|
height: calc( 50vh - 34px);
|
||
|
margin-top: 34px;
|
||
|
background: black url("https://cdn.artofproblemsolving.com/images/1/5/2/1526cab286b14e1b92ce583f7d82cc322ad746a2.gif") no-repeat fixed top / 40%;
|
||
|
|
||
|
}
|
||
|
#header h1{
|
||
|
font-size: 150px;
|
||
|
height: 150px;
|
||
|
text-decoration: none;
|
||
|
cursor: default;
|
||
|
font-family: VT323;
|
||
|
font-weight: 25;
|
||
|
padding:0;
|
||
|
margin-top: calc(30vh - 82px);
|
||
|
color: white;
|
||
|
word-wrap: break-word;
|
||
|
}
|
||
|
|
||
|
|
||
|
#feed-wrapper{
|
||
|
display:none;
|
||
|
}
|
||
|
#main{
|
||
|
width:calc(100% - 270px);
|
||
|
}
|
||
|
|
||
|
#post-new-entry-p img{
|
||
|
display:none;
|
||
|
}
|
||
|
#post-new-entry-p{
|
||
|
text-align:center;
|
||
|
margin-bottom:0;
|
||
|
}
|
||
|
.entry{
|
||
|
margin-top:15px !important;
|
||
|
padding-bottom:10px !important;
|
||
|
border-style:none !important
|
||
|
}
|
||
|
.entry h1 a{
|
||
|
font-size:40px;
|
||
|
font-weight:200;
|
||
|
line-height:40px;
|
||
|
}
|
||
|
.entry h2{
|
||
|
color:black;
|
||
|
font-weight:375;
|
||
|
padding-left: 4px;
|
||
|
}
|
||
|
.entry h2 img{
|
||
|
display:none;
|
||
|
}
|
||
|
.entry h2 strong a{
|
||
|
color:black !important;
|
||
|
font-weight:375 !important;
|
||
|
}
|
||
|
.entrywrap{
|
||
|
margin-left:2px !important;
|
||
|
}
|
||
|
.message{
|
||
|
margin-left:4px;
|
||
|
border-style:none !important;
|
||
|
border-left-style:solid !important;
|
||
|
margin-left:4px !important;
|
||
|
background-color:#eaf0fa !important;
|
||
|
border-left-width:5px !important;
|
||
|
border-left-color:#20458c!important;
|
||
|
margin:0 !important;
|
||
|
padding:7px !important;
|
||
|
color:black;
|
||
|
}
|
||
|
.entrywrap .actions{
|
||
|
padding-left:0;
|
||
|
}
|
||
|
.entrywrap{
|
||
|
background-color:transparent !important;
|
||
|
padding:0!important;
|
||
|
border-style:none !important;
|
||
|
}
|
||
|
.entrywrap .cmty-post-edit-info{
|
||
|
display:none !important;
|
||
|
}
|
||
|
|
||
|
.aops-scroll-outer.aops-scrollbar-not-visible.blog-scroll-outer{
|
||
|
padding:0;
|
||
|
}
|
||
|
.aops-scroll-content{
|
||
|
margin-right:0 !important;
|
||
|
width:100% !important;
|
||
|
}
|
||
|
.aops-scroll-outer.aops-scrollbar-not-visible.blog-scroll-outer .aops-scroll-bar{
|
||
|
display:none !important;
|
||
|
}
|
||
|
.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible .aops-scroll-bar{
|
||
|
display:none !important;
|
||
|
}
|
||
|
.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{
|
||
|
padding:0;
|
||
|
}
|
||
|
.aops-scroll-content li{
|
||
|
padding:6px !important;
|
||
|
}
|
||
|
.aops-scroll-inner{
|
||
|
width:240px !important;
|
||
|
}
|
||
|
.blog-shout-wrapper{
|
||
|
border-width:1px !important;
|
||
|
}
|
||
|
.blog-tag-wrapper{
|
||
|
border-width:1px !important;
|
||
|
}
|
||
|
#message-box{
|
||
|
width:242px !important;
|
||
|
background-color:transparent !important;
|
||
|
border-width:1px;
|
||
|
border-color:black;
|
||
|
box-sizing: none !important;
|
||
|
}
|
||
|
#message{
|
||
|
width:242px !important;
|
||
|
margin-right:0;
|
||
|
border-width:1px;
|
||
|
border-color:black !important;
|
||
|
background-color:transparent;
|
||
|
}
|
||
|
#shouts-widget .widget-content{
|
||
|
width:240px !important;
|
||
|
}
|
||
|
.blog-shout-wrapper{
|
||
|
width:240px !important;
|
||
|
border-color:#7a7a7a !important;
|
||
|
}
|
||
|
#tags-widget .widget-content{
|
||
|
width:240px !important;
|
||
|
}
|
||
|
.blog-tag-wrapper{
|
||
|
width:240px !important;
|
||
|
border-color:#7a7a7a !important;
|
||
|
}
|
||
|
.cmty-subject-input{
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
font-size:15px;
|
||
|
padding-left:3px !important;
|
||
|
}
|
||
|
.cmty-post-textarea{
|
||
|
padding:3px;
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
font-size:15px;
|
||
|
}
|
||
|
.cmty-posting-button-row{
|
||
|
background-color:white;
|
||
|
border-color:white;
|
||
|
}
|
||
|
.cmty-bbcode-other.clickable.cmty-bbcode-btn{
|
||
|
color:black;
|
||
|
}
|
||
|
.aops-modal-frame.cmty-posting-modal.ui-draggable{
|
||
|
border-color:white;
|
||
|
}
|
||
|
#side{
|
||
|
float:left;
|
||
|
}
|
||
|
#main{
|
||
|
float:right;
|
||
|
}
|
||
|
#archive-widget{
|
||
|
margin-top:5px;
|
||
|
padding-bottom:10px !important;
|
||
|
margin-bottom:20px !important;
|
||
|
border-bottom-style:dashed;
|
||
|
border-bottom-color: #7a7a7a;
|
||
|
border-bottom-width: 1px;
|
||
|
}
|
||
|
#archive-widget img{
|
||
|
display:none;
|
||
|
}
|
||
|
#archive-widget .widget-header .widget-title{
|
||
|
font-weight:50;
|
||
|
font-size:30px;
|
||
|
margin-bottom:5px;
|
||
|
color:black !important;
|
||
|
}
|
||
|
#shouts-widget .widget-header .widget-title{
|
||
|
font-weight:50;
|
||
|
font-size:30px;
|
||
|
margin-bottom:10px;
|
||
|
color:black !important;
|
||
|
}
|
||
|
#shouts-widget{
|
||
|
margin-top:5px;
|
||
|
padding-bottom:30px !important;
|
||
|
margin-bottom:20px !important;
|
||
|
border-bottom-style:dashed;
|
||
|
border-bottom-color: #7a7a7a;
|
||
|
border-bottom-width: 1px;
|
||
|
}
|
||
|
.blog-num-shouts{
|
||
|
display:none!important;
|
||
|
}
|
||
|
#tags-widget{
|
||
|
margin-top:5px;
|
||
|
padding-bottom:10px !important;
|
||
|
margin-bottom:20px !important;
|
||
|
border-bottom-style:dashed;
|
||
|
border-bottom-color: #7a7a7a;
|
||
|
border-bottom-width: 1px;
|
||
|
}
|
||
|
#tags-widget .widget-header .widget-title{
|
||
|
font-weight:50;
|
||
|
font-size:30px;
|
||
|
margin-bottom:5px;
|
||
|
color:black !important;
|
||
|
}
|
||
|
#tags-widget .widget-header .widget-title{
|
||
|
font-weight:50;
|
||
|
font-size:30px;
|
||
|
margin-bottom:5px;
|
||
|
color:black !important;
|
||
|
}
|
||
|
#stats-widget{
|
||
|
margin-top:5px;
|
||
|
padding-bottom:20px !important;
|
||
|
margin-bottom:20px !important;
|
||
|
border-bottom-style:dashed;
|
||
|
border-bottom-color: #7a7a7a;
|
||
|
border-bottom-width: 1px;
|
||
|
}
|
||
|
#stats-widget img{
|
||
|
display:none;
|
||
|
}
|
||
|
#stats-widget .widget-header .widget-title{
|
||
|
font-weight:50;
|
||
|
font-size:30px;
|
||
|
margin-bottom:5px;
|
||
|
color:black !important;
|
||
|
}
|
||
|
#search-widget .widget-header{
|
||
|
background-color:transparent;
|
||
|
display:none;
|
||
|
}
|
||
|
#search-widget .widget-settings{
|
||
|
display:none;
|
||
|
}
|
||
|
#search-widget .widget-content{
|
||
|
background-color:transparent;
|
||
|
border-style:none;
|
||
|
padding:0;
|
||
|
}
|
||
|
#search-widget .widget-footer{
|
||
|
background-color:transparent;
|
||
|
border-style:none;
|
||
|
}
|
||
|
#blog_searchform input{
|
||
|
background-color:transparent;
|
||
|
}
|
||
|
#blog_searchform fieldset{
|
||
|
border-style:none !important;
|
||
|
width:248px; !important;;
|
||
|
display:inline-block !important;
|
||
|
margin:0 !important;
|
||
|
}
|
||
|
#blog_searchform fieldset input#blog_keywords{
|
||
|
width:calc(100% - 60px);
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
border-color:black;
|
||
|
color:black;
|
||
|
}
|
||
|
#blog_searchform fieldset div{
|
||
|
width:4;
|
||
|
float:right;
|
||
|
margin-top:0 !important;
|
||
|
border-color:black !important;
|
||
|
}
|
||
|
#blog_searchform fieldset div input{
|
||
|
height:22px;
|
||
|
font-size:12px;
|
||
|
font-family:'Titillium Web', sans-serif;
|
||
|
font-weight:300;
|
||
|
margin-top:0;
|
||
|
border-color:black;
|
||
|
color:black;
|
||
|
}
|
||
|
#blog_searchform{
|
||
|
margin:0;
|
||
|
}
|
||
|
#search-widget .widget-footer{
|
||
|
display:none;
|
||
|
}
|
||
|
|
||
|
#search-widget{
|
||
|
margin:0 !important;
|
||
|
padding-bottom:px;
|
||
|
}
|
||
|
#search-widget .widget-content{
|
||
|
margin:0;
|
||
|
}
|
||
|
#search-widget{
|
||
|
position:fixed !important;
|
||
|
z-index:1000000000000000000 !important;
|
||
|
top:4px !important;
|
||
|
right:50px !important;
|
||
|
padding:0 !important;
|
||
|
}
|
||
|
#right_navigation_box{
|
||
|
right:210px;
|
||
|
}
|
||
|
#search-widget .button2{
|
||
|
display:inline;
|
||
|
}
|
||
|
|
||
|
#message-box{
|
||
|
height:99px !important;
|
||
|
}
|
||
|
#user-menu-widget{
|
||
|
padding-bottom:10px !important;
|
||
|
border-bottom-style:dashed;
|
||
|
border-color:#7a7a7a;
|
||
|
border-width:1px;
|
||
|
margin-bottom:17px!important;
|
||
|
}
|
||
|
.user-full a{
|
||
|
font-weight:300 !important;
|
||
|
}
|
||
|
.message{
|
||
|
word-wrap:break-word;
|
||
|
}
|
||
|
|
||
|
#right_navigation_box{
|
||
|
right:210px;
|
||
|
}
|
||
|
|
||
|
.entry h2 a {
|
||
|
color: white;
|
||
|
}
|
||
|
a {
|
||
|
|
||
|
}
|
||
|
a:hover {
|
||
|
color: orange !important;
|
||
|
transition: all 0.5s;
|
||
|
-webkit-transition: all 0.5s;
|
||
|
-moz-transition: all 0.5s;
|
||
|
-o-transition: all 0.5s;
|
||
|
}
|
||
|
|
||
|
div.total-posts , div.total-posts a{
|
||
|
color: white;
|
||
|
}
|
||
|
|
||
|
#blog_keywords{
|
||
|
border-style:none;
|
||
|
font-size:18px;
|
||
|
font-weight:300;
|
||
|
color:white !important;
|
||
|
}
|
||
|
#blog_keywords::placeholder{
|
||
|
color:white;
|
||
|
font-style:italic;
|
||
|
}
|
||
|
#main::after {
|
||
|
/* Rule extends %modal-font */
|
||
|
content: "CSS credit to Mathlete2017";
|
||
|
position: relative;
|
||
|
top: 2em;
|
||
|
display: block;
|
||
|
color: #aaa;
|
||
|
font-size: 6pt;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
/*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;
|
||
|
}
|