gmailify.com - Dark Mode by gboudreau

/* ==UserStyle==
@name         gmailify.com - Dark Mode
@version      20240407.12.11
@namespace    https://userstyles.world/user/gboudreau
@description  Simple dark mode for gmailify.com
@author       gboudreau
@license      No License
==/UserStyle== */

@-moz-document domain("gmailify.com") {
:root {
    /* --main-link-color: #1a0dab; */
    --main-link-color: var(--link-color);

    --main-bg-color: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), black center center/cover no-repeat fixed;
    --modal-bg-color: #282828;
    --modal-header-color: #323232;
    --modal-footer-color: #323232;

    --drop-down-menu-bg: #191a1c;

    --button-color: #cc7b19;
    --button-color-hover: #e59029;
    --button-text: #eee;
    --button-text-hover: #fff;

    --accent-color: 229, 160, 13;
    --accent-color-hover: #ffc107;
    --link-color: #e5a00d;
    --link-color-hover: #fff;
    --label-text-color: #333;

    --text: #ddd;
    --text-hover: #fff;
    --text-muted: #999;

    --arr-queue-color: #27c24c;
    --plex-poster-unwatched: #e5a00d;
    --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --gitea-color-primary-dark-4: 255, 193, 7;
    --overseerr-gradient: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), rgba(0, 0, 0, 0.5) center center/cover no-repeat fixed;
}

html,
body,
.resources {
    background: var(--main-bg-color);
}

.flash-info, .test-positive {
    background: var(--modal-bg-color);
    color: rgb(57, 180, 0);
    border-color: rgb(57, 180, 0);
}

.flash-alert, .test-negative {
    background: var(--modal-bg-color);
    color: rgb(180, 36, 0);
    border-color: rgb(180, 36, 0);
}

input[type="submit"],
button,
.button,
.copy-input button {
    background-color: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text);
}

button:active,
input[type="submit"]:active,
a.button:active,
.button:active,
.copy-input button:active {
    background-color: var(--button-color-hover);
    color: var(--button-text-hover);
}

.page-text,
p,
b,
h1,
h2,
h3,
label,
li.group-title,
table.traffic-logs th.log-flow-in {
    color: var(--text);
}

table.routing tr td:first-of-type {
    color: var(--text-hover);
}

p.important,
.notification {
    background: var(--modal-bg-color);
    color: var(--text);
}

.accordion .domain-title,
table.traffic-logs th,
table.routing th,
table.admins th,
table.dns-records th {
    background: var(--modal-bg-color);
    color: var(--text);
}


.section-title,
.section-title.errors,
table.traffic-logs td,
table.routing td,
table.admins td {
    background: var(--modal-header-color);
    color: var(--text);
}

table.traffic-logs td,
table.traffic-logs th.log-flow-in,
table.traffic-logs th.log-flow-out,
table.traffic-logs th.received {
    background: rgba(63, 229, 13, .15);
}

table.traffic-logs tr.log-spam td,
table.traffic-logs tr.log-spam th {
    background: rgba(229, 160, 13, 0.4);
    color: var(--text);
}

table.traffic-logs tr.log-reject td,
table.traffic-logs tr.log-reject th {
    background: rgba(229, 13, 17, .2);
    color: var(--button-text);
}

table.traffic-logs tr:hover td,
table.routing tr:hover td,
table.admins tr:hover td,
table.traffic-logs tr:hover th.log-flow-in,
table.traffic-logs tr:hover th.log-flow-out,
table.traffic-logs tr:hover th.received,
table.dns-records td {
    background: var(--modal-bg-color);
    color: var(--text);
}

textarea,
input[type="text"],
input[type="email"] {
    background: var(--modal-header-color);
    color: var(--text);
    outline-color: var(--accent-color-hover);
    border-color: var(--accent-color-hover);
}
}