GPN14:Stylesheet: Unterschied zwischen den Versionen

aus dem Wiki des Entropia e.V., CCC Karlsruhe
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
/*
+
  /*
  * GPN14 Stylesheet
+
    * GPN14 Stylesheet
  *
+
    *
  * Ändern hier: https://entropia.de/GPN14:Stylesheet
+
    * Ändern hier: https://entropia.de/GPN14:Stylesheet
  * Einbinden über: {{Navigationsleiste GPN14}}
+
    * Einbinden über: {{Navigationsleiste GPN14}}
  *
+
    *
  * Farben: bitte HSL (bzw. HSLA) ggü. RGB bevorzugen!
+
    * Farben: bitte HSL (bzw. HSLA) ggü. RGB bevorzugen!
  *
+
    *
  * Hintergrund-Cyan:
+
    * Hintergrund-Cyan:
  *  background-color: rgb(40, 150, 180)
+
    *  background-color: rgb(40, 150, 180)
  *  hsl(193, 64%, 43%)
+
    *  hsl(193, 64%, 43%)
  *
+
    *
  * Abgedunkelt (sidebar usw.):
+
    * Andere, aber passende, Farben lassen sich leicht durch ändern
  *  hsl(193, 64%, 23%)
+
    * der dritten Komponente erzeugen.
  *
+
    *
  * Heller (Rahmen und Unterstreichungen in Navbar usw.):
+
    * Testen: am einfachsten über mitmproxy (siehe git repo).
  *   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%);
+
    border-top: none;
  border-top: none;
+
    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,
+
  #p-portlet3 ul li,
#p-portlet3 ul li,
+
  #p-search ul li,
#p-search ul li,
+
  #p-tb ul li,
#p-tb ul li,
+
  #p-fnord ul li {
#p-fnord ul li {
+
    border-bottom: 1px solid hsl(193, 64%, 53%);
  border-bottom: 1px solid hsl(193, 64%, 53%);
+
  }
}
+
 
 
+
  /* Search box */
/* Search box */
+
  #searchInput {
#searchInput {
+
    background-color: hsl(193, 64%, 78%);
  background-color: hsl(193, 64%, 78%);
+
    border: solid 1px hsl(193, 64%, 38%);
  border: solid 1px hsl(193, 64%, 38%);
+
    outline: none;
  outline: none;
+
    padding: 2px 2px;
  padding: 2px 2px;  
+
  }
}
+
 
 
+
  #searchBody input[type="submit"],
#searchBody input[type="submit"],
+
  #searchBody input[type="submit"] {
#searchBody input[type="submit"] {
+
    background-color: hsl(193, 10%, 93%);
  background-color: hsl(193, 10%, 93%);
+
    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,
+
  li#ca-nstab-main ~ li {
li#ca-nstab-main ~ li {
+
    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;
+
    background-attachment: scroll;
  background-attachment: scroll;
+
    background-size: 70% auto;
  background-size: 70% auto;
+
    background-position: 1em 1em;
  background-position: 1.01em 1.01em;
+
  }
}
+
 
 
+
  div#content h1#firstHeading {
div#content h1#firstHeading {
+
    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%);
+
    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;
+
    padding: 0.3em 0.3em 0;
  padding: 0.3em 0.3em 0;
+
    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,
+
  div#content h3,
div#content h3,
+
  div#content h4,
div#content h4,
+
  div#content h5 {
div#content h5 {
+
    font-family: Loxica,sans-serif;
  font-family: Loxica,sans-serif;
+
  }
}
+
 
 
+
  h1#firstHeading {
h1#firstHeading {
+
    font-size: 28pt;
  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%);
+
  }
}
+
 
 
+
  li.toclevel-1 { /* revert these changes for the toc list */
 
+
    text-indent: 0 !important;
/*
+
  }
* Links
+
 
*/
+
  li.toclevel-1:before { /* revert these changes for the toc list */
 
+
    content: none !important;
div#content a,
+
  }
div#content a:link,
+
 
div#content a:active {
+
 
  text-decoration: underline;
+
  /*
  color:    hsl(193, 64%, 35%);
+
  * Links
}
+
  */
div#content a:visited {
+
 
  text-decoration: underline;
+
  div#content a,
  color:    hsl(193, 64%, 25%);
+
  div#content a:link,
}
+
  div#content a:active {
 
+
    text-decoration: underline;
div#content a.new {
+
    color:    hsl(193, 64%, 35%);
  text-decoration: underline;
+
  }
  color:    hsl(0, 55%, 55%);
+
  div#content a:visited {
}
+
    text-decoration: underline;
 
+
    color:    hsl(193, 64%, 25%);
div#content a:hover {
+
  }
  text-decoration: none;
+
 
}
+
  div#content a.new {
div#mw-content-text pre a,
+
    text-decoration: underline;
div#mw-content-text pre a:link,
+
    color:    hsl(0, 55%, 55%);
div#mw-content-text pre a:active,
+
  }
div#mw-content-text pre a:visited {
+
 
  color:    #101010;
+
  div#content a:hover {
}
+
    text-decoration: none;
 
+
  }
} /* end -- media screen */
+
  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 */

Version vom 6. März 2014, 18:12 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%)
   *
   * Andere, aber passende, Farben lassen sich leicht durch ändern
   * der dritten Komponente erzeugen.
   *
   * Testen: am einfachsten über mitmproxy (siehe git repo).
   */
 
 @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: 70% auto;
   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: 28pt;
 }
 
 /* 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%);
 }
 
 li.toclevel-1 { /* revert these changes for the toc list */
   text-indent: 0 !important;
 }
 
 li.toclevel-1:before { /* revert these changes for the toc list */
   content: none !important;
 }
 
 
 /*
  * 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 */