User CSS für das Tanelorn Forum.

tanelorn_contrast.css

/* tanelorn_contrast.css
 
Verändert das Tanelorn Moon Theme so, dass der Text kontrastreich dargestellt wird.
Ersetzt einige Icons durch UTF8-Symbole, die auflösungsunabhängig gerendert werden.
Verbirgt einige Icons, die ich selbst nie benutze.
 
version $Id$ 
 
*/
 
/* Testeintrag für Testvariablen. Geht derzeit noch nicht. */
 
:root {
  var-testcolor: red; 
}
 
/* Mehr Kontrast! */
 
body, td, th, tr, 
.windowbg, tr.windowbg, td.info,tr.windowbg td.lastpost, tr.windowbg 
td.smalltext, .windowbg2, tr.windowbg2 td.info, tr.windowbg2 td.lastpost,
tr.windowbg2 td.smalltext, .windowbg3, .stickybg, .stickybg2,
.lockedbg, .lockedbg2 {
  color: #000000;
  background: #ffffff;
}
 
body {
  font-family: sans-serif; 
}
 
/* SMF verwendet <strong></strong> anstatt font-weight: bold via styles.
   Das wollen wir nicht. */
 
strong,
div.sub_boards strong a {
  font-weight: normal !important;
  /* Wer rote Schatten sieht, melde sich bitte bei mir! */
  text-shadow:
    0 0 .2em var(testcolor), 
    0 0 .2em var(testcolor);
}
 
/* Ausser in den Postings und in Previews selbst natürlich! */
 
#preview_body strong,
#personal_messages * strong,
.postarea * strong {
  font-weight: bold;
}
 
/* Leichte Einfaerbung fuer die die nicht ohne koennen. */
 
div#content_section {
  background: #eeeeee;
  border-radius: 1em 1em;
  margin-bottom: 1em;
}
 
/* Header-Grafik desaturieren. Funktioniert nur in Webkit-basierenden Browsern. */
 
div#wrapper a img[src*="header"] {
  -webkit-filter: grayscale(1);
  filter: grayscale(100%);
}
 
/* Beiträge in Listen weicher trennen. */
 
table.table_grid td {
  border-color: #cccccc;
}
 
/* Menü-Einstellungen für #main_menu und #admin_menu. */
 
.dropmenu li a.firstlevel span.firstlevel {
  margin: 0;
  padding-left: 1em;
  padding-right: 1em;
}
 
.dropmenu,
.dropmenu li a.active,
.dropmenu li a.active:hover,
.dropmenu li a.firstlevel:hover,
.dropmenu li:hover a.firstlevel,
.dropmenu li a.active span.firstlevel,
.dropmenu li a.active:hover span.firstlevel
.dropmenu li a.firstlevel:hover span.firstlevel, 
.dropmenu li:hover a.firstlevel span.firstlevel,
.dropmenu li li:hover a,
.dropmenu li li > a:hover {
  background-image: none;
}

.dropmenu li li:hover a,
.dropmenu li li > a:hover {
  font-weight: bold;
  color: #000000;
}


#adm_submenus .dropmenu li a.active span.firstlevel,
#adm_submenus .dropmenu li a.firstlevel:hover,
#adm_submenus .dropmenu li:hover a.firstlevel,
#admin_menu .dropmenu li a.active span.firstlevel,
#admin_menu .dropmenu li a.firstlevel:hover,
#admin_menu .dropmenu li:hover a.firstlevel {
  color: #000000;
}
 
#main_menu * li a.firstlevel:link,
#main_menu * li a.firstlevel:visited,
#main_menu * li a.firstlevel:hover {
  color: #ffffff;
}
 
/* Pseudobuttons */
 
.buttonlist ul li a:visited,
.buttonlist ul li a:link {
  background: #cccccc none;
  color: #000000;
  border: 1px solid #cccccc;
}
    
div.catbg, tr.catbg td, tr.catbg th,    
tr.catbg th a:link, tr.catbg th a:visited,
div.catbg2, tr.catbg2 td, tr.catbg2 th,
tr.catbg2 td a:link, tr.catbg2 td a:visited,
.description, .description_board, .plainbox,
.dropmenu li ul {
  background: #cccccc none;
  color: #000000;
}

.dropmenu li ul {
  border-radius: .25em;
  box-shadow: 0 .2em .3em .2em #aaaaaa;
 }
 
.description#topic_icons,
 div#footer_section {
  display: none;
}
 
h3.catbg a:hover, h4.catbg a:hover, .table_list tbody.header td a:hover,
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited,
h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
  color: #000000;
}
 
h3.catbg[style] { 
  color: #000000 !important; 
}
 
#content_section {
  background: #ffffff;
}
 
#header {
  background-image: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 1em;
  opacity: .8;
}
 
 
#top_section[style] {
margin-right: 4.5em !important;
}
 
/* Die Vorschau ist schwarz auf hellgrau und mit Punkten abgesetzt. */
 
#preview_body {
  background-image: none;
  background-color: #cccccc;
  color: #000000;
  padding: 1em;
  border: 1px dotted #000000;
  border-radius: .25em .25em;
} 
 
/* Pseudobuttons wollen auch schick aussehen. */
 
 
input[type='submit']:hover {
  background: #cccccc;
}
  
.button_submit {
  background: #cccccc;
  border: 1px solid #aaaaaa;
  color: #000000;
}
  
.buttonlist ul li a span {
  background-image: none;
}
 
.buttonlist ul li a {
  border-radius: 2px 2px; 
  }  
 
.buttonlist ul li a.active:link {
  background: #cccccc none;
  border: 1px solid #cccccc;
  color: #000000;
  font-weight: normal;
}
 
.buttonlist ul li a.active:hover {
  background: #cccccc none;
  color: #000000;
  border: 1px solid #000000;
}
    
.buttonlist ul li a:link {
  background: #cccccc none;
  color: #000000;
  border: 1px solid #cccccc;
}
 
.buttonlist ul li a:hover {
  background: #cccccc none;
  color: #000000;
  border: 1px solid #000000;
}
 
/* Die Box überm Logo auch in schwarz-weiss */
 
div.frame.user {
  font-size: smaller;
  line-height: 1.5;
}
 
/* Beiträge in schlichtem schwarz/weiss. Jetzt mit Schatten! */
 
span.botslice {
  background-color: #eeeeee;
}
 
.windowbg span.topslice,
.windowbg2 span.topslice {
  display: none;
}
 
.post_wrapper {
  padding-top: 2px;
  box-shadow: 0 .2em .3em .2em #aaaaaa;
  border-radius: .2em;
}
  
.bbc_link:link,
.bbc_link:visited,
.bbc_link:hover,
a:link, a:visited,
a:hover {
 color: #000000;
}
 
.poster h4, .poster h4 a {
  color: #000000;
}
 
#preview_body .bbc_link:link,
#preview_body .bbc_link:visited,
#preview_body a:link, 
#preview_body a:visited,
#personal_messages * .bbc_link:link,
#personal_messages * .bbc_link:visited,
#personal_messages * a:link, 
#personal_messages * a:visited,
.post .bbc_link:link,
.post .bbc_link:visited,
.post a:link, 
.post a:visited,
.signature .bbc_link:link,
.signature .bbc_link:visited,
.signature a:link, 
.signature a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #666666;
}
 
a[href$=new] {
  border: 0 none;
}
 
/* Zitat/Löschen/Ändern-Icon entfernen. */      
 
ul.quickbuttons li.quote_button,
ul.quickbuttons li.modify_button,
ul.quickbuttons li.remove_button {
  background: none;
}
 
li.quote_button a,
li.modify_button a,
li.remove_button a
 {
  display: none;
}
 
li.quote_button a:before {
  content: "❠\a0";
}
 
li.modify_button a:before {
  content: "✍\a0";
}
      
li.remove_button a:before {
  content: "✗\a0";
}
 
 
 
/* Zitate grau in grau. */
 
blockquote.bbc_standard_quote {
  background: #dddddd;
  color: #000000;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
}
 
blockquote.bbc_alternate_quote {
  background: #ffffff;
  color: #333333;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
}
 
/* [code-Blöcke] */
 
code.bbc_code {
  background: #dddddd;
}
 
/* Betreff-Zeilen fett markieren. */
 
a.subject {
   color: #000000;
    font-weight: bold;
}
 
/* Runde Rahmen sind rund. */
 
.roundframe {
  background-image: none;
  border-radius: 1em 1em;
}
 
.roundframe[style] {
  margin: 1em 0 1em 0 !important;
}
 
div.roundframe div.cat_bar,
div.cat_bar, .cat_bar {
  background-image: none;
  background: #cccccc;
  border-radius: .25em .25em;
  padding-left: 1em;
}
 
/* Tabellen wollen massiert werden. */
 
table {
  border-collapse: collapse;
  border: none;
}
 
#boardindex_table {
 background-color: transparent; 
}
 
tbody.header td,
tbody.header td tr {
  border: none;
  background-color: transparent;
}
 
.table_list tbody.content td.info a.subject {
  color: #000000;
}
 
td {
  border: 1px solid #cccccc;
}

td.subject {
  background-image: none;
}
 
tbody.divider tr td {
  background-color: #eeeeee;
  border: none;
 }
 
td.icon {
  background-color: #eeeeee;
  border: none;
}
 
h3.catbg {
  background: #cccccc;
  color: #000000;
}
 
div.title_bar, div.title_barIC, div.title_barIC h4.titlebg {
  background: #cccccc none;
  color: #000000;
  border-radius: 0.25em 0.25em;
}
 
/* offline/online Markierung für User durch Farbfelder ersetzen. */
 
img[alt="Offline"],
img[alt="Online"] {
  display: inline;
  box-sizing: border-box;
  width: 0;
  height: 0;
  padding: -0.5em;
  margin-bottom: -.05em;
  border: 0.5em solid #cccccc;
  border-radius: 0.25em;
  }
 
img[alt="Online"] {
  border: 0.5em solid #44aa44;
} 
 
/* redundantes sticky-gif und locked-gif ausblenden. */
.topic_table td.stickybg2, 
.topic_table td.stickybg,
.topic_table td.lockedbg,
.topic_table td.lockedbg2 {
  background-image: none;
}
 
/* Instant Messenger links ausblenden. */
a.icq, a.msn, a.aim, a.yim {
  display:none;
}  
 
/* Einige Icons ausblenden, deren Funktion ich nie benutze. */
 
td.icon a img,
td.icon2 a img,
div#posting_icons,
img[src$="modify_inline.gif"] {
  display:none;
}

/* "Melden"-Knopf und IP-Adress-Info ausblenden. */ 


div.reportlinks {
 display: none;
}

/* Die Betreffzeile soll soviel Platz benutzen koennen wie sie will. */
 
.keyinfo {
  float: left;
  clear: left;
  max-width: 90%;
  min-width: 50%;
  padding-right: 1em;
}
 

/* PM Dateianhänge-Liste. */

tr.titlebg th {
background-image: none;
}

tr.titlebg th a:link,
tr.titlebg th a:visited,
tr.titlebg th a:hover {
  color: #000000;
}

/* Rahmen um Eingabefelder und Buttons. */
 
input, textarea, button, select, 
input:hover, textarea:hover, button:hover, select:hover,
.button_submit:hover, .button_reset:hover,
input:focus, textarea:focus, button:focus, select:focus {
  border-color: #33aa33;
}
 
/* Header für Themen aufbereiten. */
 
#forumposts h3 span#author {
min-width: 5em;
clear: right;
padding-left: 3em;
margin: 0 10em 0 0;
font-weight: bold;
}
 
/* Platz fuer die UTF8-Symbole reservieren. */
 
.catbg img,
.floatleft img {
  font-weight: normal;
  padding-right: 1em;    
}
 
.topic_table .icon1 {
  width: 4em;
  text-align: right;
}
 
/* Die folgenden CSS-Regeln funktionieren nur wenn man eine Schriftart installiert hat,
   die die Symbole ersetzen kann. Gegebenenfalls muss fuer diese Schriftart noch eine
   font-family gesetzt werden. Ohne die richtige Schrift verschwinden Funktionen aus dem
   Sichtfeld! */
 
 
/* Bilder verstecken. */
 
img[src*="poll"],
img[src$="arrow.gif"],
img[src$="expand.gif"],
img[src$="collapse.gif"],
img[src$="question.gif"],
img[src$="lamp.gif"],
img[src$="thumbup.gif"],
img[src$="exclamation.gif"],
img[src$="recycled.gif"],
img[src$="moved.gif"],
img[src*="change_menu"],
img[src$="/ip.gif"],
img[src$="/upshrink.png"],
img[src$="/upshrink2.png"],
img[src$="/xx.gif"],
img[src$="/sort_down.gif"],
img[src$="/sort_up.gif"],
img[src$="quick_lock.gif"],
img[src$="quick_sticky.gif"],
img[src$="/normal_post.gif"],
img[src$="/topic/hot_post.gif"],
img[src$="/veryhot_post.gif"],
img[src$="/normal_post_sticky.gif"],
img[src$="/hot_post_sticky.gif"],
img[src$="/veryhot_post_sticky.gif"],
img[src$="/normal_post_locked.gif"],
img[src$="/hot_post_locked.gif"],
img[src$="/very_post_locked.gif"],
img[src$="/normal_post_locked_sticky.gif"],
img[src$="/hot_post_locked_sticky.gif"],
img[src$="/veryhot_post_locked_sticky.gif"],
img[src$="/topic/my_normal_post.gif"],
img[src$="/my_hot_post.gif"],
img[src$="/my_veryhot_post.gif"],
img[src$="/my_normal_post_sticky.gif"],
img[src$="/my_hot_post_sticky.gif"],
img[src$="/my_veryhot_post_sticky.gif"],
li.stars img[src*="star"],
img[alt="Zukünftige Ereignisse"],
img[alt="Forumstatistiken"],
img[alt="Benutzer Online"],
img[src="/Themes/Curve_Tanelorn/images/icons/profile_sm.gif"],
img[src="/Themes/Curve_Tanelorn/images/www_sm.gif"],
img[alt="Private Mitteilung (Offline)"],
img[alt="Private Mitteilung (Online)"],
img[alt="Profil anzeigen"],
img[alt="E-Mail"],
img.gender[alt="Weiblich"],
img.gender[alt="Männlich"],
img[alt="Letzter Beitrag"],
img[alt="Neu"],
img.new_posts {
  /* Bild verstecken. */
  height: 0;
  width: 0;
  /* fake content verstecken. */
  color: transparent;
  /* Pseudo-Elemente müssen absolut positioniert werden. */
  position: relative;
  content: "fake";
}
 
/* Ersatz-Inhalte sichtbar machen. */
 
img:before,
img:after {
  top:0;
  left:0;    
  font-weight: normal;
  color: #000000;
}
 
img[src$="arrow.gif"]:before {
  content: "▹\a0"; 
}
 
 
img[src$="expand.gif"]:before {
  content: "➕"; 
}
 
img[src$="collapse.gif"]:before {
  content: "➖"; 
}
 
img[src$="/change_menu.png"]:before {
  content: "⏪"; /* ⏩ */
  font-weight: bold;
}

img[src$="/change_menu2.png"]:before {
  content: "⏩";
  font-weight: bold;
}


img[alt="Neu"]:before,
img.new_posts:before {
  content: "neu";
  color: #007700;
  font-size: smaller;
}
 
img[alt="Private Mitteilung (Offline)"]:before {
  content: "💬";
  font-weight: bolder;
  color: #777777;
}
 
img[alt="Private Mitteilung (Online)"]:before {
  content: "💬";
  font-weight: bolder;
  color: #007700;
}
 
img[src$="/profile_sm.gif"]:before,
img[alt="Profil anzeigen"]:before {
  content: "👤";
}
 
img.gender[alt="Männlich"]:before {
  content: "♂";
  font-size: 140%;
  font-weight: bold;
}
 
img.gender[alt="Weiblich"]:before {
  content: "♀";
  font-size: 140%;
  font-weight: bold;
}
 
img[alt="E-Mail"]:before {
  content: "📧";
  padding-bottom: -.5em;
}
 
img[src$="/www_sm.gif"]:before {
  content: "🔗";
}
 
li.stars img[src*="star"]:before {
  content: "★";
}

img[src$="/starmodtechsupport.png"]:before {
  color: #00ff00;
  text-shadow:
    0 0 1px #00aa00,
    0 0 1px #00aa00;
}
 
img[src$="/starmoddungeonkeeper.png"]:before {
  color: #ff0000;
  text-shadow:
    0 0 1px #aa0000,
    0 0 1px #aa0000;
}
 
img[src$="/star.gif"]:before {
  color: #ffcc77;
  text-shadow:
    0 0 1px #ffcc00,
    0 0 1px #ffcc00;}
 
img[src$="/starmodmasterofkeys.png"]:before {
  color: #4466FF;
  text-shadow:
    0 0 1px #0000ff,
    0 0 1px #0000ff;
}
 
img[src$="/starmodchallengeteam.png"]:before {
  color: #C982C9;
  text-shadow:
    0 0 1px #770077,
    0 0 1px #770077;
}

img[src$="/starmodgamemaster.png"]:before {
  color: #4DD5D7;
  text-shadow:
    0 0 1px #00aaaa,
    0 0 1px #00aaaa;
}
 
img[src$="quick_sticky.gif"]:before {
  content: "📌";
}
img[src$="quick_lock.gif"]:before {
  content: "🔒";
}
  
img[src*="/upshrink"]:before {
  content: "▲";
  color: #ffffff;
  text-shadow:
     0 0 .1em #444444,
     0 0 .1em #444444;
  position: relative;
  top: 1em;
  z-index: 10000;
}
 
img[src$="/upshrink2.png"]:before,
img[src$="/sort_down.gif"]:before {
  content: "▼";
}
 
img[src$="/sort_up.gif"]:before {
  content: "▲";
}      
      
a.collapse img:before,
img#lastfiveupshrink,
img#newsupshrink,
img#upshrink,
img#upshrink_ic {
  margin: 0 !important;
}
 
#top_section img#upshrink {
  float: none;
}  
 
table.table_list a.collapse {
	margin: 0 0 0 1em;
}
 
img#lastfiveupshrink {
  padding-right: 1em;
  font-weight: normal;
}
 
img[src$="/ip.gif"]:before {
  content: "💻";
}
 
/* Thread-Typen (unvollständig). */
 
img[src$="question.gif"]:before {
  content: "⁇";
}
 
img[src$="exclamation.gif"]:before {
  content: "‼";
}
 
img[src$="lamp.gif"]:before {
  content: "💡";
text-shadow:
       0  1px  #aaaa00,
       0  1px  #aaaa00,
       0  1px  #aaaa00,
       0  1px  #aaaa00;
}
 
img[src$="thumbup.gif"]:before {
  content: "👍";
}
 
img[src$="moved.gif"]:before {
  content: "↪";
}
 
img[src$="recycled.gif"]:before {
  content: "♻";
}
 
img[src$="/xx.gif"]:before {
  content: "📖";
}
 
/* Alle poll-Icons ersetzen. Blaue Farbe um nicht gedeckte
   Fälle zu sehen */
 
img[src*="poll"]:before {
  content: "☑";
}
 
/* Normale Themen. */
 
img[src*="post_"]:before,
img[src*="_post"]:before {
  content: "📰";
}
 
/* Gesperrte Themen. */
 
img[src*="locked"]:before {
  content: "🔒📰";
}
  
/* Gepinnte Themen. */
 
img[src*="post_sticky"]:before {
  content: "📌📰";
}
  
/* Gesperrte und Gepinnte Themen. */
 
img[src*="post_locked_sticky"]:before {
  content: "📌🔒📰";
}
 
/* Themen, in denen der User selbst Beiträge verfasst hat. */
 
img[src*="my_"]:before {
  content: "📝";
}
 
/* Gepinnte Themen, in denen der User selbst Beiträge verfasst hat. */
 
img[src*="my_normal_post_sticky"]:before {
  content: "📌📝";
}
 
img[src$="/my_hot_post_sticky.gif"]:before {
  content: "📌📝";
}
 
img[src$="/my_veryhot_post_sticky.gif"]:before {
  content: "📌📝";
}
 
/* TODO: Gesperrte und gepinnte Themen, in denen der User selbst Beiträge verfasst hat */
 
/* TODO: Gesperrte Themen, in denen der User selbst Beiträge verfasst hat */
 
/* Icon für die Aktivitätsstufen. */
 
img[src*="veryhot"]:after {
  color: #77cc77 !important;
}
 
img[src*="hot"]:after {
  content: "🔥";
  color: #aaaaaa;
}
 
/* Foreninformationen. */
 
img[alt="Zukünftige Ereignisse"]:before {
  content: "📆";
  margin-left: -1em;
}
 
img[alt="Forumstatistiken"]:before {
  content: "📊";
  margin-left: -1em;
}
 
img[alt="Benutzer Online"]:before {
  content: "🔌";
  margin-left: -1em;
}
 
img[alt="Letzter Beitrag"]:before {
  content: "➔";
  margin-left: -1em;
}