Christmas CSS!

README.md

Christmas CSS!

Celebrate this year's holiday season in style with Christmas CSS!

Installation

With BeautifulDiscord

Download the contents of the CSS file to your discord-custom.css (this is generally in %localappdata%\Discord\app-version\resources)

Customization

This style includes some customizability options for users that prefer them. You can enable or disable a feature by adding/removing the CSS comment surrounding it.

Enabled Feature

/* ~~~ [FEATURE] ~~~ */
* {
	background-color: black;
}/**/

Disabled Feature

/* ~~~ [FEATURE] ~~~ 
* {
	background-color: black;
}/**/

Screenshots

Overview

Tooltips

Snow!

High Framerate WebM

Like what you see?

discord-christmas.css

/*
* Christmas CSS
* - Holiday spirit for your Discord
* by foxbot <foxbot.me>
* 
* revision two [updated for 2017!]
*
* Best used with BeautifulDiscord (github.com/leovoel/BeautifulDiscord)
*
*/

/* ----- BEGIN CONFIG SECTION ----- */

@import 'https://fonts.googleapis.com/css?family=Roboto';
@import '//cdn.jsdelivr.net/font-hack/2.020/css/hack.min.css';

:root {
	--background: #190000;
    --accent-dark: #220404;
    --accent-darklight: #1f0a0a;
	--accent: #012312;
    --accent-light: #114c28;
    --accent-lightest: #64d65a;
	--ping-r: 19;
	--ping-g: 198;
	--ping-b: 82;
	--ping: rgba(var(--ping-r), var(--ping-g), var(--ping-b), 1);
	--ping-highlight: rgba(var(--ping-r), var(--ping-g), var(--ping-b), 0.15);
	--font: 'Roboto';
	--mono: 'Hack';
}

/* ~~~ Custom Features ~~~
   
   To opt into a feature, add a */                  /*
   To opt out of a feature, remove the */           /*

   As an example, custom fonts is enabled, while snow is disabled:
*/

/* ~~~ [CUSTOM FONTS] ~~~ */
body {
	font-family: var(--font);
}
header[class^="header"] {
    font-family: var(--font);
}
input, textarea {
    font-family: var(--font);
}
code.inline {
	font-family: var(--mono) !important;
}
code.hljs {
	font-family: var(--mono) !important;
}/**/

/* ~~~ [CHRISTMAS TREE] ~~~ */
.messages-wrapper {
	background-image: url('https://vignette2.wikia.nocookie.net/animaljam/images/4/41/Large_Transparent_Christmas_Tree_with_Red_Ribbon_Clipart.png/revision/latest?cb=20141203001635');
	background-repeat: no-repeat;
    background-position: right bottom;
}/**/

/* Note: This feature will peg your CPU pretty badly if enabled.
    It's probably best to leave it off if you want to play any
    games.
/* ~~~ [SNOW] ~~~ 
.theme-dark .channel-members {
    background: none !important;
    background-image: url('https://discord.foxbot.me/xmas/s1.png'), url('https://discord.foxbot.me/xmas/s2.png'), url('https://discord.foxbot.me/xmas/s3.png') !important;
    z-index:1;
    animation: snow 10s linear infinite !important;
}
.messages > * {
    background-color: var(--background) !important;
    background-image: url('https://discord.foxbot.me/xmas/s1.png'), url('https://discord.foxbot.me/xmas/s2.png'), url('https://discord.foxbot.me/xmas/s3.png') !important;
    z-index:1;
    animation: snow 10s linear infinite !important;
}
div[class^="channels"] > * {
    background-color: var(--background) !important;
    background-image: url('https://discord.foxbot.me/xmas/s1.png'), url('https://discord.foxbot.me/xmas/s2.png'), url('https://discord.foxbot.me/xmas/s3.png') !important;
    z-index:1;
    animation: snow 10s linear infinite !important;
}
.guilds-wrapper > * {
    background-color: var(--accent-dark) !important;
    background-image: url('https://discord.foxbot.me/xmas/s1.png'), url('https://discord.foxbot.me/xmas/s2.png'), url('https://discord.foxbot.me/xmas/s3.png') !important;
    z-index:1;
    animation: snow 10s linear infinite !important;
}/**/

/* ----- END CONFIG SECTION ----- */

/* ----- App Global ----- */

/* remove border rounding */
.app > .layers > .layer > div[class^="flex"] > div[class^="flex"] {
    border-radius: 0;
}
/* tooltips */
.tooltip.tooltip-black {
    background-color: var(--accent);
}
.tooltip.tooltip-black.tooltip-top:after {
    border-top-color: var(--accent);
}
.tooltip.tooltip-black.tooltip-right:after {
    border-right-color: var(--accent);
}
/* titlebar */
#app-mount {
    background-color: var(--accent-darklight);
}
div[class^="wordmark"] > svg {
    content: "pee";
}

/* ----- Guild Scroller ----- */

/* Scroller */
.guilds-wrapper {
    background-color: var(--accent-dark);
}
/* Icon Background */
.guilds-wrapper .guilds .guild .guild-inner {
    background-color: var(--accent-light) !important;
}
/* Icon left-bar */
.guilds-wrapper .guilds .guild.unread:before {
    background-color: var(--accent-light);
}
.guilds-wrapper .guilds .guild.selected:before {
    background-color: var(--accent-lightest);
}
/* Unread badge */
.badge {
    background-color: var(--ping);
}
/* TODO BROKEN */
/* New messages badge */
div[class^="unread-mentions"] > div[class^="bar"] {
    background-color: var(--ping) !important;
}

/* ----- Guild Sidebar ----- */

/* Scroller */
div[class^="channels"] > div[class^="flex"] {
    background-color: var(--background);
}
/* Guild Name */
header[class^="header"] {
    background-color: var(--accent-dark);
}
/* Selected channel */
div[class^="contentSelectedText"] {
    background-color: var(--accent-light);
}
/* Hovering channel */
div[class^="contentHoveredText"] {
    background-color: var(--accent);
}
/* Channels scrollbar TODO */
div[class^="channels"] > div[class^="flex"] > div[class^="scrollerWrap"] > div[class^="scroller"]
::-webkit-scrollbar-thumb {
	background-color: var(--accent-light) !important;
	border-color: var(--accent-light) !important;
}
div[class^="channels"] > div[class^="flex"] > div[class^="scrollerWrap"] > div[class^="scroller"] ::-webkit-scrollbar-track-piece {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
}

/* ----- Lower Account Panel ----- */

/* Panel */
div[class^="channels"] > div[class^="container"] {
    background-color: var(--accent-dark);
}

/* ----- Channel ----- */

/* Title bar */
div[class^="titleWrapper"] > * {
    background-color: var(--accent-dark) !important;
}

/* Messages */
.theme-dark .messages-wrapper {
    background-color: var(--background);
}
/* Mention highlight */
.theme-dark .message-group .mentioned .message-text {
    background-color: var(--ping-highlight);
}
.message-group .mentioned .message-text:after {
    border-left-color: var(--ping);
}
/* Blocked message */
.message-group-blocked {
    border-color: var(--accent-darklight) !important;
    background-color: var(--accent-darklight) !important;
}
.message-group-blocked-btn {
    background-color: var(--accent-darklight) !important;
}
/* New messages divider */
.theme-dark .messages-wrapper .messages .divider span {
    background-color: var(--background);
}
.theme-dark .messages-wrapper .messages .divider.divider-red > span {
    color: var(--ping);
}
.theme-dark .messages-wrapper .messages .divider.divider-red > div {
    background-color: var(--ping);
}
/* Code blocks */
code.inline {
	background-color: var(--accent) !important;
}
code.hljs {
	background-color: var(--accent) !important;
}
/* Chat bar */
.theme-dark .chat form {
    background-color: var(--background);
}
/* Typing */
.theme-dark .chat form .typing {
    background-color: var(--background);
}
.spinner-pulsing-ellipsis .spinner-item {
    background-color: var(--accent-lightest);
}
/* (sides of chat bar) */
.theme-dark .chat > .content {
    background-color: var(--background);
}
/* Chat Scrollbar */
.scroller-wrap ::-webkit-scrollbar-thumb {
	background-color: var(--accent-light) !important;
	border-color: var(--accent-light) !important;
}
.scroller-wrap ::-webkit-scrollbar-track-piece {
	background-color: var(--background) !important;
	border-color: var(--background) !important;
}

/* ----- Channel Members Wrap ----- */

/* Member scroller */
.theme-dark .channel-members {
    background-color: var(--background);
}
/* Member tag */
.theme-dark .channel-members .member:hover {
    background-image: linear-gradient(90deg, var(--background) 85%, var(--accent-darklight))
}

/* ----- DM Window ----- */

/* DM list */
div[class^="channels"] {
    background-color: var(--background) !important;
}
/* Selected channel */
.private-channels .channel.selected a {
    background-color: var(--accent-light);
}
/* Hovering channel */
.private-channels .channel:hover a {
    background-color: var(--accent);
}
/* Friends panel */
.theme-dark #friends, .theme-dark .friends-table, #friends > div[class^="flex"]  {
    background-color: var(--background);
}
/* Hovering friend */
.theme-dark #friends .friends-table .friends-row:hover {
    background-color: var(--accent);
}
/* Activity panel */
.theme-dark div[class^="activityFeed"], .theme-dark div[class^="activityFeed"] > div[class^="flex"] {
    background-color: var(--background);
}



/* ----- Extra ----- */

/* extra snow stuff */
@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}