diff --git a/assets/general/explore.png b/assets/general/explore.png new file mode 100644 index 0000000..d375cfc Binary files /dev/null and b/assets/general/explore.png differ diff --git a/assets/general/userprofile.png b/assets/general/userprofile.png new file mode 100644 index 0000000..385d7f9 Binary files /dev/null and b/assets/general/userprofile.png differ diff --git a/dsn10-friends.css b/dsn10-friends.css index 2a0f067..a2826f3 100644 --- a/dsn10-friends.css +++ b/dsn10-friends.css @@ -1,3 +1,3 @@ .subtext__1a662 > .activity__24558 > .text__1dddb, .subText_ed6eed > .activity_a8c37a > .activityText__84949{ - font-family: var(--font-headline); - } \ No newline at end of file + font-family: var(--font-headline); +} diff --git a/dsn10-general.css b/dsn10-general.css index 317accb..8b4b5a0 100644 --- a/dsn10-general.css +++ b/dsn10-general.css @@ -5,6 +5,7 @@ --accent-color-selected: #317df7; --background-modifier-selected: transparent; + /* tooltip */ --tooltip-background: #ffffe1; --tooltip-border: #000; @@ -14,7 +15,7 @@ --voicecall-background: url(https://numoder.github.io/dsn10-theme/assets/src/WO_SCN07.png) center; /* profile */ - --profile-background: #8473c4; + --profile-background: #768eca; --profile-font-color: rgb(255, 255, 255); --profile-border: whitesmoke; @@ -27,7 +28,7 @@ --font-code: "Perfect DOS VGA 437 Win"; /* mentioned */ - --mention-foreground: rgb(29, 102, 0); + --mention-foreground: rgb(166, 171, 164); --mention-background: rgba(0, 112, 0, 0.2); --background-mentioned: linear-gradient(to right, rgb(182, 244, 146), rgba(51, 139, 147, 0)); @@ -93,7 +94,7 @@ /* voice chat image */ .theme-dark .videoGrid__8b6fc { - background: var(--voicecallBg, url(https://numoder.github.io/dsn10-theme/assets/src/virtualbox.png)); + background: var(--voicecall-background, url(https://numoder.github.io/dsn10-theme/assets/src/virtualbox.png)); background-size: cover; } @@ -163,14 +164,16 @@ foreignObject { margin-top: 5px; } - /* Exit button */ .winButtonClose__73489 { content: url(https://numoder.github.io/dsn10-theme/assets/windows/close1.png); + transition: 0.2s; margin-right: 5px; } .winButtonClose__73489:hover { content: url(https://numoder.github.io/dsn10-theme/assets/windows/close2.png); + background: transparent; + transition: 0.2s; } .winButtonClose__73489:active { @@ -180,20 +183,29 @@ foreignObject { /* Maximize button */ .winButtonMinMax__72f36 { content: url(https://numoder.github.io/dsn10-theme/assets/windows/maximize1.png); + transition: 0.2s; } .winButtonMinMax__72f36:hover { content: url(https://numoder.github.io/dsn10-theme/assets/windows/maximize2.png); + background: transparent; + transition: 0.2s; } /* Minimize button */ -.typeWindows__5fa63.withFrame__485f4.titleBar__01af6.withBackgroundOverride_b6a351>div:nth-child(4), .winButtonMinMax__72f36.winButton__88672:nth-child(4) { content: url(https://numoder.github.io/dsn10-theme/assets/windows/minimize1.png); +background: transparent; +transition: 0.2s; } -.typeWindows__5fa63.withFrame__485f4.titleBar__01af6.withBackgroundOverride_b6a351>div:nth-child(4), .winButtonMinMax__72f36.winButton__88672:nth-child(4):hover { content: url(https://numoder.github.io/dsn10-theme/assets/windows/minimize2.png); +background: transparent; +transition: 0.2s; +} + +.winButton__88672:active{ + filter: contrast(1.25); } .withFrame__485f4 { @@ -222,127 +234,16 @@ content: url(https://numoder.github.io/dsn10-theme/assets/windows/minimize2.png) } - -/* SERVER LIST*/ - - -/* server channel background */ -.theme-light .scroller_f0f183, .theme-light .container_ca50b9 { - z-index: 1; - padding-right: 8px; - border-right: 1px solid #80808073; - border-radius: 0px 0 0 0; -} - -/*category in server*/ -li.containerDefault__23a29, -li.containerDefault__3187b.wrapper__7bcde>div { - position: relative; - padding-top: 3px; - background: linear-gradient(13deg, #ffffff30, #fbfbfbbf, #fbfbfb); - background-repeat: no-repeat; - background-position: center; - border-radius: 4px; - box-shadow: inset 1px 1px 1px #6d6d6d; - margin-left: 7px; - margin-right: 2px; - margin-top: 7.5px; -} - -/* server buttons */ -a.link__95dc0 { - background: white; - box-shadow: inset 1px 1px 1px #0000004d; - margin-right: 2px; -} - -a.link__95dc0:hover { - background: white; - box-shadow: inset 1px 1px 1px #0000004d; -} - -div.container_b2ce9c, .members__9f47b { - background: url(https://numoder.github.io/dsn10-theme/assets/servers/786.png), linear-gradient(0deg, rgba(213, 225, 245, 1) 54%, rgba(203, 215, 237, 1) 68%, rgba(254, 254, 254, 1) 90%, rgba(254, 254, 254, 1) 90%); - background-size: 245px; - background-repeat: no-repeat; - background-attachment: fixed; - background-position: right bottom; -} - -.members__9f47b { - background-color: transparent; -} - -div.scroller__00e7e { - background: url(https://numoder.github.io/dsn10-theme/assets/servers/786.png), linear-gradient(0deg, rgba(213, 225, 245, 1) 54%, rgba(254, 254, 254, 1) 80%, rgba(254, 254, 254, 1) 100%); - background-size: 360px; - background-repeat: no-repeat; - background-attachment: fixed; - background-position: right bottom; -} - -/*name in voicechanel */ -.theme-light .icon__1d60c, -.username__73ce9 { - color: black !important; -} - -.name-28HaxV { - color: black; -} - -.modeSelected__487d6 .link__95dc0 { - color: inherit; -} - -.theme-light .link__95dc0:hover, -.modeSelected__487d6 .link__95dc0 { - background: linear-gradient(to right, #b5b5b5, #ffffff); - box-shadow: inset 1Px 1px 2px grey; -} - -.modeSelected__487d .name__8d1ec { - color: inherit; -} - -.modeUnread-3Cxepe .name-28HaxV { - color: #020202; - background: url(http://www.netscape-communications.com/wp-content/uploads/2021/07/pin.png); - background-repeat: no-repeat; - background-size: contain; - background-position-x: right; - font-weight: 600; -} - -.unread__11823 { - position: absolute; - height: 8px; - width: 8px; - border-radius: 15px; - top: 22%; - left: 5px; - margin-top: 0px; - display: none; -} - -.voiceUser__0470a { - background-color: #f3f3fd; - border: 1px solid #506b9a; - box-shadow: inset -5px -5px 10px -5px #8297c2, inset 5px 5px 10px -10px white; - border-radius: 5px; -} - - .iconSpacing__59128[aria-label="Muted"] { content: url(https://numoder.github.io/dsn10-theme/assets/user-area/Microphone2.png); + filter: contrast(0.7); width: 20px; - filter: grayscale(0.6); } .iconSpacing__59128[aria-label="Deafened"] { - content: url(https://numoder.github.io/dsn10-theme/assets/user-area/volume2.png); + content: url(https://numoder.github.io/dsn10-theme/assets/user-area/Volume2.png); + filter: contrast(0.7); width: 20px; - filter: grayscale(0.6); } .icon-2W8DHg { @@ -528,16 +429,19 @@ div.avatarStack__6604a.img.avatar__991e2 { } /* member list */ -.container__4f20e { - background: linear-gradient(90deg, rgba(229, 236, 242, 1) 0%, rgba(221, 226, 246, 1) 49%, rgba(207, 219, 245, 1) 80%, rgba(204, 216, 240, 1) 100%); +.theme-light .container__4f20e { + background: linear-gradient(90deg, rgba(229,236,242,1) 0%, rgba(221,226,246,1) 50%, rgba(207,219,245,1) 80%, rgba(204,216,240,1) 100%); margin-right: 8px; border-right: 1px solid #00000029; + border-radius: 0px; } -.container__4f20e:hover, -.container__4f20e.selected__9800b { +.theme-light .container__4f20e:hover, +.theme-light .container__4f20e.selected__9800b { + background: linear-gradient(90deg, rgba(252,254,255,1) 0%, rgba(208,218,255,1) 50%, rgba(182,205,255,1) 75%, rgba(137,174,255,1) 100%); transition: 0.2s; - filter: contrast(1.25); + border-radius: 0px; + } /* member groups */ @@ -563,6 +467,7 @@ div.avatarStack__6604a.img.avatar__991e2 { font-size: 14px; line-height: 20px; font-weight: 500; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .content-1U25dZ, @@ -639,18 +544,6 @@ img.avatar__08316.clickable_d866f1 { height: 35px !important; } -/* profile / audio / settings */ -section.panels__58331{ -background: var(--profile-background) !important; -border: 1px solid var(--profile-border); -} - -.container_ca50b9{ - background: var(--profile-background) !important; - border-top: 1px solid var(--profile-border); - border-bottom: 1px solid var(--profile-border); -} - .theme-light .nameTag__0e320 > .panelTitleContainer__7a748 > .text-sm-normal_e612c7{ color: var(--profile-font-color); font-family: var(--font-display); @@ -661,15 +554,11 @@ border: 1px solid var(--profile-border); /* profile picture */ .avatar_f8541f { - pointer-events: none; + background: linear-gradient(-45deg, #001933, #0063cc, #44a4ff); + border: 2px solid var(--avatar-profile-border-color); position: relative; display: block; - height: 34px; - width: 34px; - border-radius: 2px; - border: 2px solid var(--avatar-profile-border-color); - background: linear-gradient(-45deg, #001933, #0063cc, #44a4ff); - box-shadow: 0px 1px 3px black; + border-radius: 0px; } img.avatar__08316 { @@ -752,12 +641,6 @@ div.modeSelected__487d6 > div > a > div.linkTop_eaa673 > div.iconContainer__3f9b font-weight: 600; } -div.name__02dbd { - font-size: 16px; - line-height: 22px; - color: #000 !important; -} - /* chatbox */ .form-3gdLxP { -ms-flex-negative: 0; @@ -826,7 +709,6 @@ div.name__02dbd { div.name__8d1ec { padding-bottom: 0px; padding-top: 0px; - /* margin-top: 13px; */ } .markup_a7e664 .inline, @@ -862,12 +744,20 @@ span[style="color: rgb(156, 220, 254);"] { } - - -div.videoGrid__8b6fc {} - + /* video chat person box */ -.overlayContainer__83159 {} +.overlayContainer__83159 { + box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; /* border-radius: 5px; */ + /* z-index: 9; */ + margin: 0px; +} + +div.background__3b30f:not(img){ + background: url('https://numoder.github.io/dsn10-theme/assets/general/volume.png'), linear-gradient(45deg, #8995d4, transparent, transparent); + background-position: bottom left; + background-repeat: no-repeat; + filter: contrast(1.2); +} li.channel_c21703.container__8759a[aria-posinset="2"] { visibility: hidden; @@ -964,7 +854,7 @@ div.inner_ab95dc>div>div>div>button>div { font-family: var(--font-headline); } -div.containerWithMargin__7d380 { +div.containerWithMargin__7d380, .progressBarContainer__82ad7 { background: white; box-shadow: inset 1px 1px 1px #0000004d; border-radius: var(--radius-xs); @@ -972,7 +862,7 @@ div.containerWithMargin__7d380 { } /* server progress bar */ -.theme-light .progressBarContainer__9b571{ +.progressBarContainer__9b571, .progressBar__2cbc2{ background-color: #fff; box-sizing: border-box; height: 14px; @@ -983,15 +873,13 @@ div.containerWithMargin__7d380 { overflow: hidden; } -.progressBar_db0972, .container__4f639:hover .progressBar_db0972 { +.progressBar_db0972, .container__4f639:hover .progressBar_db0972, .progressBar__47525 { background: repeating-linear-gradient(to right,#fff 0px, #fff 2px, transparent 2px, transparent 10px), linear-gradient(to bottom, #acedad 0%,#7be47d 14%, #4cda50 28%, #2ed330 42%,#42d845 57%, #76e275 71%, #8fe791 85%, #ffffff 100%); height: 10px; box-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); } - - - + .layout_bb8e67 .wrapper_edb6e0:has(rect[width="10"][height="15"][x="22"][y="17"]):before { pointer-events: none; content: ""; @@ -1028,18 +916,18 @@ padding: 2px; margin-left: 4px; } -/* tooltip */ +/* tooltips / balloons */ .tooltip__01384 { box-shadow: none; } -.theme-light .tooltip__01384 .tooltipContent__79a2d, .visuallyHidden__5b0fb{ +.theme-light .tooltip__01384 .tooltipContent__79a2d, .visuallyHidden__5b0fb, .reactionTooltip__9384a, .wrapper_daf1cf > .root__46d4f { +box-shadow: inset 0 0 0 1px #000 !important; background: var(--tooltip-background) !important; color: var(--text-primary) !important; font-family: var(--font-headline); font-size: 14px; padding: 3px 5px; -box-shadow: inset 0 0 0 1px #000 !important; border-radius: 5px; } @@ -1127,3 +1015,38 @@ font-family: var(--font-headline); border: 1px solid white; border-radius: 5px; } + + +/* unsorted */ + +.theme-dark .container__590e2{ + background-color: #63609b; + } + + + .theme-dark .wrapper__7bcde .modeLocked_fcc71a{ + background-color: #63609b; + } + + .container-3w7J-x { + background: #63609b; + background-image: url(http://www.fa-series.com/wp-content/uploads/2020/11/servertitle3.png); + background-repeat: no-repeat; + background-position-y: 38px; + background-size: contain; + } + + .info__755e1::before{ + content: "DiscordNetwork 10"; + font-family: "Comic Sans MS"; + font-size: 12px; + color: rgb(247, 0, 255); + padding-bottom: 10px; + } + + +.chat__52833 .content__1a4fe .chatContent__5dca8 .messagesWrapper_ea2b0b .scroller__1f96e::-webkit-scrollbar { +background: var(--2k-checker-bg); +width: 16px; +height: 16px; +} diff --git a/dsn10-icons.css b/dsn10-icons.css index e246cf7..c750cbe 100644 --- a/dsn10-icons.css +++ b/dsn10-icons.css @@ -272,13 +272,8 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { /* -=- before uploading -=- */ -.list__02208 { - padding-bottom: 12px; -} - - /* voicecall box */ -.theme-light .activityPanel__22355, .theme-light .container_d667ff { +.theme-light .activityPanel__22355, .theme-light .container_d667ff{ background-color: #f3f3fd; border: 1px solid #506b9a; box-shadow: inset -10px -10px 14px -5px #8297c2, inset 10px 10px 14px -10px white; @@ -288,21 +283,36 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { } /* voicecall buttons */ -.button__66e8c.buttonColor_a6eb73 { - background: transparent; - height: 45px; - width: 45px; - border-radius: 50px; - padding: 10px; +div.wrapper__0ed4a > div > div.actionButtons_b58cbb > button, div.wrapper__0ed4a > div > div.actionButtons_b58cbb > div > button, div.wrapper__0ed4a > div > div.actionButtons_b58cbb > div > span > button, div.wrapper__0ed4a > div > div.actionButtons_b58cbb > div > span{ + background: transparent !important; + height: 45px !important; + width: 45px !important; + border-radius: 50px; + padding: 10px !important; + opacity: 1 !important; } -.button__66e8c.buttonColor_a6eb73:hover { - background-color: #f3f3fd; +div.wrapper__0ed4a > div > div.actionButtons_b58cbb > div > span > button{ + margin-top: -7.5px; + margin-left: -7.5px; +} + +div.wrapper__0ed4a > div > div.actionButtons_b58cbb > button:hover, div.wrapper__0ed4a > div > div.actionButtons_b58cbb > div > button:hover { border: 1px solid #506b9a; box-shadow: inset -10px -10px 14px -5px #8297c2, inset 10px 10px 14px -10px white; background-size: contain; } +.theme-light .actionButton__23182:hover{ + background-color: #f3f3fd; + +} +.theme-dark .actionButton__23182:hover{ + background-color: #63609b; + +} + + .button__66e8c.buttonColor_a6eb73 svg:hover, .button__66e8c.buttonColor_a6eb73.buttonActive__407a7, .button__66e8c[aria-expanded=true].buttonColor_a6eb73 { @@ -343,7 +353,7 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { .emojiButton-3FRTuj { background: red; background: url(https://numoder.github.io/dsn10-theme/assets/emojis/happy.gif); - background-size: 24px 24px; + /* background-size: 24px 24px; */ background-position: fixed; background-repeat: no-repeat; margin-top: 8px; @@ -353,18 +363,29 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { /* bottom bar */ .attachButton_eba568:hover, .avatarWrapper_ba5175 > .flex_f5fbb7 > .button_afdfd9:hover { - transform: scale(1.1); + transform: scale(1.05), rotate(125deg); transition: 0.2s; } /* plus */ -.attachButton_eba568[aria-label="Upload a file or send invites"] { +.attachButton_eba568[aria-label="Upload a file or send invites"]{ + content: url(https://numoder.github.io/dsn10-theme/assets/typing-form/plus.png); +} + +.circleIconButton_d8df29[aria-label="Add a Server"] { content: url(https://numoder.github.io/dsn10-theme/assets/typing-form/plus.png); + filter: hue-rotate(-75deg); + background-color: transparent; +} + +.circleIconButton_d8df29[aria-label="Explore Discoverable Servers"] { + content: url(https://numoder.github.io/dsn10-theme/assets/general/explore.png); + filter: hue-rotate(-75deg); + background-color: transparent; } .attachButton_eba568[aria-label="Upload a file or send invites"][aria-expanded=true] { - filter: invert(2)hue-rotate(180deg); - transition: 0.5s; + filter: drop-shadow(0px 0px 1px #000000); } .button_afdfd9[aria-label="Send a gift"] { @@ -377,6 +398,13 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { margin: 7px; } +.modeLocked_fcc71a > div > a.link__95dc0 > div.linkTop_eaa673 > .iconContainer__3f9b0 { + content: url(https://numoder.github.io/dsn10-theme/assets/typing-form/lock.png); + width: 20px; + height: 20px; + display: block; + filter: grayscale(0.); +} .button_afdfd9[aria-label="Open GIF picker"] { content: url(https://numoder.github.io/dsn10-theme/assets/typing-form/gif.png); width: 35px; @@ -408,12 +436,23 @@ div.messageAttachment_b97504>div.wrapperAudio__555ce { margin: 8px; } +.inner__9fd0b > .buttons_ce5b56 > div :hover{ + transform: rotate(2.5deg); + transition: 0.2s; +} + .button_afdfd9:disabled, .button_afdfd9[aria-disabled=true] { cursor: not-allowed; opacity: 0.75; } +div.iconWrapper_af9215[aria-label="Show User Profile"], +div.iconWrapper_af9215[aria-label="Hide User Profile"], +div.iconWrapper_af9215[aria-label="Show User Profile (Unavailable)"]{ + content: url(https://numoder.github.io/dsn10-theme/assets/general/userprofile.png); + } + /* channel header icons */ div.iconWrapper_af9215[aria-label="Add Friends to DM"], .button__6d358[aria-label="Invite"] { @@ -467,11 +506,14 @@ div.iconWrapper_af9215[aria-label="Start Video Call"], content: url(https://numoder.github.io/dsn10-theme/assets/general/chatplus.png); } -.iconWrapper_af9215[aria-label="Update Ready!"] { - background: url(http://www.netscape-communications.com/wp-content/uploads/2021/07/download.png); - height: 32px; - width: 32px; - margin-right: 5px; +.iconWrapper_af9215[aria-label="Update Ready!"], .hoverButtonGroup__5b423 .anchor_c8ddc0[aria-label="Download"] { + content: url(http://www.netscape-communications.com/wp-content/uploads/2021/07/download.png); + width: 24px; +} + +.hoverButtonGroup__5b423{ + border: solid 1px var(--menu-border); + border-radius: 0px; } .iconWrapper_af9215[aria-label="Show Member List"], diff --git a/dsn10-server.css b/dsn10-server.css index 2167790..b731c35 100644 --- a/dsn10-server.css +++ b/dsn10-server.css @@ -1,160 +1,462 @@ +/* light server list */ +.theme-light .scroller_f0f183 { + z-index: 1; + padding-right: 8px; + border-right: 1px solid #80808073; + border-radius: 0px 0 0 0; +} + +.theme-light .container__590e2{ + background: linear-gradient(to right,#5868a8, #6878b8, #6878b8, #667dbc, #859bdc, #8898d8); +} + +div.animatedContainer__341f6{ + margin-bottom: 10px; +} + +/* server pics */ +.theme-light .scroller__3d071{ + background: linear-gradient(to top, #5767b3,#fbfbff)!important; + } + +.theme-light .container_ca50b9{ + background: var(--profile-background); + box-shadow: inset 0px 1px 1.5px 0px rgba(255,255,255,1), inset 0px -1px 1.5px 0px rgba(0, 0, 0, 0.5); +} + +.theme-light .scroller__4b984{ + background: linear-gradient(0deg, rgba(95,108,161,0.9) 0%, rgba(84,95,151,0.9) 33%, rgba(107,125,197,0.9) 66%, rgba(115,133,215,0.9) 100%), url(https://grainy-gradients.vercel.app/noise.svg); +} + +.theme-light .channel_c21703.container__8759a{ + z-index: 2; + box-shadow: inset 0 -1px #799acdd8, inset 0 -2px #0000006f; + border-radius: 0px; +} + +.theme-light section.panels__58331{ + background: #768eca; +} + +.theme-light .wrapper__0ed4a{ + border: 1px solid #1d325b; +} + +.theme-light .link__2e8e1{ + color: white; +} + +.theme-light .scroller__4b984, .theme-light .container_ca50b9 { + border-right: 1px solid #1d325b; + border-left: 1px solid #1d325b; + } + /* NEW SERVER LIST */ -.wrapper_a7e7a8 { - width: 49px; - background-color: #63609b; +/* SERVER LIST*/ + + +/* server channel background */ + + +/* dark friends list */ + +.theme-dark .scroller__4b984{ + background: linear-gradient(0deg, #66619af2 0%, rgba(90,89,146,0.9) 30%, rgba(96,95,152,0.8) 60%, rgba(118,112,199,0.8) 100%), url(https://grainy-gradients.vercel.app/noise.svg); +} + +.theme-dark .container_ca50b9, .theme-dark .container_d667ff{ + background: linear-gradient(0deg, #66619af2 0%, rgba(90,89,146) 30%, rgba(96,95,152) 60%, rgba(118,112,199) 100%); + box-shadow: inset 0px 1px 1.5px 0px rgba(255,255,255,1); + border-top: 1px solid rgba(116,135,209); +} + +.theme-dark .container_d667ff{ + background: linear-gradient(0deg, #66619af2 0%, rgba(90,89,146) 30%, rgba(96,95,152) 60%, rgba(118,112,199) 100%); } -.tree__7a511 { - display: -webkit-box; - display: -ms-flexbox; +.theme-dark .button__66e8c.buttonColor_a6eb73:hover{ + background-color: #66619a; +} + +/* .channel_c21703.container__8759a[aria-posinset="1"]::before{ + content: url(https://cdn.discordapp.com/attachments/1189324560168923228/1191983262386638908/windy_big.png?ex=65a76beb&is=6594f6eb&hm=03edd3f06eb829bf7bc74dfe947fc3a27d22f1b5d0a0484277f3fb64646b9d64&); display: flex; - height: 100%; - width: 49px; + padding: 10px; +} */ + +.theme-dark .scroller__4b984, .theme-dark .container_ca50b9, .theme-dark .container_d667ff{ + border-left: 1px solid #1c146f; + border-right: 1px solid #1c146f; + border-radius: 0px 0 0 0; } -.scroller__3d071 { - background-color: #63609b; -background: linear-gradient(to top, #5868a8, #5868a8, #5868a8, #5868a8, #ffffff); +.theme-dark .channel_c21703.container__8759a{ + z-index: 2; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.5), inset 0 -2px #53528e; + border-radius: 0px; } -.wrapper_d281dd.selected_f5ec8e .childWrapper__01b9c, .wrapper_d281dd:hover .childWrapper__01b9c { - color: #fff; - background-color: #7289da00; +.scroller__4b984 > .content__23cab:last-child::after{ + content: url(https://cdn.discordapp.com/attachments/1189324560168923228/1191977049561247754/msn_chat_logo.gif?ex=65a76622&is=6594f122&hm=2d9699c66866099a0858f54f2636345c61213b6ac447b3945f02213ce87bf4d1&); + position: absolute; + margin: 55px 0px 0px 55px; + margin-top: 0px; } -.childWrapper__01b9c { - background-color: #fff0; +.scroller__4b984 > ul > li { + mask: linear-gradient(to right, #ffffff00, #000000ab, #000000e2, #000, #000000e2,#000000ab, #0000); + -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 7.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); } -.tutorialContainer__890ea { - position: relative; + +.theme-dark div.name__02dbd{ + color: white; + font-family: var(--font-headline); + padding-right: 2px; } -.wrapper_d281dd[aria-label="Direct Messages"] svg{ - display: block; - width: 0px; - height: 0px; +.channel_c21703.container__8759a :hover, .theme-dark .interactive__776ee.interactive_a868bc.interactiveSelected_ec846b{ + background: linear-gradient(97deg, rgba(116,135,209,0) 0%, rgba(124,148,222,1) 50%, rgba(95,109,163,0) 100%); + color: yellow !important; + transition: 0.2s; } -.wrapper_d281dd[aria-label="Direct Messages"] .childWrapper__01b9c { - mask: none; - background: url(https://numoder.github.io/dsn10-theme/assets/servers/butterflystatic.png); - background-size: 44.4px; - background-repeat: no-repeat; - background-position: center; +.theme-dark .channel_c21703.container__8759a:active{ + background: linear-gradient(97deg, rgba(116,135,209,0) 0%, rgba(89, 119, 207, 0.798) 50%, rgba(95,109,163,0) 100%); + color: yellow !important; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.611), inset 0 -2.5prgb(137, 135, 255)8e; + transition: 0.2s; } -.wrapper_d281dd[aria-label="Direct Messages"] .childWrapper__01b9c:hover { - filter: contrast(1.4); - transition: 1s; +.theme-dark .interactive__776ee.interactiveSelected_ec846b > .link__2e8e1 > .layout__59abc > .content_f767b8 > .nameAndDecorators_cfd1ff > .name__02dbd, .interactive__776ee.interactiveSelected_ec846b > .link__2e8e1 > .layout__59abc > .content_f767b8 > .subText_ed6eed > .subtext__623a0{ + color: yellow; } -/* animated icon when friends list is active */ -.listItemWrapper__1f93b.selected_ad2d13 div { - content: url(https://ucarecdn.com/67ac0119-504d-4bc8-9483-9ac51f586682/); - background-repeat: no-repeat; - background-position: center; +.theme-dark .name__02dbd :active{ +right: -2px; +margin-top: 2px; } -/* server/friend notification */ -.numberBadge__50328.base__92a12 { - background: linear-gradient(45deg, #ff0202, #f3ec00fa); +.theme-dark div.subText_ed6eed{ + color: rgba(255, 255, 255, 0.8); } - /* server without picture */ - .theme-light .acronym_cd4809, - .theme-light.wrapper_d281dd { - background: linear-gradient(#dbdfe6, #c4c7d4 50%, #b7bac3 50%, #dbdde2); - transition: 0s; - z-index: 1; - } - /* server voicecall / videocall icon */ - .upperBadge_c7cfb3{ - z-index: 2; + /* profile / audio / settings */ + + +.theme-light .scroller__3d071 { + background: linear-gradient(to top, #5868a8, #5868a8, #5868a8, #5868a8, #ffffff); } - .iconBadge_fdf33a{ - background: linear-gradient(45deg, #b302ff, #00bef3fa); + + /*category in server*/ + .theme-light .containerDefault__23a29, + .theme-light li.containerDefault__3187b.wrapper__7bcde>div { + position: relative; + padding-top: 3px; + background: linear-gradient(13deg, #ffffff30, #fbfbfbbf, #fbfbfb); + background-repeat: no-repeat; + background-position: center; + border-radius: 4px; + box-shadow: inset 1px 1px 1px #6d6d6d; + margin-left: 7px; + margin-right: 2px; + margin-top: 7.5px; } -.listItem_fa7b36 { - position: relative; - margin: 0px 0px 0px 0px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - width: 50px; - border: 0px solid #ababab; - border-top: 0px solid #a2a2a273; - border-left: solid 0px #cacaca; - box-shadow: 0px 0px 0Px #5d5d5d; - border-bottom: 0px solid #424242; - padding-left: 3Px; - margin-bottom: 0px; - opacity: 1; -} - -.svg_ad7356, .wrapper__3af0b { - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 46px; - height: 46px; - opacity: 1; - position: relative; - z-index: 1; - border: 3px solid #ffffff00; - left: -4px; - top: -3px; +.container-q97qHp { /* Categories */ + text-transform: uppercase; + font-size: 14px; + color: #000000; } -/* unread mentions indicator on server */ -.unreadMentionsIndicatorBottom_fdb943, .unreadMentionsIndicatorTop_ada847 { - padding: 8px; - height: 46px; - width: 46px; + /* server buttons */ +li.containerDefault__3187b > div { + background: radial-gradient(#fff, white); + box-shadow: inset 1Px 1px 2px grey; + margin: 2px; + border-radius: 3px; + margin-left: 8px; + } + +.containerDefault__3187b[role="listitem"] > .link__95dc0 > .content_c6490e > .name__8d1ec{ + font-family: "Trebuchet MS"; + text-transform: uppercase; + font-weight: 700; } -/* server pill */ -.item_f9d377 { - position: fixed; - display: block; - width: 5px; - border-radius: 0%; - margin-left: 0px; - background-color: #ff180000; - height: 6px !important; - border: 0px solid #780080; - background: linear-gradient(to bottom left,#259401, #1bff00); - margin: -17px 0px 18px 43px; - z-index: 3; +div.list__02208 { + background: transparent !important; + box-shadow: none !important; } -/* server pill length */ -.wrapper__3670f { - width: 49px; - height: 39px; +li.containerDefault__3187b > div:hover{ + background: white; + box-shadow: inset 1px 1px 1px #0000004d; + } + +li.containerDefault__3187b > div:active{ + } -.container-3w7J-x .content-3YMskv { - position: relative; - margin-top: 0px; + /* private channel */ +.theme-light .containerDefault__3187b > div > .modeLocked_fcc71a > div > .link__95dc0 { + background: linear-gradient(0deg, rgba(242,248,254,1) 0%, rgba(199,207,237,1) 100%); + border: solid 1px #d8deec; } -/* server folder */ -.expandedFolderBackground__1bec6{ - left: 4px; - width: 40px; - bottom: 10px; +.wrapper__7bcde{ + margin-left: 0px; } -.wrapper_ed1dea > ul -{ - display: inline !important; + + .wrapper_a7e7a8 { + width: 50px; + background-color: #63609b; + } + + .tree__7a511 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + width: 50px; + } + + .childWrapper__01b9c { + background-color: #fff0; + } + .tutorialContainer__890ea { + position: relative; + } + + .wrapper_d281dd[aria-label="Direct Messages"] svg{ + display: block; + width: 0px; + height: 0px; + } + + .wrapper_d281dd[aria-label="Direct Messages"] .childWrapper__01b9c { + mask: none; + background: url(https://numoder.github.io/dsn10-theme/assets/servers/butterflystatic.png); + background-size: 44.4px; + background-repeat: no-repeat; + background-position: center; + } + + .wrapper_d281dd[aria-label="Direct Messages"] .childWrapper__01b9c:hover { + filter: contrast(1.4); + transition: 1s; + } + + /* animated icon when friends list is active */ + .listItemWrapper__1f93b.selected_ad2d13 div { + content: url(https://ucarecdn.com/67ac0119-504d-4bc8-9483-9ac51f586682/); + background-repeat: no-repeat; + background-position: center; + } + + /* server/friend notification */ + .numberBadge__50328.base__92a12, .unreadBar__6ecda, .mentionsBar__4b47a { + background: linear-gradient(45deg, #ff0202, #f3ec00fa); + + } + + .unreadBar__6ecda:hover, .mentionsBar__4b47a:hover{ + box-shadow: 1px 1px 5px #ffffff4d, inset -1px -1px 3px #0000004d; + transform: 0.2s; + } + + /* server without picture */ + .theme-light div.childWrapper__01b9c.acronym_cd4809{ + background: #f3f3fd !important; + border: 1px solid #506b9a; + box-shadow: inset -10px -10px 14px -5px #8297c2, inset 10px 10px 14px -10px white; + color: black; + border-radius: 50%; + height: 46px !important; + } + + .theme-light .wrapper_d281dd .acronym_cd4809:hover{ + background-color: white; + border-radius: 25%; + color: var(--accent-color-selected); + box-shadow: #ADCFFF 6px inset; + transition: .25s; + } + + /* server voicecall / videocall icon */ + .upperBadge_c7cfb3{ + z-index: 2; + } + .iconBadge_fdf33a, .containerPadding_b3087b > .bar__004d9{ + background: linear-gradient(45deg, #b302ff, #00bef3fa); + } + + .listItem_fa7b36 { + position: relative; + margin: 0px 0px 0px 0px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 50px; + border: 0px solid #ababab; + border-top: 0px solid #a2a2a273; + border-left: solid 0px #cacaca; + box-shadow: 0px 0px 0Px #5d5d5d; + border-bottom: 0px solid #424242; + padding-left: 3Px; + margin-bottom: 0px; + opacity: 1; + } + + .svg_ad7356, .wrapper__3af0b { + -webkit-box-sizing: border-box; + box-sizing: border-box; + opacity: 1; + position: relative; + z-index: 0; + border: 3px solid #ffffff00; + left: -3px; + top: -3px; + } + + /* unread mentions indicator on server */ + .unreadMentionsIndicatorBottom_fdb943, .unreadMentionsIndicatorTop_ada847 { + padding: 8px; + height: 46px; + width: 46px; + } + + div.container_b2ce9c, .members__9f47b { + background: url(https://numoder.github.io/dsn10-theme/assets/servers/786.png), linear-gradient(0deg, rgba(213, 225, 245, 1) 54%, rgba(203, 215, 237, 1) 68%, rgba(254, 254, 254, 1) 90%, rgba(254, 254, 254, 1) 90%); + background-size: 245px; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: right bottom; + } + + .members__9f47b { + background-color: transparent; + } + + .theme-light .scroller__00e7e { + background: url(https://numoder.github.io/dsn10-theme/assets/servers/786.png), linear-gradient(0deg, rgba(213, 225, 245, 1) 54%, rgba(254, 254, 254, 1) 80%, rgba(254, 254, 254, 1) 100%); + background-size: 360px; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: right bottom; + } + + /*name in voicechanel */ + .theme-light .icon__1d60c, + .theme-light .username__73ce9 { + color: black !important; + } + + .name-28HaxV { + color: black; + } + + .modeSelected__487d6 .link__95dc0 { + color: inherit; + } + + .theme-light .link__95dc0:hover, + .modeSelected__487d6 .link__95dc0 { + background: linear-gradient(to right, #b5b5b5, #ffffff7f); + box-shadow: inset 1px 1px 2px grey; + } + + .link__95dc0:active{ + background: linear-gradient(to right, #919191, #ffffff90) !important; + } + + .unread__48cf4 { + position: absolute; + height: 8px; + width: 8px; + border-radius: 15px; + top: 22%; + left: 5px; + margin-top: 0px; + display: none; + } + + .isUnread__6f880 { + border-color: #ffa500; + } + .unreadPill__715fc{ + color: #fff; + background-color: #ffa500; + } + .unreadPillCapStroke__12c0b, .divider__8cf56 > span.content_d67847 { + color: #ffa500; + fill: #ffa500; + } + + + .unreadImportant_c775b3, .modeUnreadImportant_efb53e > div > a > div > .name__8d1ec{ + color: #020202; + background: url(http://www.netscape-communications.com/wp-content/uploads/2021/07/pin.png); + background-repeat: no-repeat; + background-size: contain; + background-position-x: right; + font-weight: 600; } + .voiceUser__0470a { + background-color: #f3f3fd; + border: 1px solid #506b9a; + box-shadow: inset -5px -5px 10px -5px #8297c2, inset 5px 5px 10px -10px white; + border-radius: 5px; + } + + /* server pill */ + .item_f9d377 { + position: fixed; + display: block; + width: 5px; + border-radius: 0%; + margin-left: 0px; + background-color: #ff180000; + height: 6px !important; + border: 0px solid #780080; + background: linear-gradient(to bottom left,#259401, #1bff00); + margin: -17px 0px 18px 44px; + } + + /* server pill length */ + .wrapper__3670f { + width: 49px; + height: 40px; + } + + .container-3w7J-x .content-3YMskv { + position: relative; + margin-top: 0px; + } + + /* server folder */ + .expandedFolderBackground__1bec6{ + left: 4px; + width: 40px; + bottom: 10px; + } + .wrapper_ed1dea > ul + { + display: inline !important; + } + + -.theme-light .container__590e2{ - background: linear-gradient(to right,#5868a8, #6878b8, #6878b8, #667dbc, #859bdc, #8898d8); -} \ No newline at end of file + .theme-dark .container__590e2{ + background-color: #63609b; + } + + + .theme-dark .wrapper__7bcde .modeLocked_fcc71a{ + background-color: #63609b; + } \ No newline at end of file diff --git a/dsn10-settings.css b/dsn10-settings.css index 7678e9b..1b2184c 100644 --- a/dsn10-settings.css +++ b/dsn10-settings.css @@ -1,3 +1,4 @@ + /* login screen */ .authBox__7196a[data-theme=dark], .authBox__7196a[data-theme=light], .modal__1237a > .content__764ce { @@ -7,7 +8,6 @@ background-size: cover; } - .authBox__7196a{ border: 2px solid #d2dbfc !important; } @@ -134,7 +134,7 @@ margin-bottom: -1px; border: 1px solid white; } -.theme-dark .themed_b957e8[data-tab-id="Friend Requests"], .theme-dark .themed_b957e8[data-tab-id="Billing"], .theme-dark .vc-vesktop-settings[data-tab-id="Vesktop"], .theme-dark .themed_b957e8[data-tab-id="Text Component"] { +.theme-dark .themed_b957e8[data-tab-id="Friend Requests"], .theme-dark .themed_b957e8[data-tab-id="Billing"], .theme-dark .themed_b957e8[data-tab-id="Advanced"],.theme-dark .vc-vesktop-settings[data-tab-id="Vesktop"], .theme-dark .themed_b957e8[data-tab-id="Text Component"] { border-bottom: 1px solid white; } @@ -169,7 +169,7 @@ div.linkTop_eaa673 > .name__8d1ec:hover { color: black; } -div.linkTop_eaa673:hover > .name__8d1ec:hover{ +div.linkTop_eaa673:hover{ transition: 0.2s; color: var(--accent-color); } @@ -202,4 +202,4 @@ div.searchBar_e0c60b { div.searchBar_e0c60b { height: 23px; width: 144px; -} +} \ No newline at end of file