Entropia:Sandkasten:GPN16 test:Stylesheet: Unterschied zwischen den Versionen

aus dem Wiki des Entropia e.V., CCC Karlsruhe
(Die Seite wurde neu angelegt: „@-webkit-keyframes fadeIcon { 0% { opacity:0;} 40% { opacity:0;} 50% { opacity:1;} 60% { opacity:0;} 100% { opacity:0;} } @-moz-keyfra…“)
 
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
@-webkit-keyframes fadeIcon {
  /*
     0%   { opacity:0;}
    * GPN15 Stylesheet
     40%  { opacity:0;}
    *
     50%  { opacity:1;}
    * https://github.com/entropia/gpn15-design/wiki/
     60%  { opacity:0;}
    */
     100% { opacity:0;}
  @font-face {
}
    font-family: "YanoneKaffeesatz-Regular";
@-moz-keyframes fadeIcon {
    src: url("/gulasch/fonts/YanoneKaffeesatz-Regular.ttf");
     0%   { opacity:0;}
  }
     40%  { opacity:0;}
  @font-face {
     50%  { opacity:1;}
     font-family: "YanoneKaffeesatz-Thin";
     60%  { opacity:0;}
    src: url("/gulasch/fonts/YanoneKaffeesatz-Thin.ttf");
     100% { opacity:0;}
  }
}
   @font-face {
@keyframes fadeIcon {
    font-family: "YanoneKaffeesatz-Bold";
     0%   { opacity:0;}
    src: url("/gulasch/fonts/YanoneKaffeesatz-Bold.ttf");
     40%  { opacity:0;}
  }
     50%  { opacity:1;}
  @font-face {
     60%  { opacity:0;}
    font-family: "YanoneKaffeesatz-Light";
     100% { opacity:0;}
     src: url("/gulasch/fonts/YanoneKaffeesatz-Light.ttf");
}
  }
 
  /*
div.NavFrame div.NavPic div.icon {
  * === Decorations (Header, Logo, Sidebar, Footer, and everything in them) ===
   -webkit-animation:fadeIcon linear infinite;
  */
  -moz-animation:fadeIcon linear infinite;
  div#p-logo.portlet a,
   animation:fadeIcon linear infinite;
  div#p-logo.portlet a:hover {
 
    background-image: url("/gulasch/imgs/wikilogo.png") !important;
   -webkit-animation-duration:4s;
    display: block;
   -moz-animation-duration:4s;
    height: 110px;
   animation-duration:4s;
    width: 160px;
}
  }
 
  div#column-one div a img {
div.NavFrame div.NavPic div.icon:nth-child(1n+0) {
     display: none;
     -webkit-animation-delay: 0s;
  }
     animation-delay: 0s;
  div#p-logo.portlet {
     background: url('/images/1/10/GPN16-Logo1_smal.svg') no-repeat left top;
    background-image: url("/gulasch/imgs/topbar.png") !important;
}
    background-repeat: repeat-x;
div.NavFrame div.NavPic div.icon:nth-child(2n+0) {
     background-color: transparent;
     -webkit-animation-delay: 1s;
  }
     animation-delay: 1s;
  /*
     background: url('/images/b/ba/GPN16-Logo2_smal.svg') no-repeat left top;
  // Sidebar
}
  #column-content
div.NavFrame div.NavPic div.icon:nth-child(3n+0) {
     background-color sidebarBgColor
     -webkit-animation-delay: 2s;
  */
     animation-delay: 2s;
  .pBody {
    background: url('/images/2/2c/GPN16-Logo3_smal.svg') no-repeat left top;
    background-color: transparent;
}
  }
div.NavFrame div.NavPic div.icon:nth-child(4n+0) {
  #p-navigation a,
     -webkit-animation-delay: 3s;
  #p-portlet2 a,
    animation-delay: 3s;
  #p-portlet3 a,
    background: url('/images/e/ef/GPN16-Logo4_smal.svg') no-repeat left top;
  #p-search a,
}
  #p-tb a,
 
  #p-fnord a {
div.NavFrame div.NavPic {
     color: #000;
        background-color: #1486cc;
  }
        background-image: url('/images/0/00/GPN16-Background_smal.svg');
   #searchInput {
        height: 80px;
    color: #000;
        width: 80px;
    background-color: #bed7e6;
}
    outline: none;
div.NavFrame div.NavPic div.icon {
    border: 1px solid #91bbd4;
        position: absolute;
    padding: 2px 2px;
        opacity: 0;
  }
        height: 80px;
  #searchform input[name="go"],
        width: 80px;
  #searchform input[name="fulltext"] {
        background-size: 100% auto;
     outline: 0;
}
     color: #000;
    background-color: #c4dbe9;
     border: 1px solid #91bbd4;
  }
  #searchform {
     margin-bottom: 8px;
  }
  #p-search {
     margin: 0;
  }
  div#footer,
  body,
   div#globalWrapper {
    background-color: #bed7e6;
  }
  div#footer {
     border-top: none;
     border-bottom: none;
  }
  #footer li {
     color: #b8e3ef;
     margin: 0.2em !important;
  }
  div#footer li a,
  div#footer li a:link,
  div#footer li a:active,
  div#footer li a:visited {
    color: #639fc3;
  }
  div#footer li[id="viewcount"]:after {
    content: " ";
    display: block;
  }
   #column-one {
    background: #bed7e6;
    background-image: url("/gulasch/imgs/sidebar.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
   }
  #p-navigation ul li,
  #p-portlet2 ul li,
  #p-portlet3 ul li,
  #p-search ul li,
  #p-tb ul li,
  #p-fnord ul li {
    border-bottom: 1px solid #639fc3;
  }
   /*
  * === Content box (and tabs) ===
  */
  li#ca-nstab-main,
  li#ca-nstab-main ~ li {
    background: none;
   }
  #p-cactions ul li a,
  #p-cactions ul li a:link,
  #p-cactions ul li a:active,
  #p-cactions ul li a:visited,
  #p-cactions ul li a:hover,
   color black {
    background-color: #c4dbe9;
    border: 1px solid #91bbd4;
  }
  #p-cactions ul li a:hover {
    background-color: #cbdfeb;
  }
  #p-cactions ul li a:active {
     background-color: #d2e3ee;
  }
  /*
  * === Content box ===
  */
  .mw-body-primary {
    border: none !important;
     border-left: 1px solid #639fc3 !important;
  }
  div#content /* background of everything below header,
  incl. sidebar */ {
     background-color: #bed7e6;
  /* empty space between header/navbar/footer and content box */
    color: #000;
  /* main text color */
    padding-right: 0;
  /* content box meets right screen border */
  }
  div#content h1#firstHeading {
    background-color: #e1ebf1;
    border-left: 1px solid #cbdfeb;
    border-top: 1px solid #cbdfeb;
  /* Bottom joins div#bodyContent*/
    padding: 0.3em 0.3em 0;
    margin-bottom: 0;
  }
  div#bodyContent {
    background-color: #e1ebf1;
    border-left: 1px solid #cbdfeb;
  /* Top joins h1#firstHeading */
    margin-top: 0;
  }
  /*
  * Content
  */
  h1,
  h2 {
     font-family: YanoneKaffeesatz-Regular, sans-serif;
  }
  h1#firstHeading {
    font-size: 22pt;
    font-family: YanoneKaffeesatz-Light, sans-serif;
  }
  h2 {
     font-size: 18pt;
  }
  /* Table of contents */
  #toc,
  .toc,
  .mw-warning {
     background-color: rgba(255,255,255,0);
  }
  /* Code blocks */
  div#mw-content-text pre {
    background-color: rgba(255,255,255,0.25);
    overflow: auto;
  /* "GPN15: Anfahrt": adress pre would overflow onto floating image. auto => offer scrollbar instead. */
  }
  /* Thumbnails */
  html .thumbimage {
    border: none;
  }
  /* Linkbox am Artikelende */
  div.NavHead,
  .catlinks {
    background-color: rgba(255,255,255,0);
  }
  /* Bullet point lists */
  div#content ul {
     list-style: none;
  }
  div#content ul li {
     text-indent: -1em;
  }
  div#content ul li:before /* hack to change color of bullet point */ {
    content: "\25fe  ";
    color: #1a6175;
  }
  li.gallerybox,
  li.toclevel-1,
  li.toclevel-2,
  li.toclevel-3,
  li.toclevel-4,
  li.toclevel-5,
  li.toclevel-6,
  div.mw-normal-catlinks li /* revert these changes for the toc and category link box */ {
     text-indent: 0 !important;
  }
  li.gallerybox:before,
  li.toclevel-1:before,
  li.toclevel-2:before,
  li.toclevel-3:before,
  li.toclevel-4:before,
  li.toclevel-5:before,
  li.toclevel-6:before,
  div.mw-normal-catlinks li:before /* revert these changes for the toc and category link box */ {
    content: none !important;
  }
  /*
  * Links
  */
  div#content a,
  div#content a:link,
  div#content a:active {
    text-decoration: underline;
    color: #207a92;
  }
  div#content a:visited {
    text-decoration: underline;
    color: #175769;
  }
  div#content a:new {
    text-decoration: underline;
    color: #cb4d4d;
  }
  div#content a:hover {
    text-decoration: none;
  }
  div#mw-content-text pre a,
  div#mw-content-text pre a:link,
  div#mw-content-text pre a:active,
  div#mw-content-text pre a:visited {
    color: #101010;
  }
  div#content table.highlight {
    background-color: #f1f3f4;
    border: solid 1px #99b3ff;
    margin: 1em;
    margin-top: 2em;
    padding: 0.3em 1em;
    font-size: 150%;
  }
  div#content td.highlight {
    padding-right: 1.5em;
  }
  a.new {
    text-decoration: underline !important;
    color: #e05252 !important;
  }

Version vom 19. April 2016, 17:38 Uhr

 /*
   * GPN15 Stylesheet
   *
   * https://github.com/entropia/gpn15-design/wiki/
   */
 @font-face {
   font-family: "YanoneKaffeesatz-Regular";
   src: url("/gulasch/fonts/YanoneKaffeesatz-Regular.ttf");
 }
 @font-face {
   font-family: "YanoneKaffeesatz-Thin";
   src: url("/gulasch/fonts/YanoneKaffeesatz-Thin.ttf");
 }
 @font-face {
   font-family: "YanoneKaffeesatz-Bold";
   src: url("/gulasch/fonts/YanoneKaffeesatz-Bold.ttf");
 }
 @font-face {
   font-family: "YanoneKaffeesatz-Light";
   src: url("/gulasch/fonts/YanoneKaffeesatz-Light.ttf");
 }
 /*
  * === Decorations (Header, Logo, Sidebar, Footer, and everything in them) ===
  */
 div#p-logo.portlet a,
 div#p-logo.portlet a:hover {
   background-image: url("/gulasch/imgs/wikilogo.png") !important;
   display: block;
   height: 110px;
   width: 160px;
 }
 div#column-one div a img {
   display: none;
 }
 div#p-logo.portlet {
   background-image: url("/gulasch/imgs/topbar.png") !important;
   background-repeat: repeat-x;
   background-color: transparent;
 }
 /*
 // Sidebar
 #column-content
   background-color sidebarBgColor
 */
 .pBody {
   background-color: transparent;
 }
 #p-navigation a,
 #p-portlet2 a,
 #p-portlet3 a,
 #p-search a,
 #p-tb a,
 #p-fnord a {
   color: #000;
 }
 #searchInput {
   color: #000;
   background-color: #bed7e6;
   outline: none;
   border: 1px solid #91bbd4;
   padding: 2px 2px;
 }
 #searchform input[name="go"],
 #searchform input[name="fulltext"] {
   outline: 0;
   color: #000;
   background-color: #c4dbe9;
   border: 1px solid #91bbd4;
 }
 #searchform {
   margin-bottom: 8px;
 }
 #p-search {
   margin: 0;
 }
 div#footer,
 body,
 div#globalWrapper {
   background-color: #bed7e6;
 }
 div#footer {
   border-top: none;
   border-bottom: none;
 }
 #footer li {
   color: #b8e3ef;
   margin: 0.2em !important;
 }
 div#footer li a,
 div#footer li a:link,
 div#footer li a:active,
 div#footer li a:visited {
   color: #639fc3;
 }
 div#footer li[id="viewcount"]:after {
   content: " ";
   display: block;
 }
 #column-one {
   background: #bed7e6;
   background-image: url("/gulasch/imgs/sidebar.png");
   background-position: 0px 0px;
   background-repeat: no-repeat;
 }
 #p-navigation ul li,
 #p-portlet2 ul li,
 #p-portlet3 ul li,
 #p-search ul li,
 #p-tb ul li,
 #p-fnord ul li {
   border-bottom: 1px solid #639fc3;
 }
 /*
  * === Content box (and tabs) ===
  */
 li#ca-nstab-main,
 li#ca-nstab-main ~ li {
   background: none;
 }
 #p-cactions ul li a,
 #p-cactions ul li a:link,
 #p-cactions ul li a:active,
 #p-cactions ul li a:visited,
 #p-cactions ul li a:hover,
 color black {
   background-color: #c4dbe9;
   border: 1px solid #91bbd4;
 }
 #p-cactions ul li a:hover {
   background-color: #cbdfeb;
 }
 #p-cactions ul li a:active {
   background-color: #d2e3ee;
 }
 /*
  * === Content box ===
  */
 .mw-body-primary {
   border: none !important;
   border-left: 1px solid #639fc3 !important;
 }
 div#content /* background of everything below header,
 incl. sidebar */ {
   background-color: #bed7e6;
 /* empty space between header/navbar/footer and content box */
   color: #000;
 /* main text color */
   padding-right: 0;
 /* content box meets right screen border */
 }
 div#content h1#firstHeading {
   background-color: #e1ebf1;
   border-left: 1px solid #cbdfeb;
   border-top: 1px solid #cbdfeb;
 /* Bottom joins div#bodyContent*/
   padding: 0.3em 0.3em 0;
   margin-bottom: 0;
 }
 div#bodyContent {
   background-color: #e1ebf1;
   border-left: 1px solid #cbdfeb;
 /* Top joins h1#firstHeading */
   margin-top: 0;
 }
 /*
  * Content
  */
 h1,
 h2 {
   font-family: YanoneKaffeesatz-Regular, sans-serif;
 }
 h1#firstHeading {
   font-size: 22pt;
   font-family: YanoneKaffeesatz-Light, sans-serif;
 }
 h2 {
   font-size: 18pt;
 }
 /* Table of contents */
 #toc,
 .toc,
 .mw-warning {
   background-color: rgba(255,255,255,0);
 }
 /* Code blocks */
 div#mw-content-text pre {
   background-color: rgba(255,255,255,0.25);
   overflow: auto;
 /* "GPN15: Anfahrt": adress pre would overflow onto floating image. auto => offer scrollbar instead. */
 }
 /* Thumbnails */
 html .thumbimage {
   border: none;
 }
 /* Linkbox am Artikelende */
 div.NavHead,
 .catlinks {
   background-color: rgba(255,255,255,0);
 }
 /* Bullet point lists */
 div#content ul {
   list-style: none;
 }
 div#content ul li {
   text-indent: -1em;
 }
 div#content ul li:before /* hack to change color of bullet point */ {
   content: "\25fe  ";
   color: #1a6175;
 }
 li.gallerybox,
 li.toclevel-1,
 li.toclevel-2,
 li.toclevel-3,
 li.toclevel-4,
 li.toclevel-5,
 li.toclevel-6,
 div.mw-normal-catlinks li /* revert these changes for the toc and category link box */ {
   text-indent: 0 !important;
 }
 li.gallerybox:before,
 li.toclevel-1:before,
 li.toclevel-2:before,
 li.toclevel-3:before,
 li.toclevel-4:before,
 li.toclevel-5:before,
 li.toclevel-6:before,
 div.mw-normal-catlinks li:before /* revert these changes for the toc and category link box */ {
   content: none !important;
 }
 /*
  * Links
  */
 div#content a,
 div#content a:link,
 div#content a:active {
   text-decoration: underline;
   color: #207a92;
 }
 div#content a:visited {
   text-decoration: underline;
   color: #175769;
 }
 div#content a:new {
   text-decoration: underline;
   color: #cb4d4d;
 }
 div#content a:hover {
   text-decoration: none;
 }
 div#mw-content-text pre a,
 div#mw-content-text pre a:link,
 div#mw-content-text pre a:active,
 div#mw-content-text pre a:visited {
   color: #101010;
 }
 div#content table.highlight {
   background-color: #f1f3f4;
   border: solid 1px #99b3ff;
   margin: 1em;
   margin-top: 2em;
   padding: 0.3em 1em;
   font-size: 150%;
 }
 div#content td.highlight {
   padding-right: 1.5em;
 }
 a.new {
   text-decoration: underline !important;
   color: #e05252 !important;
 }