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"
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<nowiki>/*!
+
<nowiki>/** Made by AoPS User SparklyFlowers**/
−
* City.css 0.5.0
+
 
−
*
+
/**Inspired from City.css (by NeoMathematicalKid)**/
−
* Written by NeoMathematicalKid
+
 
−
*
+
/** Don't use without crediting.**/
−
* Inspired by Air (by asf), Libre (by PythonNut), and Grey (by Tungsten)
+
/** Pastel Dreams 1.0 **/
−
*
+
 
−
* Released under the MIT license (see LICENSE.md)
+
/** Please credit SparklyFlowers and copy-paste the above if you're going to use this css.**/
−
*
 
−
* Copyright 2014 AoPS user NeoMathematicalKid
 
−
*/
 
−
/** I've used a bit of the city css for my profile picture.**/
 
−
/**contact me if I'm not allowed to**/
 
  
−
/** Credits to SirCalcsALot and BM for part of the CSS **/
 
−
/** This sets the background color of your blog posts.  Try changing the color and see what happens! **/
 
 
div .entrywrap, div .entrywrap-hover {
 
div .entrywrap, div .entrywrap-hover {
−
background-color:white;
+
border: 0px solid white;
−
border: 5px solid pink;
+
border-right: 5px solid pink;
−
padding: 50px, 100px;
+
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 44: 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-family:Ink Free;
+
font-size: 40px;
−
font-size:40px;
+
transition: 0.5s;
−
transition:0.5s;
+
z-index: 2;
−
z-index: 0;
+
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 64: Line 69:
 
div#main {
 
div#main {
 
     width: 60%;
 
     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;
−
#left_navigation_box{
+
padding-bottom: 15px!important;
−
color:#000;
 
−
}
 
−
#left_navigation_box a:nth-child(2){
 
−
margin-left:-8px;
 
−
}
 
−
#left_navigation_box a:nth-child(3){
 
−
margin-left:-9px;
 
−
}
 
−
#left_navigation_box a:nth-child(4){
 
−
margin-left:-9px;
 
−
}
 
−
#right_navigation_box{
 
−
color:#fff;
 
−
}
 
−
#right_navigation_box a:nth-child(1){
 
−
margin-right:-5px;
 
−
}
 
−
#right_navigation_box a:nth-child(2){
 
−
margin-right:-6px;
 
 
}
 
}
  
 +
/**comments and footer**/
 
a.blog-post-comment{
 
a.blog-post-comment{
−
font-family:Ink Free;
 
 
font-size: 28px;
 
font-size: 28px;
 
color: purple;
 
color: purple;
 
}
 
}
 
div.efooter{
 
div.efooter{
−
font-family:Ink Free;
 
 
font-size: 20px;
 
font-size: 20px;
 
}
 
}
Line 135: 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 151: Line 125:
 
margin-top: 72vh;
 
margin-top: 72vh;
 
background-color:white;
 
background-color:white;
−
}
 
−
#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%;
 
−
  z-index: 1;
 
−
}
 
−
#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;
 
−
}
 
−
.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 243: Line 156:
 
a.username-coloured{
 
a.username-coloured{
 
color: black;
 
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;
 
}
 
}
−
a{
+
 
−
color: black;
+
/*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.entry{
+
 
−
color:black;
+
#feed-tabs{
 +
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; }

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