Created
February 2, 2017 23:35
-
-
Save HansAnonymous/e1c3d0450329cd6447faa5447952e4ae to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //META{"name":"Glossy Theme - Cyan","description":"Current Version: V1.2.3.Cyan","author":"HansAnonymous","version":"1.0.0.Cyan"}*//{} | |
| /* | |
| ____ _ ____ | |
| / ___| | ___ ___ ___ _ _ / ___| _ __ _ _ __ | |
| | | _| |/ _ \/ __/ __| | | | _____ | | | | | |/ _` | '_ \ | |
| | |_| | | (_) \__ \__ \ |_| | |_____| | |__| |_| | (_| | | | | | |
| \____|_|\___/|___/___/\__, | \____\__, |\__,_|_| |_| | |
| | |__ _ _ | | | | _|___/ __ ___ / \ |___/ ___ _ __ _ _ _ __ ___ ___ _ _ ___ | |
| | '_ \| | | | | |_| |/ _` | '_ \/ __| / _ \ | '_ \ / _ \| '_ \| | | | '_ ` _ \ / _ \| | | / __| | |
| | |_) | |_| | | _ | (_| | | | \__ \/ ___ \| | | | (_) | | | | |_| | | | | | | (_) | |_| \__ \ | |
| |_.__/ \__, | |_| |_|\__,_|_| |_|___/_/ \_\_| |_|\___/|_| |_|\__, |_| |_| |_|\___/ \__,_|___/ | |
| |___/ |___/ | |
| How to install: | |
| 1. Make sure BetterDiscord is installed. | |
| 2. Go to settings -> BetterDiscord -> Themes | |
| 3. Click on Open folder and move CyanGlossy.theme.css into the opened folder. | |
| 4. Reload Discord by right clicking on the tray icon in the taskbar and clicking on "Quit Discord" or by pressing ctrl + r in Discord. | |
| 5. Go back to Settings -> BetterDiscord -> Themes | |
| 6. Click check on Glossy Theme - Cyan. | |
| Optional: | |
| 1. Install the ThemeCustomizer Plugin by Zerthox. | |
| 2. Reload Discord. | |
| 3. Enable the plugin and edit variables to your liking*. | |
| *Note: Changing variables and messing with values could break the theme. If so, remove the plugin, reinstall the theme. | |
| Credits: | |
| - Zerthox#6648 (his themes) for classes (and some css) | |
| - HoLLy#2750 for help with css | |
| - maple#1234 for help with css | |
| - den#3280 for his Cyan-firewatch theme to aid in the creation of this theme | |
| - Jiiks#5000 for creating BetterDiscord | |
| - https://github.com/jakeoid for animated emojis | |
| - https://github.com/TriggerRimfire for avatar shadows | |
| - https://github.com/SpoopySaitama for HLJS Colors | |
| - PikaDude#5386 for Fade animation | |
| - Faücheur#2420 (Probably uri) for chat alignment | |
| */ | |
| /****************************************************************/ | |
| /**Variables**/ | |
| /*Place your id here! Enable Developer mode in Discord, the right click on your username, then Copy ID!*/ | |
| $userid: "168216897450541056"; | |
| :root { | |
| /*Colors are in #HexCode, #XXYYZZ*/ | |
| --main-color: #007272; | |
| --hover-color: #00D1D1; | |
| --light-color: #008888; | |
| --dark-color: #005555; | |
| /*Background Image: Make sure it is an https link! Make sure it is also a direct link to the image!*/ | |
| --bg-img: url(https://4.bp.blogspot.com/-d0SoMDIO1F8/TiSpUT7MguI/AAAAAAAAKMQ/YGuw06nzNDk/s1600/Cool%2Bblue%2Bwallpaper%2Bbackgrounds-2.png); | |
| --open-anim: none; /*Available: none, openX, openY, openZ; any other will disable it*/ | |
| --hover-anim: flash; /*Available: flash; any other will disable it*/ | |
| } | |
| /****************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /****************************************************************/ | |
| /*A Section for App, General, Title, and Debugging (Needed this to start with A)*/ | |
| /.app { | |
| animation: var(--open-anim) 3s linear 0s 1 alternate; | |
| -webkit-animation: var(--open-anim) 3s linear 0s 1 alternate; | |
| } | |
| .friends-header .header-toolbar { | |
| transform: translateX(-70%); | |
| } | |
| .chat>.title-wrap { | |
| border-bottom: none !important; | |
| box-shadow: none !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Animations*/ | |
| .message:not(.message-sending), .message-content:not(.message-sending), .image:not(.message-sending), .tooltip, .guild, .section, .context-menu, .friends-row, .channel, .user-settings-modal, .channel-voice-states, .selected:before, .markdown-modal, .icon-muted, .icon-deafened, .avatar-large:not(.message-sending), .empty-message, .popout-menu { | |
| animation: fadeScreen 0.5s; | |
| } | |
| .user-popout, .emoji-picker, .popout, .option-popout { | |
| animation: fadeScreen 0.2s; | |
| } | |
| .channel-members { | |
| animation: fadeScreen 1s; | |
| } | |
| /*Hearts*/ | |
| img[alt*=":heart:"], | |
| img[alt*=":hearts:"], | |
| img[alt*=":green_heart:"], | |
| img[alt*=":blue_heart:"], | |
| img[alt*=":purple_heart:"], | |
| img[alt*=":yellow_heart:"], | |
| img[alt*=":heartbeat:"], | |
| img[alt*=":heartpulse:"], | |
| img[alt*=":black_heart:"], | |
| img[alt*=":sparkling_heart:"] { animation: heartbeat 1s infinite;} | |
| /*Emojis */ | |
| /*Money Wings*/ img[alt*=":money_with_wings:"] {animation: wobble 2s infinite;} | |
| /*Kiss */ img[alt*=":kiss:"] {animation: heartbeat 1s infinite;} | |
| /*Hammer */ img[alt*=":hammer:"] {animation: wobble 0.5s infinite;} | |
| /*Pickaxe */ img[alt*=":pick:"] {animation: wobble 0.5s infinite;} | |
| /*Bomb */ img[alt*=":bomb:"] {animation: bomb 2s infinite;} | |
| /*Boom */ img[alt*=":boom:"] {animation: boom 2s infinite;} | |
| /*Eyes */ img[alt*=":eyes:"] {animation: eyes 4s infinite;animation-timing-function:steps(1);} | |
| /*Laughing */ img[alt*=":laughing:"] {transform: rotate(-90deg);} | |
| /*Heart Eyes */ img[alt*=":heart_eyes:"] {animation: heartbeat 1s infinite;} | |
| /*Joyful */ img[alt*=":joy:"] {animation: joy 2s infinite;} | |
| /*Upside Down*/ img[alt*=":upside_down:"] {animation: wobble 2s infinite;} | |
| /*Scream */ img[alt*=":scream:"], img[alt*=":scream_cat:"] {animation: scare 2s infinite;} | |
| /*ROFL */ img[alt*=":rofl:"] {animation: rofl 2s infinite;} | |
| /*Sneezing */ img[alt*=":sneezing_face:"] {animation: wobble 1s infinite;} | |
| /*Joyful Cat */ img[alt*=":joy_cat:"] {animation: joy 2s infinite;} | |
| /*Heart Eyes */ img[alt*=":heart_eyes_cat:"] {animation: heartbeat 1s infinite;} | |
| /*Waving */ img[alt*=":wave:"] {animation: wobble 2s infinite;} | |
| /*Angry */ img[alt*=":angry:"], .emoji[alt*="Angery"], .emoji[alt*="Thonkery"] {animation: vibrate 0.2s infinite;} | |
| /*Soccer */ img[alt*=":soccer:"] {animation: rotate 2s infinite;} | |
| /*Basketball */ img[alt*=":basketball:"] {animation: rotate 2s infinite;} | |
| /*Baseball */ img[alt*=":baseball:"] {animation: rotate 2s infinite;} | |
| /*Tennis */ img[alt*=":tennis:"] {animation: rotate 2s infinite;} | |
| /*Gear */ img[alt*=":gear:"] {animation: rotate 2s infinite;} | |
| /*Disc & CD */ img[alt*=":cd:"], img[alt*=":dvd:"] {animation: rotate 2s infinite;} | |
| /*Snowflake */ img[alt*=":snowflake:"] {animation: rotate 2s infinite;} | |
| /*Sun */ img[alt*=":sunny:"] {animation: rotate 2s infinite;} | |
| /*Hourglass */ img[alt*=":hourglass:"] {animation: hourglass 2s infinite;} | |
| /*mmLol */ .emoji[alt*="mmLol"] {animation: mmlol 5s infinite;} | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Backface visibility*/ | |
| .markup, | |
| body { | |
| backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Background*/ | |
| .search-header, | |
| .theme-dark .chat, | |
| #voice-connection, | |
| #friends, | |
| #friends .btn, | |
| .friends-header, | |
| .friends-table, | |
| .search-bar, | |
| .guilds-wrapper, | |
| .channels-wrap, | |
| .guild-channels, | |
| .account, | |
| .links, | |
| .messages-wrapper, | |
| .title-wrap, | |
| .content, | |
| .chat-empty, | |
| .message-group-blocked, | |
| .private-channels, | |
| .guild-header header, | |
| .ider-red span, | |
| .theme-light .chat, | |
| .theme-dark .chat, | |
| .messages-wrapper, | |
| .typing, | |
| .typing-animate, | |
| .friends-row:hover, | |
| .search-result:hover, | |
| .btn-friends.selected, | |
| .search-result.selected, | |
| .channel.selected.private, | |
| .channel.channel-text.selected, | |
| .guild-channels, | |
| #voice-connection, | |
| .account, | |
| .guilds, | |
| .account .btn, | |
| #voice-connection .btn, | |
| .channel-textarea-inner, | |
| .theme-light .channel-textarea-inner textarea, | |
| .private-channels { | |
| background: transparent !important; | |
| background-color: rgba(0,0,0,0.0) !important; | |
| } | |
| .chat .content, | |
| .chat>.title-wrap { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0)) !important; | |
| } | |
| .channels-wrap, .guilds-wrapper { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)) !important; | |
| } | |
| .theme-dark .links, .theme-dark .links { | |
| border-top: 1px solid #1c1e22 !important; | |
| } | |
| .theme-light .account, .theme-light .links { | |
| border-top: 1px solid rgba(0,0,0,0) !important; | |
| } | |
| .theme-light .account .btn-group, | |
| .theme-light #voice-connection .btn-group, | |
| .theme-light .account .btn-deafen, | |
| .theme-light .account .btn-mute, | |
| .theme-light #voice-connection .btn-info { | |
| border: 1px solid var(--light-color) !important; | |
| } | |
| .app, | |
| .callout-backdrop { | |
| background-color: rgba(0,0,0,0.9) !important; | |
| background-image: var(--bg-img) !important; | |
| background-size: cover !important; | |
| } | |
| .private-channel-call { | |
| background-color: rgba(0,0,0,0.7) !important; | |
| box-shadow: inset 0 -4px 10px 0 rgba(0,0,0,0.0) !important; | |
| background-image: url() !important; | |
| } | |
| .private-channels .channel.selected { | |
| background: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: linear-gradient(90deg,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0))!important; | |
| background: rgba(0,0,0,0.2) !important; | |
| } | |
| .private-channels .channel:hover { | |
| background: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: linear-gradient(90deg,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: rgba(0,0,0,0.2) !important; | |
| } | |
| #rmenu { | |
| background: var(--main-color) !important; | |
| border: 1px solid var(--main-color); | |
| } | |
| .highlight { | |
| background: rgba(255,255,255,0.05) !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Buttons*/ | |
| .invite-btn { | |
| background-color: rgba(0, 204, 204, 0.5) !important; | |
| } | |
| .btn-group { | |
| border: 0px solid #1c1e22 !important; | |
| border-radius: 0px !important; | |
| } | |
| .btn-mute, | |
| .btn-account, | |
| .account .btn-deafen, | |
| .account .btn-mute { | |
| border-right: 0px !important; | |
| } | |
| .account .btn-deafen, .account .btn-settings { | |
| box-shadow: inset 0px 0 0 #373b42; | |
| } | |
| #voice-connection .btn-info { | |
| border-right: 0px !important; | |
| } | |
| #voice-connection .btn-disconnect { | |
| box-shadow: inset 0px 0 0 #373b42; | |
| } | |
| .account { | |
| border-top: 1px solid rgba(0,0,0,0) !important; | |
| } | |
| .account .btn-settings:after { | |
| opacity: 0.3; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Channels: Hover and background*/ | |
| .guild-channels .channel-text:hover { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0)) !important; | |
| } | |
| .guild-channels .channel-text.selected { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)) !important; | |
| } | |
| .channel-members .member.popout-open, .channel-members .member:hover { | |
| background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 85%, transparent) !important; | |
| } | |
| .guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted):before { | |
| left: -11px; | |
| } | |
| .guild-channels .channel { | |
| font-size: 15.5px; | |
| } | |
| .channel:not(.selected) { | |
| transition: background 1s ease-out !important; | |
| } | |
| .channel:not(.selected):hover { | |
| background: rgba(0, 0, 0, 0.0) !important; | |
| transition: background 1s ease-in !important; | |
| } | |
| .guild-channels .channel-text.selected, | |
| .guild-channels .channel-text:hover { | |
| background: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: linear-gradient(90deg,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: rgba(0,0,0,0.2) !important; | |
| } | |
| .channel-members { | |
| z-index:2; | |
| transition:all 300ms ease; | |
| background-color: rgba(0, 0, 0, 0) !important; | |
| } | |
| .channel-members:hover { | |
| transition:all 300ms ease; | |
| background-color: #2e3136 !important; | |
| background-color: rgba(0, 0, 0, 0.2) !important; | |
| } | |
| .channel-members .member:hover { | |
| background: linear-gradient(90deg,rgba(0,0,0,0) ,rgba(0,0,0,0)) !important; | |
| background-color: rgba(0, 0, 0, 0.2) !important; | |
| transition:all 300ms ease; | |
| } | |
| .channel-members:hover .member .member-activity, .channel-members:hover .member .member-username-inner{ | |
| opacity:1; | |
| } | |
| .channel-members .member.popout-open { | |
| background: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: linear-gradient(90deg,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: rgba(0,0,0,0.2) !important; | |
| transition:all 300ms ease; | |
| } | |
| .channel-members .member .member-activity, | |
| .channel-members .member .member-username-inner { | |
| opacity:0; | |
| transition:opacity 300ms ease, margin 100ms ease; | |
| } | |
| .friends-row:hover, | |
| .search-result:hover, | |
| .btn-friends.selected, | |
| .search-result.selected, | |
| .channel.selected.private, | |
| .channel.channel-text.selected { | |
| background: rgba(0, 0, 0, 0.0) !important; | |
| } | |
| .guild-channels .channel-text.selected:before, | |
| .guild-channels .channel-text.selected:hover:before, | |
| .guild-channels .channel-text:hover.channel-muted:before, | |
| .guild-channels .channel-text:hover:not(.unread):before, | |
| .private-channels .channel.selected:before, | |
| .private-channels .channel:hover:before { | |
| border-left: 3px solid var(--hover-color) !important; | |
| opacity: .25 !important; | |
| } | |
| .chat .flex-vertical .flex-spacer .private >.content.flex-spacer.flex-horizontal>.flex-spacer.flex-vertical, | |
| .chat.flex-vertical.flex-spacer.private>.content.flex-spacer.flex-horizontal>.flex-spacer.flex-vertical, | |
| .chat.flex-vertical.flex-spacer>.content.flex-spacer.flex-horizontal>.flex-spacer.flex-vertical { | |
| margin-right: -15px; | |
| z-index:1 | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Chat Align*/ | |
| .message-group:not(.compact) .avatar-large[style*=$userid] {order: 2;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment{direction: rtl;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message h2 span.username-wrapper{ | |
| float: right; | |
| direction: ltr; | |
| } | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message h2 span.timestamp{margin-right: 10px;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .body .message-text .markup, | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .accessory{ | |
| float: right; | |
| clear: both; | |
| direction: ltr; | |
| } | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .message-text > div[class*="btn"]{float: left;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message.first:before, | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message.mentioned.first:before{ | |
| margin-right: -10px; | |
| } | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .accessory .attachment-image a:before, | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .accessory .embed .embed-thumbnail-image:before, | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .message .accessory .embed .embed-thumbnail-article:before{ | |
| left: inherit; | |
| right: 0; | |
| } | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .edit-message{ | |
| direction: ltr; | |
| width: 100%; | |
| margin: 0 -100px 0 0px; | |
| } | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .edit-message h2{direction: rtl;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .edit-message h2 span.username-wrapper{float: right;} | |
| .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment .edit-message h2 span.timestamp{margin-right: 10px;} | |
| .messages-popout-wrap .messages-popout .message-group:not(.compact) .avatar-large[style*=$userid] ~ .comment{margin-right: 20px;} | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Chat Themes*/ | |
| /.chat .user-name, | |
| .theme-dark .message-group a, | |
| .theme-dark .message-group .comment .markup { | |
| text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Embeds*/ | |
| .embed-color-pill { | |
| background-color: rgba(0, 255, 255, .75) !important; | |
| } | |
| .embed.embed-rich { | |
| border-radius: 5px !important; | |
| border-bottom-left-radius: 0px !important; | |
| border-top-left-radius: 0px !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Friends*/ | |
| .friends-table, .messages-wrapper { | |
| background: rgba(0,0,0,0) !important; | |
| } | |
| #friends .friends-header, .search-bar { | |
| background-color: rgba(0,0,0,0) !important; | |
| } | |
| #friends .friends-table .friends-row:hover { | |
| background: -webkit-linear-gradient(left,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: linear-gradient(90deg,rgba(0, 0, 0, 0) 85%,rgba(0, 0, 0, 0)) !important; | |
| background: rgba(0,0,0,0.2) !important; | |
| } | |
| .friends-table .scroller-wrap ::-webkit-scrollbar-track-piece, .messages-wrapper .scroller-wrap ::-webkit-scrollbar-track-piece { | |
| background-color: rgba(0,0,0,0) !important; | |
| border: none !important; | |
| } | |
| .theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-thumb, .theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb { | |
| background-color: rgba(0,0,0,0.2) !important; | |
| } | |
| .theme-light .friends-table .scroller-wrap ::-webkit-scrollbar-thumb, .theme-light .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb { | |
| background-color: rgba(255,255,255,0.2) !important; | |
| } | |
| .friends-table .scroller-wrap ::-webkit-scrollbar-thumb, .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb { | |
| border-color: rgba(0,0,0,0) !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Guild*/ | |
| .guild-inner, .guild { background-color: transparent !important; } | |
| .guild-header ul { | |
| opacity: 0; | |
| transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); | |
| } | |
| .guild-header-open ul { | |
| opacity: 1; | |
| transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); | |
| } | |
| .guilds-wrapper .guilds .guild .guild-inner { | |
| background: rgba(0,0,0,0.2) !important; | |
| background-color: rgba(0,0,0,0); | |
| } | |
| .guild-header.guild-header-open ul { | |
| -webkit-transform: translateZ(0) !important; | |
| transform: translateZ(0) !important; | |
| border-radius: 5px; | |
| } | |
| .guild-header header { | |
| background-color: rgba(0,0,0,0) !important; | |
| box-shadow: 0 1px 0 rgba(0,0,0,0),inset 0 -1px 0 rgba(0,0,0,0) !important; | |
| } | |
| .scroller.guilds { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)) !important; | |
| } | |
| .guild-channels .channel-text:hover { | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0)) !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Hide Nitro*/ | |
| .tab-bar.SIDE .tab-bar-item:nth-child(3), | |
| .channel-textarea-autocomplete-inner .premium-promo-autocomplete { | |
| display: none; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*HLJS*/ | |
| .hljs { | |
| display: block; | |
| font-family: 'Consolas', monospace; | |
| font-size: 10pt; | |
| overflow-x: auto; | |
| background: #1D1F21 !important; | |
| color: #C5C8C6 !important; | |
| padding: 0.5em; | |
| } | |
| .hljs-emphasis { font-style: italic !important; } | |
| .hljs-strong { font-weight: bold !important; } | |
| /* HLJS Colors */ | |
| /* Keyword */ | |
| .hljs-keyword { color: #E061C7 !important; font-weight: bold !important; } | |
| /* Builtins */ | |
| .hljs-built_in { color: #999999 !important; } | |
| /* Literal, Number */ | |
| .hljs-literal, .hljs-number { color: #F79768 !important; } | |
| /* Regex */ | |
| .hljs-regexp { color: #B34D4D !important; } | |
| /* String */ | |
| .hljs-string { color: #2497E3 !important; } | |
| /* Subst */ | |
| .hljs-subst { color: #F5C747 !important; font-weight: bold !important; } | |
| /* Symbol */ | |
| .hljs-symbol { color: #04AFBF !important; } | |
| /* Class */ | |
| .hljs-class, .hljs-class .hljs-title { color: #E36222 !important; } | |
| /* Class keyword, Function keyword */ | |
| .hljs-class .hljs-keyword, .hljs-function .hljs-keyword { color: #50FA7B !important; } | |
| /* Function */ | |
| .hljs-function, .hljs-function .hljs-title { color: #D65656 !important; } | |
| /* Params */ | |
| .hljs-params { color: #07CC95 !important; } | |
| /* Comment, Doctag, Meta Keyword, Meta String, Template Tag, Template Variable */ | |
| .hljs-comment, .hljs-doctag, .hljs-meta-keyword, .hljs-meta-string, | |
| .hljs-template-tag, .hljs-template-variable { color: #9E9E9E !important; font-style: italic !important; } | |
| /* Meta */ | |
| .hljs-meta { color: #E36222 !important; font-style: italic !important; } | |
| /* Tag */ | |
| .hljs-tag { color: #49C7F5 !important; } | |
| /* Name Of Tag */ | |
| .hljs-name, .hljs-builtin-name { color: #D75A64 !important; } | |
| /* Attr, Variable */ | |
| .hljs-attr, .hljs-variable { color: #78D69E !important; } | |
| /* HLJS Markup, Bullets, Type */ | |
| .hljs-bullet, .hljs-type { color: #04AFBF !important; font-weight: bold !important; } | |
| /* Code */ | |
| .hljs-code { color: #BEBEBE !important; } | |
| /* Emphasis */ | |
| .hljs-emphasis { font-style: italic !important; color: #AEAEAE !important; } | |
| /* Strong */ | |
| .hljs-strong { font-weight: bold !important; } | |
| /* Formula, Link */ | |
| .hljs-link { color: #DE935F !important; } | |
| /* Section */ | |
| .hljs-section { color: #CC9C0C !important; font-weight: bold !important; } | |
| /* Quote */ | |
| .hljs-quote { color: #789922 !important; } | |
| /* HLJS CSS, Tag Selector */ | |
| .hljs-selector-tag { color: #D75A64 !important; } | |
| /* ID Selector */ | |
| .hljs-selector-id { color: #CC3535 !important; font-weight: bold !important; } | |
| /* Attribute, Psuedo Selector */ | |
| .hljs-attribute, .hljs-selector-pseudo { color: #40C762 !important; } | |
| /* Class Selector */ | |
| .hljs-selector-class { color: #49C7F5 !important; } | |
| /* Attr Selector */ | |
| .hljs-selector-attr { color: #A25AFA !important; } | |
| /* Diff Addition */ | |
| .hljs-addition { color: #80C771 !important; } | |
| /* Diff Deletion */ | |
| .hljs-deletion { color: #C24848 !important; } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*IceCold*/ | |
| .emotewrapper+.emotewrapper img[alt="IceCold"] { transform: translate3d(-100%,0,0) !important; } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Images: Profile & Guilds; */ | |
| .guilds-wrapper .guilds .guild .guild-inner, | |
| .avatar-large, | |
| .avatar-small, | |
| .avatar-small.animate, | |
| .avatar-large.animate, | |
| .guilds-error, | |
| .guilds .guilds-add, | |
| .icon-friends, | |
| .avatar-popout { | |
| border-radius: 5px !important; | |
| transition: all 400ms ease !important; | |
| } | |
| .guilds-wrapper .guilds .guild .guild-inner:hover, | |
| .avatar-small:hover, | |
| .avatar-small.animate:hover, | |
| .avatar-large:hover, | |
| .avatar-large.animate:hover, | |
| .guilds-error:hover, | |
| .guilds .guilds-add:hover, | |
| .icon-friends:hover, | |
| .avatar-popout:hover { | |
| border-radius: 50px !important; | |
| transition: all 400ms ease !important; | |
| animation: var(--hover-anim) 0.5s; | |
| -webkit-animation: var(--hover-anim) 0.5s; | |
| } | |
| .scroller.messages .avatar-large{ | |
| transform: translateX(5%); | |
| } | |
| .message-group .avatar-large { | |
| margin-left: 4px; | |
| } | |
| .avatar-large, .avatar-profile, .avatar-small, .avatar-xlarge, .avatar-xsmall, .avatar-xxlarge { | |
| box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7); | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Member Headers*/ | |
| .channel-members h2 { | |
| color: var(--main-color) !important; | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: .08em; | |
| font-weight: 700; | |
| padding: 4px 58px; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border: 1px solid; | |
| border-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 5px; | |
| width: 90px; | |
| margin-left: 15px; | |
| text-align: center; | |
| transition: all 400ms ease !important; | |
| } | |
| .channel-members:hover h2 { | |
| border-radius: 50px !important; | |
| transition: all 400ms ease !important; | |
| animation: var(--hover-anim) 0.5s; | |
| -webkit-animation: var(--hover-anim) 0.5s; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Messages*/ | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Smaller Channel Member Tab*/ | |
| .channel-members { | |
| z-index:2; | |
| transition:all 300ms ease; | |
| transform: translateX(3%); | |
| } | |
| .channel-members:hover { transform: translateX(-60%); } | |
| .app { overflow-x: hidden; } | |
| .channel-members .member .member-activity, | |
| .channel-members .member .member-username-inner{ | |
| opacity:0; | |
| transition:all 300ms ease; | |
| } | |
| .channel-members:hover .member .member-activity, | |
| .channel-members:hover .member .member-username-inner{ | |
| opacity:1; | |
| transition:all 300ms ease; | |
| } | |
| .channel-members h2 { | |
| transform: scale(0.7) translateX(-33%) !important; | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| transition: all 300ms ease !important; | |
| border-radius: 5px !important; | |
| } | |
| .channel-members:hover h2 { | |
| transform: scale(1.0) translateX(8%) !important; | |
| padding-left: 20% !important; | |
| padding-right: 20% !important; | |
| transition: all 300ms ease !important; | |
| } | |
| .flex-spacer.flex-vertical { width: 108% !important; } | |
| .channel-members .avatar-small{ | |
| transform: scale(1) translateX(-30%) !important; | |
| transition: all 300ms ease !important; | |
| } | |
| .channel-members:hover .avatar-small{ | |
| transform: translateX(0%) !important; | |
| transition: all 300ms ease !important; | |
| } | |
| .title-wrap { width: 91.3% !important; } | |
| .header-toolbar button.active{ | |
| display:none; | |
| } | |
| .channel-members-wrap{ | |
| min-width:240px!important; | |
| width:240px!important | |
| } | |
| .search-results-wrap { | |
| transform: translateX(-37%) !important; | |
| transition: all 300ms ease !important; | |
| z-index: 2; | |
| } | |
| .search-results-wrap:hover { | |
| /min-width: 37% !important; | |
| width: 37% !important; | |
| transition: all 300ms ease !important; | |
| transform: translateX(-24%) !important; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Status*/ | |
| /*Dnd*/ | |
| .status-dnd ~ .status-text { | |
| font-size: 0; | |
| } | |
| .status-dnd ~ .status-text::after { | |
| content: "Busy"; | |
| font-size: 15px; | |
| } | |
| .status-picker .popout-menu-item:nth-child(4) .helper{ | |
| font-size: 0; | |
| } | |
| .status-picker .popout-menu-item:nth-child(4) .helper::after{ | |
| content: "Working..."; | |
| animation: working 3s linear infinite; | |
| font-size: 12px; | |
| } | |
| /*Invisible*/ | |
| .status-invisible ~ .status-text { | |
| font-size: 0; | |
| } | |
| .status-invisible ~ .status-text::after { | |
| content: "Invisible"; | |
| font-size: 15px; | |
| } | |
| .status-picker .popout-menu-item:nth-child(5) .helper{ | |
| font-size: 0; | |
| } | |
| .status-picker .popout-menu-item:nth-child(5) .helper::after{ | |
| content: "No one likes you so you decide to turn invisible because people don't notice you anyway." !important; | |
| font-size: 12px; | |
| } | |
| /****************************************************************/ | |
| /****************************************************************/ | |
| /*Voice connection*/ | |
| #voice-connection { | |
| border-top: 1px solid rgba(255, 255, 255, 0.0); | |
| } | |
| #voice-connection .btn, | |
| .account .btn { | |
| border: none; | |
| } | |
| /****************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /****************************************************************/ | |
| /****************************************/ | |
| /* Quoter, Replyer */ | |
| /*======================================*/ | |
| /* Plugin Support */ | |
| /*======================================*/ | |
| /* */ | |
| /****************************************/ | |
| /*Quoter*/ | |
| .quoter { | |
| border-radius: 5px !important; | |
| background-color: var(--main-color) !important; | |
| border-color: var(--main-color) !important; | |
| border-width: 5px !important; | |
| } | |
| /*Replyer*/ | |
| .replyer { | |
| border-radius: 5px !important; | |
| background-color: var(--dark-color) !important; | |
| border-color: var(--dark-color) !important; | |
| border-width: 5px !important; | |
| } | |
| /****************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /**********************************************************************************************************************************/ | |
| /****************************************************************/ | |
| /****************************************/ | |
| /* Flash, Open Animation, Emojis */ | |
| /*======================================*/ | |
| /* Animations */ | |
| /*======================================*/ | |
| /* */ | |
| /****************************************/ | |
| /*Flash*/ | |
| @-webkit-keyframes flash { | |
| 50%{ | |
| -webkit-filter: blur(2px) brightness(2); | |
| } | |
| } | |
| @keyframes flash { | |
| 50%{ | |
| filter: blur(2px) brightness(2); | |
| } | |
| } | |
| /*Open*/ | |
| @keyframes none { | |
| from { transform: rotateX(0deg); } | |
| to { transform: rotateX(0deg); } | |
| } | |
| @-webkit-keyframes none { | |
| from { -webkit-transform: rotateX(0deg); } | |
| to { -webkit-transform: rotateX(0deg); } | |
| } | |
| @keyframes openX { | |
| from { transform: rotateX(-360deg); } | |
| to { transform: rotateX(0deg); } | |
| } | |
| @-webkit-keyframes openX { | |
| from { -webkit-transform: rotateX(-360deg); } | |
| to { -webkit-transform: rotateX(0deg); } | |
| } | |
| @keyframes openY { | |
| from { transform: rotateY(-360deg); } | |
| to { transform: rotateY(0deg); } | |
| } | |
| @-webkit-keyframes openY { | |
| from { -webkit-transform: rotateY(-360deg); } | |
| to { -webkit-transform: rotateY(0deg); } | |
| } | |
| @keyframes openZ { | |
| from { transform: rotateZ(-360deg); } | |
| to { transform: rotateZ(0deg); } | |
| } | |
| @-webkit-keyframes openZ { | |
| from { -webkit-transform: rotateZ(-360deg); } | |
| to { -webkit-transform: rotateZ(0deg); } | |
| } | |
| /*Working*/ | |
| @-webkit-keyframes working { | |
| 25%{ content: "Working"; } | |
| 50%{ content: "Working."; } | |
| 75%{ content: "Working.."; } | |
| 100%{content: "Working...";} | |
| } | |
| @keyframes working { | |
| 25%{ content: "Working"; } | |
| 50%{ content: "Working."; } | |
| 75%{ content: "Working.."; } | |
| 100%{content: "Working...";} | |
| } | |
| @keyframes fadeScreen { | |
| from { opacity: 0; } | |
| to { opacity: 100; } | |
| } | |
| @keyframes wobble {0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}} | |
| @keyframes scare {0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}} | |
| @keyframes hourglass{0%,100%,41%{transform:rotate(0)}20%,40%{transform:rotate(-180deg)}} | |
| @keyframes rotate {0%{transform:rotate(0)}100%{transform:rotate(360deg)}} | |
| @keyframes rofl {0%{transform:rotate(45deg)}100%{transform:rotate(404deg)}} | |
| @keyframes heartbeat{0%,100%,40%,80%{transform:scale(.75)}20%,60%{transform:scale(1)}} | |
| @keyframes joy {0%,100%,50%{transform:scale(.9)}25%,75%{transform:scale(1)}} | |
| @keyframes boom {0% {transform:scale(.1)}20% {transform:scale(1)}80% {transform:scale(1);opacity: 1;}100%{opacity: 0;}} | |
| @keyframes bomb {0%,100%,20%{transform:scale(1)}90%{transform:scale(.6)}95%{transform:scale(1.5)}} | |
| @keyframes eyes {0%,25%,75%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}} | |
| @keyframes mmlol {0% { transform: rotate(0deg); }69% { transform: rotate(0deg); }70% { transform: rotate(-90deg); }99% { transform: rotate(-90deg); }100% { transform: rotate(0deg); }} | |
| @keyframes vibrate {25%{transform: translateX(3px) translateY(-2px)}50%{transform: translateX(-1px) translateY(3px)}75%{transform: translateX(-4px) translateY(-2px)}100%{transform: translateX(2px) translateY(-1px)}} | |
| /****************************************************************/ | |
| /*Animated Gifs*/ | |
| /*Thanks for using this theme!*/ | |
| /*HansAnonymous#8784*/ | |
| .avatar-large[style*="168216897450541056"], | |
| .avatar-small[style*="168216897450541056"] { | |
| background: url('https://i.imgur.com/JbZhZAy.gif') !important; | |
| background-size: cover !important; | |
| } | |
| /*Howdy! It's ya girl Pierçalina#5403*/ | |
| .avatar-large[style*="215925240646205440"], | |
| .avatar-small[style*="215925240646205440"] { | |
| background: url('https://i.imgur.com/Kcx9An6.gif') !important; | |
| background-size: cover !important; | |
| } | |
| /****************************************************************/ | |
| /* | |
| .guild-header ul { | |
| opacity: 0; | |
| transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28); | |
| }*/ | |
| .invite-btn { | |
| background-color: rgba(0, 204, 204, 0.5) !Important; | |
| } | |
| .private-channels .channel:hover:before { | |
| opacity: .25 !important; | |
| } | |
| .user-settings-modal button.preview-sound:before { | |
| -webkit-filter: hue-rotate(275deg) saturate(400%); | |
| } | |
| .scroller-wrap .scroller::-webkit-scrollbar-thumb { | |
| background-color: rgba(0, 0, 0, 0.3) !important; | |
| border: 1px solid rgba(0, 0, 0, 0.3) !important; | |
| } | |
| .scroller-wrap .scroller::-webkit-scrollbar-track-piece { | |
| background-color: rgba(0, 0, 0, 0.0) !important; | |
| border: 1px solid rgba(0, 0, 0, 0.0) !important; | |
| } | |
| .inline { | |
| background-color: rgba(0, 0, 0, 0.4); | |
| border-radius: 5px; | |
| font-size: 12px; | |
| line-height: 22px; | |
| } | |
| .badge { | |
| background-color: #11d4ad; | |
| border: 1px solid rgba(0, 0, 0, 0.5); | |
| color: #000000; | |
| } | |
| .channel.channel-text.unread a { | |
| background: transparent !important; | |
| } | |
| .markup { | |
| color: #ffffff; | |
| font-size: 16px; | |
| } | |
| .markup a { | |
| color: #17f0ff !important; | |
| } | |
| .member.member-status.member-status-offline:hover { | |
| background-color: rgba(0, 0, 0, 0.2) !important; | |
| } | |
| .member.member-status.member-status-online:hover { | |
| background-color: rgba(0, 0, 0, 0.2) !important; | |
| } | |
| .notice { | |
| background-color: #a1a1a1; | |
| color: #000000; | |
| } | |
| .ider span { | |
| background-color: #615900; | |
| margin-top: 5px; | |
| margin-bottom: 5px; | |
| color: #ffffff; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: rgba(255, 255, 255, 0.6) !important; | |
| } | |
| .chat>.title-wrap { | |
| box-shadow: none !important; | |
| } | |
| .title-wrap { | |
| box-shadow: none !important; | |
| } | |
| .hljs { | |
| background: transparent; | |
| border-radius: 8px !important; | |
| color: #a3a3a3 !important; | |
| font-size: 16px !important; | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| .channel-textarea-inner { | |
| background-color: rgba(0, 0, 0, 0.3) !important; | |
| border-radius: 7px; | |
| border: 1px solid rgba(0, 0, 0, 0.0) !important; | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%); | |
| padding-bottom: 15px !important; | |
| padding-top: 15px !important; | |
| } | |
| .topic.topic-expandable { | |
| color: rgba(255, 255, 255, 0.8) !important; | |
| font-size: 12px !important; | |
| } | |
| .topic.topic-expandable a { | |
| color: var(--dark-color) !important; | |
| } | |
| .topic.topic-expandable:hover { | |
| color: rgba(255, 255, 255, 0.8) !important; | |
| font-size: 14px !important; | |
| } | |
| .member.member-status.member-status-online { | |
| background: transparent; | |
| } | |
| .messages { | |
| background: transparent; | |
| margin-top: 0px !important; | |
| margin-right: 0px !important; | |
| margin-left: 10px !important; | |
| } | |
| .chat .title-wrap { | |
| border-bottom: 0px; | |
| } | |
| /*.guild-header header span { | |
| margin-left: 30%; | |
| }*/ | |
| .chat .messages-wrapper { | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%) !important; | |
| } | |
| .guild-channels header { | |
| overflow: hidden !important; | |
| } | |
| .message-group { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| border-radius: 10px; | |
| margin-top: 10px !important; | |
| padding-left: 20px !important; | |
| padding-right: 0px !important; | |
| } | |
| .scroller.channel-members { | |
| padding-top: 3px !important; | |
| } | |
| .guild-channels { | |
| background-color: rgba(0, 0, 0, 0.3) !important; | |
| border-right: 0px solid transparent; | |
| margin-left: 0vh !important; | |
| margin-top: 0px; | |
| margin-bottom: 0.1vh; | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%); | |
| } | |
| .account { | |
| background-color: rgba(0, 0, 0, 0.3) !important; | |
| border-top-left-radius: 5px !important; | |
| border-top-right-radius: 5px !important; | |
| margin-top: 1.6vh; | |
| margin-left: 0.75vh !important; | |
| margin-bottom: 1vh; | |
| height: 8vh; | |
| width: auto; | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); | |
| } | |
| .username { | |
| font-size: 90% !important; | |
| } | |
| .discriminator { | |
| font-size: 70% !important; | |
| } | |
| #voice-connection { | |
| margin-left: 3vh !important; | |
| transform: translateY(2vh) !important; | |
| } | |
| .guilds { | |
| border-top-right-radius: 15px; | |
| border-bottom-right-radius: 15px; | |
| } | |
| .account .btn-deafen:hover { | |
| background-color: rgba(0, 0, 0, .5); | |
| } | |
| .account .btn-group, | |
| #voice-connection .btn-group { | |
| border-radius: 10px !important; | |
| background-color: rgba(0,107,107,0.3) !important; | |
| } | |
| .channel-members { | |
| background-color: rgba(0, 0, 0, 0.3) !important; | |
| margin-right: 20px; | |
| margin-top: 3px !important; | |
| margin-bottom: 2.3vh; | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%); | |
| } | |
| .links { | |
| display: none; | |
| } | |
| .account .username { | |
| width: 65px !important; | |
| font-size:10px !important; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| @media (max-width: 1620px){ | |
| .account .username { | |
| width: 50px !important; | |
| font-size:10px !important; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis;} | |
| } | |
| @media (max-width: 1420px) { | |
| .account .username { | |
| width: 32px !important; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .channel-members { | |
| max-width: 150px !important; | |
| } | |
| .channel-members h2 { | |
| font-size: 10px !important; | |
| padding-left: 10px !Important; | |
| } | |
| .member-activity { | |
| color: rgba(255, 255, 255, 0.8) !important; | |
| font-size: 10px !important; | |
| } | |
| .member-status { | |
| padding-left: 20px !important; | |
| } | |
| .channel-members-wrap { | |
| min-width: 80px !important; | |
| } | |
| .invite-btn { | |
| padding-left: 5% !important; | |
| } | |
| } | |
| .search-bar { | |
| margin-left: 1.vh !important; | |
| width: 90%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
holy shit