Chandler/Chandler.css

From City of Hope MUSH
Jump to navigation Jump to search

html, body { 

   height: auto;
   min-height: 100%;
   position: relative;

}

  1. 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 ▲";

}

  1. p-logo {
   display: none;

} div#content { 

   margin-left: 0;
   padding: 1.25em 1.5em 1.5em;

}

  1. 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);

}

  1. footer > div:last-child {
   display: none;

} ul#footer-info > li { 

   display: inline-block;

} ul#footer-info > li:first-of-type { 

   padding-right: 1em;

}

  1. catlinks {
   margin: 0 auto;
   width: 990px;

}

  1. catlinks a {
   color: #8f3b1b;

} .catlinks { 

   background-color: #fff5e3;
   border: 1px solid #be937d;
   color: #8f3b1b;

} .catlinks li { 

   border-left: 1px solid #be937d;

}

  1. wrapper {
   height: 100%;
   width: 100%;

}

  1. 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;

}

  1. 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 --*/

  1. 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;

}

  1. 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;

}

  1. Overview a, .tab:target a {
   opacity: 1;

} .panel { 

   display: none;
   height: 350px;
   order: 2;
   overflow: auto;
   padding: .75em 0 1.5em;
   width: 100%;

}

  1. Overview-panel, #Playlist-panel {
   align-items: flex-start;
   flex-flow: row wrap;
   justify-content: space-around;

}

target ~ #Overview-panel {
   display: none;

}

  1. Overview-panel, #Overview:target ~ #Overview-panel,
  2. Playlist:target ~ #Playlist-panel {
   display: flex;

}

  1. Playlist:target ~ #Playlist-panel {
   justify-content: center;

}

  1. Playlist-panel > p {
   font-size: 1.25em;
   font-weight: bold;

}

  1. Desc:target ~ #Desc-panel,
  2. Gallery:target ~ #Gallery-panel,
  3. Diary:target ~ #Diary-panel,
  4. Contacts:target ~ #Contacts-panel {
   display: block;

}

  1. pagecontent hr {
   background-color: transparent;
   border-bottom: 1px dotted #8f3b1b;
   color: transparent;
   height: 1px;
   margin: 0 0 0.5em;
   opacity: 0.5;
   width: 710px;

}

  1. panels > hr {
   order: 2;

}

  1. panels a {
   color: #8f3b1b;

}

  1. info, #stats {
   max-width: 49%;
   min-width: 250px;

}

  1. 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;

}

  1. Desc-panel {
   text-indent: 3em;

}

  1. Playlist-panel li::before {
   color: #493829;
   content: "⚜ ";

}

  1. Gallery-panel > ul {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   margin: 0;
   overflow: hidden;
   padding: 0;

}

  1. Gallery-panel li {
   display: inline-block;
   margin: 2.5em 0;
   position: relative;

}

  1. 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;

}

  1. 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;

}

  1. Contacts-panel > ul {
   align-items: flex-start;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   margin: 0;
   padding: 0 0 3em;

}

  1. 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;

}

  1. 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;

}

  1. Contacts-panel li:hover {
   background-color: #fff5e3;
   position: relative;
   z-index: 10;

}

  1. Contacts-panel img {
   position: relative;
   width: auto;

}

  1. Playlist-panel span {
   display: block;
   text-indent: 3em;

}

  1. Diary-panel {
   overflow-x: hidden;

}

  1. Diary-panel > p {
   margin-left: 5.5em;
   position: relative;
   text-indent: -5.5em;

}

  1. Diary-panel .image, #Diary-panel .feathers {
   display: none;
   position: relative;

}

  1. Diary-panel .image img {
   background-color: #fff5e3;
   border: 3px solid #be937d;
   height: auto;
   left: -50px;
   padding: 1em;
   position: absolute;
   width: 250px;
   z-index: 4;

}

  1. Diary-panel .camera {
   cursor: pointer;
   display: inline-block;
   position: relative;
   text-indent: 0.25em;
   z-index: 20;

}

  1. 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;

}

  1. Diary-panel p .image:nth-of-type(2) img {
   left: 275px;

}

  1. Diary-panel .feathers:first-of-type {
   bottom: -38px;
   left: -70px;
   transform: scale(1, -1);

}

  1. Diary-panel .feathers:nth-of-type(2) {
   bottom: -38px;
   left: 180px;
   transform: scale(-1, -1);

}

  1. Diary-panel .feathers:nth-of-type(3) {
   bottom: -248px;
   left: -70px;

}

  1. Diary-panel .feathers:nth-of-type(4) {
   bottom: -248px;
   left: 180px;
   transform: scale(-1, 1);

}

  1. Diary-panel .feathers:nth-of-type(5) {
   bottom: -38px;
   left: 253px;
   transform: scale(1, -1);

}

  1. Diary-panel .feathers:nth-of-type(6) {
   bottom: -38px;
   left: 504px;
   transform: scale(-1, -1);

}

  1. Diary-panel .feathers:nth-of-type(7) {
   bottom: -248px;
   left: 253px;

}

  1. Diary-panel .feathers:nth-of-type(8) {
   bottom: -248px;
   left: 504px;
   transform: scale(-1, 1);

}

  1. Diary-panel b {
   color: #8f3b1b;

}

  1. Diary-panel p:last-of-type .image img {
   bottom: 2.5em;

}

  1. 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;

}

  1. 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;

}

  1. stats td:nth-child(2) {
   text-align: right;
   width: 100%;

}

Retrieved from "https://cityofhopemush.net/index.php?title=Chandler/Chandler.css&oldid=25250"