Difference between revisions of "User:Sparklyflowers/CSS"
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | <nowiki>/** | + | <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: 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= | + | 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; | 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: | + | position: fixed; |
− | |||
width: 100%; | width: 100%; | ||
− | text-align:center | + | text-align: center; |
− | + | 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: | + | width: 100%; |
height: inherit; | height: inherit; | ||
} | } | ||
div#main { | div#main { | ||
− | width: | + | width: 60%; |
+ | |||
} | } | ||
h1{ | h1{ | ||
color: purple; | color: purple; | ||
− | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
h2, h3, h4, h5, h6, #navigation_box{ | h2, h3, h4, h5, h6, #navigation_box{ | ||
− | |||
font-weight: bold; | font-weight: bold; | ||
− | |||
− | |||
− | |||
} | } | ||
+ | /**nagivation box**/ | ||
#navigation_box{ | #navigation_box{ | ||
background-color: lavender; | background-color: lavender; | ||
− | padding:10px | + | padding:10px; |
position:fixed; | position:fixed; | ||
border-bottom:none; | border-bottom:none; | ||
height:48px; | height:48px; | ||
− | |||
} | } | ||
#navigation_box a{ | #navigation_box a{ | ||
padding:4px!important; | padding:4px!important; | ||
− | |||
font-size:16px; | font-size:16px; | ||
− | color: | + | color:black; |
− | |||
transition:.2s; | transition:.2s; | ||
} | } | ||
#navigation_box a:hover{ | #navigation_box a:hover{ | ||
− | padding-bottom: | + | border-top: 5px solid purple; |
+ | background-color: #f5dbff; | ||
+ | padding-bottom: 15px!important; | ||
} | } | ||
− | + | ||
− | color: | + | /**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 { |
− | margin- | + | position: relative; |
+ | padding: 5vh 10% 0; | ||
+ | margin-top: 72vh; | ||
+ | background-color:white; | ||
} | } | ||
− | + | ||
− | + | /**scrollbar**/ | |
+ | /* width */ | ||
+ | ::-webkit-scrollbar { | ||
+ | width: 13px; | ||
} | } | ||
− | a. | + | /* Track */ |
− | + | ::-webkit-scrollbar-track { | |
− | + | 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; | ||
} | } | ||
− | + | ||
− | + | #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; }