Difference between revisions of "Dusk/Dusk.css"
imported>Felix |
imported>Felix |
||
(5 intermediate revisions by the same user not shown) | |||
Line 79: | Line 79: | ||
ul#footer-info > li:first-of-type { | ul#footer-info > li:first-of-type { | ||
padding-right: 1em; | padding-right: 1em; | ||
+ | } | ||
+ | #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; | ||
} | } | ||
#wrapper { | #wrapper { | ||
Line 183: | Line 198: | ||
} | } | ||
#Desc:target ~ #Desc-panel, | #Desc:target ~ #Desc-panel, | ||
− | #Gallery:target ~ #Gallery-panel, | + | #Gallery:target ~ #Gallery-panel, |
+ | #Diary:target ~ #Diary-panel, | ||
#Contacts:target ~ #Contacts-panel { | #Contacts:target ~ #Contacts-panel { | ||
display: block; | display: block; | ||
Line 229: | Line 245: | ||
display: flex; | display: flex; | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
− | |||
justify-content: space-around; | justify-content: space-around; | ||
margin: 0; | margin: 0; | ||
Line 237: | Line 252: | ||
#Gallery-panel li { | #Gallery-panel li { | ||
display: inline-block; | display: inline-block; | ||
+ | margin: 2.5em 0; | ||
position: relative; | position: relative; | ||
} | } | ||
Line 328: | Line 344: | ||
width: auto; | width: auto; | ||
} | } | ||
− | + | #Playlist-panel span { | |
− | + | display: block; | |
− | + | text-indent: 3em; | |
− | + | } | |
− | padding: | + | #Diary-panel { |
− | + | overflow-x: hidden; | |
+ | } | ||
+ | #Diary-panel > p { | ||
+ | margin-left: 5.5em; | ||
+ | position: relative; | ||
+ | text-indent: -5.5em; | ||
+ | } | ||
+ | #Diary-panel .image, #Diary-panel .feathers { | ||
+ | display: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | #Diary-panel .image img { | ||
+ | background-color: #fff5e3; | ||
+ | border: 3px solid #be937d; | ||
+ | height: auto; | ||
+ | left: -50px; | ||
+ | padding: 1em; | ||
+ | position: absolute; | ||
+ | width: 250px; | ||
+ | z-index: 4; | ||
} | } | ||
− | # | + | #Diary-panel .camera { |
− | text- | + | cursor: pointer; |
− | + | display: inline-block; | |
+ | position: relative; | ||
+ | text-indent: 0.25em; | ||
+ | z-index: 20; | ||
} | } | ||
− | # | + | #Diary-panel .camera:hover ~ .image, #Diary-panel .image:hover, #Diary-panel .image:hover ~ .image, #Diary-panel .camera:hover ~ .feathers, #Diary-panel .image:hover ~ .feathers { |
display: block; | display: block; | ||
− | + | } | |
+ | #Diary-panel p .image:nth-of-type(2) img { | ||
+ | left: 275px; | ||
+ | } | ||
+ | #Diary-panel .feathers:first-of-type { | ||
+ | bottom: -38px; | ||
+ | left: -70px; | ||
+ | transform: scale(1, -1); | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(2) { | ||
+ | bottom: -38px; | ||
+ | left: 180px; | ||
+ | transform: scale(-1, -1); | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(3) { | ||
+ | bottom: -248px; | ||
+ | left: -70px; | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(4) { | ||
+ | bottom: -248px; | ||
+ | left: 180px; | ||
+ | transform: scale(-1, 1); | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(5) { | ||
+ | bottom: -38px; | ||
+ | left: 253px; | ||
+ | transform: scale(1, -1); | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(6) { | ||
+ | bottom: -38px; | ||
+ | left: 504px; | ||
+ | transform: scale(-1, -1); | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(7) { | ||
+ | bottom: -248px; | ||
+ | left: 253px; | ||
+ | } | ||
+ | #Diary-panel .feathers:nth-of-type(8) { | ||
+ | bottom: -248px; | ||
+ | left: 504px; | ||
+ | transform: scale(-1, 1); | ||
+ | } | ||
+ | #Diary-panel b { | ||
+ | color: #8f3b1b; | ||
+ | } | ||
+ | #Diary-panel p:last-of-type .image img { | ||
+ | bottom: 2.5em; | ||
+ | } | ||
+ | #Diary-panel p:last-of-type .feathers:first-of-type, #Diary-panel p:last-of-type .feathers:nth-of-type(2), #Diary-panel p:last-of-type .feathers:nth-of-type(5), #Diary-panel p:last-of-type .feathers:nth-of-type(6) { | ||
+ | bottom: 212px; | ||
+ | } | ||
+ | #Diary-panel p:last-of-type .feathers:nth-of-type(3), #Diary-panel p:last-of-type .feathers:nth-of-type(4), #Diary-panel p:last-of-type .feathers:nth-of-type(7), #Diary-panel p:last-of-type .feathers:last-of-type { | ||
+ | bottom: 5px; | ||
} | } | ||
.feather { | .feather { | ||
Line 369: | Line 459: | ||
transform: scale(1, 1); | transform: scale(1, 1); | ||
} | } | ||
− | + | /*-- Tables --*/ | |
− | + | th, td { | |
− | + | text-align: left; | |
+ | padding: .25em; | ||
+ | vertical-align: top; | ||
} | } | ||
− | # | + | #stats td:nth-child(2) { |
− | + | text-align: right; | |
− | + | width: 100%; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } |
Latest revision as of 19:48, 12 May 2017
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;
}
- 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;
}
- 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,
- Diary:target ~ #Diary-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; justify-content: space-around; margin: 0; overflow: hidden; padding: 0;
}
- Gallery-panel li {
display: inline-block; margin: 2.5em 0; 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;
}
- Contacts-panel li:hover > .feathers:nth-of-type(2), #Contacts-panel 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;
}
- Playlist-panel span {
display: block; text-indent: 3em;
}
- Diary-panel {
overflow-x: hidden;
}
- Diary-panel > p {
margin-left: 5.5em; position: relative; text-indent: -5.5em;
}
- Diary-panel .image, #Diary-panel .feathers {
display: none; position: relative;
}
- Diary-panel .image img {
background-color: #fff5e3; border: 3px solid #be937d; height: auto; left: -50px; padding: 1em; position: absolute; width: 250px; z-index: 4;
}
- Diary-panel .camera {
cursor: pointer; display: inline-block; position: relative; text-indent: 0.25em; z-index: 20;
}
- Diary-panel .camera:hover ~ .image, #Diary-panel .image:hover, #Diary-panel .image:hover ~ .image, #Diary-panel .camera:hover ~ .feathers, #Diary-panel .image:hover ~ .feathers {
display: block;
}
- Diary-panel p .image:nth-of-type(2) img {
left: 275px;
}
- Diary-panel .feathers:first-of-type {
bottom: -38px; left: -70px; transform: scale(1, -1);
}
- Diary-panel .feathers:nth-of-type(2) {
bottom: -38px; left: 180px; transform: scale(-1, -1);
}
- Diary-panel .feathers:nth-of-type(3) {
bottom: -248px; left: -70px;
}
- Diary-panel .feathers:nth-of-type(4) {
bottom: -248px; left: 180px; transform: scale(-1, 1);
}
- Diary-panel .feathers:nth-of-type(5) {
bottom: -38px; left: 253px; transform: scale(1, -1);
}
- Diary-panel .feathers:nth-of-type(6) {
bottom: -38px; left: 504px; transform: scale(-1, -1);
}
- Diary-panel .feathers:nth-of-type(7) {
bottom: -248px; left: 253px;
}
- Diary-panel .feathers:nth-of-type(8) {
bottom: -248px; left: 504px; transform: scale(-1, 1);
}
- Diary-panel b {
color: #8f3b1b;
}
- Diary-panel p:last-of-type .image img {
bottom: 2.5em;
}
- Diary-panel p:last-of-type .feathers:first-of-type, #Diary-panel p:last-of-type .feathers:nth-of-type(2), #Diary-panel p:last-of-type .feathers:nth-of-type(5), #Diary-panel p:last-of-type .feathers:nth-of-type(6) {
bottom: 212px;
}
- Diary-panel p:last-of-type .feathers:nth-of-type(3), #Diary-panel p:last-of-type .feathers:nth-of-type(4), #Diary-panel p:last-of-type .feathers:nth-of-type(7), #Diary-panel p:last-of-type .feathers:last-of-type {
bottom: 5px;
} .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);
} /*-- Tables --*/ th, td {
text-align: left; padding: .25em; vertical-align: top;
}
- stats td:nth-child(2) {
text-align: right; width: 100%;
}