Difference between revisions of "User:Sparklyflowers/CSS"

(test)
Line 15: Line 15:
 
/** Credits to SirCalcsALot and BM for part of the CSS **/
 
/** 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! **/
 
/** This sets the background color of your blog posts.  Try changing the color and see what happens! **/
 +
/**This is ALL MY WORK except for the scrollbar (city css), and profile picture (city css)**/
 
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{
 
#header{
Line 24: Line 38:
 
height:200px;
 
height:200px;
 
}
 
}
div .message{
 
font-family: Ink Free;
 
}
 
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 45: Line 48:
 
}
 
}
 
#header h1{
 
#header h1{
position: absolute;
 
 
bottom: 150px;
 
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: 0;
 
 
}
 
}
 
#header h1:hover{
 
#header h1:hover{
Line 64: Line 64:
 
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;
 
}
 
 
 
#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;
 
 
}
 
}
  
 
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 243: Line 214:
 
a.username-coloured{
 
a.username-coloured{
 
color: black;
 
color: black;
}
+
}
a{
 
color: black;
 
}
 
div.entry{
 
color:black;
 
}
 
 
</nowiki>
 
</nowiki>

Revision as of 14:25, 17 July 2020

/*! * City.css 0.5.0 * * Written by NeoMathematicalKid * * Inspired by Air (by asf), Libre (by PythonNut), and Grey (by Tungsten) * * Released under the MIT license (see LICENSE.md) * * 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! **/ /**This is ALL MY WORK except for the scrollbar (city css), and profile picture (city 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-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=); height:200px; } *{ 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; } #header h1{ bottom: 150px; width: 100%; text-align:center; font-size:40px; transition:0.5s; } #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; } #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; } 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#header.shrunken-header{ background-color:white; } div#header{ background-color:white; } div#content{ text-align:center; margin: auto; } #content { position: relative; padding: 5vh 10% 0; margin-top: 72vh; 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; } ::-webkit-scrollbar { background-color: #FFCCCC; height: 0.6rem; } ::-webkit-scrollbar-thumb { background-color: #fff; border: 0.25rem solid #CCCCFF; border-radius: 0.5rem; } ::-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 { background-color: #aaa; } h2{ color: black; font-size: 16px; } a.username-coloured{ color: black; }