User:Rhoffman/common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
Author: Twily 2014 - 2015
Website: http://twily.info/
Modified by: Frank604
Website: frankshin.com
Github: frank604
This style is based on https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark
*/
/* AGENT_SHEET */
@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
:root {
/* VARIABLES */
--color-1: #2a2e35; /* background/dark */
--color-2: #5a5a5a; /* border/grey */
--color-3: #e1e1e1; /* text/light */
--color-4: #5a5a5a; /* text/dim */
--color-5: #a2a2a2; /* link/blue */
--color-6: #cca8c9; /* link/magenta */
--color-7: #de8990; /* error/red */
--color-8: #e1e1e1; /* text highlight */
--color-9: #5a5a5a; /* background */
}
/*----- SITES TO EXCLUDE----*/
@-moz-document regexp("https?://(?!(localhost|twily.info|.*.facebook.com|.*.dnb.no|.*.yourworldoftext.com|.*.youtube.com)).*"),
url-prefix(ftp://), url-prefix(about), url-prefix(javascript) {
/* global background and colors */
html { background: transparent !important; }
hr { visibility: hidden !important; height: 12px !important; }
* {
color: var(--color-3) !important; text-shadow: none !important;
background-color: var(--color-1) !important; box-shadow: none !important;
border-color: var(--color-2) !important;
border-top-color: var(--color-2) !important; border-bottom-color: var(--color-2) !important;
border-left-color: var(--color-2) !important; border-right-color: var(--color-2) !important;
}
*:before, *:after { background-color: var(--color-1) !important; border-color: var(--color-2) !important; }
/* links */
a, a *, a:link, a:link *
a:visited, a:visited * {
color: var(--color-5) !important; text-decoration: none !important;
}
a:hover, a:hover *,
a:active, a:active * {
color: var(--color-6) !important; text-decoration: underline !important;
}
/* input */
input[type="text"] *, input[type="password"] *, textarea * {
-moz-appearance: none !important;
background: var(--color-1) !important; color: var(--color-3) !important;
border: 0 !important;
}
input[type="button"], input[type="submit"],
input[type="button"] *, input[type="submit"] *,
button, button * {
-moz-appearance: none !important;
background-color: var(--color-1) !important; color: var(--color-3) !important;
border: 0 !important;
}
select, select * {
-moz-appearance: none !important; border: 0 !important;
background: var(--color-1) !important; color: var(--color-3) !important;
}
/* headlines */
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, strong, [id*="headline"], [class*="headline"], [id*="header"], [class*="header"] td { color: var(--color-3) !important; }
a h1, a h2, a h3, a h4, a h5, a h6, h1 a, h2 a, h3 a, a strong, a[id*="headline"], a[class*="headline"], a[id*="header"], a[class*="header"] { text-decoration: underline !important; }
[class*="error"], [class*="alert"], code, span[onclick], div[onclick] { color: var(--color-7) !important; }
::-moz-selection { background: var(--color-4) !important; color: var(--color-8) !important; }
:focus { outline: none !important; }
div[style="display: block;"] { background: var(--color-1)/*rgba(0,0,0,.2)*/ !important; }
table {
background: var(--color-1) !important;
}
table > tbody > tr:nth-child(even),
table > tbody > tr > td:nth-child(even) {
background-color: var(--color-1)/*rgba(0,0,0,.2)*/ !important;
}
/* menu etc */
iframe, embed, header, nav, footer, label [onclick], nav ul, div[style*="position:"][style*="left:"][style*="visible"],
div[style*="z-index:"][style*="left:"][style*="visible"], div[style*="-moz-user-select"], div[role="menu"], div[role="dialog"],
span[class*="script"] div, [id*="menu"], [class*="dropdown"], [class*="popup"], [class*="title"],
ul[style*="display:"], ul[style*="visibility:"] ul, [id*="nav"] ul, [class*="menu"], a[onclick][style*="display"], a[id*="ghosteryfirefox"],
#ghostery-purple-bubble, #translator-popup, .menu, .tooltip, .hovercard, .vbmenu_popup {
background: var(--color-1)/*rgba(0,0,0,.2)*/ !important;
}
/* images */
img { opacity: 0.7 !important; transition: .2s !important; }
img:hover, a:hover img { opacity: 1 !important; }
*/
img.decoded { background: none !important; }
body, *:not(:empty):not(html):not(span):not(a):not(b):not(option):not(img):not([style="display: block;"]):not([onclick*="open"]):not([onclick*="s_objectID"])
:not([class*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([class*="item"]):not([id*="item"])
:not([class*="thumb"]):not([class*="icon"]):not(.text):not([id*="lbImage"]):not([class*="cc-in"]):not([class*="gr-body"]):not([id*="watch"]):not(#globalsearch):not(.sp),
.r3_hm, .gmbutton2 b, .gtab-i, .ph, .bstab-iLft, .csb, #pagination div, [style*="sprite2.png"], #mw-head-base, #mw-page-base {
background-image: none !important;
}
}
/* ----- ABOUT PAGES BACKGROUND ----- */
@-moz-document url-prefix(about) {
* { background: none var(--color-1) !important; }
body > * { background-color: var(--color-1) !important; }
#list-view, #list-view * { background-color: var(--color-1) !important; }
#detail-view, #detail-view * { background: var(--color-1) !important; }
#addons-page > * > *, #addons-page > * > * > * > * { border-color: transparent !important; }
}
/* --- CUSTOM WEBSITES --- */
@-moz-document domain("yourworldoftext.com") { /* Your World Of Text */
* { background: var(--color-1) !important; color: var(--color-4) !important; }
.active-cursor { background: var(--color-9) !important; color: var(--color-3) !important; }
td[style*="background-color"] { color: var(--color-1) !important; }
}
/*----- FIX WHITE NEW TAB FLASH -----*/
tabbrowser tabpanels, #appcontent > #content { background: #2a2e35 !important; }
browser { background-color: #000 !important; }
/* forum icons */
.icon {
background-color: var(--color-2) !important; border-color: var(--color-2) !important;
}
.inew .icon {
background-color: var(--color-3) !important; border-color: var(--color-3) !important;
}
@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*
Author: Twily
Description: Minimal flat styled tabs for Australis
Compitability: Firefox Nightly v31.0a1 - v32.0a1 (Australis)
CSS Variables were introduced to Firefox in v29.0a1
Website: http://twily.info/
Note: To enable the urlbar; search this css for:
"make the url-bar visible" and "adjust margin-top to"
*/
:root {
/* TAB VARIABLES 17181A-CECFD1 & 27282B-AAABAD*/
--bg-light: #5a5a5a; --bg-dark: #2a2e35;
--fg-light: #e1e1e1; --fg-dark: #5a5a5a;
/*--tab-triangle-correction: -1px;/**/
--tab-height: 24px; --tab-icon-size: 20px; --tab-strip-margin: -12px; --tab-overlap: -5px;
--tab-fonts: "Roboto", "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 10pt;
--tab-triangle: block; /* block | none */
/* URL VARIABLES */
--url-background: var(--bg-light); --url-color: var(--fg-dark);
--url-height: 24px; --url-right-margin: 5px;
--url-fonts: "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --url-font-size: 10pt;
--url-text-align: center; /* left | center | right */
--url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */
margin-bottom: 0 /* var(--url-height) */ !important;
}
@-moz-document url(chrome://browser/content/browser.xul) {
/* URL-BAR */
#PanelUI-button, #bookmarks-menu-button, #downloads-button, #home-button, #stylish-toolbar-button, #abp-toolbarbutton,
#back-button, #forward-button, #identity-box, #urlbar-reload-button, #urlbar-stop-button, #urlbar-go-button,
#notification-popup-box, #new-tab-button, #private-browsing-indicator, #search-container, #nav-bar-overflow-button,
.tabs-newtab-button, .tab-close-button, .tab-close, .tab-throbber, .tab-background-start, .tab-background-end,
#window-controls /*, #alltabs-button, #tabview-button, .tab-icon-image, .tab-icon-image:not([pinned])*/ { display: none !important; }
/* --- Uncomment the section below to enable the New Tab Button --- */
/*
.tabs-newtab-button { display: block !important; background: transparent !important; margin: 0 8px 0 0 !important; width: 24px !important; }
.tabs-newtab-button::before { content: "+" !important; }
/**/
.tab-drop-indicator { margin-bottom: 0 !important; }
#nav-bar {
position: var(--url-position) !important; bottom: 0 !important;
width: 100% !important; height: var(--url-height) !important;
min-height: var(--url-height) !important; max-height: var(--url-height) !important;
margin: 0 0 0 0 !important;
/* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */
/*
position: fixed !important; top: 0 !important; left: 0 !important;
width: 315px !important; max-width: 315px !important;
z-index: 100 !important;
/**/
}
#nav-bar-customization-target { width: 100% !important; }
#urlbar-wrapper {
width: 100% !important; margin-top: -0px !important; /* adjust margin-top to ~ -5px if you experience gap */
position: absolute !important; top: 0 !important; left: 0 !important;
border-bottom: 0px solid var(--bg-light) !important;
}
#urlbar {
border: none !important; border-radius: 0 !important;
margin: 0 0 0 0 !important; padding: 0 2px 0 9px !important;
width: calc(100% + var(--url-right-margin)) !important;
height: var(--url-height) !important; min-height: var(--url-height) !important;
background: var(--url-background) !important; color: var(--url-color) !important;
font-family: var(--url-fonts) !important; font-size: var(--url-font-size) !important;
text-align: var(--url-text-align) !important;
}
/*#urlbar * { -moz-appearance: none !important; }*/
/* --- Comment out the section below to make the url-bar visible --- */
/**/
#nav-bar {
width: 0 !important; height: 0 !important;
position: fixed !important; left: -1px !important; top: -1px !important;
overflow: hidden !important; visibility: hidden !important;
}
/**/
/* TABS */
.tabbrowser-tab[fadein]:not([pinned]) { min-width: 100px !important; max-width: /*180px*/ 100% !important; }
tab {
font-family: var(--tab-fonts) !important;
height: var(--tab-height) !important; min-height: var(--tab-height) !important;
background: var(--bg-dark) !important; color: var(--fg-dark) !important;
font-size: var(--tab-font-size); text-shadow: none !important; text-align: left /* center | left */ !important;
}
.tabbrowser-tab label { padding: 0 22px 0 22px !important; }
#tabbrowser-tabs .tabbrowser-tab[pinned] { width: 48px !important; }
#tabbrowser-tabs .tabbrowser-tab[pinned] label { display: none !important; }
#tabbrowser-tabs .tabbrowser-tab .tab-icon-image {
margin: 0 -10px 0 16px !important;
width: var(--tab-icon-size) !important;
height: var(--tab-icon-size) !important;
}
.tabbrowser-tab *, .tabs-newtab-button * {
background: none !important; list-style-image: none !important;
margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;
-moz-appearance: none !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-stack { height: var(--tab-height) !important; width: 100% !important; }
#tabbrowser-tabs .tabbrowser-arrowscrollbox .box-inherit.scrollbox-innerbox { max-height: var(--tab-height) !important; }
.scrollbutton-up, .scrollbutton-down { border: none !important; }
#tabbrowser-tabs[overflow]:not([positionpinnedtabs]) { -moz-padding-start: 20px !important; }
.tabbrowser-tab[selected="true"] .tab-stack {
background: var(--bg-light) !important; color: var(--fg-light) !important;
border-radius: 0px !important; position: relative !important;
/*border-top: 1px solid #dc52a5 !important;/**/
}
.tabbrowser-tab[selected="true"]:before { /* Left Triangle (of selected tab) */
content: '' !important; display: var(--tab-triangle);
position: absolute !important; top: 0 !important; left: var(--tab-overlap) !important;
width: 0 !important; height: 0 !important;
border: none !important; z-index: 2 !important;
/*border-left: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;/**/
/**/border-top: var(--tab-height) solid var(--bg-dark) !important;
border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;/**/
}
.tabbrowser-tab[selected="true"]:after { /* Right Triangle (of selected tab) */
content: '' !important; display: var(--tab-triangle);
position: absolute !important; top: 0 !important; right: var(--tab-overlap) !important;
width: 0 !important; height: 0 !important;
border: none !important; z-index: 2 !important;
/*border-right: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;/**/
/**/border-top: var(--tab-height) solid var(--bg-dark) !important;
border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;/**/
}
#TabsToolbar, #tabbrowser-tabs {
-moz-appearance: none !important;
height: var(--tab-height) !important; min-height: var(--tab-height)!important;
margin: 0 var(--tab-strip-margin) !important;
background: var(--bg-dark) !important;
/* --- Uncomment the line below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */
/*margin-left: 150px !important;/**/
}
#TabsToolbar::after { display: none !important; }
.tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; }
/*browser, #navigator-toolbox { -moz-appearance: none !important; background: transparent !important; }*/
/*#navigator-toolbox::after { height: 0 !important;/**/
#navigator-toolbox::after { height: 0px !important; background: var(--bg-light) !important; }
#liberator-separator { height: 0px !important; background: var(--bg-light) !important; border-top: 0 !important; }
/* MENUS */
menuitem + menuseparator, menu + menuseparator/*, .menu-iconic-left*/ { display: none !important; }
/*menuitem > label { margin-left: var(--tab-height) !important; }*/
menubar, menubutton, menulist, menu, menuitem {
font-family: var(--tab-fonts) !important; font-size: var(--tab-font-size);
height: var(--tab-height) !important;
}
/* HIDE ORANGE MENU BUTTON */
#appmenu-toolbar-button, #appmenu-button-container { display: none !important; }
/* HIDE STATUS BAR */
#status-bar, #statusbar-display, statuspanel { display: none !important; }
/* PRIVATE BROWSING ICON HIDE */
#main-window[privatebrowsingmode=temporary] #private-browsing-indicator,
#main-window[privatebrowsingmode=temporary] #private-browsing-indicator-titlebar { display: none !important; }
/* Vimperator icon style */
#liberator-statusline:not([customizing="true"]) { margin: -2px -2px !important; padding: 0 0 !important; height: 24px !important; }
#liberator-statusline:not([customizing="true"]) :-moz-any(toolbarbutton) { height: 100% !important; }
#tabview-button {
list-style-image: url(http://twily.info/img/tabview-button.png?v=2) /* 16x16 px image */ !important;
-moz-image-region: rect(0, 0, 0, 0) !important;
}
#liberator-completions { background: var(--bg-dark) !important; }
/* Tabgroup margin top fix */
#tab-view-deck #tab-view { margin: 24px 12px 12px 12px !important; }
#tab-view-deck { background: var(--bg-light) !important; }
window[sizemode="fullscreen"] #liberator-statusline { display: none !important; }
window[sizemode="fullscreen"] #liberator-bottombar {
margin-top: -24px !important;
transition: 1s ease !important; transition-delay: .3s !important;
}
/*window[sizemode="fullscreen"] #browser-panel { margin-top: -1px !important; }*/
}
/* Tab Group Page Style (Ctrl+Shift+E) */
@-moz-document url(chrome://browser/content/tabview.html) {
#content #bg, #actions, body { background: var(--bg-light) !important; }
body * { color: var(--fg-light) !important; }
body .groupItem, #content #actions, body .undo {
background: var(--bg-dark) !important;
border: 0 !important; border-radius: 0 !important; box-shadow: 0 0 0 0 !important;
}
#content #actions {
opacity: 0 !important; display: none !important; /* block | none */
transition: .3s ease-out !important;
}
#content #actions:hover { opacity: 1 !important; }
body .appTabTrayContainer { border: 0 !important; }
body .tab, body .tab .thumb {
box-shadow: 0 0 0 0 !important; border: 0 !important; border-radius: 0 !important;
background: transparent !important; padding : 0 !important;
}
body .tab .favicon { display: none !important; }
body .groupItem .name { border: 0 !important; }
body .tab .tab-title { padding-top: 2px !important; }
}
/* AGENT_SHEET */
@-moz-document url-prefix(http://), url-prefix(https://), url-prefix(chrome://liberator/), url-prefix(file:///) {
/* SCROLLBAR */
scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
display: none !important; /* none = hide || block = show */
}
/*
scrollbar > slider { -moz-appearance: none !important; }
scrollbar[orient="vertical"] { margin: -3px -7px -3px -3px !important; }
scrollbar[orient='vertical'] > slider { background: #27282B !important; max-width: 5px !important; }
scrollbar[orient='vertical'] > slider > thumb {
-moz-appearance: none !important;
background: #9b79f7 !important; border: 0 !important;
width: 5px !important; max-width: 5px !important;
}
scrollbar[orient="horizontal"] { margin: -3px -3px -7px -3px !important; }
scrollbar[orient='horizontal'] > slider { background: #27282B !important; max-height: 5px !important; }
scrollbar[orient='horizontal'] > slider > thumb {
-moz-appearance: none !important;
background: #9b79f7 !important; border: 0 !important;
height: 5px !important; max-height: 5px !important;
}
scrollbar > scrollbarbutton { -moz-appearance: none !important; border: none !important; background: none !important; }
scrollbar[orient='vertical'] > scrollbarbutton { min-height: 0 !important; }
scrollbar[orient='horizontal'] > scrollbarbutton { min-width: 0 !important; }
/**/
}
/* background color around/behind pictures opened in firefox (require html namespace on top) */
@-moz-document regexp("(https?://|file:///)(.*)\\.(jpeg|jpg|gif|png|apng|svg|bmp|webm|webp)") {
body { background: var(--bg-light) !important; }
img.decoded { background: url(none) !important; }
}
/* About:Blank background */
@-moz-document url(about:blank) {
html,body { background: var(--bg-light) !important; }
}
/* about:stylish-edit toolbar style */
@-moz-document regexp("about:stylish-edit.*") {
#main-area, textbox { background: var(--bg-light) !important; }
textbox, grid, columns, rows, separator { border: 0 !important; }
.devtools-toolbarbutton { background: var(--bg-dark) !important; color: var(--fg-light) !important; }
}
/*----- Fix for white flash on new tab -----*/
tabbrowser tabpanels, #appcontent > #content { background: var(--bg-light) !important; }