darkServ.user.css

/* ==UserStyle==
@name         darkServ
@version      0.1.7
@description  A customizable dark theme for iServ.
@homepageURL  https://github.com/P1NK-GANG/darkServ
@supportURL   https://github.com/P1NK-GANG/darkServ/issues
@namespace    github.com/P1NK-GANG
@license      unlicense
@author       Kesefon & Enluka
@var color    main-bg-color "Background Color" #252728
@var color    secondary-color "Secondary Color" #1c1c1d
@var color    accent-color "Accent Color" #FF0099
@var color    secondary-accent-color "Secondary Accent Color" #db0083
@var color    text-color-custom "Text Color" #FFFFFF
@var color    secondary-text-color "Secondary Text Color" #C1C1C1
@var color    link-color-custom "Link Color" #FF0099
@var color    hover-link-color "Link Hover Color" #A10CF5
@var text     topbar-background "Topbar Image" "url('https://example.org/iserv/file_pass/Files/header.gif')"
@var color    topbar-color "Topbar Color" #000
==/UserStyle== */

/* uncomment for pure CSS version
:root {
    --main-bg-color: #252728;
    --secondary-color: #1c1c1d;
    --accent-color: #FF0099;
    --text-color-custom: #FFFFFF;
    --secondary-text-color: #C1C1C1;
    --link-color-custom: #FF0099;
    --hover-link-color: #A10CF5;
    --topbar-background: url('https://example.org/iserv/file_pass/Files/header.gif');
    --topbar-color: #000;
    --secondary-accent-color: #db0083;
}*/

@-moz-document regexp(".*\/iserv\/.*") {
.sidebar-brand > a > img {
    filter: hue-rotate(105.5deg) saturate(255%); /*Logo Color*/
}

body {
    background-color: var(--main-bg-color) !important;
    color: var(--text-color-custom) !important;
    caret-color: var(--text-color-custom) !important;
}

.panel-primary {
    border-color: var(--accent-color) !important;
}

.panel {
    background-color: var(--secondary-color) !important;
}

.panel-heading {
    background-color: var(--accent-color) !important;
    color: var(--text-color-custom) !important;
}

.panel-default > .panel-heading {
    background-color: var(--secondary-color) !important;
}

.mail-item {
    border-bottom-color: var(--secondary-color) !important;
}

.mail-item:hover {
    background-color: var(--secondary-color) !important;
}

hr {
    border-color: var(--accent-color) !important;
}

.text-secondary {
    color: var(--secondary-text-color) !important;
}

a {
    color: var(--link-color-custom);
}

a:hover {
    color: var(--hover-link-color) !important;
}

.btn-link {
    color: var(--link-color-custom) !important;
}

.btn-link:hover {
    color: var(--hover-link-color) !important;
}

.glyphicon-home {
    color: var(--link-color-custom) !important;
}

.glyphicon-home:hover {
    color: var(--hover-link-color) !important;
}

.table {
    background-color: var(--secondary-color) !important;
    border-color: var(--accent-color) !important;
}

td {
    background-color: var(--secondary-color) !important;
    border-color: var(--accent-color) !important;
}

tr {
    background-color: var(--secondary-color) !important;
    border-color: var(--accent-color) !important;
}

th {
    background-color: var(--secondary-color) !important;
    border-color: var(--accent-color) !important;
}

.panel-default {
    border-color: var(--accent-color) !important;
}

.list-group-item {
    background-color: var(--secondary-color) !important;
    border-color: var(--accent-color) !important;
}

.list-group-item a {
    color: var(--text-color-custom) !important;
}

#sidebar-wrapper {
    background-color: var(--secondary-color) !important;
    border: none;
    scrollbar-width: none;
}

.sidebar-nav li a {
    color: var(--text-color-custom) !important;
}

.sidebar-nav li a:hover {
    background-color: var(--accent-color) !important;
}

.sidebar-nav li.nav-divider {
    color: var(--text-color-custom) !important;
    border: none;
}

.sidebar-nav li.sidebar-brand {
    border: none;
}

.sidebar-nav li.sidebar-brand a:hover {
    background: none !important;
}

.legal-notice {
    visibility: hidden;
}

#topbar {
    background: var(--topbar-background) center/cover no-repeat !important;
    background-color: var(--topbar-color) !important;
    border: none;
}

.content-header {
    background-color: var(--topbar-color) !important;
    border: none !important;
}

.breadcrumb {
    background-color: transparent !important;
}
.breadcrumb > .active {
    color: var(--text-color-custom) !important;
}

.breadcrumb > li {
    color: var(--text-color-custom) !important;
}

.bc {
    color: var(--text-color-custom) !important;
}

.header-meta {
    color: var(--text-color-custom) !important;
}

.btn-primary {
    background-color: var(--secondary-color);
}

.btn-primary:hover {
    background-color: var(--accent-color);
    color: var(--text-color-custom) !important;
}

.panel-inverse > .panel-footer,
.panel-action-footer {
    background-color: var(--secondary-color);
    border-top: 1px solid var(--accent-color);
}

#message #message-header {
    background-color: var(--secondary-color);
    border: none;
}

#message #message-body {
    background-color: var(--main-bg-color);
    border: none;
}

.btn-default {
    background-color: var(--secondary-color);
    border-color: var(--main-bg-color);
    color: var(--accent-color);
}

.form-control {
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: var(--text-color-custom) !important;
}

.form-control:focus {
    border-color: var(--main-bg-color);
    box-shadow: var(--main-bg-color);
}

#mail-entries {
    background-color: var(--main-bg-color);
    border-color: var(--accent-color);
}

#mail-page {
    background-color: var(--main-bg-color);
    border-color: var(--accent-color);
}

.modal-content {
    background-color: var(--secondary-color);
}

.alert-warning {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.selectize-input {
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}

.mail-action-bar {
    background-color: var(--secondary-color);
    border: none;
}

.file-universal-dropzone-hint {
    color: var(--accent-color);
}

.btn-success {
    background-color: var(--accent-color);
}

.btn-success:hover {
    background-color: var(--secondary-accent-color);
}

.btn-success:focus {
    background-color: var(--accent-color);
}

.btn-default:hover {
    background-color: var(--accent-color);
    border: none;
    color: var(--text-color-custom);
}

.btn-default:focus {
    background-color: var(--secondary-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.close {
    color: var(--accent-color);
}

.close:hover {
    color: var(--accent-color);
}

#message-list {
    border-color: var(--accent-color);
}

.has-error .control-label {
    color: var(--accent-color) !important;
}

.has-error .selectize-input {
    border-color: var(--accent-color) !important;
}

.settings-link {
    border-top: 1px solid var(--accent-color);
}

.panel-inverse > .panel-heading {
    border-color: var(--accent-color);
}

.dropdown-menu {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.dropdown-menu a {
    color: var(--text-color-custom) !important;
}

.fc-toolbar {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus {
    background-color: var(--secondary-color);
    border: none;
    opacity: 1;
}

.calendar-panel-datepicker .panel-body {
    border: none;
}

.btn-primary:focus-within {
    background-color: var(--accent-color);
    color: var(--text-color-custom) !important;
}

.btn-primary:active {
    background-color: var(--accent-color);
    color: var(--text-color-custom) !important;
}

.btn-primary:focus {
    background-color: var(--accent-color);
    color: var(--text-color-custom) !important;
}

.page-loader[data-v-0fb004eb] {
    background-color: var(--secondary-color);
    border: none;
}

.header-meta {
    color: var(--accent-color) !important;
}

@keyframes iserv-loading-indicator {
    0% {
        transform: translateY(4px);
    }
    100% {
        transform: translateY(0);
    }
    0%,
    50% {
        background-color: var(--accent-color);
    }
    75% {
        background-color: var(--hover-link-color);
    }
    100% {
        background-color: var(--secondary-accent-color);
    }
}

.label-warning {
    background-color: var(--accent-color);
}

.text-muted {
    color: var(--text-color-custom);
}

.alert-info {
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.panel-title {
    color: var(--text-color-custom);
}

.border-gray {
    border-color: var(--accent-color);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder {
    color: var(--accent-color);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .open > .dropdown-toggle.btn-default{
    background-color: var(--secondary-color);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: var(--secondary-accent-color);
}

.text-success {
    color: var(--accent-color);
}

.well {
    background-color: var(--main-bg-color);
    border: none;
}

.file-universal-hover-highlight {
    background-color: var(--secondary-accent-color);
    border-color: var(--accent-color);
    opacity: 0.8;
}

.file-universal-hover-highlight-text {
    color: var(--text-color-custom);
}

.panel > .table + .panel-body  {
    border-color: var(--accent-color);
}

.dropdown-toolbar {
    background-color: var(--secondary-color);
    border: none;
}

.dropdown-container {
    background-color: var(--main-bg-color);
    border-color: var(--accent-color);
}

.dropdown-footer {
    border: none;
}

.notification {
    border-color: transparent;
    color: var(--secondary-text-color);
}

.notification.active:hover, .notification:hover {
    background-color: var(--main-bg-color)
}

.notification-content, .notification-meta {
    color: var(--secondary-text-color);
}

.badge, .sidebar-nav li.nav-divider.nav-additional-modules .has-badge {
    color: var(--accent-color);
}

.sidebar-nav li a:hover > .badge {
    color: var(--text-color-custom);
}

.alert-success {
    color: var(--accent-color);
    background-color: var(--secondary-color);
    border-color: var(--accent-color);
}

.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    color: var(--text-color-custom);
    background-color: var(--secondary-accent-color);
}

.panel-inverse {
    border-color: var(--accent-color);
}

.panel-warning {
    border-color: var(--accent-color);
}

.badge {
    background-color: var(--accent-color);
    color: var(--main-bg-color);
}

.btn-xs .badge, .btn-group-xs > .btn .badge {
    background-color: transparent;
    color: var(--accent-color);
}

.sidebar-nav li.nav-divider.nav-additional-modules .has-badge {
    color: var(--accent-color);
}

td.fc-day-top.fc-past {

    background-color: var(--main-bg-color) !important;
    border-color: var(--accent-color) !important;

}

.fc-day-number {
    color: var(--text-color-custom) !important;
}
    
.fc-axis {
    color: var(--text-color-custom);
}

.navbar-default .navbar-nav > li > a {
    border-bottom: solid 5px var(--secondary-color);;
    color: var(--secondary-text-color);
}
    
.navbar-default .navbar-nav > li.active > a {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
    .nav-tabs {
    border-color: var(--accent-color);
    background-color: var(--secondary-accent-color);
}

.nav-tabs > li.active > a {
    color: var(--text-color-custom);
    background-color: var(--accent-color);
}

.nav-tabs > li > a {
    color: var(--text-color-custom);
}

div.dataTables_wrapper div.dataTables_info {
    color: var(--secondary-text-color);
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--main-bg-color);
    opacity: 50%;
}

.help-block {
    color: var(--secondary-text-color);
}

.flex-item-list.flex-item-list-panel-hover .flex-item:hover .panel {
    box-shadow: 0 0 10px var(--secondary-accent-color);
}
}