User:Felix/Felix.css
< User:Felix
Jump to navigation
Jump to search
Revision as of 02:26, 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.
/*---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;
}
#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;
}
/*---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;
}
}
