Purple Rain ~ Jira Cloud Dark Mode by levee

/* ==UserStyle==
@name         Purple Rain ~ Jira Cloud Dark Mode
@version      1.0.0
@namespace    userstyles.world/user/levee
@description  A crisp dark mode for Jira Cloud.
@author       levee
@license      MIT
==/UserStyle== */

:root {
    --l-surface-primary: #111111;
    --l-surface-primary-light: #171717;
    --l-surface-primary-lighter: #222222;
    --l-surface-secondary: #333333;
    --l-surface-secondary-light: #555555;
    --l-surface-secondary-lighter: #777777;
    --l-surface-secondary-lightest: #aaaaaa;
    --l-background-primary: #241a38;
    --l-background-secondary: #493775;
    --l-background-secondary-light: #a476ff;
    --l-background-secondary-light-a: #a476ff80;
    --l-resize-control: #a476ff;
    --l-text-primary: #8ec4fd;
    --l-text-primary-dark: #5c80ac;
    --l-text-primary-darker: #4a678b;
    --l-text-primary-light: #cae4ff;
    --l-text-secondary: #a476ff;
    --l-text-neutral: #eeeeee;
    --l-text-neutral-dark: #6B778C;
    --l-text-neutral-light: #ffffff;
    
    --l-box-shadow-primary: 0 1px 2px 0 #241a3880;
    --l-box-shadow-supplement: 0 0 1px #241a3899;
    --l-box-shadow-elevation-1: 0 1px 1px #241a3880;
    --l-box-shadow-elevation-2: 0 2px 4px #241a3880;
    --l-box-shadow-focus: 0 0 0 2px var(--l-text-primary) !important;
    
    --l-terminal: #032a1a;
    
    --ds-surface: var(--l-surface-primary);
    --ds-surface-overlay: var(--l-surface-primary-lighter);
    --ds-background-default: var(--l-surface-primary);
    --ds-background-neutral: var(--l-surface-secondary-light);
    --ds-background-brand: var(--l-text-primary-dark);
    --ds-text: var(--l-text-neutral);
    --ds-text-selected: var(--l-text-primary);
    --ds-text-subtle: var(--l-text-primary);
    --ds-text-subtlest: var(--l-text-neutral-dark);
    --ds-menu-seperator-color: var(--l-surface-primary-light);
    --ds-border: var(--l-surface-primary-light);
    --ds-border-focused: var(--l-text-primary-dark);
}

@-moz-document regexp(".*.atlassian.net/jira.*"), regexp(".*.atlassian.net/browse.*"), regexp(".*.atlassian.net/secure.*"), regexp(".*.atlassian.net/projects.*"), regexp(".*.atlassian.net/issues.*") {
body {
    color: var(--l-text-neutral);
}
body::before {
    background-color: var(--l-text-secondary);
    border-bottom: 1px solid var(--l-text-neutral);
}
h1, h2, h3 {
    color: var(--l-text-neutral);
}
a,
a *,
a > div > p[data-testid*='deep-dive-card-content'] {
    color: var(--l-text-primary) !important;
}
a:hover {
    color: var(--l-text-primary);
}
a:focus {
    box-shadow: none;
}
button:focus {
    box-shadow: var(--l-box-shadow-focus);
}
code[class] {
    color: var(--l-text-neutral);
    background-color: var(--l-terminal);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--l-surface-primary-light);
    border-radius: 4px;
}
::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {
    background: var(--l-background-primary);
}


/*
    COMPONENT STYLES
*/
.aui-button,
.aui-button:visited,
a.aui-button,
[data-testid*='insights-button'] {
    color: var(--l-text-neutral);
    background-color: var(--l-text-primary-darker);
}
.aui-button:focus,
.aui-button:visited:focus,
a.aui-button:focus,
[data-testid*='insights-button']:focus,
[data-testid*='insights-button']:visited:focus {
    background-color: var(--l-text-primary-darker);
}
.aui-button .aui-icon,
.aui-button:visited .aui-icon,
a.aui-button .aui-icon,
[data-testid*='insights-button'] {
    color: var(--l-text-neutral);
}
.aui-button-subtle.aui-button:hover,
.aui-button:hover,
.aui-buttons .aui-button:not(.aui-button-primary):not(.aui-button-link):hover,
.aui-theme-default .aui-button.aui-button-subtle:hover,
[data-testid*='insights-button']:hover {
    background-color: var(--l-text-primary-darker);
    filter: brightness(110%);
}
.aui-button-subtle.aui-button.active,
.aui-button-subtle.aui-button:active,
.aui-button.active,
.aui-button:active,
.aui-buttons .aui-button.active:not(.aui-button-primary):not(.aui-button-link),
.aui-header .aui-button-split-more.active,
.aui-theme-default .aui-button.aui-button-subtle.active,
[data-testid*='insights-button']:active {
    background-color: var(--l-text-primary-darker);
    filter: brightness(90%);
}

.css-goggrm,
.css-goggrm:hover,
.css-goggrm:active {
    color: var(--l-text-primary) !important;
    background-color: var(--l-surface-secondary);
}

.bRoiHT,
.bAYMzn {
    background-color: var(--l-surface-secondary-light) !important;
}

[role*='separator'][data-test-id*='resizer']:hover > div,
[data-resize-control] [data-grab-area]:enabled:hover [data-grab-area-line],
[data-resize-control] [data-resize-button]:enabled:hover {
    background-color: var(--l-resize-control);
}

[data-test-id*='dropdown.dropdown'] > :not(:first-child),
[data-testid*='menu.content'] > :not(:first-child) {
    border-top: 1px solid var(--l-text-primary-dark);
}

.e1rno5601 > div > a:hover {
    background-color: var(--l-surface-primary-lighter);
}
.e1rno5601 > div > a > p {
    color: var(--l-text-primary-light);
}
.e1rno5600 > button[class] {
    color: var(--l-text-primary) !important;
}
.e1rno5600::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    border-bottom: 1px solid var(--l-text-neutral-dark);
}
.e1rno5600 {
    margin-bottom: 10px;
}

[data-ds--text-field--container] {
    color: var(--l-text-neutral-dark);
    background-color: var(--l-surface-secondary);
    border-color: var(--l-text-neutral-dark);
}
[data-ds--text-field--container]:hover {
    background-color: var(--l-surface-primary);
}

section h1 {
    color: var(--l-text-neutral);
}

label[data-testid*='checkbox'] > span {
    color: var(--l-text-neutral);
}
span[role='img'][aria-label] > svg,
label[data-testid*='checkbox'] > input[type='checkbox'] + svg {
    --checkbox-background-color: var(--l-text-neutral-light);
    --checkbox-border-color: var(--l-text-neutral);
}
label[data-testid*='checkbox'] > input[type='checkbox']:active + svg {
    --checkbox-background-color: var(--l-text-primary-light);
    --checkbox-border-color: var(--l-text-primary-light);
}
label[data-testid*='checkbox'] > input[type='checkbox']:checked + svg {
    --checkbox-background-color: var(--l-text-primary);
    --checkbox-border-color: var(--l-text-primary);
    --checkbox-tick-color: var(--l-surface-primary);
}
label[data-testid*='checkbox'] > input[type='checkbox']:checked:active + svg,
label[data-testid*='checkbox']:active > input[type='checkbox']:checked + svg {
    --checkbox-tick-color: var(--l-surface-secondary-light);
}
label[data-testid*='checkbox'] > input[type='checkbox']:focus + svg,
label[data-testid*='checkbox'] > input[type='checkbox']:focus:checked + svg {
    --checkbox-border-color: var(--l-text-primary);
}

[data-testid*='-scrollable']:focus-visible {
    box-shadow: none;
}
[class*='container'] [class*='control'],
[class*='container'][id*='-picker'][id*='-select'] [class*='control'] {
    background-color: var(--l-surface-secondary-light);
    border: 2px solid var(--l-text-neutral-dark);
}
[class*='container'] [class*='control']:hover,
[class*='container'][id*='-picker'][id*='-select'] [class*='control']:hover {
    border: 2px solid var(--l-text-primary);
}
[class*='container'] [class*='control'] [class$='multiValue'] {
    background-color: var(--l-text-primary-darker);
}

[class$='menu'] {
    background-color: var(--l-surface-secondary);
}
[class$='menu'] [class$='option'] {
    background: none;
    box-shadow: none;
}
[class$='menu'] [class$='option'] > span > div[color] {
    min-width: 20px;
    outline: 1px solid var(--l-text-neutral);
}
[class$='menu'] [class*='option'][class*='is-focused'],
[class$='menu'] [class$='option']:hover {
    background-color: var(--l-surface-secondary-light);
    box-shadow: inset 2px 0 0 var(--l-text-secondary);
}


/*
    MAIN PAGE ( YOUR WORK )
*/
#ak-main-content img[alt*='Loading'] {
    filter: brightness(25%);
}

[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section {
    margin: 0 0 32px 0;
    background-color: var(--l-surface-primary);
    outline: 1px solid var(--l-surface-secondary);
    border-radius: 4px;
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a {
    color: var(--l-text-primary);
}
[data-test-id='global-pages.home.ui.home'] section section > div {
    background-color: var(--l-surface-secondary);
    border-left: 20px solid var(--l-surface-secondary-light);
    box-shadow: var(--l-box-shadow-elevation-1), var(--l-box-shadow-supplement);
    transition: box-shadow 0.3s ease-in-out;
}
[data-test-id='global-pages.home.ui.home'] section section > div:hover {
    box-shadow: var(--l-box-shadow-elevation-2), var(--l-box-shadow-supplement);
}
[data-test-id='global-pages.home.ui.home'] section section > div > :last-child {
    border-top: 1px solid var(--l-surface-secondary-light);
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a[data-testid*='deep-dive-card-content']:hover {
    background-color: var(--l-background-secondary);
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a[data-testid*='deep-dive-card-content'] > [data-testid*='count-badge'] {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--l-text-neutral);
    background-color: var(--l-text-neutral-dark);
    font-weight: bold;
}
[data-test-id*='tab-container.navigation'] > div > div > div > span {
    height: 3px;
    background-color: var(--l-text-neutral-dark);
}
[data-test-id*='tab-container.navigation'] [data-test-id*='tab-container.navigation.item'] span[data-selected='true'] {
    height: 3px;...