Difference between revisions of "User:Sparklyflowers/CSS"

 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<nowiki>/** Credits to SirCalcsALot and BM for part of the CSS **/
+
<nowiki>/** Made by AoPS User SparklyFlowers**/
/** This sets the background color of your blog posts. Try changing the color and see what happens! **/
+
 
 +
/**Inspired from City.css (by NeoMathematicalKid)**/
 +
 
 +
/** Don't use without crediting.**/
 +
/** Pastel Dreams 1.0 **/
 +
 
 +
/** Please credit SparklyFlowers and copy-paste the above if you're going to use this css.**/
 +
 
 
div .entrywrap, div .entrywrap-hover {
 
div .entrywrap, div .entrywrap-hover {
background-color : #ccf6ff;
+
border: 0px solid white;
border: 5px solid pink
+
border-right: 5px solid pink;
 +
border-bottom: 5px solid pink;
 +
padding-right: 100px;
 +
padding-bottom: 30px;
 +
border-radius: 30px;
 +
background-color: #fff5fd;
 
}
 
}
 +
div.commentwrap{
 +
border: 0px solid white;
 +
border-right: 5px solid pink;
 +
border-bottom: 5px solid pink;
 +
padding-right: 30px;
 +
padding-bottom: 10px;
 +
border-radius: 30px;
 +
background-color: #f0e6ff;
 +
}
 +
 +
/** Header background and z-index**/
 
#header{
 
#header{
background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=);
+
background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvNS9hLzQ5NDFjZmU2NTdlNjgzOGIyZWUzYTliODFmYmQ3YTBjZTEwYmY3LmpwZw==&rn=Y2xvdWRzcmFpbmJvdy5qcGc=);
height:200px;
+
background-repeat: no-repeat;
 +
background-size: 100%;
 +
background-attachment:fixed;
 +
z-index: 1;
 
}
 
}
div .message{
+
 
font-family: Ink Free;
+
/**cursor**/
}
 
title {
 
color: lavender;
 
}
 
html{
 
background: url("https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvYy8xL2U3ZjgyMjc1NzBhNTY2ZTNjYWVjOTQ4NDJlYWRiYWVlNThlMDRiLmpwZw==&rn=bGF2ZW5kZXIuanBn");
 
background-position: center;
 
background-size: cover;
 
background-attachment:fixed;}
 
 
*{
 
*{
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
Line 29: Line 46:
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
 
}
 
}
 +
 +
/**text in header**/
 
#header h1{
 
#header h1{
position: absolute;
+
position: fixed;
bottom: 0;
 
 
width: 100%;
 
width: 100%;
text-align:center;
+
text-align: center;
font-family:Ink Free;
+
font-size: 40px;
font-size:40px;
+
transition: 0.5s;
transition:0.5s;
+
z-index: 2;
 +
top: 40%;
 +
transform: translateY(-50%);
 
}
 
}
 
#header h1:hover{
 
#header h1:hover{
 
     font-size: 60px;
 
     font-size: 60px;
 
}
 
}
 +
 
div#wrapper{
 
div#wrapper{
     width: 65%;
+
     width: 100%;
 
     height: inherit;
 
     height: inherit;
 
}
 
}
  
 
div#main {
 
div#main {
     width: 70%;
+
     width: 60%;
 +
 
 
}
 
}
 
h1{
 
h1{
 
     color: purple;
 
     color: purple;
    font-family: Ink Free;
 
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 
h2, h3, h4, h5, h6, #navigation_box{
 
h2, h3, h4, h5, h6, #navigation_box{
    font-family: Ink Free;
 
 
     font-weight: bold;
 
     font-weight: bold;
}
 
#side{
 
font-family: Ink Free;
 
 
}
 
}
  
 +
/**nagivation box**/
 
#navigation_box{
 
#navigation_box{
 
background-color: lavender;
 
background-color: lavender;
padding:10px!important;
+
padding:10px;
 
position:fixed;
 
position:fixed;
 
border-bottom:none;
 
border-bottom:none;
 
height:48px;
 
height:48px;
z-index:!important;
 
 
}
 
}
 
#navigation_box a{
 
#navigation_box a{
 
padding:4px!important;
 
padding:4px!important;
font-family:Ink Free;
 
 
font-size:16px;
 
font-size:16px;
color: #000;
+
color:black;
border-bottom: solid 3px purple;
 
 
transition:.2s;
 
transition:.2s;
 
}
 
}
 
#navigation_box a:hover{
 
#navigation_box a:hover{
padding-bottom:7px!important;
+
border-top: 5px solid purple;
 +
background-color: #f5dbff;
 +
padding-bottom: 15px!important;
 
}
 
}
#left_navigation_box{
+
 
color:#000;
+
/**comments and footer**/
 +
a.blog-post-comment{
 +
font-size: 28px;
 +
color: purple;
 
}
 
}
#left_navigation_box a:nth-child(2){
+
div.efooter{
margin-left:-8px;
+
font-size: 20px;
 
}
 
}
#left_navigation_box a:nth-child(3){
+
#header{
margin-left:-9px;
+
width:100%;
 +
height:500px;
 +
border-bottom: 5px solid #ffffff;
 
}
 
}
#left_navigation_box a:nth-child(4){
+
div.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{
margin-left:-9px;
+
color:black;
 
}
 
}
#right_navigation_box{
+
div#content{
color:#fff;
+
text-align:center;
 +
margin: auto;
 +
z-index:100;
 
}
 
}
#right_navigation_box a:nth-child(1){
+
#content {
margin-right:-5px;
+
position: relative;
 +
padding: 5vh 10% 0;
 +
margin-top: 72vh;
 +
background-color:white;
 
}
 
}
#right_navigation_box a:nth-child(2){
+
 
margin-right:-6px;
+
/**scrollbar**/
 +
/* width */
 +
::-webkit-scrollbar {
 +
  width: 13px;
 
}
 
}
  
a.blog-post-comment{
+
/* Track */
font-family:Ink Free;
+
::-webkit-scrollbar-track {
font-size: 28px;
+
  background: lightpink;
color: purple;
+
}
 +
 +
/* Handle */
 +
::-webkit-scrollbar-thumb {
 +
  background: #ebbaff;
 +
  border: 2px solid purple;
 +
  border-radius: 10px;
 +
 
 +
}
 +
 
 +
/* Handle on hover */
 +
::-webkit-scrollbar-thumb:hover {
 +
  background: #e554eb;
 +
}
 +
h2{
 +
color: black;
 +
font-size: 16px;
 +
}
 +
a.username-coloured{
 +
color: black;
 +
 +
div.aops-scroll-bar, div.aops-scroll-slider {
 +
width: 0px;
 +
}
 +
div.cmty-poll-display{
 +
background-color: lavender;
 +
}
 +
input.btn.btn-primary{
 +
background-color:purple;
 +
}
 +
 
 +
/*announcement post, simply inspect the html, find the post number of the post you want to stick on the top-right, then simply change the post number*/
 +
#post-2210143{
 +
position:fixed;
 +
bottom: 58%;
 +
left: 68%;
 +
z-index:99999999999;
 +
border-bottom: none;
 +
}
 +
#post-2210143 .entrywrap{
 +
background-color:#eadaf2;
 +
border-color:purple;
 +
}
 +
#post-2210143 h2{
 +
display:none;
 +
}
 +
#post-2210143 h1{
 +
display:none;
 +
}
 +
 
 +
/*edit*/
 +
.cmty-post-edited .cmty-post-edit-info{
 +
display: none;
 
}
 
}
div.efooter{
+
 
font-family:Ink Free;
+
#feed-tabs{
font-size: 20px;
+
display:none;
 
}
 
}
 
</nowiki>
 
</nowiki>

Latest revision as of 14:17, 28 July 2020

/** Made by AoPS User SparklyFlowers**/ /**Inspired from City.css (by NeoMathematicalKid)**/ /** Don't use without crediting.**/ /** Pastel Dreams 1.0 **/ /** Please credit SparklyFlowers and copy-paste the above if you're going to use this css.**/ div .entrywrap, div .entrywrap-hover { border: 0px solid white; border-right: 5px solid pink; border-bottom: 5px solid pink; padding-right: 100px; padding-bottom: 30px; border-radius: 30px; background-color: #fff5fd; } div.commentwrap{ border: 0px solid white; border-right: 5px solid pink; border-bottom: 5px solid pink; padding-right: 30px; padding-bottom: 10px; border-radius: 30px; background-color: #f0e6ff; } /** Header background and z-index**/ #header{ background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvNS9hLzQ5NDFjZmU2NTdlNjgzOGIyZWUzYTliODFmYmQ3YTBjZTEwYmY3LmpwZw==&rn=Y2xvdWRzcmFpbmJvdy5qcGc=); background-repeat: no-repeat; background-size: 100%; background-attachment:fixed; z-index: 1; } /**cursor**/ *{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } a{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } div:hover{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } /**text in header**/ #header h1{ position: fixed; width: 100%; text-align: center; font-size: 40px; transition: 0.5s; z-index: 2; top: 40%; transform: translateY(-50%); } #header h1:hover{ font-size: 60px; } div#wrapper{ width: 100%; height: inherit; } div#main { width: 60%; } h1{ color: purple; font-weight: bold; } h2, h3, h4, h5, h6, #navigation_box{ font-weight: bold; } /**nagivation box**/ #navigation_box{ background-color: lavender; padding:10px; position:fixed; border-bottom:none; height:48px; } #navigation_box a{ padding:4px!important; font-size:16px; color:black; transition:.2s; } #navigation_box a:hover{ border-top: 5px solid purple; background-color: #f5dbff; padding-bottom: 15px!important; } /**comments and footer**/ a.blog-post-comment{ font-size: 28px; color: purple; } div.efooter{ font-size: 20px; } #header{ width:100%; height:500px; border-bottom: 5px solid #ffffff; } div.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{ color:black; } div#content{ text-align:center; margin: auto; z-index:100; } #content { position: relative; padding: 5vh 10% 0; margin-top: 72vh; background-color:white; } /**scrollbar**/ /* width */ ::-webkit-scrollbar { width: 13px; } /* Track */ ::-webkit-scrollbar-track { background: lightpink; } /* Handle */ ::-webkit-scrollbar-thumb { background: #ebbaff; border: 2px solid purple; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #e554eb; } h2{ color: black; font-size: 16px; } a.username-coloured{ color: black; } div.aops-scroll-bar, div.aops-scroll-slider { width: 0px; } div.cmty-poll-display{ background-color: lavender; } input.btn.btn-primary{ background-color:purple; } /*announcement post, simply inspect the html, find the post number of the post you want to stick on the top-right, then simply change the post number*/ #post-2210143{ position:fixed; bottom: 58%; left: 68%; z-index:99999999999; border-bottom: none; } #post-2210143 .entrywrap{ background-color:#eadaf2; border-color:purple; } #post-2210143 h2{ display:none; } #post-2210143 h1{ display:none; } /*edit*/ .cmty-post-edited .cmty-post-edit-info{ display: none; } #feed-tabs{ display:none; }