ComunicWeb/assets/css/dark_theme.css

/**
* ComunicWeb dark theme
*
* @author Pierre HUBERT
*/

/**
* General definitions
*/
:root {
    --black: #1119;
    --black2: #111111;
    --black3: #000;
    --black4: #686a6c;
    --black5: #232426;
    --black6: #0f0f0f;
    --white: silver;
}

body {
    background-color: var(--black6);
}

p, h1, h2, h3, h4, h5, h6 {
    color: var(--white);
}

.content-wrapper {
    background-color: var(--black3);
}

.link-black {
    color: var(--white);
}

.table-hover > tbody > tr:hover {
    background-color: var(--black3);
}


/**
* Buttons
*/
.btn {
    color: var(--white);
}

.btn-primary, 
.btn-success, 
.btn-default,
.btn-danger,
.btn-info {
    background-color: transparent;
}

.btn-default:active, .btn-default:focus {
    background-color: var(--white);
}


/**
* Callouts
*/
.callout.callout-info {
    background-color: var(--black-5) !important;
}


/**
* Forms
*/
.form-control {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black5);
}

.form-control:focus {
    background-color:  var(--black5);
    border-color: var(--black4);
}

.form-group label {
    color: var(--white);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--black6);
}


.input-group .help-block {
    color: var(--white);
}

/**
* Boxes
*/
.box {
    background-color: var(--black5);
    color: var(--white);
}

.box-footer {
    background-color: var(--black5);
}


/**
* Modals
*/
.modal-header,
.modal-footer {
    background-color: var(--black5);
}

.modal-body {
    background-color: var(--black6);
}

.modal-primary .modal-header, 
.modal-primary .modal-footer {
    background-color: var(--black5) !important;;
}

.modal-primary .modal-body {
    background-color: var(--black6) !important;
}

.modal-danger .modal-header, 
.modal-danger .modal-footer {
    background-color: #a22819 !important;
}

.modal-danger .modal-body {
    background-color: #872f24 !important;
}

/**
* Dropdown menus
*/
.dropdown-menu {
    background-color: var(--black5) !important;
}

.dropdown-menu > li > a {
    color: var(--white) !important;
}

.dropdown-menu > li > a:hover {
    background-color: var(--black3) !important;
}

.dropdown {
    color: var(--white);
}



/**
* Navbar
*/
.navbar {
    background-color: var(--black6) !important;;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
    background-color: var(--black6);
    color: var(--white);
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
    background-color: var(--black6) !important;
    color: var(--white) !important;
}

.main-header #navbar-search-input.form-control:focus,
.main-header #navbar-search-input.form-control:active {
    background-color: var(--black3);
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
    color: var(--white);
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
    background-color: var(--black6);
}

.skin-blue .main-header .navbar .dropdown-user-menu-action .dropdown-menu li a {
    color: var(--white) !important;;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
    background-color: var(--black4);
}


/**
* Sidebar
*/
.sidebar-form input[type="text"]:focus,
.sidebar-form input[type="text"]:focus + .input-group-btn,
.sidebar-form input[type="text"]:focus + .input-group-btn .btn  {
    background-color: var(--black6) !important;
    color: var(--white);
}

.sidebar-form input[type="text"] {
    color: white !important;
}

.sidebar-search-results .results-container {
    background-color: var(--black5);
    color: var(--white);
}


/**
* Footer
*/
.main-footer {
    background-color: var(--black3);
}

.main-footer span {
    color: var(--white);
}

/**
 * Nav tabs
 */
.nav-tabs-custom {
    background-color: var(--black5);
    color: var(--white);
}

.nav-tabs-custom .nav {
    border-bottom-color: var(--black5);
}

.nav-tabs-custom li.active, .nav-tabs-custom li.active a {
    background-color: var(--black) !important;
}

.nav-tabs-custom li.active a {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.nav-tabs-custom a {
    color: var(--white) !important;
}


/**
* Friends list
*/
@media screen and (min-width: 1200px) {
    
	#friendsList {
        background-color: var(--black6);
    }
    
    #friendsList:hover {
        background-color: var(--black5);
    }
}

@media screen and (max-width: 1200px) and (min-width: 513px)  {
	#friendsList {
        background-color: var(--black5);
    }
}

@media screen and (max-width: 513px)  {
	#friendsList {
        background-color: var(--black5);
    }
}

#friendsList h4 {
    color: var(--white);
}

#friendsList li:hover {
    background-color: var(--black4);
}

/**
* Emoji picker
*/
.wdt-emoji-popup {
    background-color: var(--black6);
    border: 1px var(--black6) solid;
    border-radius: 2;
}

#wdt-emoji-menu-header {
    background-color: var(--black5);
}

#wdt-emoji-footer {
    background-color: var(--black5);
}

.wdt-emoji-popup h3 {
    background-color: var(--black4);
    color: var(--white);
}

#wdt-emoji-search {
    background-color: var(--black5);
    color: var(--white);
}

#wdt-emoji-search:focus {
    background-color: var(--black4);
    color: var(--white);
}

.wdt-emoji:hover {
    background-color: var(--black4) !important;;
}


/**
* Sceditor
*/
.sceditor-iframe-body {
    background-color: var(--black5);
    color: var(--white);
}

.sceditor-container textarea {
    background-color: var(--black5);
    color: var(--white);
}

.sceditor-button {
    background-color: var(--black6);
}

.sceditor-button svg {
    fill: var(--black4);
}

.sceditor-button:hover,
.sceditor-button:active,
.sceditor-button.active {
    background-color: var(--black4);
    color: white;
}


.sceditor-button:hover svg,
.sceditor-button:active svg,
.sceditor-button.active svg {
    fill: var(--black6);
}

div.sceditor-dropdown {
    background-color: var(--black5);
}

div.sceditor-dropdown input {
    background-color: var(--black4);
}

/**
* Conversations
*/
.open-conversation-button {
    background-color: var(--black5);
}

.nav-stacked > li > a {
    color: var(--white);
}

.conversations-list-box .last-activity {
    color: var(--white);
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
    color: var(--black5);
}

.select2-dropdown, .select2-selection, 
.select2-search__field {
    background-color: var(--black5) !important;
    color: var(--white);
}

.select2-selection__rendered {
    color: var(--white) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--black4);
    color: var(--white);
}

#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
#conversationsElem .create-message-form .btn.btn-add-image:hover {
    color: var(--white);
}

.conversation-settings-pane {
    background-color: var(--black5) !important;
}

/**
* Home page
*/
#homeLandingScreen {
    background-image: none !important;
    background-color: var(--black5);
}

#homeLandingScreen #homeMessage {
    background-color: var(--black);
}


/**
* Login page
*/
.login-page, .register-page {
    background-color: var(--black2);
}

.login-box-body {
    background-color: var(--black3);
}

.login-logo b, #loginForm label {
    color: var(--white) !important;
}


/**
* Create account page
*/
.create-account-form label {
    color: var(--white);
}



/**
* User information
*/
.list-group-item {
    background-color: transparent;
}



/**
* Posts
*/
.attachment-block {
    background-color: var(--black6);
}

.post-comments {
    background-color: var(--black);
    border-radius: 2px;
}

.post {
    color: var(--white);
}

.post-image {
    filter: brightness(80%);
    transition: filter 1s;
}

.post-image:hover {
    filter: brightness(100%);
}

.post-youtube-placeholder {
    background-color: var(--black6) !important;
}

.box-comments .username, 
.box-comments .comment-content {
    color: var(--white);
}


.comment-creation-form .comment-image-select a, 
.comment-creation-form .comment-emoji-select a {
    color: var(--white);
}


/**
* Posts creation form
*/

.post-form-choice span {
    color: var(--black4);
}

.post-form-choice span span {
    color: inherit;
}

.post-form .post-form-choice input:checked ~ span {
    color: var(--white);
}

.datepicker.dropdown-menu {
    background-color: var(--black6);
    color: var(--white);
}

.select2-container--default .select2-selection--multiple {
    background-color: transparent;
}

.post-form .post-visiblity-container span {
    color: var(--black4);
}

.post-form .post-visiblity-container input:checked ~ span {
    color: var(--white);
}


/**
* Posts edit modal
*/
.editor {
    background-color: var(--black5);
    color: var(--white);
}


/**
* Search page
*/
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
    background-color: var(--black4);
}

/**
* Conversation page
*/
.big-box-conversation a {
    background-color: var(--black6) !important;;
}

.big-box-conversation a {
    color: var(--white) !important;
}

.big-box-conversation a:hover {
    background-color: var(--black5) !important;;
}

.big-box-conversation a:active {
    background-color: var(--black6) !important;;
}

.big-box-conversation a.selected {
    background-color: var(--black5) !important;;
}



.big-box-conversation .input-group-btn .btn {
    background-color: var(--black5);
}

.big-box-conversation .input-group-btn .btn:hover {
    background-color: var(--black4);
    color: var(--black6);
}

.big-box-conversation .input-group-btn .btn:focus,
.big-box-conversation .input-group-btn .btn:active {
    color: var(--white);
}

.big-box-conversation .direct-chat-text .a,
.big-box-conversation .direct-chat-text a {
    background-color: transparent !important;
    color: inherit !important;
}

/**
* Groups logo
*/
img[src$="groups_logo/default.png"] {
    filter: invert(1) brightness(50%);
}

/**
* Read only friends list
*/
.friends-list-ro .friend a:hover .friends-name {
    color: var(--black4);
}

/**
* Account created page
*/
.page_account_created .message_container .message {
    background-color: var(--black5);
}

/**
* Call system
*/
.call-window {
    border: 1px var(--black4) solid;
}

.ring-call-container {
    background-color: var(--black5);
}

.call-message-box {
    background-color: var(--black6);
}

/**
* Groups list page
*/
.groups-main-page {
    color: var(--white);
}

/**
* Groups members page
*/
.group-members-page {
    color: var(--white);
}


/**
* Group settings page
*/
.group-settings-container label {
    color: var(--white);
}

.delete-group-link-container a {
    color: var(--white) !important;
}


/**
* Post target picker
*/
.posts-target-picker {
    color: var(--white);
}

.posts-target-picker > div:hover {
    background-color: var(--black4);
}

/**
 * Full calendar
 */
.fc-theme-standard .fc-list-day-cushion {
    background-color: var(--black3);
}

.fc .fc-list-event:hover td {
    background-color: var(--black3);
}