Dusk/Dusk.css
html, body {
height: auto; min-height: 100%; position: relative;
}
- left-navigation {
border-left: 1px solid white; left: -2px;
} div#mw-panel {
background: white none repeat scroll 0 0; border-bottom: 1px solid rgba(42, 54, 43, 0.5); border-left: 1px solid rgba(42, 54, 43, 0.5); border-radius: 0 0 10px 10px; border-right: 1px solid rgba(42, 54, 43, 0.5); height: 35em; left: 2px; opacity: 0.5; padding-bottom: 1em; padding-left: 0; padding-right: 1em; position: absolute; top: -35.25em; transition: top 0.5s ease 0s, opacity 0.5s ease 0s !important; width: 10em; z-index: 100;
} div#mw-panel::after {
bottom: 0.5em; color: rgba(42, 54, 43, 0.5); content: "▼ Menu ▼"; display: block; font-size: 0.75em; left: 0; padding-top: 0.5em; position: absolute; text-align: center; width: 100%;
} div#mw-panel:hover {
opacity: 1; top: 0;
} div#mw-panel:hover::after {
border-top: 1px dotted rgba(42, 54, 43, 0.5); content: "▲ Menu ▲";
}
- p-logo {
display: none;
} div#content {
margin-left: 0; padding: 1.25em 1.5em 1.5em;
}
- content, h1, h2 {
background-color: #493829 !important; color: white !important;
} div#footer {
align-items: center; display: flex; flex-flow: row wrap; justify-content: space-between; left: -1px; margin: 0 auto; max-width: 1200px; min-width: 700px; opacity: 0.5; padding: 0 0.5em; position: relative; width: calc(90% - 3em);
}
- footer > div:last-child {
display: none;
} ul#footer-info > li {
display: inline-block;
} ul#footer-info > li:first-of-type {
padding-right: 1em;
}
- wrapper {
height: 100%; width: 100%;
}
- pagecontent {
background: white; border: 4px #be937d solid; color: #493829; height: 600px; margin: 3.5em auto; max-height: 600px; min-height: 600px; min-width: 740px; padding-left: 250px; position: relative; width: 740px;
} .background {
height: 100%; left: 0; position: absolute; top: 0; width: 100%;
} .portrait {
height: 100%; position: absolute; left: 0; width: auto;
}
- pagecontent > p {
margin: 0;
} .mainname {
align-items: center; border-bottom: medium none; color: transparent; display: flex; font-size: 4em; font-weight: bold; height: 2em; justify-content: center; line-height: 0.5em; padding: 0.5em 0; text-align: center; width: 710px;
} /*-- Panels --*/
- panels {
display: flex; flex-flow: row wrap; justify-content: center; position: relative; width: 710px; z-index: 3;
} .tab {
font-weight: bold; margin-top: -15em; order: 1; padding-top: 15em;
}
- Overview{
order: 0;
} .tab a, *:target ~ #Overview a {
display: inline-block; font-size: 1.125em; margin: 0 0.5em 0.5em; opacity: 0.5; padding: 0 1em;
}
- Overview a, .tab:target a {
opacity: 1;
} .panel {
display: none; height: 350px; order: 2; overflow: auto; padding: .75em 0 1.5em; width: 100%;
}
- Overview-panel, #Playlist-panel {
align-items: flex-start; flex-flow: row wrap; justify-content: space-around;
}
- target ~ #Overview-panel {
display: none;
}
- Overview-panel, #Overview:target ~ #Overview-panel,
- Playlist:target ~ #Playlist-panel {
display: flex;
}
- Playlist:target ~ #Playlist-panel {
justify-content: center;
}
- Playlist-panel > p {
font-size: 1.25em; font-weight: bold;
}
- Desc:target ~ #Desc-panel,
- Gallery:target ~ #Gallery-panel,
- Contacts:target ~ #Contacts-panel {
display: block;
}
- pagecontent hr {
background-color: transparent; border-bottom: 1px dotted #8f3b1b; color: transparent; height: 1px; margin: 0 0 0.5em; opacity: 0.5; width: 710px;
}
- panels > hr {
order: 2;
}
- panels a {
color: #8f3b1b;
}
- info, #stats {
max-width: 49%; min-width: 250px;
}
- Playlist-panel > ul {
list-style: none; max-width: 47%; min-width: 47%;
} .header {
border-bottom: 1px dotted #8f3b1b; font-size: 1.25em; font-weight: bold; line-height: 1.75em; text-align: center;
}
- Desc-panel {
text-indent: 3em;
}
- Playlist-panel li::before {
color: #493829; content: "⚜ ";
}
- Gallery-panel > ul {
align-items: center; display: flex; flex-flow: row wrap; height: 100%; justify-content: space-around; margin: 0; overflow: hidden; padding: 0;
}
- Gallery-panel li {
display: inline-block; position: relative;
}
- Gallery-panel .image {
background: rgba(190, 147, 125, 0.25) none repeat scroll 0 0; border: 3px solid #be937d; display: inline-block; padding: 1em;
} .feathers {
position: absolute !important; z-index: 5;
} li > .feathers:first-of-type {
left: -1.75em; top: -2.25em; transform: scale(1, -1);
} li > .feathers:nth-of-type(2), .hovered .feathers:first-of-type {
bottom: -2.25em; left: -1.75em;
} li:hover > .feathers:nth-of-type(2),li:hover > .feathers:last-of-type {
display: none;
} li > .feathers:nth-last-of-type(2) {
right: -1.75em; top: -2.25em; transform: scale(-1, -1);
} li > .feathers:last-of-type, .hovered .feathers:nth-of-type(2) {
bottom: -2.25em; right: -1.75em; transform: scale(-1, 1);
} .name {
display: block; font-weight: bold; padding-bottom: 0.5em; text-align: center;
}
- Contacts-panel > ul {
align-items: flex-start; display: flex; flex-flow: row wrap; justify-content: center; margin: 0; padding: 0 0 3em;
}
- Contacts-panel li {
background-color: rgba(190, 147, 125, 0.25); border: 3px solid #be937d; display: inline-block; margin: 1.5em; padding: 6px 12px 12px; position: relative; text-align: center; width: 152px;
}
- Contacts-panel li > a {
border: 1px solid #be937d; display: block; height: 150px; overflow: hidden; width: 150px;
} .hovered {
background: #fff5e3 none repeat scroll 0 0; border-color: transparent #be937d #be937d; border-image: none; border-radius: 0 0 10px 10px; border-style: none solid solid; border-width: medium 3px 3px; display: none; left: -3px; padding: 0 12px 12px; position: absolute; top: 190px; width: 152px;
} li:hover .hovered {
display: block;
}
- Contacts-panel li:hover {
background-color: #fff5e3; position: relative; z-index: 10;
}
- Contacts-panel img {
position: relative; width: auto;
}
/*-- Tables --*/ th, td {
text-align: left; padding: .25em; vertical-align: top;
}
- stats td:nth-child(2) {
text-align: right; width: 100%;
}
- Playlist-panel span {
display: block; text-indent: 3em;
} .feather {
height: auto; position: absolute; width: 200px; z-index: 10;
} .upperleft {
top: -75px; left: -52px; transform: scale(1, -1);
} .lowerright {
right: -52px; bottom: -75px; transform: scale(-1, 1);
} .upperright {
right: -52px; top: -75px; transform: scale(-1, -1);
} .lowerleft {
left: -52px; bottom: -75px; transform: scale(1, 1);
}
- catlinks {
margin: 0 auto; width: 990px;
}
- catlinks a {
color: #8f3b1b;
} .catlinks {
background-color: #fff5e3; border: 1px solid #be937d; color: #8f3b1b;
} .catlinks li {
border-left: 1px solid #be937d;
}