Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User CSS für das Tanelorn Forum.
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.