User:Felix/Felix.css
< User:Felix
Jump to navigation
Jump to search
Revision as of 02:43, 18 January 2017 by imported>Felix
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
#bodyContent { font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; } /*---Header---*/ #header { text-shadow: 1px 1px 3px #461a00, -1px -1px 3px #461a00, -1px 1px 3px #461a00, 1px -1px 3px #461a00; background: -moz-linear-gradient(top, rgba(16,47,69,1) 0%, rgba(16,47,69,0.9) 33%, rgba(16,47,69,0.85) 50%, rgba(16,47,69,0.9) 67%, rgba(16,47,69,1) 100%) !important; background: -webkit-linear-gradient(top, rgba(16,47,69,1) 0%,rgba(16,47,69,0.9) 33%,rgba(16,47,69,0.85) 50%,rgba(16,47,69,0.9) 67%,rgba(16,47,69,1) 100%) !important; background: linear-gradient(to bottom, rgba(16,47,69,1) 0%,rgba(16,47,69,0.9) 33%,rgba(16,47,69,0.85) 50%,rgba(16,47,69,0.9) 67%,rgba(16,47,69,1) 100%) !important; } .headbit { margin: 0 15px; } #glyphs1 .tooltip, #glyphs2 .tooltip { background-color: #c3d2e7; border: 2px solid #461a00; color: #461a00; font-size: 0.75rem; left: 0; line-height: 0.75rem; text-shadow: none; top: 0.45em; } #glyphs2 .tooltip { left: -10px; } #glyphs1 .tooltip::after, #glyphs2 .tooltip::after { border-width: 0; } #glyphs1 > img:last-of-type { left: -5px; position: relative; } #name { white-space: nowrap; } #contents, .header { background: -moz-linear-gradient(top, rgba(195,210,231,1) 0%, rgba(195,210,231,0.8) 33%, rgba(195,210,231,0.65) 50%, rgba(195,210,231,0.8) 67%, rgba(195,210,231,1) 100%) !important; background: -webkit-linear-gradient(top, rgba(195,210,231,1) 0%,rgba(195,210,231,0.8) 33%,rgba(195,210,231,0.65) 50%,rgba(195,210,231,0.8) 67%,rgba(195,210,231,1) 100%) !important; background: linear-gradient(to bottom, rgba(195,210,231,1) 0%,rgba(195,210,231,0.8) 33%,rgba(195,210,231,0.65) 50%,rgba(195,210,231,0.8) 67%,rgba(195,210,231,1) 100%) !important; } #contents li::before { width: 1.75em; } #contents, .stathead { font-size: 1.1em; } #bodyContent a { font-weight: bold; } .header { font-size: 1.25em; } /*---Stats---*/ #statbox .wrapper .tooltip { top: -0.5em !important; } #statbox td:nth-of-type(2) { text-align: right; } .firstrow i { display: block; font-size: 90%; line-height: 1.5em; margin-top: 5px; white-space: normal; width: 60%; } /*---Intro---*/ .para { text-indent: 1.5em; } /*---Hooks---*/ #RP_Hooks+div { margin-left: 1.5em; } #RP_Hooks+div b { color: #102f45; margin-left: -1.5em; } /*---Playlist---*/ #Playlist { color: transparent; } #Playlist + div .plainlinks { display: flex; position: relative; flex-flow: row wrap; } #Playlist + div p { display: block; font-size: 1.25em; font-weight: bold; left: 0; margin: 0; position: absolute; text-align: center; top: -2.125em; width: 100%; } #Playlist + div ul { flex: 1 1 auto; font-size: 90%; list-style: outside none none; margin: 0 0 0 -5px; } #Playlist + div ul:last-of-type { flex: 1 1 0; margin-right: 5px; } #Playlist+div li { white-space: nowrap; margin-left: 10px; } #Playlist+div li::before { content: "■ "; color: #461a00; } /*---Quotes---*/ #Quotes+div { text-align: justify; padding: .5em 1em; } .attr { width:100%; text-align: right; display: block; font-style: italic; } /*---Logs---*/ #Logs + div p { padding-left: 1em; text-indent: -1em; } /*---Gallery/Folks---*/ #Gallery + div ul, #Folks + div ul { align-content: center; align-items: center; display: flex; flex-flow: row wrap; justify-content: center; list-style: outside none none; margin: 0; position: relative; } #Gallery + div li, #Folks + div li { background-color: rgba(195, 210, 231, 0.5); border: 1px solid #461a00; border-radius: 10px; flex: 1 0 auto; margin: 5px; max-width: 22%; min-width: 137px; } #Folks + div li.person { font-size: 90%; height: 140px; max-width: 125px; min-width: 125px; position: relative; width: 125px; } #Folks + div li > a { border: 1px dotted #461000; border-radius: 5px; height: 113px; left: 5px; overflow: hidden; position: relative; top: 5px; width: 113px; } #Folks + div li img { position: absolute; width: auto; } #Gallery+div li:hover, #Folks+div li:hover { transform:scale(2,2); background-color: rgba(195,210,231,1); z-index: 10; } .edge { transform-origin: 75% 50% 0; } #Gallery+div a, #Folks+div a { display: flex; } #Gallery + div li img { border: 1px dotted #461a00; height: auto; margin: 5px auto; min-width: 125px; width: calc(100% - 12px); } .third { max-width: 30% !important; } .caption { font-size: 75%; line-height: 1.25em; margin: 0 5px 5px; font-style: italic; color: #461a00; } .name { display: flex; justify-content: center; margin: 0.125em 0 -5px; } /*---Images---*/ img { border-radius: 5px; } #also { display: block; padding: 5px; text-align: center; } #also img { width: 100%; max-width: 720px; height: auto; } a[href$="FelixGraffiti.jpg"] { display: block; text-align: center; width: 100%; } img[src$="FelixGraffiti.jpg"] { height: auto; max-width: 400px; width: 75%; } img[src$="GPF.jpg"] { border: 1px solid #416000; margin: 4px 0 3px; } #left-3 { padding: 10px; text-align: center; } #left-3 img { border: 1px solid #461a00; } #left { display: flex; flex-flow: column nowrap; } #altimg { align-items: flex-end; display: flex; height: 100%; justify-content: center; border-top: none !important; } #altimg a img { border: 0 none transparent !important; height: auto; opacity: .33; padding-bottom: 0.25em; width: 165px; } #altimg img:hover { opacity: 1; } #left-5 .center { border-top: 1px dotted #102f45; padding-top: 10px; } /*---Descriptions---*/ #descs { display: flex; flex-flow: row wrap; justify-content: center; } .tab { order: 1; margin-top: -4em; padding-top: 4em; } #homid { order: 0; } .tab a, :target ~ #homid a { display: inline-block; padding: 0 1em; margin: 0 .5em .5em; opacity: 0.5; border-bottom: none; } #homid a, .tab:target a { opacity: 1; border-bottom: 1px solid #410000; } #descs a:hover { opacity: 1; text-decoration: none; } .panel { display: none; width: 100%; text-indent: 1.5em; order: 2; } #homid-panel { display: block; } :target ~ #homid-panel { display: none; } #homid:target ~ #homid-panel, #glabro:target ~ #glabro-panel, #crinos:target ~ #crinos-panel, #hispo:target ~ #hispo-panel, #lupus:target ~ #lupus-panel { display: block; } #descs > div > div { text-align: center; text-indent: 0; } /*---Other---*/ #_ { border-top: 1px dotted #102f45; } .header.fauxheader { margin: 5px 0 -6px -6px; width: calc(100% + 12px); } /*---Folks Edge Definition for Different Sizes---*/ @media only screen and (min-width: 1186px) { #Folks + div li.person:nth-of-type(5n) { transform-origin: 75% 50% 0; } } @media only screen and (min-width: 1049px) and (max-width: 1185px) { #Folks + div li.person:nth-of-type(4n) { transform-origin: 75% 50% 0; } } @media only screen and (min-width: 880px) and (max-width: 1048px) { #Folks + div li.person:nth-of-type(3n) { transform-origin: 75% 50% 0; } } @media only screen and (min-width: 743px) and (max-width: 879px) { #Folks + div li.person:nth-of-type(2n) { transform-origin: 75% 50% 0; } } @media only screen and (max-width: 715px) and (max-width: 742px) { #Folks + div li.person:nth-of-type(3n) { transform-origin: 75% 50% 0; } } @media only screen and (max-width: 616px) and (max-width: 714px) { #Folks + div li.person:nth-of-type(2n) { transform-origin: 75% 50% 0; } } @media only screen and (max-width: 615px) { #Folks + div li.person:nth-of-type(n) { transform-origin: 50% 50% 0; } } /*---Small Screens Header---*/ @media only screen and (max-width: 794px) { #header { height: 2em; } #name { order:1; width: 100%; } #glyphs1, #glyphs2 { align-content: center; align-items: center; display: flex; justify-content: center; top: -0.75em; } #glyphs1 { order:2; } #glyphs2 { order:3; } .headbit { margin: 0 !important; position: relative; } #glyphs1 .tooltip, #glyphs2 .tooltip { top: 1.75em; } #altimg { display: none; } }