sepanta dark by m-faghihy

/* ==UserStyle==
@name           sepanta dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("sepanta.com") {
    :root {
        --white: #fff;
        --dark-white: #bbb;

        --lighter-blue: #39a4f4;
        --light-blue: #158;
        --blue: #123a55;
        --dark-blue: #035;

        --light-grey: #555;
        --grey: #444;
        --dark-grey: #2d2d2d;

        --black: #222222;
    }


    body.dark-skin,
    .dark-skin .page-content,
    .dark-skin .well,
    .dark-skin .widget-body,
    .dark-skin .modal-content,
    .dark-skin .ui-jqgrid .loading {
        background-color: var(--dark-grey);
        color: var(--white);
    }

    .dark-skin a,
    .widget-box.transparent > .widget-header {
        color: var(--lighter-blue);
    }


    .dark-skin .widget-header,
    .dark-skin .modal-footer {
        background-color: var(--grey)
    }

    .dark-skin .main-container:before {
        background-color: var(--dark-grey);
    }

    .dark-skin .page-header {
        border-bottom-color: var(--light-grey);
    }

    .dark-skin .page-header h1 {
        color: var(--white);
    }

    .dark-skin .page-header h1 small {
        color: var(--dark-white);
    }

    .dark-skin .ajax-loading-overlay {
        background-color: var(--dark-grey);
    }

    .dark-skin .sidebar {
        background-color: var(--dark-grey);
    }

    .dark-skin .nav-list > li > a {
        color: var(--white);
    }

    .dark-skin .nav-list > li > a:hover {
        background-color: var(--grey);
    }

    .dark-skin .nav-list > li.active > a {
        background-color: var(--light-grey);
    }

    .dark-skin .breadcrumbs {
        background-color: var(--grey);
        border-bottom-color: var(--light-grey);
    }

    .dark-skin .breadcrumb > li,
    .dark-skin .breadcrumb > li.active {
        color: var(--white);
    }

    .dark-skin .breadcrumb > li > a {
        color: var(--light-blue);
    }

    .dark-skin .breadcrumb > li + li:before {
        color: var(--dark-white);
    }

    .dark-skin .nav-search .nav-search-input {
        background-color: var(--grey);
        color: var(--white);
        border-color: var(--light-grey);
    }

    .dark-skin .nav-search .nav-search-icon {
        color: var(--light-blue);
    }

    .dark-skin .footer .footer-inner {
        background-color: var(--dark-grey);
        color: var(--white);
    }

    .dark-skin .footer .footer-inner .footer-content {
        border-top-color: var(--light-grey);
    }
    .dark-skin .ui-jqgrid-view > .ui-jqgrid-titlebar {
        color: var(--white);
        background: var(--light-blue);
    }

    .dark-skin .ui-jqgrid tr.jqgrow.ui-row-rtl td:last-child {
        border-left: 1px solid var(--grey);
    }

    .dark-skin .ui-jqgrid .ui-jqgrid-hdiv {
        background-color: var(--grey);
        border: 1px solid var(--grey);
        color: var(--dark-white);
    }

    .dark-skin .ui-jqgrid .ui-jqgrid-htable thead {
        background-color: var(--grey);
    }

    .dark-skin .ui-jqgrid-hdiv .ui-jqgrid-htable {
        border-top: 1px solid var(--grey);
    }

    .dark-skin .ui-jqgrid tr.ui-row-ltr td,
    .dark-skin .ui-jqgrid tr.ui-row-rtl td {
        border-bottom: 1px solid var(--grey);
        border-color: var(--grey);
    }

    .dark-skin .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td {
        border-right-color: var(--blue);
    }

    .dark-skin .ui-jqgrid tr.ui-state-highlight.ui-row-rtl td {
        border-left-color: var(--blue);
    }

    .dark-skin .ui-jqgrid-btable .ui-widget-content.ui-priority-secondary {
        background-color: var(--grey);
    }

    .dark-skin .ui-jqgrid-btable .ui-widget-content.ui-state-hover {
        background-color: var(--grey);
    }

    .dark-skin .ui-jqgrid-btable .ui-widget-content.ui-state-highlight {
        background-color: var(--blue);
    }

    .dark-skin .ui-jqgrid .ui-jqgrid-pager {
        background-color: var(--grey) !important;
        border-bottom: 1px solid var(--grey) !important;
        border-top: 1px solid var(--grey) !important;
    }

    .dark-skin .ui-jqgrid .ui-jqgrid-toppager {
        background-color: var(--grey);
        border-bottom: 1px solid var(--grey) !important;
    }

    .dark-skin .ui-jqgrid .ui-pg-button .ui-separator {
        border-color: var(--grey);
    }

    .dark-skin.rtl .ui-jqgrid .ui-jqgrid-btable {
        border-right: 1px solid var(--grey);
    }

    .dark-skin .ui-jqgrid .ui-jqgrid-bdiv {
        border-top: 1px solid var(--grey);
    }

    .dark-skin.rtl .ui-jqgrid .ui-jqgrid-labels,
    .dark-skin.rtl .ui-jqgrid .ui-search-toolbar {
        background: var(--grey);
        border: 1px solid var(--light-grey) !important;
    }

    .dark-skin.rtl .ui-jqgrid .ui-jqgrid-labels th,
    .dark-skin.rtl .ui-jqgrid .ui-search-toolbar th {
        border: 1px solid var(--light-grey) !important;
    }

    .dark-skin .ui-jqgrid-sortable {
        color: var(--dark-white);
    }

    .dark-skin .ui-jqgrid-sortable:hover {
        color: var(--blue);
    }

    .dark-skin th[aria-selected=true] {
        background-image: linear-gradient(to bottom, var(--grey) 0%, var(--grey) 100%);
    }

    .dark-skin th[aria-selected=true] .ui-jqgrid-sortable {
        color: var(--blue);
    }

    .dark-skin .ui-jqgrid .ui-icon {
        color: var(--blue);
    }

    .dark-skin .ui-jqgrid .ui-icon.ui-state-disabled {
        color: var(--dark-white);
    }

    .dark-skin .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon {
        color: var(--dark-white);
        border: 1px solid var(--grey);
        background-color: var(--dark-grey);
    }

    .dark-skin .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon:hover {
        color: var(--blue);
        border-color: var(--blue);
    }

    .dark-skin .ui-pg-table > tbody > tr > .ui-pg-button.ui-state-disabled .ui-icon {
        color: var(--dark-white);
        background-color: var(--grey);
        border-color: var(--grey);
    }

    .dark-skin textarea,
    .dark-skin input {
        color: var(--white);
        background-color: var(--dark-grey);
        border: 1px solid var(--grey);
    }

    .dark-skin textarea:hover,
    .dark-skin input:hover {
        border-color: #666;
    }

    .dark-skin textarea:focus,
    .dark-skin input:focus {
        color: var(--white);
        border-color: var(--blue);
        background-color: var(--dark-grey);
    }

    .dark-skin input::-webkit-input-placeholder,
    .dark-skin .form-control::-webkit-input-placeholder {
        color: var(--dark-white);
    }

    .dark-skin input:-moz-placeholder,
    .dark-skin .form-control:-moz-placeholder {
        color: var(--dark-white);
    }

    .dark-skin input::-moz-placeholder,
    .dark-skin .form-control::-moz-placeholder {
        color: var(--dark-white);
    }

    .dark-skin input:-ms-input-placeholder,
    .dark-skin .form-control:-ms-input-placeholder {
        color: var(--dark-white);
    }

    .dark-skin .form-control,
    .dark-skin select {
        color: var(--white);
        background-color: var(--dark-grey);
        border: 1px solid var(--grey);
    }

    .dark-skin .form-control:focus,
    .dark-skin select:focus {
        color: var(--white);
        border-color: var(--blue);
        background-color: var(--dark-grey);
    }

    .dark-skin .limiterBox {
        border: 1px solid var(--grey);
        background-color: var(--dark-grey);
        color: var(--white);
    }

    .dark-skin .limiterBox:before {
        border-bottom-color: var(--dark-grey);
    }

    .dark-skin select option:active,
    .dark-skin select.form-control option:active,
    .dark-skin select option:hover,
    .dark-skin select.form-control option:hover,
    .dark-skin select option:focus,
    .dark-skin select.form-control option:focus {
        background-color: var(--grey);
        color: var(--white);
    }

    .dark-skin input[disabled] {
        color: var(--dark-white) !important;
        background-color: var(--grey) !important;
    }

    .dark-skin input[disabled]:hover {
        border-color: var(--grey) !important;
    }

    .dark-skin input[readonly] {
        color: var(--dark-white);
        background: var(--dark-grey) !important;
    }

    .dark-skin input[readonly]:hover {
        border-color: var(--grey);
    }

    .dark-skin input[readonly]:focus {
        border-color: var(--grey);
        background-color: var(--dark-grey);
    }

    .dark-skin .input-icon > .ace-icon {
        color: var(--dark-white);
    }

    .dark-skin .input-icon > input:focus + .ace-icon {
        color: var(--blue);
    }

    .dark-skin input[type=checkbox].ace ~ .lbl::before,
    .dark-skin input[type=radio].ace ~ .lbl::before {
        color: var(--lighter-blue);
        background-color: var(--dark-grey);
        border: 1px solid var(--grey);
    }

    .dark-skin input[type=checkbox].ace:checked ~ .lbl::before,
    .dark-skin input[type=radio].ace:checked ~ .lbl::before {
        background-color: var(--grey);
        border-color: #666;
    }

    .dark-skin input[type=checkbox].ace:hover ~ .lbl::before,
    .dark-skin input[type=radio].ace:hover ~ .lbl::before,
    .dark-skin input[type=checkbox].ace ~ .lbl:hover::before,
    .dark-skin input[type=radio].ace ~ .lbl:hover::before {
        border-color: var(--blue);
    }

    .dark-skin input[type=checkbox].ace:active ~ .lbl::before,
    .dark-skin input[type=radio].ace:active ~ .lbl::before,
    .dark-skin input[type=checkbox].ace:checked:active ~ .lbl::before,
    .dark-skin input[type=radio].ace:checked:active ~ .lbl::before {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .dark-skin input[type=checkbox].ace.ace-checkbox-2:checked ~ .lbl::before,
    .dark-skin input[type=radio].ace.ace-checkbox-2:checked ~ .lbl::before {
        background-color: var(--blue);
        bo...