480 lines
10 KiB
SCSS
480 lines
10 KiB
SCSS
/*
|
|
SimplerFlat | Copyright © 2018, Qwerasd | All rights reserved | DO NOT DISTRIBUTE
|
|
*/
|
|
|
|
@import 'vars';
|
|
|
|
|
|
|
|
|
|
/* Panel colors */
|
|
|
|
/* Center panel */
|
|
|
|
.chat, .messages-wrapper, .chat>.content, .chat form, .chat div[class^="titleWrapper"]>div, div[class^="typing"] {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* User list panel */
|
|
|
|
.channel-members-wrap, .channel-members {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
/* Channel list panel */
|
|
|
|
div[class^="channels"], div[class^="channels"]>div[class^="flex"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
.guild {
|
|
background-color: transparent!important;
|
|
}
|
|
|
|
.guilds-add {
|
|
background-color: $color-very-dark!important;
|
|
}
|
|
|
|
.guilds-add, .guilds-add-inner {
|
|
color: $color-light!important;
|
|
border-color: $color-light!important;
|
|
}
|
|
|
|
/* Guilds list panel */
|
|
|
|
div#app-mount[class^="appMount"], div.guilds-wrapper {
|
|
background-color: $color-very-dark;
|
|
}
|
|
|
|
.app.flex-vertical>div[class^="layers-"],
|
|
.app.flex-vertical>div[class^="layers-"]>div[class^="layer-"],
|
|
.app.flex-vertical>div[class^="layers-"]>div[class^="layer-"]>div[class^="flex-"] {
|
|
background-color: $color-very-dark;
|
|
}
|
|
|
|
|
|
/* Right settings panel */
|
|
|
|
.ui-standard-sidebar-view .content-region {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* Left settings panel */
|
|
|
|
.ui-standard-sidebar-view .sidebar-region {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
/* Friends panel */
|
|
|
|
#friends, #friends>div {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* Context menus */
|
|
|
|
div[class^="contextMenu"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
div[class^="contextMenu"] div[class^="itemGroup"] div[class^="item"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
div[class^="contextMenu"] div[class^="itemGroup"] div[class^="item"]:hover {
|
|
background-color: $color-very-dark!important;
|
|
}
|
|
|
|
/* nochannel */
|
|
|
|
div[class^="noChannel"] {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* cards */
|
|
|
|
div[class^="row"]>div[class^="flex"]:before {
|
|
background-color: $color-dark!important;
|
|
border-color: $color-very-dark!important;
|
|
}
|
|
|
|
/* modals */
|
|
|
|
div[class^="theme-light wrapper"] {
|
|
background: transparent;
|
|
}
|
|
|
|
.form-header header, div[class^="blurb"], div[class^="expireText"] {
|
|
color: $main-text-color!important;
|
|
}
|
|
|
|
div[class^="modal-"] form {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
div[class^="modal-"] form, .form-header, .form-inner {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
div[class^="modal-"] form>div:last-child, .form-actions {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
/* themed popouts */
|
|
|
|
.themed-popout {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
.themed-popout .header, .messages-popout .message-group {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* search results */
|
|
|
|
.search-results-wrap {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
.search-header {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
.search-result-message.hit {
|
|
background-color: $color-dark!important;
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
.search-results-wrap .channel-separator .channel-name, .search-result:before, .search-result:after {
|
|
background: transparent!important;
|
|
}
|
|
|
|
.message-group:hover .action-buttons {
|
|
background: transparent!important;
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
.action-buttons>div {
|
|
background-color: $color-light!important;
|
|
color: $color-very-dark!important;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.action-buttons>div>.text {
|
|
color: $color-very-dark!important;
|
|
}
|
|
|
|
/* Various other things */
|
|
|
|
.popout>div>div[class^="body"], .popout>div>div[class^="footer"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
/* Scroll bars */
|
|
|
|
.scroller-wrap .scroller::-webkit-scrollbar-track-piece, .bd-scroller-wrap .bd-scroller::-webkit-scrollbar-track-piece {
|
|
background-color: $color-medium!important;
|
|
background-clip:padding-box;
|
|
border:3px solid $color-light!important;
|
|
border-radius:7px;
|
|
}
|
|
|
|
.scroller-wrap .scroller::-webkit-scrollbar-thumb, .bd-scroller-wrap .bd-scroller::-webkit-scrollbar-thumb {
|
|
background-clip:padding-box;
|
|
background-color:$color-dark!important;
|
|
border:3px solid $color-light!important;
|
|
border-radius:7px;
|
|
}
|
|
|
|
|
|
/* Other bits and bobs */
|
|
|
|
div[class^="searchBar"], .searchBar-YMJBu9 {
|
|
background-color: $color-light!important;
|
|
}
|
|
|
|
/* message inside modal */
|
|
|
|
form div[class^="message"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
/* new messages divider */
|
|
|
|
.messages .divider span {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* Command autosuggest */
|
|
|
|
div[class^="autocomplete-"] {
|
|
background-color: $color-dark!important;
|
|
}
|
|
|
|
div[class^="selectorSelected"] {
|
|
background-color: $color-medium!important;
|
|
}
|
|
|
|
/* Code blocks */
|
|
|
|
.markup pre, .markup code {
|
|
background-color: $color-dark!important;
|
|
border-color: $color-very-dark!important;
|
|
}
|
|
|
|
/* message accessories */
|
|
|
|
.message .accessory>div {
|
|
background-color: $color-dark;
|
|
}
|
|
|
|
|
|
/* Text stuff */
|
|
|
|
.app :not(div[class^="channels"]) :not(code):not(.kawaii-linenumbers):not(li):not(span):not(.user-name):not(.member-username):not(.markup):not(form):not(textarea):not(button):not(.guild):not(a):not(.discord-tag):not(.username):not(.discriminator):not(.ui-button-contents) {
|
|
color:$main-text-color!important;
|
|
}
|
|
|
|
:not(code):not(kawaii-linenumbers):not(li):not(span):not(.markup):not(form):not(textarea) {
|
|
font-family:$global-font, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.markup,form,textarea {
|
|
color:$chat-text-color!important;
|
|
font-family:$chat-font, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.markup {
|
|
font-size:$chat-font-size!important;
|
|
}
|
|
|
|
div[class^="ace_"] {
|
|
font-family: $code-font, monospace!important;
|
|
}
|
|
|
|
code,code span,.kawaii-linenumbers,.kawaii-linenumbers li {
|
|
font-family: $code-font, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif!important;
|
|
font-size: $code-font-size!important;
|
|
font-weight: $code-font-weight!important;
|
|
}
|
|
|
|
code,.kawaii-linenumbers {
|
|
color:$code-text-color!important;
|
|
}
|
|
|
|
|
|
/* Emoji Picker */
|
|
|
|
div[class^="emojiPicker-"] div[class^="stickyHeader-"] {
|
|
background: transparent;
|
|
}
|
|
|
|
div[class^="emojiPicker-"] {
|
|
background-color: $color-light;
|
|
}
|
|
|
|
.search-bar.search-bar-light {
|
|
background-color: $color-light;
|
|
}
|
|
|
|
.search-bar.search-bar-light input, .search-bar.search-bar-light input::-webkit-input-placeholder {
|
|
color: $main-text-color;
|
|
}
|
|
|
|
.search-bar.search-bar-light input::-webkit-input-placeholder {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.search-bar-light .search-bar-icon .icon {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
div[class^="emojiPicker-"] div[class^="scroller-"]::-webkit-scrollbar-track-piece {
|
|
background-color: $color-medium;
|
|
background-clip:padding-box;
|
|
border-radius:7px;
|
|
}
|
|
|
|
div[class^="emojiPicker-"] div[class^="scroller-"]::-webkit-scrollbar-thumb {
|
|
background-clip:padding-box;
|
|
background-color:$color-dark!important;
|
|
border: none!important;
|
|
border-radius:7px;
|
|
}
|
|
|
|
/* Emoji drop shadow so that dark emojis are visible on the dark background */
|
|
|
|
.message-group .emoji {
|
|
filter: drop-shadow(0px 0px 1px #FFF);
|
|
}
|
|
|
|
|
|
/* BD button */
|
|
|
|
.bd-settings-wrapper .bd-settings-button:not(.bd-active) {
|
|
background-color: $color-very-dark;
|
|
}
|
|
|
|
/* BD interface */
|
|
|
|
|
|
/*sidebar*/
|
|
|
|
.bd-sidebar-view .bd-sidebar-region {
|
|
background-color: $color-dark;
|
|
}
|
|
|
|
/*content*/
|
|
|
|
.bd-sidebar-view .bd-content-region {
|
|
background-color: $color-medium;
|
|
}
|
|
|
|
/*modals*/
|
|
|
|
.bd-modal .bd-modal-inner {
|
|
background-color: $color-medium;
|
|
}
|
|
|
|
/*color picker*/
|
|
|
|
.bd-form-colourpicker .vc-chrome {
|
|
z-index: 1;
|
|
|
|
& .vc-chrome-body {
|
|
background-color: $color-medium;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Channel List stuff */
|
|
|
|
*[class^="colorUnread"] {
|
|
color: $main-color;
|
|
}
|
|
|
|
div[class^="wrapperHovered"] div[class^="content"] {
|
|
background-color: $color-very-dark;
|
|
}
|
|
|
|
*[class^="colorHovered"], *[class^="colorSelected"] {
|
|
color: #FFFFFF;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
div[class^="nameUnread"] {
|
|
color: $main-color;
|
|
}
|
|
|
|
|
|
/** Collapsing stuff **/
|
|
|
|
@if $collapsing-panels {
|
|
|
|
/* Channels list */
|
|
|
|
div[class^="channels"]:not(:hover) {
|
|
width: 3em;
|
|
}
|
|
|
|
.channel.private a {
|
|
padding-left: 0.4em;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.private-channels .search-bar, .private-channels .btn-friends, .private-channels header {
|
|
overflow: hidden;
|
|
transition: height 0.3s;
|
|
}
|
|
|
|
.private-channels:not(:hover) .search-bar, .private-channels:not(:hover) .btn-friends, .private-channels:not(:hover) header {
|
|
height: 0px;
|
|
font-size: 0px;
|
|
}
|
|
|
|
div[class^="wrapperDefaultVoice"]+div, div[class^="wrapperHoveredVoice"]+div, div[class^="wrapperSelectedVoice"]+div {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
|
|
/* Foldaway channel members sidebar */
|
|
|
|
.channel-members-wrap {
|
|
min-width:1px;
|
|
}
|
|
|
|
.channel-members-wrap:not(:hover) {
|
|
width: 1px;
|
|
}
|
|
|
|
.channel-members {
|
|
padding-top:0;
|
|
padding-bottom:0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Compact Server List */
|
|
|
|
@if $compact-server-list {
|
|
|
|
.guilds-wrapper .guilds .guild.selected:before {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild.selected {
|
|
z-index: 2;
|
|
transform: scale(1.2);
|
|
margin: 10px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild.unread:not(.selected)::before {
|
|
margin-top: 1px;
|
|
height: 15px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:not(.guilds-add) {
|
|
height: 30px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:first-child {
|
|
height: 50px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild.selected::before {
|
|
animation: selectserver 0.4s cubic-bezier(1, 0, 1, 0);
|
|
-webkit-animation: selectserver 0.4s cubic-bezier(1, 0, 1, 0);
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:not(:first-child):not(.selected) div:not(.badge) {
|
|
transition: height 0.5s;
|
|
-webkit-transition: height 0.5s;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:not(:first-child):not(.selected):hover div:not(.badge) {
|
|
height: 50px;
|
|
transform: scale(1.2);
|
|
-webkit-transform: scale(1.2);
|
|
transition: height 0.5s;
|
|
-webkit-transition: height 0.5s;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:not(:first-child):not(.selected):hover {
|
|
z-index: 3;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild .badge {
|
|
bottom: 14px;
|
|
}
|
|
|
|
.guilds-wrapper .guilds .guild:not(:first-child):not(.selected):hover .badge {
|
|
transform:scale(1.35);
|
|
bottom: 19px;
|
|
right: -7px;
|
|
}
|
|
}
|