Mbo30 QOL + dark by kuroi_mato_o

/* ==UserStyle==
@name           Mbo30 QOL + dark
@namespace      github.com/openstyles/stylus
@version        1.0
@description    Almost as cool and edgy as shadow the hedgehog *dies of cringe*
@author         Kuroi_Mato_O, Telegram: https://t.me/Kuroi_Mato_O
==/UserStyle== */
@-moz-document url-prefix("https://mbo30.ru/operator"),
url-prefix("https://mbo30.ru/login"),
url-prefix("https://mbo30.ru/api/v1/documents/") {
    :root {
        --main-bg-color: #292626;
        --main-items: #f5b357;
        --main-accent: #504DAB;
        --gray-text: #ffffffb4;
    }



    /*MAIN AREA*/
    /*фоновое изображение*/
    .operator-document-processor {
        background: var(--main-bg-color)!important;
    }
    ::selection {
        background: var(--main-accent);
    }
    body,
    .operator-document__links,
    .operator-document__buttons,
    .mat-dialog-container {
        background: var(--main-bg-color)!important;
        color: var(--gray-text)!important;
        font-size: 16px!important;
    }

    a {
        color: var(--main-items);
    }

    .mat-card {
        background: #191919!important;
        color: var(--gray-text)!important;
    }

    .mat-icon.mat-primary {
        color: var(--main-items)!important;
    }

    .mat-menu-panel {
        background: var(--main-bg-color)!important;
        border: 1px #1f1f20 solid;
    }

    .handsontable td,
    .htCore .htSerialNumberColumn,
    .operator-markup__form,
    .mat-input-element,
    .mat-select-panel,
    .mat-input-element,
    .mat-active {
        background: var(--main-bg-color)!important;
        color: var(--main-items)!important;
        caret-color: var(--main-items);
    }

    .mat-select-value,
    .operator-document__save-info-item_green,
    .mat-form-field-infix,
    .mat-select-search-input::placeholder {
        color: var(--main-items)!important;
    }

    .mat-option-disabled {
        background: #423e3e!important;
    }

    .mat-active {
        background: #423e3e!important;
    }

    .mat-option-text {
        color: var(--gray-text)!important;
    }

    .mat-option-text .highlight {
        background: #000 !important;
        color: var(--main-items);
        font-size: 18px !important;
        border-radius: 5px;
        padding: 1px;
    }

    .mat-fab.mat-primary,
    .mat-flat-button.mat-primary,
    .mat-mini-fab.mat-primary,
    .mat-raised-button.mat-primary,
    .company__create-button {
        background-color: var(--main-accent)!important;
    }

    .mat-raised-button,
    .company__create-button {
        color: var(--gray-text)!important;
    }

    .mat-progress-spinner circle,
    .mat-spinner circle {
        stroke: var(--main-accent);
    }

    .operator-document-processor__acquiring,
    .operator-document-processor__waiting,
    .operator-document__company-details,
    .mat-menu-item {
        color: var(--gray-text)!important;
    }


    /*TABLE*/
    .handsontable.listbox td.htDimmed {
        background: var(--main-bg-color)!important;
        color: #b7a36f70!important;
    }

    .handsontable.listbox td.htDimmed:hover {
        background: #191919!important;
        color: var(--main-items)!important
    }

    .handsontable tbody th.ht__active_highlight,
    .handsontable thead th.ht__active_highlight {
        color: var(--main-items);
    }

    .handsontable th {
        background: #1a1919;
        color: var(--gray-text)!important;
    }

    .handsontableInput {
        background: #141616!important;
        color: var(--gray-text)!important;
    }
    .htContextMenu td:hover {
        background: #1a1919!important;
    }
    .handsontable .htNoFrame + td,
    .handsontable .htNoFrame + th,
    .handsontable td:first-of-type,
    .handsontable th:first-child,
    .handsontable th:nth-child(2),
    .handsontable.htRowHeaders thead tr th:nth-child(2) {
        border-left: 1px solid var(--gray-text)!important;
    }
    .handsontable tr:first-child td,
    .handsontable tr:first-child th {
        border-top: 1px solid var(--gray-text)!important;
    }
    .htCore .htEndPageRow {
        border-bottom: dashed 2px #84201b;
    }

    .htInvalid {
        border-bottom: 1px #ccc solid!important;
    }

    .ht__highlight {
        background: #111!important;
    }

    .handsontable .htDimmed {
        color: #b7a36f70!important;
    }

    /*доделать выделение активной строки полностью как при :hover*/
    .handsontable tr:hover td:not(.htInvalid),
    .current.highlight {
        background: #1c1b1b!important;
    }

    .htMiddle .htMarkedRow,
    .htMiddle.htFirstPageRow {
        background: #1e1d3eeb !important;
    }

    .handsontable td.htInvalid,
    .errors-dialog__button,
    .operator-document-processor__big-button {
        background: #84201b!important
    }

    .htCore .htChanged.htInvalid,
    .notification__warn {
        background: #754d02!important;
    }

    /*DOC PREVIEW*/
    .pages-viewer,
    .operator-viewport,
    .operator-markup__page-image,
    .pdfViewer .page,
    .shrinkToFit,
    .overflowingVertical {
        filter: invert(86%) brightness(75%) contrast(93%)!important;
    }
    .operator-markup-pages-step__action-btn_drop {
        color: #a82626!important;
    }
    .operator-markup-pages-step__action-btn_drop:hover {
        background: #862626!important;
        color: var(--gray-text)!important;
    }

    /*А это я уже не помню что лол*/
    .ng-star-inserted button {
        transition: filter 0.5s;
    }

    .ng-star-inserted button:hover {
        /*         color:#e6e4e4!important; */
        filter: saturate(1.4);
    }

    .mat-menu-item:hover {
        /*         background: #221f1f!important; */
        color: var(--main-items)!important;
    }

    .mat-option-text {
        user-select: text;
    }

    .operator-page-viewer .mat-spinner circle,
    .operator-document__companies-history .mat-spinner circle {
        filter: invert(100%)!important;
        stroke: var(--main-accent)!important;
    }

    .operator-document__quantity-sum-table-block {
        border: none!important;
        color: var(--gray-text)
    }

    .operator-document__quantity-sum-table-block div:nth-child(3) {
        color: var(--main-items);
        text-align: right!important;
    }

    .mat-form-field.mat-focused .mat-form-field-label,
    .mat-form-field.mat-focused .mat-select-arrow {
        color: var(--main-items)!important;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
        background-color: var(--main-items)!important;
    }

    .mat-option:hover:not(.mat-option-disabled) {
        background: var(--main-accent)!important;
    }

    .operator-markup-navigation__page_current {
        color: var(--main-items)!important;
        background: #191919!important;
    }

    .operator-markup-navigation__page:hover {
        background: #191919!important;
        color: var(--main-items)!important;
    }

    .operator-markup__page-viewport {
        background: #191919!important;
    }

    .operator-markup-pages-step_in-document {
        background: transparent!important;
    }

    .operator-markup__form {
        box-shadow: none!important;
    }

    .operator-markup__page-image_0 {
        border: none!important;
    }

    .mat-select-panel:not([class*=mat-elevation-z]) {
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 65%),
        0 4px 5px 0 rgb(0 0 0 / 20%),
        0 1px 10px 0 rgb(0 0 0 / 52%);
    }

    .simple-alert-dlg__text.ng-star-inserted {
        overflow: hidden!important;
    }
}
@-moz-document url-prefix("https://mbo30.ru/something-goes-wrong") {


    /* SERVER RESTART ERROR PAGE  */
    body {
        background: #292626;
    }
    server-side-error div {
        visibility: hidden;
    }
    body::after {
        content: "Сайт временно недоступен \A Мы выполняем запланированные работы по обслуживанию серверов\A Сервис будет доступен в ближайшее время \A Приносим свои извинения за доставленные неудобства";
        color: #f5b357;
        font-size: 2.5vw;
        line-height: 4vw;
        white-space: pre;
        visibility: visible;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        position: fixed;
    }

    /*   Encoded with https://yoksel.github.io/url-encoder/ */
    server-side-error::after {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='122.88px' height='101.878px' viewBox='0 0 122.88 101.878' enable-background='new 0 0 122.88 101.878' xml:space='preserve'%3E%3Cg%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.406,12.143c-2.672-1.042-5.431-1.586-8.276-1.586 c-4.279,0-7.798,1.369-10.557,4.084L21.765,38.427l2.477,2.499l-9.037,9.101L0,34.799l9.036-9.037l2.802,2.737L35.515,4.844 C38.773,1.608,42.271,0,46.007,0C52.285,0,58.411,4.041,64.406,12.143L64.406,12.143z M100.535,5.408 c2.588,0,5.072,0.441,7.384,1.25l-5.874,6.358c-13.345,14.437,1.715,22.79,14.986,12.879l5.119-3.822 c0.475,1.813,0.729,3.717,0.729,5.679c0,12.341-10.003,22.345-22.345,22.345c-4.026,0-7.804-1.065-11.066-2.929L78.616,58.689 c10.214,9.778,20.431,19.554,30.646,29.33l-13.858,13.858C85.74,91.8,76.08,81.718,66.422,71.635L47.394,91.833 c-1.445,2.471-4.126,4.132-7.194,4.132c-4.599,0-8.329-3.729-8.329-8.329c0-1.988,0.699-3.815,1.862-5.247l-0.012-0.012 l0.073-0.063c0.601-0.723,1.322-1.342,2.132-1.828L57.327,62.14L30.941,34.504L41.89,23.556 c10.157,9.756,18.402,17.582,28.572,27.324l11.864-10.172c-2.604-3.654-4.136-8.125-4.136-12.955 C78.19,15.411,88.193,5.408,100.535,5.408L100.535,5.408z M28.63,10.362L17.747,21.245l-2.086-2.085L26.544,8.276L28.63,10.362 L28.63,10.362z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 30vw 30vw;
        display: inline-block;
        width: 30vw;
        height: 30vw;
        background-repeat: no-repeat;
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
    ...