Art of Problem Solving
AoPS Online
Math texts, online classes, and more
for students in grades 5-12.
Visit AoPS Online ‚
Books for Grades 5-12 Online Courses
Beast Academy
Engaging math books and online learning
for students ages 6-13.
Visit Beast Academy ‚
Books for Ages 6-13 Beast Academy Online
AoPS Academy
Small live classes for advanced math
and language arts learners in grades 2-12.
Visit AoPS Academy ‚
Find a Physical Campus Visit the Virtual Campus

Difference between revisions of "User:Sparklyflowers/CSS"
 
Line 1: Line 1:
−
<nowiki>/**This is ALL MY WORK except for the scrollbar (city css), and profile picture (city css)**/
+
<nowiki>/** 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 {
 
div .entrywrap, div .entrywrap-hover {
 
border: 0px solid white;
 
border: 0px solid white;
Line 18: Line 26:
 
background-color: #f0e6ff;
 
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;
 
}
 
}
 +
 +
/**cursor**/
 
*{
 
*{
 
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 31: 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: 150px;
 
 
width: 100%;
 
width: 100%;
−
text-align:center;
+
text-align: center;
−
font-size:40px;
+
font-size: 40px;
−
transition:0.5s;
+
transition: 0.5s;
−
z-index:0;
+
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: 100%;
 
     width: 100%;
Line 59: Line 78:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 +
 +
/**nagivation box**/
 
#navigation_box{
 
#navigation_box{
 
background-color: lavender;
 
background-color: lavender;
Line 78: Line 99:
 
}
 
}
  
 +
/**comments and footer**/
 
a.blog-post-comment{
 
a.blog-post-comment{
 
font-size: 28px;
 
font-size: 28px;
Line 92: Line 114:
 
div.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{
 
div.aops-scroll-outer.blog-scroll-outer.aops-scrollbar-visible{
 
color:black;
 
color:black;
−
}
 
−
div#header.shrunken-header{
 
−
background-color:white;
 
−
}
 
−
div#header{
 
−
background-color:white;
 
 
}
 
}
 
div#content{
 
div#content{
 
text-align:center;
 
text-align:center;
 
margin: auto;
 
margin: auto;
 +
z-index:100;
 
}
 
}
 
#content {
 
#content {
Line 108: Line 125:
 
margin-top: 72vh;
 
margin-top: 72vh;
 
background-color:white;
 
background-color:white;
−
}
 
−
.aops-scroll-bar, .aops-scroll-slider {
 
−
width: 3px;
 
 
}
 
}
  
 +
/**scrollbar**/
 +
/* width */
 
::-webkit-scrollbar {
 
::-webkit-scrollbar {
−
   background-color: #FFCCCC;
+
   width: 13px;
−
  height: 0.6rem;
 
 
}
 
}
  
 +
/* Track */
 +
::-webkit-scrollbar-track {
 +
  background: lightpink;
 +
}
 +
 +
/* Handle */
 
::-webkit-scrollbar-thumb {
 
::-webkit-scrollbar-thumb {
−
   background-color: #fff;
+
   background: #ebbaff;  
−
   border: 0.25rem solid #CCCCFF;
+
   border: 2px solid purple;
−
   border-radius: 0.5rem;
+
   border-radius: 10px;
−
}
+
    
−
 
 
−
::-webkit-scrollbar-thumb:hover, #left_navigation_box a:last-child::-webkit-scrollbar-thumb, #blog_keywords:focus::-webkit-scrollbar-thumb {
 
−
  background-color: #bfbfbf;
 
−
   border-width: 0.2rem;
 
 
}
 
}
  
−
::-webkit-scrollbar-thumb:active {
+
/* Handle on hover */
−
   background-color: #aaa;
+
::-webkit-scrollbar-thumb:hover {
 +
   background: #e554eb;  
 
}
 
}
 
h2{
 
h2{
Line 139: Line 157:
 
color: black;
 
color: black;
 
}   
 
}   
−
#user-menu-widget p {
+
div.aops-scroll-bar, div.aops-scroll-slider {
−
  display: none;
+
width: 0px;
 +
}
 +
div.cmty-poll-display{
 +
background-color: lavender;
 
}
 
}
−
#user-menu-widget .avatar {
+
input.btn.btn-primary{
−
  position: absolute;
+
background-color:purple;
−
  display: block;
+
}
−
  margin-left: -2.5rem;
+
 
−
  top: -2.6rem;
+
/*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*/
−
  left: 50%;
+
#post-2210143{
−
  z-index: 1;
+
position:fixed;
 +
bottom: 58%;
 +
left: 68%;
 +
z-index:99999999999;
 +
border-bottom: none;
 
}
 
}
−
#user-menu-widget .avatar img {
+
#post-2210143 .entrywrap{
−
  background-color: #ccc;
+
background-color:#eadaf2;
−
  display: block;
+
border-color:purple;
−
  color: transparent;
 
−
  border-radius: 50%;
 
−
  border: 1px solid #ccc;
 
−
  width: 5rem;
 
−
  height: 5rem;
 
 
}
 
}
−
#user-menu-widget strong a {
+
#post-2210143 h2{
−
  /* Rule extends %heading */
+
display:none;
−
  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 {
+
#post-2210143 h1{
−
  content: "";
+
display:none;
−
  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;
+
/*edit*/
−
  text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6);
+
.cmty-post-edited .cmty-post-edit-info{
 +
display: none;
 
}
 
}
−
#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;
+
#feed-tabs{
 +
display:none;
 
}
 
}
 
</nowiki>
 
</nowiki>

Latest revision as of 15: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; }

Retrieved from "https://artofproblemsolving.com/wiki/index.php?title=User:Sparklyflowers/CSS&oldid=129655"