![Image](https://user-images.githubusercontent.com/490097/116648093-3530d980-a94a-11eb-9bc3-9ad718b15863.png)
[screenshot 2] [screenshot 3]
How to use:
This works on any browser that supports user styles. I use Chrome with the Stylus extension.
Copy the following code to a new style in Stylus (or the browser extension of your choice):
Code: Select all
:root {
--gb-dark0_hard :#1d2021;
--gb-dark0 :#282828;
--gb-dark0_soft :#32302f;
--gb-dark1 :#3c3836;
--gb-dark2 :#504945;
--gb-dark3 :#665c54;
--gb-dark4 :#7c6f64;
--gb-dark4_256 :#7c6f64;
--gb-gray_245 :#928374;
--gb-gray_244 :#928374;
--gb-light0_hard :#f9f5d7;
--gb-light0 :#fbf1c7;
--gb-light0_soft :#f2e5bc;
--gb-light1 :#ebdbb2;
--gb-light2 :#d5c4a1;
--gb-light3 :#bdae93;
--gb-light4 :#a89984;
--gb-light4_256 :#a89984;
--gb-bright_red :#fb4934;
--gb-bright_green :#b8bb26;
--gb-bright_yellow :#fabd2f;
--gb-bright_blue :#83a598;
--gb-brighter_blue :#A0B8C8;
--gb-bright_purple :#d3869b;
--gb-bright_aqua :#8ec07c;
--gb-bright_orange :#fe8019;
--gb-neutral_red :#cc241d;
--gb-neutral_green :#98971a;
--gb-neutral_yellow :#d79921;
--gb-neutral_blue :#458588;
--gb-neutral_purple :#b16286;
--gb-neutral_aqua :#689d6a;
--gb-neutral_orange :#d65d0e;
--gb-faded_red :#9d0006;
--gb-faded_green :#79740e;
--gb-faded_yellow :#b57614;
--gb-faded_blue :#076678;
--gb-faded_purple :#8f3f71;
--gb-faded_aqua :#427b58;
--gb-faded_orange :#af3a03;
}
/*--------------------------------------------
base.css
----------------------------------------------*/
html,
body {
color: var(--gb-light3);
background-color: var(--gb-dark0);
}
h1 {
color: var(--gb-dark0_hard);
}
h2 {
color: var(--gb-light1);
}
h3 {
border-bottom-color: var(--gb-gray_245);
color: var(--gb-bright_yellow);
}
hr {
border-color: var(--gb-dark0_hard);
border-top-color: var(--gb-gray_245);
}
/*--------------------------------------------
links.css
----------------------------------------------*/
a {
color: var(--gb-bright_blue);
}
a:hover,
a:focus,
a:active {
/*
color: var(--gb-brighter_blue);
*/
color: var(--gb-bright_purple);
}
#site-description a:hover {
color: var(--gb-dark0);
}
.forumbg .header a,
.forabg .header a,
th a {
color: var(--gb-dark0);
}
.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover {
color: var(--gb-faded_blue);
}
.dropdown-extended a.mark_read {
background-color: #FF0000;
}
/* Post body links */
.postlink {
border-bottom-color: var(--gb-neutral_orange);
color: var(--gb-neutral_orange);
}
.postlink:visited {
border-bottom-color: var(--gb-faded_orange);
color: var(--gb-faded_orange);
}
.postlink:hover {
background-color: var(--gb-dark2);
color: var(--gb-bright_orange);
}
/* Back to top of page */
.top i {
color: var(--gb-gray_245);
}
/* Arrow links */
.arrow-left:hover,
.arrow-right:hover {
color: var(--gb-bright_purple);
}
/* Round cornered boxes and backgrouds
----------------------------------------------*/
#wrap {
background-color: var(--gb-dark0_hard);
border-color: var(--gb-dark0_hard);
}
.headerbar {
color: var(--gb-dark0);
}
.headerbar,
.forumbg {
background-color: var(--gb-light2);
background-image: -webkit-linear-gradient(top, var(--gb-light3) 0%, var(--gb-dark4) 2px, var(--gb-light4) 92px, var(--gb-light3) 100%);
background-image: linear-gradient(to bottom, var(--gb-light3) 0%, var(--gb-dark4) 2px, var(--gb-light4) 92px, var(--gb-light3) 100%);
background-repeat: repeat-x;
}
.forabg {
background-color: var(--gb-light2);
background-image: -webkit-linear-gradient(top, var(--gb-light2) 0%, var(--gb-light4) 2px, var(--gb-dark4) 92px, var(--gb-dark4) 100%);
background-image: linear-gradient(to bottom, var(--gb-light2) 0%, var(--gb-light4) 2px, var(--gb-dark4) 92px, var(--gb-dark4) 100%);
background-repeat: repeat-x;
}
.navbar {
background-color: var(--gb-dark1);
}
.panel {
background-color: var(--gb-dark2);
color: var(--gb-light1);
}
.post:target .content {
color: var(--gb-light1);
}
.post h3 a.first-unread,
.post:target h3 a {
color: var(--gb-light1);
}
.bg1 {
background-color: var(--gb-dark0);
}
table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) {
background-color: var(--gb-dark0);
}
.bg2 {
background-color: var(--gb-dark0_soft);
}
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) {
background-color: var(--gb-dark0_soft);
}
.bg3 {
background-color: var(--gb-dark2);
}
.ucprowbg {
background-color: var(--gb-dark2);
}
.fieldsbg {
background-color: var(--gb-dark1);
}
.site_logo {
-webkit-filter: invert(.80);
filter: invert(.80);
}
/* Horizontal lists
----------------------------------------*/
ul.navlinks {
border-top-color: var(--gb-dark0_hard);
}
/* Table styles
----------------------------------------*/
table.table1 thead th {
color: var(--gb-light0);
}
table.table1 tbody tr {
border-color: var(--gb-gray_245);
}
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
background-color: var(--gb-dark1);
color: var(--gb-light0);
}
table.table1 td {
color: var(--gb-light2);
}
table.table1 tbody td {
border-top-color: var(--gb-light4);
}
table.table1 tbody th {
border-bottom-color: var(--gb-dark4);
color: var(--gb-light2);
background-color: var(--gb-dark4);
}
table.info tbody th {
color: var(--gb-light1);
}
/* Misc layout styles
---------------------------------------- */
dl.details dt {
color: var(--gb-light1);
}
dl.details dd {
color: var(--gb-bright_green);
}
.sep {
color: var(--gb-bright_blue);
}
/* Icon styles
---------------------------------------- */
.icon.icon-blue,
a:hover .icon.icon-blue {
/* color: #196db5; */
color: var(--gb-neutral_blue);
}
.icon.icon-green,
a:hover .icon.icon-green {
color: var(--gb-neutral_green);
}
.icon.icon-red,
a:hover .icon.icon-red {
color: var(--gb-neutral_red);
}
.icon.icon-orange,
a:hover .icon.icon-orange {
color: var(--gb-neutral_orange);
}
.icon.icon-bluegray,
a:hover .icon.icon-bluegray {
color: var(--gb-faded_blue);
}
.icon.icon-gray,
a:hover .icon.icon-gray {
color: var(--gb-gray_245);
}
.icon.icon-lightgray,
a:hover .icon.icon-lightgray {
color: var(--gb-light4);
}
.icon.icon-black,
a:hover .icon.icon-black {
color: var(--gb-dark4);
}
.alert_close .icon:before {
background-color: var(--gb-dark2);
}
/* Jumpbox */
.jumpbox .dropdown li {
border-top-color: var(--gb-dark4);
}
.jumpbox-cat-link {
background-color: var(--gb-light4);
border-top-color: var(--gb-light4);
color: var(--gb-dark0_hard);
}
.jumpbox-cat-link:hover {
background-color: var(--gb-light2);
border-top-color: var(--gb-light2);
color: var(--gb-dark0_hard);
}
.jumpbox-forum-link {
background-color: var(--gb-dark1);
}
.jumpbox-forum-link:hover {
background-color: var(--gb-dark2);
}
.jumpbox .dropdown .pointer-inner {
border-color: var(--gb-dark2) transparent;
}
.jumpbox-sub-link {
background-color: var(--gb-dark1);
}
.jumpbox-sub-link:hover {
background-color: var(--gb-dark2);
}
/* Miscellaneous styles
---------------------------------------- */
.copyright {
color: var(--gb-light4);
}
.error {
color: var(--gb-natural_red);
}
.reported {
background-color: #F7ECEF;
}
li.reported:hover {
background-color: #ECD5D8 !important;
}
div.rules {
background-color: #ECD5D8;
color: #BC2A4D;
}
p.post-notice {
background-color: #ECD5D8;
background-image: none;
}
/*
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */
ul.forums {
background-color: #282828;
background-image: -webkit-linear-gradient(top, var(--gb-dark0_hard) 0%, var(--gb-dark1) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark0_hard) 0%, var(--gb-dark1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2021', endColorstr='#3c3836', GradientType=0);
}
ul.topiclist li {
color: var(--gb-light2);
}
ul.topiclist dd {
border-left-color: var(--gb-dark0_hard);
}
.rtl ul.topiclist dd {
border-right-color: var(--gb-dark0_hard);
border-left-color: transparent;
}
li.row {
border-top-color: var(--gb-dark0_hard);
border-bottom-color: var(--gb-dark0);
}
li.row strong {
color: var(--gb-light0_hard);
}
li.row:hover {
background-color: var(--gb-dark1);
color: var(--gb-light1);
}
li.row:hover dd {
border-left-color: var(--gb-dark0);
}
.rtl li.row:hover dd {
border-right-color: var(--gb-dark0);
border-left-color: transparent;
}
li.header dt,
li.header dd {
color: var(--gb-dark0_hard);
}
/* Post body styles
----------------------------------------*/
.postbody {
color: var(--gb-light1);
}
/* Content container styles
----------------------------------------*/
.content {
color: var(--gb-light1);
}
.content h2,
.panel h2 {
color: var(--gb-light0);
border-bottom-color: var(--gb-gray_245);
}
dl.faq dt {
color: var(--gb-light1);
}
.posthilit {
background-color: var(--gb-orange_faded);
color: var(--gb-orange_bright);
}
/* Post signature */
.signature {
border-top-color: var(--gb-gray_244);
}
/* Post noticies */
.notice {
border-top-color: var(--gb-gray_244);
}
/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
background-color: var(--gb-dark1);
border-color: var(--gb-gray_244);
}
blockquote blockquote {
/* Nested quotes */
background-color: var(--gb-dark2);
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: var(--gb-dark1);
}
/* Code block */
.codebox {
background-color: var(--gb-dark0);
border-color: var(--gb-gray_244);
}
.codebox p {
border-color: var(--gb-gray_245);
}
.codebox code {
color: var(--gb-bright_aqua);
}
/* Attachments
----------------------------------------*/
.attachbox {
background-color: var(--gb-dark0);
border-color: var(--gb-gray_245);
}
.pm-message .attachbox {
background-color: var(--gb-dark1);
}
.attachbox dd {
border-top-color: var(--gb-gray_245);
}
.attachbox p {
color: var(--gb-light2);
}
.attachbox p.stats {
color: var(--gb-light2);
}
.attach-image img {
border-color: var(--gb-light4);
}
/* Inline image thumbnails */
dl.file dd {
color: var(--gb-light2);
}
dl.thumbnail img {
border-color: var(--gb-light4);
background-color: var(--gb-dark0);
}
dl.thumbnail dd {
color: var(--gb-light2);
}
dl.thumbnail dt a:hover {
background-color: var(--gb-dark1);
}
dl.thumbnail dt a:hover img {
border-color: var(--gb-light3);
}
/* TODO: Post poll styles
----------------------------------------*/
/* Poster profile block
----------------------------------------*/
.postprofile {
/*
color: var(--gb-light4);
*/
color: var(--gb-neutral_green);
border-color: var(--gb-dark2);
}
.pm .postprofile {
border-color: var(--gb-dark2);
}
.postprofile strong {
/*
color: var(--gb-light2);
*/
color: var(--gb-bright_green);
}
.online {
background-image: url("./en/icon_user_online.gif");
}
dd.profile-warnings {
border-color: var(--gb-bright_red);
}
div.phpbb-showtopicauthor {
color: var(--gb-bright_red);
}
/*--------------------------------------------------------------
buttons.css
-------------------------------------------------------------- */
.button {
border-color: var(--gb-dark2);
background-color: var(--gb-dark1);
/* Old browsers */
background-image: -webkit-linear-gradient(top, var(--gb-dark1) 0%, var(--gb-dark0) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark1) 0%, var(--gb-dark0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3836', endColorstr='#282828', GradientType=0);
box-shadow: 0 0 0 1px var(--gb-dark0) inset;
-webkit-box-shadow: 0 0 0 1px var(--gb-dark0) inset;
}
a.button {
color: var(--gb-bright_red);
}
.button:hover,
.button:focus {
/*
border-color: var(--gb-neutral_blue);
*/
border-color: var(--gb-neutral_purple);
background-color: var(--gb-dark0);
background-image: -webkit-linear-gradient(top, var(--gb-dark0) 0%, var(--gb-dark1) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark0) 0%, var(--gb-dark1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#3c3836', GradientType=0);
text-shadow: 1px 1px 0 var(--gb-dark0), -1px -1px 0 var(--gb-dark0), -1px -1px 0 rgba(188, 42, 77, 0.2);
}
a.button:hover {
color: var(--gb-bright_red);
}
.button .icon,
.button-secondary {
/*
color: var(--gb-light4);
*/
color: var(--gb-bright_blue);
}
.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon {
/*
color: var(--gb-neutral_blue);
*/
color: var(--gb-bright_purple);
}
.button-search:hover,
.button-search-end:hover {
border-color: var(--gb-dark2);
}
.caret {
border-color: var(--gb-dark4);
}
.caret {
border-color: var(--gb-dark3);
}
.contact-icons a {
border-color: var(--gb-dark3);
}
.contact-icons a:hover {
background-color: var(--gb-dark4);
}
/* Pagination
---------------------------------------- */
.pagination li a {
background: var(--gb-dark1);
filter: none;
border-color: var(--gb-dark4);
box-shadow: none;
-webkit-box-shadow: none;
color: var(--gb-light3);
}
.pagination li.ellipsis span {
background: transparent;
color: var(--gb-light1);
}
.pagination li.active span {
background: var(--gb-light3);
border-color: var(--gb-light3);
color: var(--gb-dark0);
}
.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
/*
background: var(--gb-bright_blue);
border-color: var(--gb-brighter_blue);
*/
background: var(--gb-neutral_purple);
border-color: var(--gb-bright_purple);
filter: none;
color: var(--gb-light0);
text-shadow: none;
}
/* Search box
--------------------------------------------- */
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
color: var(--gb-light0);
border-color: var(--gb-dark2);
background-color: var(--gb-dark0);
}
.search-header {
box-shadow: 0 0 10px var(--gb-neutral_blue);
}
.search-results li:hover,
.search-results li.active {
background-color: var(--gb-dark1);
}
/*
--------------------------------------------------------------
Colours and backgrounds for cp.css
-------------------------------------------------------------- */
/* Main CP box
----------------------------------------*/
.panel-container h3,
.panel-container hr,
.cp-menu hr {
border-color: var(--gb-dark0);
}
.panel-container .panel li.row {
border-bottom-color: var(--gb-dark0);
border-top-color: var(--gb-dark4);
}
ul.cplist {
border-top-color: var(--gb-dark2);
}
.panel-container .panel li.header dd,
.panel-container .panel li.header dt {
color: var(--gb-light0);
}
.panel-container table.table1 thead th {
color: var(--gb-light1);
border-bottom-color: var(--gb-light4);
}
.cp-main .pm-message {
border-color: var(--gb-light4);
background-color: var(--gb-dark0);
}
/* CP tabbed menu
----------------------------------------*/
.tabs .tab > a {
background: var(--gb-dark1);
color: var(--gb-bright_blue);
}
.tabs .tab > a:hover {
background: var(--gb-dark1);
color: var(--gb-bright_purple);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
background-color: var(--gb-dark1);
background-image: -webkit-linear-gradient(top, var(--gb-dark3) 0%, var(--gb-dark2) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark3) 0%, var(--gb-dark2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504945', endColorstr='#3c3836', GradientType=0);
border-color: var(--gb-dark2);
box-shadow: 0 1px 1px var(--gb-dark3) inset;
color: var(--gb-bright_blue);
}
.tabs .activetab > a:hover {
color: var(--gb-bright_blue);
}
/* TODO: Mini tabbed menu used in MCP
----------------------------------------*/
/* TODO: Responsive tabs
----------------------------------------*/
/* UCP navigation menu
----------------------------------------*/
/* Link styles for the sub-section links */
.navigation a {
color: var(--gb-bright_blue);
background: var(--gb-dark1);
background: -webkit-linear-gradient(left, var(--gb-dark1) 50%, var(--gb-dark0_soft) 100%);
background: linear-gradient(to right, var(--gb-dark1) 50%, var(--gb-dark0_soft) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32302f', endColorstr='#282828', GradientType=1);
}
.rtl .navigation a {
color: var(--gb-bright_blue);
background: var(--gb-dark1);
background: -webkit-linear-gradient(left, var(--gb-dark0_soft) 50%, var(--gb-dark1) 100%);
background: linear-gradient(to right, var(--gb-dark0_soft) 50%, var(--gb-dark1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#32302f', GradientType=1);
}
.navigation a:hover {
background: var(--gb-dark1);
color: var(--gb-bright_purple);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.navigation .active-subsection a {
background: var(--gb-dark0_soft);
color: var(--gb-bright_purple);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.navigation .active-subsection a:hover {
color: var(--gb-bright_purple);
}
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
#navigation a,
.rtl #navigation a {
background: var(--gb-dark0);
}
}
/* Preferences pane layout
----------------------------------------*/
.panel-container h2 {
color: var(--gb-light1);
}
.panel-container .panel {
background-color: var(--gb-dark0_soft);
}
.cp-main .pm {
background-color: var(--gb-dark0_soft);
}
/* Friends list */
.cp-mini {
background-color: var(--gb-dark1);
}
dl.mini dt {
color: var(--gb-light2);
}
/* PM Styles
----------------------------------------*/
/* PM Message history */
.current {
color: var(--gb-light1) !important;
}
/* PM marking colours */
.pmlist li.pm_message_reported_colour,
.pm_message_reported_colour {
border-left-color: var(--gb-neutral_red);
border-right-color: var(--gb-neutral_red);
}
.pmlist li.pm_marked_colour,
.pm_marked_colour {
border-color: var(--gb-neutral_orange);
}
.pmlist li.pm_replied_colour,
.pm_replied_colour {
border-color: var(--gb-gray_245);
}
.pmlist li.pm_friend_colour,
.pm_friend_colour {
border-color: var(--gb-neutral_blue);
}
.pmlist li.pm_foe_colour,
.pm_foe_colour {
border-color: var(--gb-dark0);
}
/* TODO: Avatar gallery */
/*
--------------------------------------------------------------
Colours and backgrounds for forms.css
-------------------------------------------------------------- */
/* General form styles
----------------------------------------*/
select {
border-color: var(--gb-gray_245);
background-color: var(--gb-dark1);
color: var(--gb-light1);
}
label {
color: var(--gb-light2);
}
option.disabled-option {
color: var(--gb-gray_245);
}
/* Definition list layout for forms
---------------------------------------- */
dd label {
color: var(--gb-light2);
}
fieldset.fields1 {
background-color: transparent;
}
/* Hover effects */
fieldset dl:hover dt label {
color: var(--gb-light0_soft);
}
fieldset.fields2 dl:hover dt label {
color: inherit;
}
/* Quick-login on index page */
fieldset.quick-login input.inputbox {
background-color: var(--gb-dark1);
color: var(--gb-light0);
}
/* Posting page styles
----------------------------------------*/
.message-box textarea {
color: var(--gb-light0);
}
.message-box textarea.drag-n-drop {
outline-color: rgba(102, 102, 102, 0.5);
}
.message-box textarea.drag-n-drop-highlight {
outline-color: rgba(17, 163, 234, 0.5);
}
/* Input field styles
---------------------------------------- */
.inputbox {
background-color: var(--gb-dark1);
border-color: var(--gb-gray_245);
color: var(--gb-light0);
}
.inputbox:-moz-placeholder {
color: var(--gb-dark4);
}
.inputbox::-webkit-input-placeholder {
color: var(--gb-dark4);
}
.inputbox:hover {
border-color: var(--gb-bright_yellow);
}
.inputbox:focus {
border-color: var(--gb-bright_yellow);
}
.inputbox:focus:-moz-placeholder {
color: transparent;
}
.inputbox:focus::-webkit-input-placeholder {
color: transparent;
}
/* Form button styles
---------------------------------------- */
a.button1,
input.button1,
input.button3,
a.button2,
input.button2 {
color: var(--gb-light1);
background-color: var(--gb-dark1);
background-image: -webkit-linear-gradient(top, var(--gb-dark2) 0%, var(--gb-dark1) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark2) 0%, var(--gb-dark1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504945', endColorstr='#3c3836', GradientType=0);
}
a.button1,
input.button1 {
border-color: var(--gb-gray_245);
}
input.button3 {
background-image: none;
}
/* Alternative button */
a.button2,
input.button2,
input.button3 {
border-color: var(--gb-gray_245);
}
/* <a> button in the style of the form buttons */
a.button1,
a.button2 {
color: var(--gb-light1);
}
/* Hover states */
a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
input.button3:hover {
border-color: var(--gb-neutral_yellow);
color: var(--gb-bright_yellow);
background-color: var(--gb-dark2);
background-image: -webkit-linear-gradient(top, var(--gb-dark1) 0%, var(--gb-dark2) 100%);
background-image: linear-gradient(to bottom, var(--gb-dark1) 0%, var(--gb-dark2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3836', endColorstr='#504945', GradientType=0);
}
/* Focus states */
input.button1:focus,
input.button2:focus,
input.button3:focus {
border-color: var(--gb-bright_blue);
color: var(--gb-bright_blue);
}
input.disabled {
border-color: var(--gb-gray_244);
}
/* jQuery popups
---------------------------------------- */
.phpbb_alert {
background-color: var(--gb-dark1);
border-color: var(--gb-gray_244);
}
.darken {
background-color: #000000;
}
.loading_indicator {
background-color: #000000;
}
.dropdown-extended ul li {
border-top-color: var(--gb-gray_245);
}
.dropdown-extended ul li:hover {
background-color: var(--gb-dark2);
color: var(--gb-light0);
}
.dropdown-extended .header,
.dropdown-extended .footer {
border-color: var(--gb-gray_245);
color: var(--gb-light1);
}
.dropdown-extended .footer {
border-top-style: solid;
border-top-width: 1px;
}
.dropdown-extended .header {
color: var(--gb-light1);
text-shadow: 1px 1px 1px var(--gb-dark2);
background-color: #F1F8FF;
background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
background-image: linear-gradient(to bottom, var(--gb-dark4) 0%, var(--gb-dark3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#CADCEB', GradientType=0);
}
.dropdown .pointer {
border-color: var(--gb-gray_244) transparent;
}
.dropdown .pointer-inner {
border-color: var(--gb-dark0_soft) transparent;
}
.dropdown-extended .pointer-inner {
border-color: var(--gb-dark0_soft) transparent;
}
.dropdown .dropdown-contents {
background: var(--gb-dark0_soft);
border-color: var(--gb-gray_244);
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}
.dropdown-up .dropdown-contents {
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
}
.dropdown li,
.dropdown li li {
border-color: var(--gb-gray_244);
}
.dropdown li.separator {
border-color: var(--gb-gray_244);
}
/* Notifications
---------------------------------------- */
.notification_list p.notification-time {
color: var(--gb-neutral_green);
;
}
li.notification-reported strong,
li.notification-disapproved strong {
color: var(--gb-bright_red);
}
.badge {
background-color: var(--gb-bright_red);
color: var(--gb-light0);
}
/* Inverted topic/forum bullet images
----------------------------------------*/
.forum_link,
.forum_read,
.forum_read_subforum,
.forum_unread,
.forum_unread_subforum,
.global_read,
.global_read_mine,
.global_read_locked,
.global_read_locked_mine,
.global_unread,
.global_unread_mine,
.global_unread_locked,
.global_unread_locked_mine,
.announce_read,
.announce_read_mine,
.announce_read_locked,
.announce_read_locked_mine,
.announce_unread,
.announce_unread_mine,
.announce_unread_locked,
.announce_unread_locked_mine,
.sticky_read,
.sticky_read_mine,
.sticky_read_locked,
.sticky_read_locked_mine,
.sticky_unread,
.sticky_unread_mine,
.sticky_unread_locked,
.sticky_unread_locked_mine,
.topic_read,
.topic_read_mine,
.topic_read_locked,
.topic_read_locked_mine,
.topic_read_hot,
.topic_read_hot_mine,
.topic_unread,
.topic_unread_mine,
.topic_unread_locked,
.topic_unread_locked_mine,
.topic_unread_hot,
.topic_unread_hot_mine,
.pm_read,
.pm_unread {
background-image: none;
}
.forum_link::before,
.forum_read::before,
.forum_read_subforum::before,
.forum_unread::before,
.forum_unread_subforum::before,
.global_read::before,
.global_read_mine::before,
.global_read_locked::before,
.global_read_locked_mine::before,
.global_unread::before,
.global_unread_mine::before,
.global_unread_locked::before,
.global_unread_locked_mine::before,
.announce_read::before,
.announce_read_mine::before,
.announce_read_locked::before,
.announce_read_locked_mine::before,
.announce_unread::before,
.announce_unread_mine::before,
.announce_unread_locked::before,
.announce_unread_locked_mine::before,
.sticky_read::before,
.sticky_read_mine::before,
.sticky_read_locked::before,
.sticky_read_locked_mine::before,
.sticky_unread::before,
.sticky_unread_mine::before,
.sticky_unread_locked::before,
.sticky_unread_locked_mine::before,
.topic_read::before,
.topic_read_mine::before,
.topic_read_locked::before,
.topic_read_locked_mine::before,
.topic_read_hot::before,
.topic_read_hot_mine::before,
.topic_unread::before,
.topic_unread_mine::before,
.topic_unread_locked::before,
.topic_unread_locked_mine::before,
.topic_unread_hot::before,
.topic_unread_hot_mine::before,
.pm_read::before,
.pm_unread::before {
content: "";
width: 50px;
height: 100%;
position: absolute;
background-position: 10px 50%;
background-repeat: no-repeat;
background-size: 32px;
-webkit-filter: invert(.75);
filter: invert(.75);
}
.forum_link::before {
background-image: url("./styles/prosilver/theme/images/forum_link.gif");
}
.forum_read::before {
background-image: url("./styles/prosilver/theme/images/forum_read.gif");
}
.forum_read_subforum::before {
background-image: url("./styles/prosilver/theme/images/forum_read_subforum.gif");
}
.forum_unread::before {
background-image: url("./styles/prosilver/theme/images/forum_unread.gif");
}
.forum_unread_subforum::before {
background-image: url("./styles/prosilver/theme/images/forum_unread_subforum.gif");
}
.global_read::before,
.announce_read::before {
background-image: url("./styles/prosilver/theme/images/announce_read.gif");
}
.global_read_mine::before,
.announce_read_mine::before {
background-image: url("./styles/prosilver/theme/images/announce_read_mine.gif");
}
.global_read_locked::before,
.announce_read_locked::before {
background-image: url("./styles/prosilver/theme/images/announce_read_locked.gif");
}
.global_read_locked_mine::before,
.announce_read_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/announce_read_locked_mine.gif");
}
.global_unread::before,
.announce_unread::before {
background-image: url("./styles/prosilver/theme/images/announce_unread.gif");
}
.global_unread_mine::before,
.announce_unread_mine::before {
background-image: url("./styles/prosilver/theme/images/announce_unread_mine.gif");
}
.global_unread_locked::before,
.announce_unread_locked::before {
background-image: url("./styles/prosilver/theme/images/announce_unread_locked.gif");
}
.global_unread_locked_mine::before,
.announce_unread_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/announce_unread_locked_mine.gif");
}
.sticky_read::before {
background-image: url("./styles/prosilver/theme/images/sticky_read.gif");
}
.sticky_read_mine::before {
background-image: url("./styles/prosilver/theme/images/sticky_read_mine.gif");
}
.sticky_read_locked::before {
background-image: url("./styles/prosilver/theme/images/sticky_read_locked.gif");
}
.sticky_read_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/sticky_read_locked_mine.gif");
}
.sticky_unread::before {
background-image: url("./styles/prosilver/theme/images/sticky_unread.gif");
}
.sticky_unread_mine::before {
background-image: url("./styles/prosilver/theme/images/sticky_unread_mine.gif");
}
.sticky_unread_locked::before {
background-image: url("./styles/prosilver/theme/images/sticky_unread_locked.gif");
}
.sticky_unread_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/sticky_unread_locked_mine.gif");
}
.topic_read::before,
.pm_read::before {
background-image: url("./styles/prosilver/theme/images/topic_read.gif");
}
.topic_read_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_read_mine.gif");
}
.topic_read_locked::before {
background-image: url("./styles/prosilver/theme/images/topic_read_locked.gif");
}
.topic_read_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_read_locked_mine.gif");
}
.topic_read_hot::before {
background-image: url("./styles/prosilver/theme/images/topic_read_hot.gif");
}
.topic_read_hot_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_read_hot_mine.gif");
}
.topic_unread::before,
.pm_unread::before {
background-image: url("./styles/prosilver/theme/images/topic_unread.gif");
}
.topic_unread_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_unread_mine.gif");
}
.topic_unread_locked::before {
background-image: url("./styles/prosilver/theme/images/topic_unread_locked.gif");
}
.topic_unread_locked_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_unread_locked_mine.gif");
}
.topic_unread_hot::before {
background-image: url("./styles/prosilver/theme/images/topic_unread_hot.gif");
}
.topic_unread_hot_mine::before {
background-image: url("./styles/prosilver/theme/images/topic_unread_hot_mine.gif");
}
/* Fix inline-styled usernames
----------------------------------------*/
.username-coloured[style="color: #AA0000;"] {
color: var(--gb-neutral_red) !important;
}
.username-coloured[style="color: #FF8C00;"] {
color: var(--gb-neutral_orange) !important;
}
/* Misc
----------------------------------------*/
.mini-panel {
background-color: var(--gb-dark1);
}
.mini-panel h3 {
color: var(--gb-light2);
}
.boardrules-menu {
border-top-color: var(--gb-gray_245);
}
.boardrules-menu li {
border-bottom-color: var(--gb-dark4);
}
.postbody .content::-webkit-scrollbar,
.topicreview::-webkit-scrollbar,
.post_details::-webkit-scrollbar,
.codebox code::-webkit-scrollbar,
.attachbox dd::-webkit-scrollbar,
.attach-image::-webkit-scrollbar,
.dropdown-extended ul::-webkit-scrollbar {
background-color: var(--gb-dark3);
}
.postbody .content::-webkit-scrollbar-thumb,
.topicreview::-webkit-scrollbar-thumb,
.post_details::-webkit-scrollbar-thumb,
.codebox code::-webkit-scrollbar-thumb,
.attachbox dd::-webkit-scrollbar-thumb,
.attach-image::-webkit-scrollbar-thumb,
.dropdown-extended ul::-webkit-scrollbar-thumb {
background-color: var(--gb-light3);
}
input[type="number"] {
background-color: var(--gb-dark1);
}
Code: Select all
.*bogleheads\.org/forum/.*
(Edit: Moved the CSS from github to this post.)