Merge branch 'fix2020'
This commit is contained in:
HoLLy
Коммит
13a5fab760
|
|
@ -1,70 +0,0 @@
|
|||
// Make messages move in
|
||||
@if ($move-in-messages) {
|
||||
@keyframes message-animation {
|
||||
from {margin-left: -20px; margin-right: 60px; opacity: 0;}
|
||||
to {margin-left: 20px; margin-right: 20px; opacity: 1;}
|
||||
}
|
||||
@keyframes channel-animation {
|
||||
from {margin-left: -40px; margin-right: 20px; opacity: 0;}
|
||||
to {margin-left: 0; margin-right: 0; opacity: 1;}
|
||||
}
|
||||
.message-group {
|
||||
animation: message-animation 0.5s;
|
||||
}
|
||||
|
||||
div[class*="containerDefault-"] {
|
||||
animation: channel-animation 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
// Do some stuff with your own messages
|
||||
@if ($style-own-messages) {
|
||||
@keyframes colorRotate {
|
||||
from { text-shadow: 0 0 5px hsl(0, 100%, 50%); }
|
||||
16.6% { text-shadow: 0 0 5px hsl(300, 100%, 50%); }
|
||||
33.3% { text-shadow: 0 0 5px hsl(240, 100%, 50%); }
|
||||
50% { text-shadow: 0 0 5px hsl(180, 100%, 50%); }
|
||||
66.6% { text-shadow: 0 0 5px hsl(120, 100%, 50%); }
|
||||
83.3% { text-shadow: 0 0 5px hsl(60, 100%, 50%); }
|
||||
to { text-shadow: 0 0 5px hsl(0, 100%, 50%); }
|
||||
}
|
||||
.message-group div[style*='#{$style-own-messages-user-id}']+.comment {
|
||||
.user-name {
|
||||
animation: colorRotate 3s linear 0s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Have custom emoji. Not much else to say.
|
||||
@if ($custom-emoji) {
|
||||
.emoji[alt=":thinking:"] {
|
||||
content: url(http://i0.kym-cdn.com/photos/images/original/001/302/286/432.png);
|
||||
}
|
||||
}
|
||||
|
||||
@if ($weird-animated-border) {
|
||||
// remove old border
|
||||
div[class*=channelTextArea-] div[class*=inner-] {
|
||||
border: 0!important;
|
||||
}
|
||||
.chat .channelTextArea-1LDbYG {
|
||||
$border-dash-len: 10px;
|
||||
$border-space-len: 10px;
|
||||
$border-width: 6px;
|
||||
//$border-color: #dabeef;
|
||||
$border-color: url(#bdg);
|
||||
$border-speed: 0.4s;
|
||||
$gradient-text:
|
||||
'<linearGradient id="bdg" gradientTransform="rotate(45)">' +
|
||||
'<stop stop-color="#{gold}"></stop>' +
|
||||
'<stop stop-color="#{#0ac}" offset="1"></stop>' +
|
||||
'</linearGradient>';
|
||||
$data:
|
||||
'<style>@keyframes bdm {to {stroke-dashoffset: #{-$border-dash-len-$border-space-len};}}</style>' +
|
||||
$gradient-text +
|
||||
'<rect width="100%" height="100%" style="stroke: #{$border-color}; stroke-width: #{$border-width}; fill: none; stroke-dasharray: ' +
|
||||
'#{$border-dash-len} #{$border-space-len}; animation: bdm #{$border-speed} infinite linear;" />';
|
||||
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">#{$data}</svg>')!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// Toggles
|
||||
$move-in-messages: false; // Moves in both messages and channels
|
||||
$style-own-messages: false; // Gives your name a rainbow effect in chat
|
||||
$custom-emoji: false; // Replaces some of the default emoji
|
||||
$weird-animated-border: false; // Adds an animated, gradient-colored border around the chat box (using SVG backgrounds)
|
||||
$show-loading: false; // Makes the loading screen transparant, so you can see what's going on behind the scenes
|
||||
|
||||
// Settings
|
||||
$style-own-messages-user-id: 113009395494830080;
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
// Import the default values of all variables
|
||||
@import "sakura/_variables.scss";
|
||||
@import "tweaks/_variables.scss";
|
||||
@import "experiments/_variables.scss";
|
||||
|
||||
|
||||
// Overwrite any variables you like
|
||||
|
|
@ -33,17 +32,14 @@ $background-size: cover;
|
|||
$dim-background: 0.66;
|
||||
//*/
|
||||
|
||||
$glow-unread-server: false; // TODO: remove
|
||||
|
||||
$server-list-above: true;
|
||||
$collapse-member-list: true;
|
||||
$status-indicator-border: true;
|
||||
$channel-hash-margin: true;
|
||||
$code-block-images: true;
|
||||
$web-hide-download-button: true;
|
||||
$alternative-user-popup: true;
|
||||
$compact-mode-tweaks: true;
|
||||
$show-loading: true;
|
||||
|
||||
// TODO: fix these
|
||||
// $server-list-above: true;
|
||||
// $status-indicator-border: true;
|
||||
// $web-hide-download-button: true;
|
||||
|
||||
$server-list-above-different-indicators: true;
|
||||
|
||||
|
|
@ -64,4 +60,3 @@ $custom-font-size-code: 12px!important;
|
|||
// Import the main code
|
||||
@import "sakura/_main_code.scss";
|
||||
@import "tweaks/_main_code.scss";
|
||||
@import "experiments/_main_code.scss";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
.theme-dark {
|
||||
--background-primary: transparent; //#36393f;
|
||||
--background-secondary: transparent; //#2f3136;
|
||||
--background-secondary-alt: transparent; //#292b2f;
|
||||
--background-tertiary: transparent; //#202225;
|
||||
--background-accent: transparent; //#4f545c;
|
||||
--background-floating: transparent; //#18191c;
|
||||
--deprecated-panel-background: transparent; //#292b2f;
|
||||
|
||||
// background for friend list
|
||||
.container-1D34oG {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
--header-primary: #fff;
|
||||
--header-secondary: #b9bbbe;
|
||||
|
|
|
|||
|
|
@ -2,27 +2,14 @@
|
|||
@import "colors";
|
||||
|
||||
// Wallpaper layer
|
||||
.app-19_DXt {
|
||||
div[class*="app-"] {
|
||||
background: linear-gradient( rgba(0, 0, 0, $dim-background), rgba(0, 0, 0, $dim-background) ), $background!important;
|
||||
background-size: $background-size!important;
|
||||
}
|
||||
|
||||
// Server list
|
||||
@if $glow-unread-server {
|
||||
.guilds-wrapper .guilds .guild.unread:not(.selected) {
|
||||
@keyframes glow-guild-unread {
|
||||
from { box-shadow: 0 0 10px 0 $main-color; }
|
||||
to { box-shadow: 0 0 10px 3px $main-color; }
|
||||
}
|
||||
|
||||
&:before { display: none; }
|
||||
.guild-inner { animation: glow-guild-unread ease-in-out 1.5s infinite alternate; }
|
||||
}
|
||||
}
|
||||
|
||||
// Channel list
|
||||
div[class*="channels-"] {
|
||||
div[class*="scrollerWrap-"] {
|
||||
div[aria-label="Channels"] {
|
||||
div[role="listitem"][id*="channels-"] {
|
||||
// #'s
|
||||
svg {
|
||||
color: $main-color!important;
|
||||
|
|
@ -35,25 +22,16 @@ div[class*="channels-"] {
|
|||
border-radius: 5px 0 0 5px;
|
||||
height: 100%;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
top: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// All channels
|
||||
div[class*="content-"] {
|
||||
margin: 0 0 0 8px;
|
||||
height: 34px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div[role="button"] {
|
||||
// Default channels
|
||||
&>div {
|
||||
border-left: 0 solid transparent;
|
||||
transition: background-color $time-unhover*0.4 ease-out,
|
||||
border-left-width $time-unhover ease-in,
|
||||
border-color $time-unhover*0.8 ease-in;
|
||||
border-left-width $time-unhover ease-in,
|
||||
border-color $time-unhover*0.8 ease-in;
|
||||
}
|
||||
|
||||
// Hovered channels
|
||||
|
|
@ -61,7 +39,7 @@ div[class*="channels-"] {
|
|||
background-color: $color-channel-hover;
|
||||
border-left: 5px solid $color-channel-border;
|
||||
transition: background-color $time-hover*0.4,
|
||||
border-left-width $time-hover*0.8;
|
||||
border-left-width $time-hover*0.8;
|
||||
}
|
||||
|
||||
// Selected channels
|
||||
|
|
@ -71,6 +49,13 @@ div[class*="channels-"] {
|
|||
transition: background-color 0.3s cubic-bezier(0,.75,1,2);
|
||||
}
|
||||
}
|
||||
|
||||
// All channels, TODO: remove?
|
||||
div[class*="content-"] {
|
||||
margin: 0 0 0 8px;
|
||||
height: 34px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
|
|
@ -85,7 +70,7 @@ div[class*="messages-"] div[class*="markup-"] {
|
|||
}
|
||||
|
||||
// Chat box
|
||||
div[class*="channelTextArea-"] div[class*="inner-"] {
|
||||
div[class*="channelTextArea-"] div[class*="scrollableContainer-"] {
|
||||
border: 1px solid rgba(desaturate($main-color, 0.90), 0.50);
|
||||
|
||||
background-color: rgba(#222, .1);
|
||||
|
|
@ -122,49 +107,30 @@ div[class*="member-"] {
|
|||
}
|
||||
|
||||
// Selected
|
||||
&.popout-open, &.popout-open:hover {
|
||||
&[class*="selected-"] {
|
||||
background: $color-user-select!important;
|
||||
transition: background-color $time-hover!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Private channels (PM's)
|
||||
div[class*="privateChannels-"] {
|
||||
div[class*="channel-"] {
|
||||
// Normal
|
||||
a {
|
||||
background: transparent;
|
||||
transition: background-color $time-unhover;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover a {
|
||||
background: $color-user-hover;
|
||||
transition: background-color $time-hover;
|
||||
}
|
||||
|
||||
// Selected
|
||||
&[class*="selected-"] a {
|
||||
background: $color-user-select;
|
||||
transition: background-color $time-hover;
|
||||
}
|
||||
#private-channels {
|
||||
// Normal
|
||||
a {
|
||||
background: transparent;
|
||||
transition: background-color $time-unhover;
|
||||
}
|
||||
}
|
||||
|
||||
// Friend list, game library rows
|
||||
div[class*="friendsRow"],
|
||||
div[class*="gameLibrary"] div[class*="rowWrapper"] {
|
||||
background: transparent;
|
||||
transition: background-color $time-unhover;
|
||||
// Hover
|
||||
a:hover {
|
||||
background: $color-user-hover;
|
||||
transition: background-color $time-hover;
|
||||
}
|
||||
|
||||
// Use the same margin/padding as hover (not sure why it is different)
|
||||
margin-left: 20px!important;
|
||||
margin-right: 20px!important;
|
||||
padding-left: 10px;
|
||||
|
||||
&:hover {
|
||||
background: $color-user-hover!important;
|
||||
transition: background-color $time-hover!important;
|
||||
// Selected
|
||||
a[class*="selected-"] {
|
||||
background: $color-user-select;
|
||||
transition: background-color $time-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ $background: url('https://wallpaperhdimages.com/wp-content/uploads/2017/08/Beaut
|
|||
$background-size: cover;
|
||||
|
||||
// Toggles
|
||||
$glow-unread-server: true;
|
||||
$custom-context-menu: true;
|
||||
$custom-context-menu: false; // TODO: fix
|
||||
|
||||
// Stuff I don't know how to group
|
||||
$userid: 113009395494830080; // Replace with with your own userid.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
// Half-hide member list, showing only avatars
|
||||
@if ($collapse-member-list) {
|
||||
div[class*="membersWrap-"] {
|
||||
min-width: 45px;
|
||||
width: 45px;
|
||||
min-width: 50px;
|
||||
width: 50px;
|
||||
transition: min-width $collapse-member-list-time-close, width $collapse-member-list-time-close;
|
||||
|
||||
div[class*="membersGroup-"] {
|
||||
div[aria-label="Members"] {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
h2[class*="membersGroup-"] {
|
||||
// Letting the margin stay because it's a nice divisor.
|
||||
height: if($status-indicator-border-nomove, 20px, 10px);
|
||||
height: if($status-indicator-border-nomove, 44px, 10px);
|
||||
transition: height $collapse-member-list-time-close;
|
||||
|
||||
@if ($status-indicator-border-nomove) {
|
||||
|
|
@ -26,14 +30,13 @@
|
|||
transition: min-width $collapse-member-list-time-open, width $collapse-member-list-time-open;
|
||||
transition-delay: $collapse-member-list-delay;
|
||||
|
||||
div[class*="membersGroup-"] {
|
||||
h2[class*="membersGroup-"] {
|
||||
transition: height $collapse-member-list-time-open;
|
||||
transition-delay: $collapse-member-list-delay;
|
||||
height: if($status-indicator-border-nomove, 20px, 40px);
|
||||
height: if($status-indicator-border-nomove, 44px, 40px);
|
||||
|
||||
@if ($status-indicator-border-nomove) {
|
||||
transition: height $collapse-member-list-time-open, padding-top $collapse-member-list-time-open;
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,13 +227,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Move channel names closer to # symbol
|
||||
@if ($channel-hash-margin) {
|
||||
div[class*="channels-"] div[class*="scrollerWrap-"] svg[class*="icon-"] {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom fonts
|
||||
@mixin custom-font-conditional($prop, $val) {
|
||||
@if ($val != null) {
|
||||
|
|
@ -354,7 +350,7 @@
|
|||
// Body part
|
||||
$role-height: 18px;
|
||||
$font-size: 12px; // $role-height / 2
|
||||
li[class*="role-"] {
|
||||
div[class*="role-"] {
|
||||
// Make border into background
|
||||
padding: 0;
|
||||
height: $role-height;
|
||||
|
|
@ -390,69 +386,12 @@
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
div[class*="protip-"], div[class*="wumpusWrapper-"] {
|
||||
div[class*="protip-"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tweaks compact mode chat
|
||||
@if ($compact-mode-tweaks) {
|
||||
$compact-mode-text-offset: 8.5ch!default; // You shouldn't change this, but you could
|
||||
div[class*="containerCompact"] {
|
||||
padding: 0!important;
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[class*="content-"]+div[class*="containerCompact-"] {
|
||||
padding-left: $compact-mode-text-offset!important;
|
||||
}
|
||||
|
||||
div[class*="message-"] {
|
||||
margin: 0!important;
|
||||
|
||||
@if ($compact-mode-no-extra-usernames) {
|
||||
&:not(:first-child) {
|
||||
span[class*="username-"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div[class*="markup-"] {
|
||||
margin-top: 0!important;
|
||||
text-indent: -$compact-mode-text-offset;
|
||||
}
|
||||
|
||||
h2[class*="headerCompact-"] {
|
||||
margin-right: 0!important;
|
||||
|
||||
span[class*="username-"] {
|
||||
margin-right: 0.3rem;
|
||||
&:after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For some reason this is screwed
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Show loading
|
||||
@if ($show-loading) {
|
||||
div[class*="app-"] + div[style="opacity: 1;"] {
|
||||
//opacity: 0.25!important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($hide-unread-mentions-bar) {
|
||||
div[class*="unreadMentionsBar-"] {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
$collapse-member-list: false; // Collapses the member list showing only avatar, unless you hover over it
|
||||
$server-list-above: false; // Puts the server list on the top instead of to the side
|
||||
$status-indicator-border: false;// Makes the status indicator a circle around the avatar
|
||||
$channel-hash-margin: false; // Moves the channel names a little bit closer to the # symbol
|
||||
$custom-font: false; // Enables custom font stacks and sizes
|
||||
$code-block-images: false; // Adds the programming languages logo to code blocks
|
||||
$web-hide-download-button: false;// Hides the download button in the web client
|
||||
$alternative-user-popup: false; // Changes the look and feel of the user popup
|
||||
$compact-mode-tweaks: false; // Makes compact mode more compact, among other things
|
||||
$hide-unread-mentions-bar: false;// 'unread mentions' bar can get in the way when using horizontal server list
|
||||
|
||||
|
||||
|
|
@ -28,4 +26,3 @@ $custom-font-size-code: null; // Code
|
|||
$custom-font-ui: null; // Everything UI
|
||||
$custom-font-code: null; // Code
|
||||
$custom-font-chat: null; // Chat
|
||||
$compact-mode-no-extra-usernames: true;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче