/* ==UserStyle==
@name Coles Online DARK MODE
@version 20240205.18.18
@namespace https://userstyles.world/user/thealkaris
@description CSS Override styles for Coles Online (https://www.coles.com.au)a DARK MODE theme for Coles Online which they do not have by default. Keeps most of the same looks of Cole Online with some changes.Dark Theme will be easier on the eyes and you shouldn't be flashbanged by white backgrounds.Colors are kept mostly the same, and added stylized scrollbar to fit the theme. /!\ THIS IS BY FAR NO MEANS A PERFECT DARK MODE THEME SO SOME THINGS MAY NOT /!\ LOOK 100% RIGHT AS THEY USE WEIRD CLASS ELEMENTS FOR EVERYTHING.
@author thealkaris
@license No License
==/UserStyle== */
@-moz-document domain("coles.com.au"), domain("colesgroupprofile.com.au") {
/*
DARK MODE
COLES
https://www.coles.com.au
Because hey, I don't like being
flashbanged by blank bright white pages,
and they don't include a Dark Mode.
CSS Override Style by Alkaris ©2023
It's not going to be perfect,
but it'll be just good enough.
*/
/*
Let's define :root colors, since they already
do this for their CSS elements, so we can override defaults.
using the !important property enforces these color changes.
Whoever maintains the coles.com.au website needs to be fired, because they have no idea how to CSS code
without making it more of a complete mess by keep adding new element names for already named elements,
it's like smashing at their keyboard for a random bunch of letters and numbers for each element,
instead of simple descriptor elements.
*/
:root {
--colors-background-default: #1c1c1c !important;
--colors-common-white: #1c1c1c !important;
--colors-text-primary: #3c3c3c !important;
--colors-rdsColorAccent-primaryLighter: #3c3c3c !important;
--colors-rdsColorBackground-primary: #1c1c1c !important;
--colors-rdsColorBackground-secondary: #676767 !important;
--colors-rdsColorBackground-defaultColor: #1c1c1c !important;
--colors-rdsColorBackground-tertiary: #3c3c3c !important;
--colors-rdsColorText-light: #ababab !important;
--colors-rdsColorText-defaultColor: #ababab !important;
}
body, html {
color: #ccc;
background: var(--colors-background-default);
}
/*
Let's make a better looking and functional
scrollbar to fit the theme instead of default colors.
If you want to change thickness of scrollbar,
just change width property, but 12px looks fine.
*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #333;
border-radius: 7px;
}
::-webkit-scrollbar-thumb {
background: #cd3728;
border-radius: 5px;
border: 1px solid #333;
}
h1, h2, h3, h4, h5, h6 {
color: #9e9e9e !important;
}
p {
color: var(--colors-rdsColorText-light);
}
a {
color: #525252 !important;
}
.erOpMS .description a[target="_blank"]::after {
color: #525252 !important;
}
.hHCoLg, .iOWPQq, .hFPQIk {
color: #9e9e9e !important;
}
.hUTsRu {
color: #9e9e9e !important;
box-shadow: 0px 0px 0px 0.125rem #1c1c1c;
}
.fLnFab {
box-shadow: 0px 0px 0px 0.125rem #1c1c1c;
}
.jqvsXe {
color: #9e9e9e !important;
}
.jEVjBd .product-tiles-btn svg {
color: #9e9e9e !important;
}
.hOkMMP svg {
color: #9e9e9e !important;
}
.hHCoLg:hover {
color: #e0e0e0 !important;
}
.sUaxf, .bjyeJE {
background: #1c1c1c !important;
color: #9e9e9e !important;
border-bottom: 1px solid #cd3728;
}
span {
color: #9e9e9e !important;
}
.jtBMMq, .kqXaM {
background: #1c1c1c !important;
}
.kalVVO {
background: #1c1c1c !important;
border-bottom: 1px solid #1c1c1c;
}
.css-13h3xwp-control {
color: #9c9c9c;
background: #4e4e4e;
}
.jfqICQ, .hROjkU, .DRdyG, .feMcrS.coles-targeting-ModalDialogContentStyledMuiDialogContent {
background: #1c1c1c;
color: #9e9e9e;
--banner-bg-color: var(--colors-background-default);
}
.css-co0dvl-group {
color: #9e9e9e !important;
}
.css-13h3xwp-control:hover, .edPWAZ, .cgVZTv, .bWAnsc, .cGzUTa, .gKVqhe, .gKVqhe a {
background: var(--colors-rdsColorBackground-tertiary);
color: #9e9e9e;
}
.css-13h3xwp-control:focus-within {
background: var(--colors-rdsColorBackground-tertiary);
color: #9e9e9e;
}
.css-11w82qv {
color: #9e9e9e !important;
}
.css-1ltal0w-placeholder {
color: #9e9e9e;
}
.hhJRDz, .yUioP, .jCSASz, .bYbdkB {
color: #9e9e9e;
}
.bOxfbT svg {
color: #9e9e9e;
}
.kxaITq svg, .esObSL svg, .ihHWLk svg, .cWEOP, .cJnPGl {
color: #9e9e9e;
}
.kxaITq:hover {
background: #333;
border: 1px solid #333;
}
input[type="text" i] {
color: #9e9e9e;
}
.cMrkcF .search-box-trigger:hover, .cMrkcF .search-box-trigger:active {
background: var(--colors-rdsColorAccent-primaryLighter);
color: var(--colors-rdsColorText-light);
}
.cMrkcF .search-box-trigger {
background: #333;
color: var(--colors-rdsColorText-defaultColor);
border: 1px solid #333;
}
.kVGJOW {
background: var(--colors-background-default);
}
.erOpMS {
background: #171717;
color: var(--colors-rdsColorText-light) !important;
}
.gfPfrG {
background: #494949;
}
.iQhSjY {
background: var(--colors-background-default);
border: 1px solid rgba(205, 55, 40, 0);
color: var(--colors-rdsColorText-defaultColor);
}
.hnIyDD, .HuJLU {
background: var(--colors-background-default);
color: var(--colors-rdsColorText-defaultColor);
}
.hiEzqa:hover, .hiEzqa:focus-within {
color: var(--colors-rdsColorText-defaultColor)
}
.hiEzqa:hover, .hiEzqa:focus-within {
border: 1px solid #696969;
}
.dTLIim, .mui-style-vel5pp-placeholder, .mui-style-t2286o-group, .xiyST, .gavxng {
color: var(--colors-rdsColorText-defaultColor)
}
.bbjGLB, .iupFGy {
color: var(--colors-rdsColorText-defaultColor)
}
.iZsLxL {
color: var(--colors-rdsColorText-defaultColor)
}
.iJGfkU {
color: var(--colors-rdsColorText-defaultColor)
}
.cOsZNa {
background: var(--colors-background-default);
color: var(--colors-rdsColorText-defaultColor);
border: 1px solid #1c1c1c;
}
.bTsTpP {
background: var(--colors-background-default);
color: var(--colors-rdsColorText-defaultColor);
}
.gVaVAS {
color: var(--colors-rdsColorText-defaultColor)
}
.fUVIkS:hover, .fUVIkS:focus-within {
color: var(--colors-rdsColorText-defaultColor);
}
.eoyalZ {
color: var(--colors-rdsColorText-defaultColor);
}
.bmKQrE {
color: var(--colors-rdsColorText-defaultColor);
}
.cKuWtm:hover {
background: #333;
}
.bxUUdk:hover {
background: #333;
border: 1px solid #696969;
}
.bxUUdk {
border: 1px solid #333;
color: var(--colors-rdsColorText-defaultColor);
}
.bxUUdk svg {
color: var(--colors-rdsColorText-defaultColor);
}
.iUSSHX {
background: var(--colors-background-default);
color: var(--colors-rdsColorText-defaultColor)
}
.bZfQZV {
border: 1px solid #333;
}
.ctTVPi {
border: 1px solid #333;
}
.etSscI {
background: var(--colors-background-default);
border: 1px solid #333;
color: var(--colors-rdsColorText-defaultColor);
}
.btbmRx {
border-bottom: 1px solid #333;
}
.kDyyEP:hover {
background: #333;
color: var(--colors-rdsColorText-defaultColor);
}
.cBhXqo, .kqwMUp, .dHFVXI {
background: transparent;
color: var(--colors-rdsColorText-defaultColor);
}
.bHPTmu {
border: 1px solid #333;
background: rgba(33, 33, 33, .77);
box-shadow: var(--shadows-shadow2,0px 4px 8px rgb(33, 33, 33));
color: var(--colors-rdsColorText-defaultColor);
}
.Vjssy svg {
color: var(--colors-rdsColorText-defaultColor)
}
.Vjssy:hover, .khCkGH, .ihRzM, .dpOhQU, .cfyTIF {
background: transparent;
}
.eJEgeY svg {
color: var(--colors-rdsColorText-defaultColor)
}
.eJEgeY:hover {
background: transparent;
}
.eyArhX {
color: var(--colors-rdsColorText-defaultColor);
}
.iYFXyf span {
background: var(--colors-rdsColorText-defaultColor);
border: 1px solid #000;
}
.iYFXyf:hover, .eQInwE .MuiFormControl-root:hover, .bWUoEB, .cKjLFL {
background: transparent;
}
.eyArhX:hover {
background: transparent;
}
.bdNxv, .bdNxv a {
background: #333;
color: var(--colors-rdsColorText-defaultColor);
}
.bdNxv {
border-top: 1px solid rgb(205, 55, 40);
}
.dhpPQD {
border: 1px solid #333;
}
.dhpPQD:hover {
border: 1px solid #333;
}
.iJaKOy:hover {
border: 1px solid #333;
}
.fvdlOw svg {
color: var(--colors-rdsColorText-defaultColor)
}
.fvdlOw:hover {
background: #333;
}
.jEVjBd .product-tiles-btn {
border: 1px solid #333;
}
.kOLheR:hover {
border: 1px solid #333;
}
.fvdlOw {
border: 1px solid #333;
}
.hHCoLg {
border: 1px solid #333;
}
.hOkMMP {
border: 1px solid #333;
}
.hOkMMP:hover {
background: #333;
}
.jUmwot {
color: #292929 !important;
}
.jOljGY, .ffwSfa, .gHHCC {
color: #fff !important;
}
.eflrmT:focus, .eflrmT:active, .eflrmT:hover {
background: #333;
}
.dzIdCG:hover {
background: #333;
border: 1px solid #333;
}
.htYghY:first-child {
border-top: 1px solid #333;
}
.kNnvxg:not(:first-child) {
border-top: 1px solid #333;
}
.htYghY {
border: 1px solid #333;
}
.crNrRA .MuiSelect-select {
color: var(--colors-rdsColorText-defaultColor);
}
.crNrRA .MuiFormControl-root:hover {
background: #333;
border: 1px solid #333;
}
.hRyTDy {
background: #333;
color: var(--colors-rdsColorText-defaultColor);
border: 1px solid #333;
}
.fheDTm {
color: var(--colors-rdsColorText-defaultColor)
}
.fheDTm.Mui-selected:hover, .fheDTm:hover, .jWfjlS, .mui-style-1r09u4m {
background: #1c1c1c;
}
.ictfiu {
border: 1px solid #333;
border-radius: 8px;
}
.ictfiu:hover {
border: 1px solid #333;
border-radius: 8px;
}
.eteAcF {
background: #fedc02;
border: 1px solid #fedc0...