Difference between revisions of "User:Sparklyflowers/CSS"
Line 1: | Line 1: | ||
− | <nowiki>/** Credits to SirCalcsALot and BM for part of the CSS **/ | + | <nowiki>/*! |
+ | * 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 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 : | + | background-color:white; |
− | border: 5px solid pink | + | border: 5px solid pink; |
+ | padding: 50px, 100px; | ||
} | } | ||
#header{ | #header{ | ||
Line 31: | Line 46: | ||
#header h1{ | #header h1{ | ||
position: absolute; | position: absolute; | ||
− | bottom: | + | bottom: 150px; |
width: 100%; | width: 100%; | ||
text-align:center; | text-align:center; | ||
Line 37: | Line 52: | ||
font-size:40px; | font-size:40px; | ||
transition:0.5s; | transition:0.5s; | ||
+ | z-index: 0; | ||
} | } | ||
#header h1:hover{ | #header h1:hover{ | ||
Line 42: | Line 58: | ||
} | } | ||
div#wrapper{ | div#wrapper{ | ||
− | width: | + | width: 100%; |
height: inherit; | height: inherit; | ||
} | } | ||
div#main { | div#main { | ||
− | width: | + | width: 60%; |
} | } | ||
h1{ | h1{ | ||
Line 111: | Line 127: | ||
font-family:Ink Free; | font-family:Ink Free; | ||
font-size: 20px; | 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; | ||
+ | } | ||
+ | a{ | ||
+ | color: black; | ||
+ | } | ||
+ | div.entry{ | ||
+ | color:black; | ||
} | } | ||
</nowiki> | </nowiki> |
Revision as of 11:21, 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! **/ div .entrywrap, div .entrywrap-hover { background-color:white; border: 5px solid pink; padding: 50px, 100px; } #header{ background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=); 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; } 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{ position: absolute; bottom: 150px; width: 100%; text-align:center; font-family:Ink Free; font-size:40px; transition:0.5s; z-index: 0; } #header h1:hover{ font-size: 60px; } div#wrapper{ width: 100%; height: inherit; } div#main { width: 60%; } h1{ color: purple; font-family: Ink Free; font-weight: bold; } h2, h3, h4, h5, h6, #navigation_box{ font-family: Ink Free; font-weight: bold; } #side{ font-family: Ink Free; } #navigation_box{ background-color: lavender; padding:10px!important; position:fixed; border-bottom:none; height:48px; z-index:!important; } #navigation_box a{ padding:4px!important; font-family:Ink Free; font-size:16px; color: #000; border-bottom: solid 3px purple; transition:.2s; } #navigation_box a:hover{ padding-bottom:7px!important; } #left_navigation_box{ 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{ font-family:Ink Free; font-size: 28px; color: purple; } div.efooter{ font-family:Ink Free; 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; } a{ color: black; } div.entry{ color:black; }