GPN14:Stylesheet: Unterschied zwischen den Versionen

aus dem Wiki des Entropia e.V., CCC Karlsruhe
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 17: Zeile 17:
     *  hsl(193, 64%, 53%);
     *  hsl(193, 64%, 53%);
     */
     */
 
 
   @font-face {
   @font-face {
     font-family: "Loxica";
     font-family: "Loxica";
     src: url("/gulasch/v5loxicar.ttf");
     src: url("/gulasch/v5loxicar.ttf");
   }
   }
 
 
 
 
   /*
   /*
   * Screen only
   * Screen only
   */
   */
   @media screen {
   @media screen {
 
 
 
 
   /*
   /*
   * Header, Sidebar, Footer
   * Header, Sidebar, Footer
   */
   */
 
 
   #column-one,
   #column-one,
   #column-content {
   #column-content {
     background-color: hsl(193, 64%, 43%);
     background-color: hsl(193, 64%, 43%);
   }
   }
 
 
   .pBody {
   .pBody {
     background-color: hsl(193, 64%, 43%);
     background-color: hsl(193, 64%, 43%);
   }
   }
 
 
   #p-navigation a, #p-portlet2 a, #p-portlet3 a, #p-search a, #p-tb a, #p-fnord a {
   #p-navigation a, #p-portlet2 a, #p-portlet3 a, #p-search a, #p-tb a, #p-fnord a {
     color: hsl(193, 64%, 95%);
     color: hsl(193, 64%, 95%);
   }
   }
 
 
   #p-logo {
   #p-logo {
     background-color: hsl(193, 64%, 23%);
     background-color: hsl(193, 64%, 23%);
   }
   }
 
 
   div#globalWrapper {
   div#globalWrapper {
     background-color: hsl(193, 64%, 43%);
     background-color: hsl(193, 64%, 43%);
   }
   }
 
 
   div#footer {
   div#footer {
     background-color: hsl(193, 64%, 23%);
     background-color: hsl(193, 64%, 23%);
Zeile 60: Zeile 60:
     border-bottom: none;
     border-bottom: none;
   }
   }
 
 
   /* Hide banner1 ("There is no fork.") -- wtf?! */
   /* Hide banner1 ("There is no fork.") -- wtf?! */
   div#p-tb + div.generated-sidebar.portlet {
   div#p-tb + div.generated-sidebar.portlet {
     display: none !important;
     display: none !important;
   }
   }
 
 
   #p-navigation ul li,
   #p-navigation ul li,
   #p-portlet2 ul li,
   #p-portlet2 ul li,
Zeile 74: Zeile 74:
     border-bottom: 1px solid hsl(193, 64%, 53%);
     border-bottom: 1px solid hsl(193, 64%, 53%);
   }
   }
 
 
   /* Search box */
   /* Search box */
   #searchInput {
   #searchInput {
Zeile 82: Zeile 82:
     padding: 2px 2px;  
     padding: 2px 2px;  
   }
   }
 
 
   #searchBody input[type="submit"],
   #searchBody input[type="submit"],
   #searchBody input[type="submit"] {
   #searchBody input[type="submit"] {
Zeile 88: Zeile 88:
     border: solid 1px hsl(193, 10%, 63%);
     border: solid 1px hsl(193, 10%, 63%);
   }
   }
 
 
   #searchBody {
   #searchBody {
     margin-bottom: 1em;
     margin-bottom: 1em;
   }
   }
 
 
 
 
   /*
   /*
   * Article/Discussion/Edit... tabs
   * Article/Discussion/Edit... tabs
   */
   */
 
 
   /* bugfix: they were overflowing at the bottom side */
   /* bugfix: they were overflowing at the bottom side */
   li#ca-nstab-main,
   li#ca-nstab-main,
Zeile 103: Zeile 103:
     background: none;
     background: none;
   }
   }
 
 
 
 
   /*
   /*
   * Page content box
   * Page content box
   */
   */
 
 
   .mw-body-primary {
   .mw-body-primary {
     border: none !important; /* border to header/navbar/footer */
     border: none !important; /* border to header/navbar/footer */
     border-left: 1px solid hsl(193, 64%, 53%) !important;
     border-left: 1px solid hsl(193, 64%, 53%) !important;
   }
   }
 
 
   div#content { /* background of everything below header, incl. sidebar */
   div#content { /* background of everything below header, incl. sidebar */
     background-color: hsl(193, 64%, 43%); /* empty space between header/navbar/footer and content box */
     background-color: hsl(193, 64%, 43%); /* empty space between header/navbar/footer and content box */
     color:            black; /* main text color */
     color:            black; /* main text color */
 
 
     padding-right: 0; /* content box meets right screen border */
     padding-right: 0; /* content box meets right screen border */
 
 
     background-image: url("/wiki/images/3/3f/GPN14-Logo-only.png");
     background-image: url("/wiki/images/3/3f/GPN14-Logo-only.png");
     background-repeat: no-repeat;
     background-repeat: no-repeat;
Zeile 126: Zeile 126:
     background-position: 1em 1em;
     background-position: 1em 1em;
   }
   }
 
 
   div#content h1#firstHeading {
   div#content h1#firstHeading {
     background-color: hsla(193, 64%, 93%, 0.94);
     background-color: hsla(193, 64%, 93%, 0.94);
Zeile 132: Zeile 132:
     border-top: 1px solid hsl(193, 64%, 50%);
     border-top: 1px solid hsl(193, 64%, 50%);
     border-radius: 5px;
     border-radius: 5px;
 
 
     /* Bottom joins div#bodyContent*/
     /* Bottom joins div#bodyContent*/
     border-radius: 5px 0px 0px 0px;
     border-radius: 5px 0px 0px 0px;
Zeile 138: Zeile 138:
     margin-bottom: 0;
     margin-bottom: 0;
   }
   }
 
 
   div#bodyContent {
   div#bodyContent {
     background-color: hsla(193, 64%, 93%, 0.94);
     background-color: hsla(193, 64%, 93%, 0.94);
     border-left: 1px solid hsl(193, 64%, 50%);
     border-left: 1px solid hsl(193, 64%, 50%);
 
 
     /* Top joins h1#firstHeading */
     /* Top joins h1#firstHeading */
     margin-top: 0;
     margin-top: 0;
     border-radius: 0px 0px 5px 5px;
     border-radius: 0px 0px 5px 5px;
   }
   }
 
 
 
 
   /*
   /*
   * Content
   * Content
   */
   */
 
 
   div#content h1,
   div#content h1,
   div#content h2,
   div#content h2,
Zeile 160: Zeile 160:
     font-family: Loxica,sans-serif;
     font-family: Loxica,sans-serif;
   }
   }
 
 
   h1#firstHeading {
   h1#firstHeading {
     font-size: 32pt;
     font-size: 32pt;
   }
   }
 
 
   /* Table of contents */
   /* Table of contents */
   #toc, .toc, .mw-warning {
   #toc, .toc, .mw-warning {
     background-color: rgba(255, 255, 255, 0);
     background-color: rgba(255, 255, 255, 0);
   }
   }
 
 
   /* Code blocks */
   /* Code blocks */
   div#mw-content-text pre {
   div#mw-content-text pre {
     background-color: rgba(255, 255, 255, 0.25);
     background-color: rgba(255, 255, 255, 0.25);
   }
   }
 
 
   /* Thumbnails */
   /* Thumbnails */
   html .thumbimage {
   html .thumbimage {
     border: none;
     border: none;
   }
   }
 
 
   /* Linkbox am Artikelende */
   /* Linkbox am Artikelende */
   div.NavHead, .catlinks {
   div.NavHead, .catlinks {
     background-color: rgba(255, 255, 255, 0);
     background-color: rgba(255, 255, 255, 0);
   }
   }
 
 
   /* Bullet point lists */
   /* Bullet point lists */
 
 
   div#content ul {
   div#content ul {
     list-style: none;
     list-style: none;
   }
   }
 
 
   div#content ul li {
   div#content ul li {
     text-indent: -1em;
     text-indent: -1em;
   }
   }
 
 
   div#content ul li:before { /* hack to change color of bullet point */
   div#content ul li:before { /* hack to change color of bullet point */
     content: "• ";
     content: "• ";
     color: hsl(193, 64%, 13%);
     color: hsl(193, 64%, 13%);
   }
   }
 
 
 
 
   /*
   /*
   * Links
   * Links
   */
   */
 
 
   div#content a,
   div#content a,
   div#content a:link,
   div#content a:link,
Zeile 215: Zeile 215:
     color:    hsl(193, 64%, 25%);
     color:    hsl(193, 64%, 25%);
   }
   }
 
 
   div#content a.new {
   div#content a.new {
     text-decoration: underline;
     text-decoration: underline;
     color:    hsl(0, 55%, 55%);
     color:    hsl(0, 55%, 55%);
   }
   }
 
 
   div#content a:hover {
   div#content a:hover {
     text-decoration: none;
     text-decoration: none;
Zeile 230: Zeile 230:
     color:    #101010;
     color:    #101010;
   }
   }
 
 
   } /* end -- media screen */
   } /* end -- media screen */

Version vom 6. März 2014, 17:37 Uhr

 /*
   * GPN14 Stylesheet
   *
   * Ändern hier: https://entropia.de/GPN14:Stylesheet
   * Einbinden über: 
   *
   * Farben: bitte HSL (bzw. HSLA) ggü. RGB bevorzugen!
   *
   * Hintergrund-Cyan:
   *   background-color: rgb(40, 150, 180)
   *   hsl(193, 64%, 43%)
   *
   * Abgedunkelt (sidebar usw.):
   *   hsl(193, 64%, 23%)
   *
   * Heller (Rahmen und Unterstreichungen in Navbar usw.):
   *   hsl(193, 64%, 53%);
   */
 
 @font-face {
    font-family: "Loxica";
    src: url("/gulasch/v5loxicar.ttf");
 }
 
 
 /*
  * Screen only
  */
 @media screen {
 
 
 /*
  * Header, Sidebar, Footer
  */
 
 #column-one,
 #column-content {
   background-color: hsl(193, 64%, 43%);
 }
 
 .pBody {
   background-color: hsl(193, 64%, 43%);
 }
 
 #p-navigation a, #p-portlet2 a, #p-portlet3 a, #p-search a, #p-tb a, #p-fnord a {
   color: hsl(193, 64%, 95%);
 }
 
 #p-logo {
   background-color: hsl(193, 64%, 23%);
 }
 
 div#globalWrapper {
   background-color: hsl(193, 64%, 43%);
 }
 
 div#footer {
   background-color: hsl(193, 64%, 23%);
   border-top: none;
   border-bottom: none;
 }
 
 /* Hide banner1 ("There is no fork.") -- wtf?! */
 div#p-tb + div.generated-sidebar.portlet {
   display: none !important;
 }
 
 #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 hsl(193, 64%, 53%);
 }
 
 /* Search box */
 #searchInput {
   background-color: hsl(193, 64%, 78%);
   border: solid 1px hsl(193, 64%, 38%);
   outline: none;
   padding: 2px 2px; 
 }
 
 #searchBody input[type="submit"],
 #searchBody input[type="submit"] {
   background-color: hsl(193, 10%, 93%);
   border: solid 1px hsl(193, 10%, 63%);
 }
 
 #searchBody {
   margin-bottom: 1em;
 }
 
 
 /*
  * Article/Discussion/Edit... tabs
  */
 
 /* bugfix: they were overflowing at the bottom side */
 li#ca-nstab-main,
 li#ca-nstab-main ~ li {
   background: none;
 }
 
 
 /*
  * Page content box
  */
 
 .mw-body-primary {
   border: none !important; /* border to header/navbar/footer */
   border-left: 1px solid hsl(193, 64%, 53%) !important;
 }
 
 div#content { /* background of everything below header, incl. sidebar */
   background-color: hsl(193, 64%, 43%); /* empty space between header/navbar/footer and content box */
   color:            black; /* main text color */
 
   padding-right: 0; /* content box meets right screen border */
 
   background-image: url("/wiki/images/3/3f/GPN14-Logo-only.png");
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-size: auto 70%;
   background-position: 1em 1em;
 }
 
 div#content h1#firstHeading {
   background-color: hsla(193, 64%, 93%, 0.94);
   border-left: 1px solid hsl(193, 64%, 50%);
   border-top: 1px solid hsl(193, 64%, 50%);
   border-radius: 5px;
 
   /* Bottom joins div#bodyContent*/
   border-radius: 5px 0px 0px 0px;
   padding: 0.3em 0.3em 0;
   margin-bottom: 0;
 }
 
 div#bodyContent {
   background-color: hsla(193, 64%, 93%, 0.94);
   border-left: 1px solid hsl(193, 64%, 50%);
 
   /* Top joins h1#firstHeading */
   margin-top: 0;
   border-radius: 0px 0px 5px 5px;
 }
 
 
 /*
  * Content
  */
 
 div#content h1,
 div#content h2,
 div#content h3,
 div#content h4,
 div#content h5 {
   font-family: Loxica,sans-serif;
 }
 
 h1#firstHeading {
   font-size: 32pt;
 }
 
 /* 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);
 }
 
 /* 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: "• ";
   color: hsl(193, 64%, 13%);
 }
 
 
 /*
  * Links
  */
 
 div#content a,
 div#content a:link,
 div#content a:active {
   text-decoration: underline;
   color:     hsl(193, 64%, 35%);
 }
 div#content a:visited {
   text-decoration: underline;
   color:     hsl(193, 64%, 25%);
 }
 
 div#content a.new {
   text-decoration: underline;
   color:     hsl(0, 55%, 55%);
 }
 
 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;
 }
 
 } /* end -- media screen */