Usos dark theme by ArkaNN3

/* ==UserStyle==
@name           usosweb.pbs.edu.pl - 9/28/2023, 1:21:29 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("usosweb.pbs.edu.pl") {
    /* Insert code here... */
    :root {
        --primary: #232327;
        --on-primary: #232327;
        --secondary: #232327;
        --secondary-variant: #f79d52;
        --background: #232327;
        --on-background: #d9d9d9;
        --background-secondary: #2f2f33;
        --on-background-secondary: #fff;
        --font-color: #fff;

        --grey: #4d4d4d;
        --border: #282829;

        --ok-status: #438600;
        --error: #963030;

        --module-link-tile-text-content-line-height: 1;
    }

    h1 {
        color: var(--font-color);
        font-size: 1.375rem;
        text-align: left;
        font-weight: 500;
        line-height: 1.15;
        margin: 0 0 1.5rem 0;
    }

    h2 {
        color: var(--font-color);
        font-size: 1.375rem;
        text-align: left;
        font-weight: normal;
        line-height: 1.15;
        margin: 2rem 0 0.75rem 0;
    }


    :focus {
        outline: 1px solid currentColor;
        outline-offset: 2px;
    }
    :focus-visible {
        outline: 1px solid currentColor;
        outline-offset: 2px;
    }
    :focus:not(:focus-visible) {
        outline: none;
    }

    menu-top:focus,
    menu-left:focus,
    [slot="pageBody"]:focus {
        outline: none;
    }

    /* topMenu */
    menu-top-item:focus {
        outline-offset: -8px;
    }

    /* leftMenu */
    menu-left ul,
    menu-left li {
        margin: 0;
        padding: 0;
        list-style: outside none none;
    }

    menu-left a:focus {
        outline-offset: 0;
    }

    menu-left > ul > li {
        margin: 25px 0 0 0;
    }
    menu-left > ul > li li {
        margin: 0 0 0 0
    }
    menu-left > ul > li li li {
        margin: 0 0 0 11px
    }

    menu-left > ul > li > :is(a, span) {
        background: none !important;
        padding: 0;
        text-transform: uppercase;
    }

    menu-left li :is(a, span) {
        display: inline-block;
        padding: 0 0 0 1.25rem;
        color:  var(--font-color);
        text-decoration: none;
        text-transform: lowercase;
        outline: none;
    }

    menu-left li li :is(a, span) {
        margin-left: 0.5rem;
        background-size: 1rem;
    }

    menu-left li li li :is(a, span) {
        background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'><circle%20cx='10'%20cy='10'%20r='3'%20stroke='rgba(166,41,41)'%20stroke-         width='0'%20fill='rgba(166,41,41)'></circle></svg>");
    }

    menu-left li :is(a,
    span).dynamic {
        text-transform: none;
    }

    menu-left li a:visited,
    menu-left li a:active {
        color: var(--font-color);
    }

    menu-left li a:hover,
    menu-left li a:focus {
        color: var(--font-color);
        text-decoration: underline;
    }

    menu-left li :is(a,
    span).selected {
        font-weight: bold;
    }

    menu-left li :is(a,
    span).disabled {
        color: var(--font-color);
    }

    /* icons */
    span.icon-inline {
        font-size: inherit;
    }

    span.icon-clickable {
        font-size: 24px;
        padding: 5px;
        cursor: pointer;
    }

    span.icons-hide-underline {
        margin-top: -1px;
        margin-bottom: -1px;
        overflow: hidden;
    }

    /* usos-frame */
    usos-frame > .hide-borders {
        margin: 0;
        padding: 0;
    }
    usos-frame > .hide-borders > * {
        width: calc(100% + 2px);
        margin: -1px -1px;
    }

    /** radio button */
    input[type=radio] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        color: inherit;
        /* normalize because of chrome */
    }

    input[type=radio]::after {
        display: block;
        content: '.';
        position: relative;
        top: 0.125em;
        background-color: var(--primary);
        width: 1em;
        height: 1em;
    }

    input[type=radio]:disabled::after {
        background-color: #AAAAAA;
    }

    input[type=radio]:disabled + label,
    label > input[type=radio]:disabled ~ * {
        color: #AAAAAA;
    }

    /** checkbox */
    input[type=checkbox] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        position: relative;
        width: 1.25em;
        height: 1em;
        color: inherit;
        /* normalize because of chrome */
    }

    input[type=checkbox]::after {
        display: block;
        content: '.';
        position: absolute;
        background-color: currentColor;

        width: 1.25em;
        height: 1.25em;
    }

    input[type=checkbox]:disabled::after {
        background-color: var(--font-color);
    }

    input[type=checkbox]:disabled + label,
    label > input[type=checkbox]:disabled ~ * {
        color: #AAAAAA;
    }

    /** lists */
    ul.no-bullets {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul.inlined-list > li {
        display: inline;
    }

    ul.inlined-list > li:not(:last-child)::after {
        display: inline-block;
        content: ',\00a0';
    }
    ul.inlined-list.pipe-separated > li:not(:last-child)::after {
        content: '\00a0|\00a0';
    }
    ul.inlined-list.semicolon-separated > li:not(:last-child)::after {
        content: ';\00a0';
    }

    ul.separated > li {
        padding: 1rem;
    }
    ul.separated > li:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }
    ul.separated > li > :first-child {
        margin-top: 0;
    }
    ul.separated > li > :last-child {
        margin-bottom: 0;
    }

    /** tables */
    .autoscroll {
        overflow-x: auto;
        padding: 1px;
        margin-bottom: 1.2rem;
        position: relative;
    }

    .autoscroll > * {
        margin-bottom: 0.25rem;
    }

    .local-home-table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1rem;
        margin-top: -1.5rem;
        background: var(--background-secondary);
    }
    #layout-c22 {
        background: var(--background-secondary);
    }

    #page-body #layout-c22 {
        background: var(--background-secondary);
    }
    td, th,
    tr {
        background-color: var(--background-secondary) !important;
        color: var(--font-color) !important;
    }
    .note {
        color: var(--font-color) !important;
    }
    body {
        background: none;
    }
    .selector {
        background-color: var(--background-secondary) !important;
    }
    :host #page-body {
        width: 80%;
        display: block;
        background-color: var(--background-secondary) !important;
    }
    #text ::slotted(p) {
        line-height: var(--module-link-tile-text-content-line-height, 1);
        color: var(--font-color) !important;
    }
    :host, #fancybox-wrap, #fancybox-outer, .uwb-white-content, #user-attrs-id, #user-addresses-id, .ui-dialog-content, .ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ua-panic-dialog .ui-draggable #ui-widget-content {
        background-color: var(--background-secondary) !important;
    }

    :host a {
        color: var(--font-color) !important;
    }
    
    #fancybox-content{
        border-width: 0px !important;
    }

    .usos-ui h1 .block {
        color: var(--font-color) !important;
    }
    
    div.uprefs-summary {
        color: var(--font-color) !important;
    }

    a, #tooltip-content, .uprefs-title, .uprefs-list-item-summary,
    p {
        color: var(--font-color) !important;
    }

    h2 {
        color: #dbdada !important;
    }

    usos-frame a[slot="title"],
    usos-frame [slot="title"] a {
        text-decoration: underline !important;
        color: var(--font-color) !important;
    }

    :host > div:nth-child(2) {
        background: linear-gradient(to right, var(--primary) 50px, #959595 50px) !important;
    }

    #body > ::slotted(*) {
        padding: 0px 1rem;
        margin: 1rem 0px;
        background-color: var(--background-secondary) !important;
    }

    #selector {
        background-color: #373737 !important;
        color: var(--font-color) !important;
    }
    label,
    legend {
        color: var(--font-color) !important;
    }
    
    #user, b, address{
        color: var(--font-color) !important;
    }
    
    :host div:nth-child(2) {
        color: var(--font-color) !important;
    }
    
    #icon {
        background: var(--font-color) !important;
    }
    
    #content #title ::slotted(*) {
        color: var(--font-color) !important;
    }
    
    input, .wrtext .greenforms select, defaultSkin .mceListBox .mceText {
        color: black !important;
    }
    
    .ui-widget-content, .ui-dialog.ua-panic-dialog.ua-panic-dialog-grey {
        background: var(--background-secondary);
    }
}