Arch BBS CSS

bbs.archlinux.org.css

:root {
    --color_fg: #333;
    --color_fg2: #111;
    --color_bg: #fafafa;
    --color_bg2: #fbfbfb;
    --color_bg_in: #fdfdfd;
    --color_bg_quote: #f5f5f5;
    --color_code: #46640b;
    --color_quote: #666;
    --color_brd_light: #eee;
    --color_nav_bg:#333;
    --color_nav_fg:#fafafa;
}

/* uncomment below for dark mode */
/*
:root {
    --color_fg: #fafafa;
    --color_fg2: white;
    --color_bg: #333;
    --color_bg2: #323232;
    --color_bg_in: #222;
    --color_bg_quote: #353535;
    --color_code: #ffb31c;
    --color_quote: #aaa;
    --color_brd_light: #2c2c2c;
}
/* end of dark mode */

/* uncomment below for bright header/footer */
/*
:root {
    --color_nav_bg:#fafafa;
    --color_nav_fg:#222;
}

#archnavbar {
    background:var(--color_nav_bg)!important;
    color:var(--color_nav_fg)!important;
}

#archnavbar.anb-forum ul li.anb-selected a, #archnavbar ul li a:hover {
    color:var(--color_nav_fg)!important;
}

#archnavbar #archnavbarlogo {
    background-color:#333!important;
    border: 3pt solid #333 !important;
    border-radius:4pt!important;
    box-shadow: 0 0 3pt #333 !important;
}

/* end of bright header/footer */

/******* from here one hands off … unless you want to mess around ;) *******/
html,
body {
    background: var(--color_nav_bg) !important;
    color: var(--color_nav_fg) !important;
}

/* 404 */
body > center > h1:before {
    content:":(\a";
    white-space: pre;
    font-size:400%;
}
/* end 404 */


div.pun {
    /*background: #333 !important; color:#fafafa!important;*/
    padding: 0!important;
}
#punviewtopic > * {
    background: none!important;
}

.pun .blocktable .box {
    background: var(--color_bg) !important;
}

.pun {
    background: none !important;
}
.punwrap {
    border: none !important;
    color: #999!important;
    padding: 0!important;
}

.infldset {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    border: none !important;
}
.inbox > .pagepost {
    border: none !important;
}
.inbox ul.crumbs li:last-child strong:last-child a {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    color: #d09217 !important;
    background: none !important;
    border-bottom: 1px solid #d09217!important;
}
.pun a:hover,
#brdmain a:hover,
a:hover {
    text-decoration: none !important;
    color: #1793D0 !important;
}

#brdmain > div.blockpost {
    margin-bottom: 8pt !important;
    color: var(--color_quote)!important;
}
#brdmain {
    border: none !important;
    border-top: 4px solid #1793D0!important;
    padding: 4%!important;
    padding-top: 2em!important;
    padding-bottom: 2em!important;
    margin: 0!important;
    background: var(--color_bg) !important;
    color: var(--color_fg)!important;
}
#brdmain span.byuser {
    font-weight: normal!important;
}
#brdheader {
    padding: 18px!important;
    padding-bottom: 0!important;
    background: var(--color_nav_bg)!important;
}
#brdmenu,
#brdmenu * {
    background: none!important;
    border: none!important;
}

.pun div.quotebox {
    border: 1px solid var(--color_brd_light) !important;
    border-left: 4px solid var(--color_quote) !important;
    border-radius: 4pt!important;
    background: var(--color_bg_quote)!important;
    color: var(--color_quote)!important;
}

.pun div.quotebox div.quotebox {
    color: #999!important;
}
.pun div.quotebox div.quotebox cite {
    color: #999!important;
}
.pun div.codebox {
    padding: 1em!important;
    border: 1px dashed var(--color_code) !important;
    border-radius: 4pt!important;
    background: var(--color_bg_in);
    color: var(--color_code) !important;
}
.pun div.codebox pre.vscroll {
    margin-bottom: -1em !important;
    border-bottom: 1px dashed var(--color_code) !important;
}
.inbox tr.roweven {
    background: var(--color_bg2) !important;
    border-top: 1px solid var(--color_brd_light) !important;
    border-bottom: 1px solid var(--color_brd_light) !important;
}

div .blocktable h2 {
    color:var(--color_fg) !important;
}

.pun .blocktable .box {
    margin-bottom: 4pt !important;
}

.pun .blocktable th, .pun #vf th {
    background: var(--color_brd_light) !important;
    border-bottom: 8pt solid var(--color_bg) !important;
    color:var(--color_quote) !important;
}
div.blockpost > h2 {
    background: none !important;
    border: none !important;
}
div.blockpost {
    background: none!important;
    border-bottom: 1px solid var(--color_brd_light)!important;
}
.pun .blockpost, .pun .blockform > *, .pun .blocktable * {
    border-width: 0px!important;
}

/*
div.blockpost div.postright {padding-right:18px!important; }
div.postbody {background:var(--color_bg)!important; box-shadow: 0 1px 3px #aaa !important; width: calc(100% - 252px)!important; margin-right:16px!important;}*/
div.postbody {
    background: var(--color_bg2)!important;
    border-left: 1px solid var(--color_brd_light) !important;
    border-top: 1px solid var(--color_brd_light) !important;
    border-radius: 4pt!important;
}
div.postfoot {
    background: var(--color_bg)!important;
}
.blockpost h2 * {
    color: #999!important;
}
.pun .postmsg,
#punhelp code,
#punhelp samp {
    color: var(--color_fg)!important;
}


div.postsignature {
    border-top: 2px solid var(--color_brd_light) !important;
    /*border-right: 2px solid var(--color_brd_light) !important;
    background: var(--color_bg_quote)!important;*/
    margin-top:0.66em!important;
    max-width:64em!important;
    padding-left:2em!important;
}

div.postsignature p {
    vertical-align:text-bottom!important;
    color: var(--color_quote)!important;
    margin-right:2em!important;
}

div .postsignature hr {
    display:none!important;
}

.blockform * {
    background-color: var(--color_bg) !important;
}
.blockform {
    border: none !important;
    border-top: 2px solid #999 !important;
}

#quickpostform p.buttons,
#edit p.buttons {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    position: relative !important;
    top: -24px !important;
    padding-right: 36px !important;
    text-align: right !important;
    display: flex !important;
    flex-flow: row-reverse !important;
    margin-left: 45em !important;
}
legend {
    color: transparent!important;
}

.checklist legend, #profile legend {
    color: var(--color_fg)!important;
}

#edit p.buttons {
    top: -84px !important;
}
.pun .txtarea textarea,
input.longinput {
    background: var(--color_bg_in) !important;
    border: 2px solid transparent !important;
    border-top: 2px solid var(--color_quote)!important;
    border-bottom: 2px solid var(--color_quote)!important;
    color: var(--color_fg2)!important;
    padding: 0.3em!important;
}
.pun .txtarea textarea:focus,
input.longinput:focus {
    border-color: #1793D0 !important;
    outline: none !important;
}
.pun #quickpost h2,
#punpost .blockform h2,
#punedit .blockform h2,
#posterror h2,
#pundelete .blockform h2 {
    color: #999 !important;
}

select,
input[type="submit"] {
    background: none !important;
    border: 1px solid #999 !important;
    border-radius: 1em !important;
    color: var(--color-fg)!important;
}
input[name="submit"] {
    background: var(--color_brd_light) !important;
    color: var(--color_fg2) !important;
}
input[type="submit"]:hover {
    background: #1793D0 !important;
    border-color: #1793D0 !important;
    color: #fff !important;
}
input[type="submit"]:focus {
    outline: none !important;
    border-color: #1793D0 !important;
}
.pun select {
    padding-left: 1em !important;
    padding-right: 1em !important;
    appearance: none !important;
    border: 1px solid var(--color_quote) !important;
    border-left: 4px solid var(--color_quote) !important;
}

#brdfooter select {
    margin-bottom:1em;
}
.pun select:hover {
    border-color: #1793D0 !important;
}
.pun select:focus {
    background: #1793D0 !important;
    color: white !important;
    outline: none !important;
}

.pun select option {
    background: var(--color_nav_bg) !important;
    color: var(--color_nav_fg) !important;
}

input[type="text"] {
    background: var(--color_bg_in) !important;
    border:1px solid #999!important;
}
input[type="text"]:focus {
    border:1px solid #1793D0!important;
    outline:none!important;
}


.pun .blockform .box,
#adstats,
#adintro,
#postpreview,
#posterror,
.pun #quickpost h2,
#punpost .blockform h2,
#punedit .blockform h2,
#posterror h2,
#pundelete .blockform h2 {
    background: none!important;
}

.pun .icon {
    border-width: 6px !important;
    border-radius: 3px!important;
    border-color: var(--color_bg_in)!important;
}

.pun .inew .icon {
    border-color: #1793D0!important;
}

#archnavbar {
    border: none !important;
    margin: 0 !important;
}
#brdfooter {
    background: var(--color_nav_bg) !important;
    padding: 0 2em 0em 2em !important;
}

#brdfooter * {
    color: var(--color_nav_fg) !important;
}

#brdfooter optgroup {
    background: var(--color_nav_bg)!important;
    color: #1793D0 !important;
}

div.postfoot {
    border:none!important;
}

div.postleft,
div.postfootleft {
    text-align: center !important;
}

#brdmain .postreport a:hover {
    color: #990000 !important;
}
#brdmain .postedit a:hover {
    color: #73BA25 !important;
}
#brdmain .postquote a:hover {
    color: #FFBC00 !important;
}

#punredirect * {
    background: var(--color_nav_bg) !important;
    color:var(--color_nav_fg)!important;
}