Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root {
- /*--<var>: <value>*/
- --notif: #7A78BD;
- --accent: #7A78BD;
- --dark-primary: #212121;
- --dark-secondary: #303030;
- --dark-highlight: #181818;
- --light-primary: #ddd;
- --light-secondary: #ecf0f1;
- --light-highlight: #9E9E9E;
- --light-dark-text: #2e3136;
- --nsfw-image: url("https://i.alexflipnote.xyz/c2472b.png");
- }
- /* User Popout */
- /* BOTH */
- @-webkit-keyframes user-popout-anim {
- from {
- transform: translateX(-50px);
- opacity: 0;
- }
- 100% {
- transform: translateX(0px);
- opacity: 1;
- }
- }
- @keyframes user-popout-anim {
- from {
- transform: translateX(-50px);
- opacity: 0;
- }
- 100% {
- transform: translateX(0px);
- opacity: 1;
- }
- }
- .user-popout { width: 450px; animation: user-popout-anim 350ms ease-in-out; }
- .user-popout .body { display: flex; padding-top: 14px; }
- .user-popout .avatar-wrapper { position: fixed; margin: 4px 0px 14px -150px; }
- .section.roles { max-width: 250px; width: 250px; }
- .section.notes, .section.roles { margin-left: 15px; }
- .user-popout .username-wrapper .nickname { margin-bottom: 2px; }
- .creation-date-wrapper { margin-left: -33px; }
- .user-popout .header { padding-top: 3em; background: var(--dark-highlight); }
- .user-popout .header.streaming { padding-top: 2.15em; }
- .user-popout .avatar-wrapper .avatar-popout { border: 0; background-color: rgba(0, 0, 0, 1); }
- .user-popout .username-wrapper .activity, .user-popout .username-wrapper .discord-tag, .user-popout .username-wrapper .nickname{
- text-align: left;
- margin-left: 138px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .bot-tag.bot-tag-invert { background-color: #7289da!important; color: #fff!important; }
- .user-popout .header.streaming .live-on-twitch {
- border-top: 0px solid transparent;
- text-decoration: none;
- width: 150px;
- margin-left: 129px;
- border-radius: 3px;
- padding: 4px 0;
- }
- .user-popout .header.streaming .activity { padding: 0; }
- .user-popout .avatar-wrapper .avatar-hint {
- margin: 0;
- background: rgba(0, 0, 0, 1);
- box-shadow: none;
- }
- .note textarea:focus { background: var(--dark-highlight); }
- .user-popout .body { background: var(--dark-primary); }
- .user-popout .footer { background: var(--dark-secondary); border-top: none; }
- .quick-message, .quick-message.isBlocked {
- background: transparent;
- border: none;
- color: #fff;
- border-bottom: 1px solid #fff;
- border-radius: 0;
- }
- /* END: User Popout */
- /* User Profile Modal */
- /* BOTH | This one can't be used on light and dark, must define both */
- .avatar-profile {
- background-size: 128px 128px;
- margin-top: -29px;
- }
- .avatar-profile .status {
- border-color: var(--dark-secondary);
- }
- #user-profile-modal { border-radius: 0; }
- #user-profile-modal .header {
- background-color: var(--dark-highlight);
- border-radius: 0;
- background-image: none;
- }
- #user-profile-modal .header .header-info {
- margin-top: -30px;
- }
- #user-profile-modal .scroller {
- background: var(--dark-secondary);
- border-bottom: 0;
- }
- #user-profile-modal .tab-bar {
- margin-left: -185px;
- margin-top: 0px;
- }
- #user-profile-modal .tab-bar-container {
- background-color: var(--dark-primary);
- border-bottom: 0;
- }
- #user-profile-modal .empty {
- background: var(--dark-secondary);
- }
- #user-profile-modal .tab-bar .tab-bar-item, #user-profile-modal .tab-bar .tab-bar-item.selected {
- color: white;
- }
- #user-profile-modal .tab-bar .tab-bar-item.selected {
- font-weight: bold;
- border-bottom-color: #fff;
- }
- #user-profile-modal .guilds .section .section-header { color: #fff; }
- #user-profile-modal .guilds .section .connected-accounts .connected-account {
- border: 0;
- background: var(--dark-primary);
- box-shadow: none;
- }
- #user-profile-modal .guilds .section .connected-accounts {
- margin-left: -10px;
- margin-right: -10px;
- padding: 0 10px;
- }
- #user-profile-modal .guilds .section .connected-accounts .connected-account a:hover .connected-account-open-icon {
- opacity: 0.8;
- }
- #user-profile-modal .guilds .section .connected-accounts .connected-account .connected-account-name-inner .connected-account-name {
- color: #fff;
- font-weight: 600
- }
- #user-profile-modal .guilds .section .note textarea {
- padding: 5px;
- border-radius: 0px;
- -webkit-transition: all 100ms ease;
- transition: all 100ms ease;
- }
- #user-profile-modal .guilds .section .note textarea:hover:focus,
- #user-profile-modal .guilds .section .note textarea:focus {
- color: #fff;
- background: transparent;
- }
- #user-profile-modal .guilds .guild:hover {
- background: rgba(255, 255, 255, .1);
- color: #fff;
- }
- #user-profile-modal .header::after {
- display: none!important;
- }
- #user-profile-modal .avatar-wrapper {
- background-color: transparent;
- }
- /* Username, Discriminator and Playing Status */
- #user-profile-modal .header .header-info .header-info-inner .discord-tag .username { color: #fff; }
- #user-profile-modal .header .header-info .header-info-inner .discord-tag .discriminator { color: rgba(255, 255, 255, .7); }
- #user-profile-modal .header .header-info .header-info-inner .activity { color: rgba(255, 255, 255, .5); }
- /* Badge on name */
- @-webkit-keyframes profile-badge {
- from {
- transform: translateX(-40px);
- opacity: 0;
- }
- 100% {
- transform: translateX(0px);
- opacity: 1;
- }
- }
- @keyframes profile-badge {
- from {
- transform: translateX(-40px);
- opacity: 0;
- }
- 100% {
- transform: translateX(0px);
- opacity: 1;
- }
- }
- @-webkit-keyframes profile-badge-info {
- from { transform: translateX(-60px); }
- 100% { transform: translateX(0px); }
- }
- @keyframes profile-badge-info {
- from { transform: translateX(-60px); }
- 100% { transform: translateX(0px); }
- }
- #user-profile-modal .header .discord-tag, #user-profile-modal .header .activity {
- -webkit-animation: profile-badge-info 500ms ease-in-out;
- animation: profile-badge-info 500ms ease-in-out;
- }
- #user-profile-modal .header .header-info .badge-premium,
- #user-profile-modal .header .header-info .badge-hypesquad,
- #user-profile-modal .header .header-info .badge-partner,
- #user-profile-modal .header .header-info .badge-staff {
- -webkit-animation: profile-badge 500ms ease-in-out;
- animation: profile-badge 500ms ease-in-out;
- }
- /* END: User Profile Modal */
- /*Background*/
- .app {
- background-image: url("https://i.imgur.com/RG03PyX.png");
- background-repeat: repeat;
- background-position: 0px 0px;
- background-size: cover;
- }
- .connecting {
- background-image: url("https://i.stole-a-me.me/be304d.jpg");
- background-blend-mode: soft-light;
- background-repeat: repeat;
- background-position: 0px 0px;
- background-size: cover;
- }
- .connecting video.ready {
- display: none;
- }
- /*Transparency*/
- .theme-dark .layer, .theme-dark .layers
- {
- background: transparent!important;
- box-shadow: none;
- border-bottom: 0px solid #fff;
- border-top: none;
- opacity: 1;
- }
- #voice-connection,
- #friends,
- #friends .btn,
- .friends-header,
- .friends-table,
- .channels-wrap,
- .guild-channels,
- .links,
- .chat,
- .messages-wrapper,
- .container-RYiLUQ,
- .content,
- .chat-empty,
- .layers,
- .message-group-blocked,
- .private-channels,
- .guild-header header,
- .chat,
- .chat form,
- .theme-dark .channel-members {
- background: rgba(0, 0, 0, 0.5) !important;
- }
- .contentDefaultText-2elG3R {
- background: rgba(0, 0, 0, 0) !important;
- }
- .contentHoveredText-2HYGIY {
- background: rgba(0, 0, 0, 0.2) !important;
- }
- .contentSelectedText-3j5CXt {
- background: rgba(0, 0, 0, 0.3) !important;
- }
- .theme-dark #friends .friends-table .friends-row .friends-column-actions .friends-action {
- background-color: rgba(0, 0, 0, 0.5) !important;
- }
- .theme-dark .channel-members .member.popout-open,
- .theme-dark .channel-members .member:hover {
- background: linear-gradient(to right, rgba(256, 256, 256, 0.05) 45%, transparent);
- }
- .connecting video.ready {
- display: none;
- }
- .guilds-wrapper,
- .theme-dark .chat .has-more button {
- background: rgba(0, 0, 0, 0.8) !important;
- }
- .guild-header header {
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, .1)
- }
- .search-bar {
- background: rgba(0, 0, 0, 0.1) !important;
- }
- #friends .friends-table {
- margin-top: 0px !important;
- background: rgba(0, 0, 0, 0.745) !important;
- }
- .theme-dark #friends .friends-table .friends-row:hover {
- background: rgba(100, 100, 100, 0.3) !important;
- }
- #voice-connection {
- background: rgba(0, 0, 0, 0.7) !important;
- border-top: 0px;
- }
- .account {
- background: rgba(0, 0, 0, 0.7) !important;
- border-top: 0px;
- }
- #rtc-connection {
- background: rgba(0, 0, 0, 0.7) !important;
- border-top: 0px;
- }
- .guild-channels .channel.selected {
- background-color: transparent !important;
- }
- .private-channels .channel.selected,
- .private-channels .channel:hover,
- .private-channels .search-result.selected,
- .private-channels .search-result:hover {
- background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
- }
- .guild-channels .channel:hover {
- background-color: transparent !important;
- }
- .guild-channels .channel-text:hover {
- background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
- }
- .guild-channels .channel-text.selected,
- .private-channels .channel-text.selected {
- background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
- }
- .account .btn,
- #voice-connection .btn {
- background-color: rgba(0, 0, 0, 0.8);
- }
- #rtc-connection .btn {
- background-color: rgba(0, 0, 0, 0.8);
- }
- #rtc-connection .btn-group {
- border: none !important;
- }
- #rtc-connection .btn-info,
- #rtc-connection .btn-disconnect {
- box-shadow: none;
- transition: background-color 0.2s;
- }
- .account .btn-group,
- #voice-connection .btn-group {
- border: none !important;
- }
- .account .btn-mute,
- .account .btn-deafen,
- .account .btn-settings,
- #voice-connection .btn-info,
- #voice-connection .btn-disconnect {
- border: none;
- box-shadow: none;
- transition: background-color 0.2s;
- }
- .container-iksrDt,
- .container-3lnMWU {
- background-color: rgba(0, 0, 0, 0.3);
- box-shadow: none;
- border: none;
- }
- .title-wrap,
- .theme-dark .invite-button,
- .theme-dark #friends .friends-header {
- background: rgba(0, 0, 0, 0.745) !important;
- border-color: transparent;
- }
- .guilds-wrapper .guilds-add {
- background: rgba(0, 0, 0, 0.745) !important;
- }
- .theme-dark .message-group .embed {
- border-color: transparent;
- }
- /*Redefault the emoji search*/
- .emoji-picker .header .search-bar {
- background: inherit !important;
- }
- /*Scrollbar*/
- .theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-thumb,
- .theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb {
- background-color: #000!important;
- border-color: #111!important;
- }
- .theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-track-piece,
- .theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-track-piece {
- background-color: rgba(0, 0, 0, 0.5) !important;
- border-color: rgba(0, 0, 0, 0.5) !important;
- }
- /* Codeblocks*/
- .code,
- .theme-dark .message-group .comment .markup pre,
- .theme-dark .message-group .comment .markup code.inline,
- .theme-dark .message-group .comment .markup pre code {
- background: rgba(0, 0, 0, 0.5) !important;
- }
- .guilds-wrapper .guilds .guild .guild-inner,
- .guilds-wrapper .guild-separator:after {
- background: rgba(0, 0, 0, 0.5) !important;
- }
- .theme-dark .chat .title-wrap {
- border-bottom: 0px;
- }
- .theme-dark .friends-table .messages .divider.divider-red>span,
- .theme-dark .messages-wrapper .messages .divider.divider-red>span,
- .chat .divider>span {
- background: #000!important;
- }
- .chat form {
- margin: 0px;
- }
- .channel-textarea {
- margin: 20px 20px 30px;
- }
- .theme-dark .chat .content form .channel-textarea-inner {
- border-color: transparent;
- }
- .theme-dark .message-group.is-local-bot-message {
- background-image: none !important;
- box-shadow: -20px 0 rgba(0,0,0,0.8), 20px 0 rgba(0,0,0,0.8),-20px -1px 0 0 rgba(0,0,0,0.8),-20px 1px 0 rgba(0,0,0,0.8),20px 1px 0 rgba(0,0,0,0.8),20px -1px 0 rgba(0,0,0,0.8);
- background-color: rgba(0,0,0,0.8) !important;
- }
- .theme-dark .chat form {
- border-top: 0px;
- }
- .typing {
- background-color: transparent !important;
- margin: 0 20px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement