OzBargain Black Edition by billycool
Imported and mirrored from https://github.com/BillyCool/UserStyles/raw/master/OzBargain-Black-Edition/ozbargain-black-edition.user.css

Details
Authorbillycool
LicenseGPL-3.0-or-later
Created
Updated
Categoryozbargain.com.au
Description
A highly customizable userstyle for OzBargain with numerious options and tweaks.
Notes
Installation
Features
- Customize background color, comes black by default
- Customize text color, comes in white-ish by default
- Customize the overall website theme color, comes with classic orange
- Customize dollar value color in deals, comes with classic orange by default
- Customize the percentage difference between various shades of colors
- Hide the sidebar
- Hide the footer
- Hide the newsletter form
- Hide highlighted competitions
- Hide highlighted topics
- Hide related stores
- unpublished deals and topics
- Hide social media share buttons
- Hide sticky buttons
- Configure various miscellaneous colors
Source code
/* ==UserStyle==
@name 「OzBargain Black Edition」
@namespace BillyCool
@version 1.2.7
@description A highly customizable userstyle for OzBargain with numerious options and tweaks.
@author BillyCool
@homepageURL https://github.com/BillyCool/UserStyles/tree/master/OzBargain-Black-Edition
@updateURL https://github.com/BillyCool/UserStyles/raw/master/OzBargain-Black-Edition/ozbargain-black-edition.user.css
@license GPL-3.0-or-later
@preprocessor stylus
@var color bg-1 "Background color" #000
@var color text-1 "Text color" #e1e1e1
@var color highlight "Highlight color" #cd6702
@var color dollar "Dollar value color" #cd6702
@var range color-step "Color steps" [5, 5, 15, 1, "%"]
@var checkbox hide-sidebar "Hide sidebar" 0
@var checkbox hide-footer "Hide footer" 0
@var checkbox hide-newsletter "Hide newsletter" 1
@var checkbox hide-highlighted-comps "Hide highlighted competitions" 0
@var checkbox hide-highlighted-topics "Hide highlighted topics" 0
@var checkbox hide-related-stores "Hide related stores" 0
@var checkbox hide-unpublished-deals "Hide unpublished deals & topics" 0
@var checkbox hide-social-share "Hide social media share buttons" 0
@var checkbox hide-sticky "Hide sticky buttons" 0
@var color primary "Misc: Primary color" #3881ff
@var color secondary "Misc: Secondary color" #808080
@var color success "Misc: Success color" #2ddd3a
@var color danger "Misc: Danger color" #dd2d2d
@var color warning "Misc: Warning color" #ffc107
@var color info "Misc: Info color" #2ddcff
==/UserStyle== */
@-moz-document domain("ozbargain.com.au") {
/* Variable declarations */
bg-2 = lightenOrDarken(bg-1, color-step);
text-2 = lightenOrDarken(text-1, color-step * 3);
/* Helper functions */
lightenOrDarken(color, amount = 5%) {
if (dark(color)) {
return lighten(color, amount);
} else {
return darken(color, amount);
}
}
getInverseColor(color) {
if (dark(color)) {
text-1;
} else {
bg-1;
}
}
body {
color: text-1 !important;
background: bg-1 !important;
}
a {
color: text-1 !important;
&:hover {
color: highlight !important;
.fa-border {
border-color: highlight !important;
}
}
&.btn, &.badge {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
&:hover {
color: highlight !important;
}
}
&.external, &.internal, &.wikilink1, &.wikilink2, &.urlextern, &.reflink {
color: text-2 !important;
border-color: text-2 !important;
&:hover {
color: highlight !important;
border-color: highlight !important;
}
}
.halfleft {
color: text-1;
background: bg-1 !important;
&:hover {
color: highlight !important;
}
}
.halfright {
color: bg-1;
background: text-1;
&:hover {
color: highlight !important;
}
}
}
input.btn, input.button, button.btn {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
&:hover {
color: highlight !important;
&:disabled {
color: text-2 !important;
}
}
}
input, select, textarea {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
&:focus {
outline: 1px solid highlight !important;
}
optgroup {
background: bg-2 !important;
}
}
fieldset, blockquote {
border-color: highlight !important;
position: relative;
&.collapsible legend {
background: bg-1 !important;
border-color: highlight !important;
&:before {
content: '';
background: url('/files/images/toggle.png?v=1') 5px 50% no-repeat !important;
background-position: 0 0 !important;
height: 9px;
width: 9px;
position: absolute;
left: 12px;
top: -16px;
}
}
&.collapsed legend:before {
background-position: 0 -18px !important;
}
}
table {
background: bg-1 !important;
border-color: highlight !important;
th, td {
color: text-1 !important;
background: bg-1 !important;
border-bottom: 1px solid highlight !important;
border-color: highlight !important;
&.unpublished {
background: bg-2 !important;
}
}
}
#header {
background: bg-1 !important;
#menu {
li {
a {
background: bg-1 !important;
}
&.active > a {
color: bg-1 !important;
background: highlight !important;
}
.menupopup {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
box-shadow: none !important;
h3, .group, .userinfo, .noti-item, .externallogin {
color: highlight !important;
background: bg-1 !important;
border-color: highlight !important;
}
}
}
}
}
#header2nd {
background: bg-1 !important;
box-shadow: none !important;
border-top: 1px solid highlight !important;
a {
background: bg-1 !important;
&.active {
color: bg-1 !important;
background: highlight !important;
}
}
}
#tooltip {
background: bg-1 !important;
box-shadow: none !important;
border-color: highlight !important;
#tooltip-title {
color: highlight !important;
background: bg-1 !important;
font-weight: bold;
}
.tooltip-menu li a {
color: text-1 !important;
&:hover {
background: bg-1 !important;
color: highlight !important;
}
}
#tooltip-copy, #tooltip-close {
color: text-1 !important;
}
.tooltip-options {
border-color: highlight !important;
}
a {
color: text-2 !important;
&:hover {
color: highlight !important;
}
}
}
main {
color: text-1 !important;
background: bg-1 !important;
.fpnotice {
a {
border: 1px solid highlight !important;
background-color: bg-2 !important;
span {
color: highlight;
}
}
}
.fpnotice-apd {
border-color: highlight !important;
}
.countdown-cdval {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
}
.countdown-lbl {
color: text-1 !important;
}
.messages {
color: text-1 !important;
background: bg-2 !important;
border-color: highlight !important;
box-shadow: none !important;
&.form-item {
background: bg-1 !important;
}
.days {
color: highlight !important;
}
.votes {
color: bg-1 !important;
background: success !important;
font-weight: bold !important;
}
&.node {
background: bg-1 !important;
.classified-type-tag {
&.want {
background: primary !important;
}
a {
color: bg-2 !important;
}
}
}
}
h1.tags {
color: text-2 !important;
span {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
}
}
#title, .title, .section, .description {
color: text-1 !important;
border-color: highlight !important;
}
.foxshot-container {
a {
background: bg-1 !important;
border-color: highlight !important;
&:hover {
background: bg-2 !important;
}
}
}
.productlist .img {
background: bg-1 !important;
a {
border-color: highlight !important;
&:hover {
background-color: bg-2 !important;
}
}
}
.search-results strong {
color: bg-1 !important;
background: highlight !important;
}
.couponcode {
background: bg-2 !important;
border-color: highlight !important;
strong {
border-color: highlight !important;
}
}
.bfcm {
color: text-1 !important;
background: bg-1 !important;
border: 1px solid highlight !important;
a {
&:hover {
color: highlight !important;
}
div:first-child {
color: text-1 !important;
background: bg-1 !important;
}
div:last-child {
color: bg-1 !important;
background: text-1 !important;
}
}
}
.node {
color: text-1 !important;
.right {
position: relative;
}
.plate {
border: none !important;
border-radius: 12px !important;
&.learner {
color: getInverseColor(warning) !important;
background: warning !important;
}
&.greenp {
color: getInverseColor(success) !important;
background: success !important;
}
&.redp {
color: getInverseColor(danger) !important;
background: danger !important;
}
}
&.node-teaser {
border-color: highlight !important;
&.expired {
color: text-2 !important;
a {
color: text-2 !important;
&:hover {
color: highlight !important;
}
}
.marker a {
color: getInverseColor(primary) !important;
}
}
&:hover {
background: bg-2 !important;
}
&.feature {
background: bg-1 !important;
&:hover {
background: bg-2 !important;
}
}
&.unpublished {
background: bg-2 !important;
}
}
}
.nodeinfo .extra, .nodeinfo .referral {
color: text-1 !important;
background: bg-1 !important;
border: 1px solid highlight !important;
}
.marker {
color: getInverseColor(primary) !important;
background: primary !important;
border-radius: 12px !important;
border: none !important;
font-weight: bold !important;
> a {
color: getInverseColor(primary) !important;
}
}
.nodeexpiry {
&.expired {
color: danger !important;
.marker {
color: getInverseColor(danger) !important;
background: danger !important;
}
}
&.inactive {
color: text-1 !important;
.marker {
color: getInverseColor(primary) !important;
background: primary !important;
}
}
}
.nodefreebie i {
color: success !important;
}
.role {
border-radius: 12px !important;
font-weight: bold !important;
&.associate {
color: getInverseColor(primary) !important;
background: primary !important;
}
&.moderator {
color: getInverseColor(highlight) !important;
background: highlight !important;
}
&.referrer {
color: getInverseColor(secondary) !important;
background: secondary !important;
}
&.storerep {
color: getInverseColor(info) !important;
background: info !important;
}
}
.dollar {
color: dollar !important;
}
.tabs {
color: text-1 !important;
background: bg-1 !important;
border: 1px solid highlight !important;
li {
&.active {
a, a:hover {
color: bg-1 !important;
background: highlight !important;
}
}
a:hover {
color: highlight !important;
background: bg-1 !important;
}
}
}
.cvb.voteup, .nvb.voteup {
color: getInverseColor(success) !important;
background: success !important;
border-color: lighten(success, 60%) !important;
&:hover {
background: darken(success, 20%) !important;
}
}
.cvb.votedown, .nvb.votedown {
color: getInverseColor(danger) !important;
background: danger !important;
border-color: lighten(danger, 60%) !important;
&:hover {
background: darken(danger, 20%) !important;
}
}
.fa-minus-circle {
color: danger !important;
&:hover {
color: darken(danger, 20%) !important;
}
}
.taxonomy {
a {
background: bg-1 !important;
border: 1px solid highlight !important;
i {
color: highlight !important;
}
}
}
.comment-op {
background: bg-1 !important;
border-color: highlight !important;
}
.comment-owner {
background: bg-2 !important;
border-color: highlight !important;
}
#c-control .bar {
background: bg-1 !important;
border-color: highlight !important;
a:hover {
background: bg-1 !important;
}
}
#s-control {
border-color: highlight !important;
}
.comment-hint {
background: bg-1 !important;
border-color: highlight !important;
i:hover {
color: text-1 !important;
}
.hint {
background: bg-2 !important;
border-color: highlight !important;
}
}
.comment.unpublished {
color: danger !important;
}
#livetable tr {
border: 1px solid highlight !important;
}
#revdiff {
border-color: highlight !important;
}
.preview {
border-color: highlight !important;
}
.pager {
li {
color: text-1 !important;
border-color: highlight !important;
&.pager-current {
color: highlight !important;
background: bg-1 !important;
}
a:hover {
color: highlight !important;
background: bg-1 !important;
border-radius: 4px !important;
}
}
}
.messages.node span, .tagger {
color: getInverseColor(text-2) !important;
background: text-2 !important;
&.expired {
color: getInverseColor(danger) !important;
background: danger !important;
}
&.longrunning {
color: getInverseColor(secondary) !important;
background: secondary !important;
}
&.resolved {
color: getInverseColor(success) !important;
background: success !important;
}
&.targeted {
color: getInverseColor(primary) !important;
background: primary !important;
}
&.unpublished {
color: getInverseColor(secondary) !important;
background: secondary !important;
}
&.upcoming {
color: getInverseColor(primary) !important;
background: primary !important;
}
}
.node-social {
a {
color: #ffffff !important;
}
li.share-re > a {
color: #5f99cf !important;
}
}
}
.inv-item {
background: bg-1 !important;
border: 1px solid highlight !important;
&.active {
background: bg-2 !important;
}
}
.gravatar, .usericon {
border-color: highlight !important;
}
#sidebar {
.votes {
color: getInverseColor(success) !important;
background: success !important;
font-weight: bold !important;
}
}
.block {
.blocktitle {
color: highlight !important;
background: bg-1 !important;
border: 1px solid highlight !important;
}
.blockcontent {
color: text-1 !important;
border-color: highlight !important;
li {
border-color: highlight !important;
border-right: 0 !important;
}
}
}
.search {
border: 1px solid highlight !important;
a, button, input[type='text'] {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
border-radius: 0 !important;
}
.fa-search:hover:before {
color: highlight !important;
}
}
.ac-result {
background: bg-1 !important;
border-color: highlight !important;
box-shadow: none !important;
li {
color: text-1 !important;
border-color: highlight !important;
&:hover {
background: bg-2 !important;
}
&.section {
color: highlight !important;
background: bg-1 !important;
}
}
}
footer {
background: bg-1 !important;
box-shadow: none !important;
border-top: 1px solid highlight !important;
}
#overlay-box {
color: text-1 !important;
background: bg-1 !important;
border: 1px solid highlight !important;
box-shadow: none !important;
#overlay-title {
color: bg-1 !important;
}
}
.ui-datepicker {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
.ui-datepicker-calendar {
thead {
color: text-1 !important;
}
td a {
background: bg-1 !important;
&:hover, &.ui-state-highlight {
border-color: highlight !important;
}
}
}
}
.ui-slider {
background: text-2 !important;
.ui-slider-handle {
background: bg-2 !important;
border-color: highlight !important;
}
}
.bigbox, .blocked {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
}
.competition-fieldset {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
.competition-fieldname {
color: text-2 !important;
}
}
div.dokuwiki {
h1, h2, h3, h4, h5 {
border-color: highlight !important;
a {
color: text-1 !important;
}
}
#toc__inside, .code {
color: text-1 !important;
background: bg-1 !important;
border-color: highlight !important;
}
ul {
color: text-1 !important;
}
a.wikilink1, a.wikilink2, a.urlextern {
color: text-2 !important;
border-color: text-2 !important;
&:hover {
color: highlight !important;
border-color: highlight !important;
}
}
}
.nodegrid {
border-color: highlight !important;
.node {
border-color: highlight !important;
}
}
.ng2 {
background: bg-1 !important;
li {
background: bg-1 !important;
border: 1px solid highlight !important;
box-shadow: none !important;
width: 198px !important;
.ng2-dealstore {
color: text-2 !important;
background: bg-1 !important;
border-top: 1px solid highlight;
border-bottom: 1px solid highlight;
}
.ng2-dealmeta {
color: text-1 !important;
background: bg-1 !important;
border-top: 1px solid highlight;
}
.ng2-dealimg:hover {
background: bg-2 !important;
}
}
}
.meta {
color: text-2 !important;
}
.border {
border-color: highlight !important;
}
.idcae {
background: bg-1 !important;
body {
color: text-1 !important;
background: bg-1 !important;
#wrap {
border: 1px solid highlight;
border-radius: 4px;
}
}
}
#stickybtn {
box-shadow: none !important;
a.btn {
border-radius: 4px !important;
}
}
.tagimg {
border-color: highlight !important;
box-shadow: none !important;
}
.prodwanthave {
li {
border-color: highlight !important;
color: bg-2 !important;
&.none {
background: lighten(secondary, 50%) !important;
&.active, &:hover {
background: secondary !important;
}
}
&.want {
background: lighten(warning, 50%) !important;
&.active, &:hover {
background: warning !important;
}
}
&.have {
background: lighten(success, 50%) !important;
&.active, &:hover {
background: success !important;
}
}
&.had {
background: lighten(primary, 50%) !important;
&.active, &:hover {
background: primary !important;
}
}
}
}
.referral {
background: bg-2 !important;
border: 1px solid highlight;
}
.cnt {
color: text-2 !important;
}
span.countbox {
color: highlight !important;
border-color: highlight !important;
}
.horizontal-participants {
color: highlight !important;
}
.privatemsg {
background: bg-1 !important;
border-color: highlight !important;
.submitted {
color: text-2 !important;
}
}
.editable:hover {
background: bg-2 !important;
}
.submitted {
color: text-2 !important;
}
if (hide-sidebar) {
.sidebar {
display: none !important;
}
}
if (hide-footer) {
footer {
display: none !important;
}
}
if (hide-newsletter) {
.node.newsletter {
display: none !important;
}
}
if (hide-highlighted-comps) {
#fpcomps, #fpcomps + div {
display: none !important;
}
}
if (hide-highlighted-topics) {
#fpcomps + div + h2, #fpcomps + div + h2 + div, .node.feature {
display: none !important;
}
}
if (hide-related-stores) {
#relatedstores, .relatedstores {
display: none !important;
}
}
if (hide-unpublished-deals) {
.node.unpublished, table td.unpublished {
display: none !important;
}
}
if (hide-social-share) {
.node-social {
display: none !important;
}
}
if (hide-sticky) {
#stickybtn {
display: none !important;
}
}
}