:root { --bd-blue: #7289da; --bd-blue-hover: rgb(56, 117, 206); --bd-blue-active: rgb(50, 104, 183); --blurple: #7289DA; } /* BEGIN V2 LOADER */ /* =============== */ .bd-loaderv2 { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIj4gICAgPG1ldGFkYXRhIC8+ICAgIDxkZWZzPiAgICAgICAgPGZpbHRlciBpZD0ic2hhZG93MSI+ICAgICAgICA8ZmVEcm9wU2hhZG93IGR4PSIyMCIgZHk9IjAiIHN0ZERldmlhdGlvbj0iMjAiIGZsb29kLWNvbG9yPSJyZ2JhKDAsMCwwLDAuMzUpIi8+ICAgICAgICA8L2ZpbHRlcj4gICAgICAgIDxmaWx0ZXIgaWQ9InNoYWRvdzIiPiAgICAgICAgPGZlRHJvcFNoYWRvdyBkeD0iMTUiIGR5PSIwIiBzdGREZXZpYXRpb249IjIwIiBmbG9vZC1jb2xvcj0icmdiYSgyNTUsMjU1LDI1NSwwLjE1KSIvPiAgICAgICAgPC9maWx0ZXI+ICAgICAgICA8ZmlsdGVyIGlkPSJzaGFkb3czIj4gICAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjEwIiBkeT0iMCIgc3RkRGV2aWF0aW9uPSIyMCIgZmxvb2QtY29sb3I9InJnYmEoMCwwLDAsMC4zNSkiLz4gICAgICAgIDwvZmlsdGVyPiAgICA8L2RlZnM+ICAgIDxnPiAgICAgICAgPHBhdGggc3R5bGU9ImZpbHRlcjogdXJsKCNzaGFkb3czKSIgZD0iTTExOTUuNDQrMTM1LjQ0MkwxMTk1LjQ0KzEzNS40NDJMOTk3LjYrMTM2LjQ0MkMxMDI0LjIrMTQ5Ljc0MisxMTcwLjM0KzE2My41NDIrMTE5My42NCsxNzkuNzQyQzEyNjQuMzQrMjI4Ljg0MisxMzE5Ljc0KzI5MS4yNDIrMTM1OC4yNCszNjUuMDQyQzEzOTguMTQrNDQxLjY0MisxNDE5Ljc0KzUzMC42NDIrMTQyMi41NCs2MjkuNjQyTDE0MjIuNTQrNjMwLjg0MkwxNDIyLjU0KzYzMi4wNDJDMTQyMi41NCs3NzMuMTQyKzE0MjIuNTQrMTIyOC4xNCsxNDIyLjU0KzEzNjkuMTRMMTQyMi41NCsxMzcwLjM0TDE0MjIuNTQrMTM3MS41NEMxNDE5Ljg0KzE0NzAuNTQrMTM5OC4yNCsxNTU5LjU0KzEzNTguMjQrMTYzNi4xNEMxMzE5Ljc0KzE3MDkuOTQrMTI2NC40NCsxNzcyLjM0KzExOTMuNjQrMTgyMS40NEMxMTcxLjA0KzE4MzcuMTQrMTAyNS43KzE4NTAuNTQrMTAwMCsxODYzLjU0TDExOTMuNTQrMTg2NC41NEMxNTM5Ljc0KzE4NjYuNDQrMTg2NC41NCsxNjkzLjM0KzE4NjQuNTQrMTI5Ni42NEwxODY0LjU0KzcxNi45NDJDMTg2Ni40NCszMTIuNDQyKzE1NDEuNjQrMTM1LjQ0MisxMTk1LjQ0KzEzNS40NDJaIiBmaWxsPSIjMTcxNzE3IiBvcGFjaXR5PSIxIi8+ICAgICAgICA8cGF0aCBzdHlsZT0iZmlsdGVyOiB1cmwoI3NoYWRvdzIpIiBkPSJNMTY5NS41NCs2MzEuNDQyQzE2ODUuODQrMjc4LjA0MisxNDA5LjM0KzEzNS40NDIrMTA1Mi45NCsxMzUuNDQyTDM2MS43NCsxMzYuNDQyTDgwMy43NCs0OTAuNDQyTDEwNjAuNzQrNDkwLjQ0MkMxMzM1LjI0KzQ5MC40NDIrMTMzNS4yNCs4MzUuMzQyKzEwNjAuNzQrODM1LjM0MkwxMDYwLjc0KzExNjQuODRDMTE1MC4yMisxMTY0Ljg0KzEyMTAuNTMrMTIwMS40OCsxMjQxLjY4KzEyNTAuODdDMTMwNi4wNysxMzUzKzEyNDUuNzYrMTUwOS42NCsxMDYwLjc0KzE1MDkuNjRMMzYxLjc0KzE4NjMuNTRMMTA1Mi45NCsxODY0LjU0QzE0MDkuMjQrMTg2NC41NCsxNjg1Ljc0KzE3MjEuOTQrMTY5NS41NCsxMzY4LjU0QzE2OTUuNTQrMTIwNS45NCsxNjUxLjA0KzEwODQuNDQrMTU3Mi42NCs5OTkuOTQyQzE2NTEuMDQrOTE1LjU0MisxNjk1LjU0Kzc5NC4wNDIrMTY5NS41NCs2MzEuNDQyWiIgZmlsbD0iIzNFODJFNSIgb3BhY2l0eT0iMSIvPiAgICAgICAgPHBhdGggc3R5bGU9ImZpbHRlcjogdXJsKCNzaGFkb3cxKSIgZD0iTTE0NjkuMjUrNjMxLjQ0MkMxNDU5LjU1KzI3OC4wNDIrMTE4My4wNSsxMzUuNDQyKzgyNi42NSsxMzUuNDQyTDEzNS40NSsxMzUuNDQyTDEzNS40NSsxMDA0QzEzNS40NSsxMDA0KzEzNS40MjcrMTI1NS4yMSszNTUuNjI2KzEyNTUuMjFDNTc1LjgyNSsxMjU1LjIxKzU3NS44NDgrMTAwNCs1NzUuODQ4KzEwMDRMNTc3LjQ1KzQ5MC40NDJMODM0LjQ1KzQ5MC40NDJDMTEwOC45NSs0OTAuNDQyKzExMDguOTUrODM1LjM0Mis4MzQuNDUrODM1LjM0Mkw2NjQuNjUrODM1LjM0Mkw2NjQuNjUrMTE2NC44NEw4MzQuNDUrMTE2NC44NEM5MjMuOTMyKzExNjQuODQrOTg0LjI0NCsxMjAxLjQ4KzEwMTUuMzkrMTI1MC44N0MxMDc5Ljc4KzEzNTMrMTAxOS40NysxNTA5LjY0KzgzNC40NSsxNTA5LjY0TDEzNS40NSsxNTA5LjY0TDEzNS40NSsxODY0LjU0TDgyNi42NSsxODY0LjU0QzExODIuOTUrMTg2NC41NCsxNDU5LjQ1KzE3MjEuOTQrMTQ2OS4yNSsxMzY4LjU0QzE0NjkuMjUrMTIwNS45NCsxNDI0Ljc1KzEwODQuNDQrMTM0Ni4zNSs5OTkuOTQyQzE0MjQuNzUrOTE1LjU0MisxNDY5LjI1Kzc5NC4wNDIrMTQ2OS4yNSs2MzEuNDQyWiIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iMSIvPiAgICA8L2c+PC9zdmc+); } .bd-loaderv2 { position: fixed; bottom: 5px; right: 5px; z-index: 2147483647; display: block; width: 20px; height: 20px; background-size: 100% 100%; animation: bd-loaderv2-animation 1.5s ease-in-out infinite; } @keyframes bd-loaderv2-animation { 0% { opacity: 0.05; } 50% { opacity: 0.6; } 100% { opacity: 0.05; } } /* =============== */ /* END V2 LOADER */ .bd-button { background-color: var(--bd-blue); color: white; border-radius: 3px; padding: 2px 6px; } .bd-button:hover { background-color: var(--bd-blue-hover); } .bd-button:active { background-color: var(--bd-blue-active); } .bd-button.bd-button-success { background-color: #3ac15c; } .bd-button.bd-button-success:hover { background-color: rgb(52, 174, 83); } .bd-button.bd-button-success:active { background-color: rgb(46, 154, 74); } .bd-button+.bd-button { margin-left: 5px; } .bd-button-outline { background-color: transparent; border: 2px solid white; } /* BEGIN EMOTE STYLING */ /* =================== */ #emote-container { padding: 10px; } .emote-container { display: inline-block; padding: 2px; border-radius: 5px; width: 30px; height: 30px; position: relative; } .emote-icon { max-width: 100%; max-height: 100%; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .emote.stop-animation { animation: none !important; } .emote-container:hover { background: rgba(123, 123, 123, 0.37); } .emoteflip, .emotespinflip { transform: scaleX(-1); } .emotespin { animation: 1s emote-spin infinite linear; } .emote1spin { animation: 1s emote-spin-reverse infinite linear; } .emotespin2 { animation: 0.5s emote-spin infinite linear; } .emote2spin { animation: 0.5s emote-spin-reverse infinite linear; } .emotespin3 { animation: 0.2s emote-spin infinite linear; } .emote3spin { animation: 0.2s emote-spin-reverse infinite linear; } .emotepulse { animation: 1s emote-pulse infinite linear; } .emotetr { transform: translateX(-3px); } .emotebl { transform: translateY(-3px); } .emotebr { transform: translate(-3px, -3px); } .emoteshake { animation: 1s emote-shake infinite linear; } .emoteflap { transform: scaleY(-1) !important; } .emoteshake2 { animation: emote-shake2 0.3s linear infinite; } .emoteshake3 { animation: emote-shake3 0.1s linear infinite; } @keyframes emote-shake2 { 25% { transform: translate(-1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } 75% { transform: translate(1px, -1px); } } @keyframes emote-shake3 { 25% { transform: translate(-1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } 75% { transform: translate(1px, -1px); } } @keyframes emote-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes emote-spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes emote-pulse { 0% { -webkit-transform: scale(1, 1); } 50% { -webkit-transform: scale(1.2, 1.2); } 100% { -webkit-transform: scale(1, 1); } } @keyframes emote-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* =================== */ /* END EMOTE STYLING */ /* BEGIN EMOTE MENU */ /* ================ */ #removemenu { width: auto; background: #505050; position: absolute; z-index: 999999; display: none; box-shadow: 0 0 2px #000; padding: 2px; left: 25px; display: block !important; cursor: pointer; color: var(--header-primary); position: fixed; } #removemenu ul a { text-decoration: none; color: var(--header-primary); padding: 3px; } .emotewrapper { position: relative; display: inline-flex; object-fit: contain; margin: -.1em .05em -.2em .1em; vertical-align: top; } .emotewrapper.jumboable { margin-bottom: 0; margin-top: .2em; vertical-align: -.3em; } .emote { height: 1.45em; } .emote.jumboable { height: 2rem; } .emotewrapper:hover .fav { display: block; } .fav { display: none; position: absolute; width: 15px; height: 15px; right: -7px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAzFBMVEUAAABQUFBMTExLS0tNTU1MTExNTU1NTU1MTExMTExNTU1LS0tEREBEREBEREBEREBJSUhLS0tLS0tEREBNTU1NTU1NTU1EREArKyhNTU1NTU0AAABMTExKSklMTExNTU1NTU1NTU1KSkpMTExKSkhNTU1KSkpISEZNTU1LS0tAQDxOTk5KSkpLS0tNTU1MTExMTEx/f39MTExMTExLS0pLS0tMTExNTU1NTU1LS0pNTU1NTU1NTU1NTU1NTU1NTUxNTU1NTU1NTUxMTEzB8C/5AAAAOnRSTlMAI8X96oWAgYSF68QBAg0PMCb9BIuLgQUD4N0Bh0mKhZSOQ4gcrKscaW8QRE6fmJyjAshASceG7cIpqQOxTQAAALVJREFUGFddx6FOA0EYAOGZvd07Qm6vVCAAgUUgQEDfX/YZMAigqaFN7iC5tsmPqGPUN/AvUVeoEbGOCElJz08Uzeixqu4AqomVVSNngOVjTqDGZSl3UFtPGV2ot2zaq96YM9p5Ddzcf/nTTAlj+/sNtNu8OcwkIsbPBtrUfMQeEhGQmHbmGIFMwLPzu6UMIwBNgToshgq8Nr2ki+Oy7ebDHp70LRPWB6OZgfWLWei7fJonOOsPCGA9kVlssOoAAAAASUVORK5CYII="); border: none; background-size: 100% 100%; background-repeat: no-repeat; background-color: #303030; border-radius: 5px; top: -7px; cursor: pointer; } .fav.active { background-color: yellow; } .emojiPicker-3m1S-j { box-shadow: none; border-top: none; border-radius: 0 0 5px 5px; } #bda-qem { border-radius: 5px 5px 0 0; background: var(--background-secondary); border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; height: 30px; display: flex; flex-direction: row; padding-right: 1px !important; } .theme-light #bda-qem { background: #f2f3f5; } #bda-qem button { border-left: 1px solid #202225; background: var(--background-secondary); box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0 0; flex-grow: 1; color: var(--header-primary); } .theme-light #bda-qem button { border-left: 1px solid #EFEFEF; background: transparent; box-shadow: #CECECE 1px 0 0 0; color: #000; } #bda-qem button:first-child { border-left-color: transparent; } #bda-qem button:hover { background: rgba(79, 84, 92, 0.16); } .theme-light #bda-qem button:hover { background: #ECECEC; } #bda-qem-twitch { border-radius: 5px 0 0 0; order: 2; } #bda-qem-emojis { border-radius: 0 5px 0 0; order: 3; } #bda-qem-favourite { order: 3; } #bda-qem button.active, #bda-qem button.active:hover { background-color: var(--bd-blue); } .theme-light #bda-qem button.active, .theme-light #bda-qem button.active:hover { color: var(--header-primary); } #bda-qem-twitch-container, #bda-qem-favourite-container { width: 384px; height: 424px; background-color: var(--background-secondary); border-radius: 0 0 5px 5px; } .theme-light #bda-qem-twitch-container, .theme-light #bda-qem-favourite-container { background-color: #f2f3f5; } #bda-qem-twitch-container .scroller-wrap, #bda-qem-favourite-container .scroller-wrap { height: 100%; } .emote-menu-inner { padding: 5px 0 0 15px; } .bda-qme-hidden #bda-qem-emojis { display: none; } /* ================ */ /* END EMOTE MENU */ /* BEGIN PUBLIC SERVERS */ /* ==================== */ #bd-pub-li { height: 20px; margin-bottom: 10px; overflow: hidden; } #bd-pub-button { border-radius: 4px; background-color: var(--background-secondary); color: var(--header-secondary); text-align: center; font-size: 12px; line-height: 20px; height: 20px; } .bd-server-card .bd-server-tags { flex: 1 1 auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 0; line-height: 24px; font-size: 12px; color: var(--header-secondary); font-weight: 700; margin-right: 10px; } .ui-card.ui-card-primary.bd-server-card:first-child { margin-bottom: 13px; } .ui-card.ui-card-primary.bd-server-card:first-child:after { border: 3px solid var(--bd-blue); content: ""; display: block; position: absolute; left: 0; right: 0; margin-top: 4px; } .bd-server-card.bd-server-card-pinned { margin-bottom: 15px; } .bd-server-card.bd-server-card-pinned:after { background: #3a71c1; content: ""; height: 3px; width: 100%; display: block; margin-top: 7px; position: absolute; top: 100%; } .bd-server-description-container { color: #b9bbbe; min-height: 65px; max-height: 65px; border-top: 1px solid #3f4146; border-bottom: 1px solid #3f4146; padding-top: 5px; font-size: 13px; } .bd-server-header { justify-content: space-between; font-weight: 600; } .bd-server-card { display: flex; } .bd-server-content { padding: 5px 10px; flex: 1; } .bd-server-image { min-width: 115px; min-height: 115px; max-width: 115px; max-height: 115px; } .bd-server-name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 15px; max-width: 330px; flex: 1 1 50%; } .bd-layer { -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; left: 0; position: absolute; right: 0; top: 0; } #pubslayer .ui-tab-bar-item { color: #b9bbbe; padding-top: 6px; padding-bottom: 6px; margin-bottom: 2px; padding: 6px 10px; position: relative; font-size: 16px; line-height: 20px; border-radius: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; font-weight: 500; cursor: pointer; } #pubslayer .ui-tab-bar-item:hover { color: var(--interactive-hover); background-color: var(--background-modifier-hover) } #pubslayer .ui-tab-bar-item.selected { color: var(--header-primary); background-color: var(--background-modifier-selected); } #pubslayer .ui-tab-bar-header { color: #72767d; padding: 6px 10px; font-size: 12px; line-height: 16px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; font-weight: 500; } #pubslayer .ui-tab-bar-separator { background-color: hsla(218, 5%, 47%, .3); margin-left: 10px; margin-right: 10px; height: 1px; margin-bottom: 8px; margin-top: 8px; } #pubslayer h2.ui-form-title { color: var(--header-primary); text-transform: uppercase; font-weight: 600; } #pubslayer h5.ui-form-title { color: var(--header-primary); } #pubslayer button { background: var(--bd-blue); color: var(--header-primary); font-size: 14px; font-weight: 500; line-height: 16px; padding: 2px 16px; border: none; border-radius: 3px; transition: background-color .17s ease; } #pubslayer button:hover { background-color: #677bc4; } #pubslayer input { color: var(--header-primary); background-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .3); padding: 10px; height: 30px; border-width: 1px; border-style: solid; border-radius: 3px; outline: none; transition: background-color .15s ease, border .15s ease; } /* ==================== */ /* END PUBLIC SERVERS */ /* BEGIN CSS EDITOR */ /* ================ */ .standardSidebarView-3F1I7i #bd-customcss-attach-controls button, .bd-detached-css-editor #bd-customcss-attach-controls button { margin: 0; width: 100px; background: var(--background-primary); color: var(--header-primary); height: 26px; font-weight: 600; margin-top: 5px; border-radius: 3px; } .standardSidebarView-3F1I7i #bd-customcss-attach-controls button:hover, .bd-detached-css-editor #bd-customcss-attach-controls button:hover { background: var(--background-primary); } .contentRegion-3nDuYy #bd-customcss-attach-controls, #bd-customcss-detach-container #bd-customcss-attach-controls { background: var(--background-secondary-alt); color: var(--header-primary); box-shadow: 0px 1px 0px 0px var(--background-secondary-alt) inset; border: 1px solid var(--background-floating); border-top: none; } .contentRegion-3nDuYy #bd-customcss-pane, .contentRegion-3nDuYy #bd-customcss-innerpane, #bd-customcss-detach-container #bd-customcss-pane, #bd-customcss-detach-container #bd-customcss-innerpane { min-height: calc(80vh - 165px); } .standardSidebarView-3F1I7i #editor-detached h3 { color: var(--header-secondary); font-weight: 600; font-size: 22px; } .standardSidebarView-3F1I7i #editor-detached button { margin: auto; margin-left: calc(50% - 100px); margin-top: 20px; background: var(--bd-blue); color: var(--header-primary); font-weight: 600; border-radius: 5px; font-size: 20px; } .editor-wrapper { display: flex; } .line-numbers, .ace_editor { line-height: normal; font-family: Consolas, monospace; box-sizing: border-box; height: calc(100vh - 250px); font-size: 14px; } .line-numbers { white-space: pre; color: var(--text-normal); padding: 10px 5px 0 5px; background: var(--background-secondary-alt); overflow: hidden; } .ace_editor { width: 100%; background: var(--background-secondary); outline: none; color: white; padding: 10px; resize: none; } #bd-customcss-detach-container .editor-wrapper, #bd-customcss-detach-container .line-numbers, #bd-customcss-detach-container .ace_editor { height: 100%; } .bd-detached-editor .app-2rEoOp { width: 70%; } .bd-detached-editor #bd-customcss-detach-container { display: block; } #bd-customcss-detach-container { display: none; position: absolute; width: 30%; top: 0; right: 0; bottom: 0; background-color: var(--background-primary); } #bd-customcss-detach-editor { height: calc(100% - 87px); } #bd-customcss-detach-editor #bd-customcss-innerpane, #bd-customcss-detach-editor .CodeMirror { height: 100%; } #bd-customcss-detach-controls { background: var(--text-normal); box-shadow: inset 0px 1px 0px 0px white; height: 100%; padding: 5px; } #bd-customcss-detach-controls .checkbox-group li { margin-top: 5px; display: inline-block; } #bd-customcss-detach-controls button { width: 90px; height: 30px; margin-top: 8px; background-color: var(--blurple); color: var(--header-primary); font-size: 19px; } #bd-customcss-detach-controls-buttons { bottom: 5px; } #editor-detached { margin-top: 50px; } #editor-detached h3 { text-align: center; font-size: 30px; } #editor-detached .btn { left: 50%; margin-left: -100px; margin-top: 10px; width: 200px; height: 60px; } #bd-customcss-attach-controls { background: var(--text-normal); border: 1px solid var(--header-primary); border-top: 1px solid var(--text-normal); box-shadow: inset 0px 1px 0px 0px white; height: 100%; padding: 5px; } #bd-customcss-attach-controls .checkbox-group { margin-bottom: 0; } #bd-customcss-attach-controls .checkbox-group li { margin-top: 5px; display: inline-block; } #bd-customcss-attach-controls button { margin: 0; width: 100px; } #bd-customcss-detach-container #bd-customcss-detach-controls-buttons button { width: 90px; height: 30px; margin-top: 8px; background-color: var(--blurple); color: var(--header-primary); font-size: 19px; } /* Ace Editor Settings */ #ace_settingsmenu_container { background: rgba(0, 0, 0, 0.7) !important; } body #ace_settingsmenu { padding-top: 35px; } body .ace_closeButton { position: absolute; top: 8px; right: 12px; z-index: 10000; padding: 0; cursor: pointer; background: none; border: none; } body .ace_closeButton::before { content: "✖"; color: var(--background-primary); } body .ace_closeButton:active { transform: translateY(2px); } .theme-dark div #ace_settingsmenu { color: var(--header-primary); background: var(--background-primary); box-shadow: 0 0 0 1px rgba(32, 34, 37, .6), 0 2px 10px 0 rgba(0, 0, 0, .2); } .theme-dark div #ace_settingsmenu select, .theme-dark div #ace_settingsmenu input[type="text"] { color: var(--header-primary); background: var(--background-secondary); border: 1px solid #484B52; } .theme-dark div .ace_closeButton::before { color: var(--header-primary); } /* editor help text */ #bd-customcss-attach-controls .help-text { margin-top: 8px; margin-bottom: 3px; font-size: 14px; } #bd-customcss-attach-controls .help-text .inline { background: var(--background-secondary); padding: .2em; margin: -.2em 0; border-radius: 3px; } /* ================ */ /* END CSS EDITOR */ /* BEGIN BD SETTINGS */ /* ================= */ .bd-social-logo { opacity: 0.6; } .bd-social-link:hover .bd-social-logo { opacity: 1; } .standardSidebarView-3F1I7i .bd-versioninfo-wrapper { bottom: 0; left: 0; position: fixed; background: inherit; right: 0; padding: 5px; } .standardSidebarView-3F1I7i .bd-versioninfo-wrapper span { color: #b9bbbe; font-weight: 600; font-size: 11px; } .standardSidebarView-3F1I7i .bd-versioninfo-wrapper a { font-size: 11px; } .bd-pfbtn { background: var(--bd-blue); color: #fff; border-radius: 5px; margin-left: 10px; } .ui-tab-bar-item { font-size: 16px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; flex-shrink: 0; padding: 6px 10px; border-radius: 3px; position: relative; overflow: hidden; } .ui-tab-bar-item.selected { cursor: default; } .theme-dark .ui-tab-bar-item { color: #b9bbbe; } .theme-dark .ui-tab-bar-item:hover { background-color: var(--background-modifier-hover); color: var(--interactive-hover); } .theme-dark .ui-tab-bar-item.selected { background-color: var(--background-modifier-selected); color: var(--header-primary); } .theme-light .ui-tab-bar-item { color: #72767d; } .theme-light .ui-tab-bar-item:hover { background-color: var(--background-modifier-hover); color: var(--interactive-hover); } .theme-light .ui-tab-bar-item.selected { background-color: var(--background-modifier-selected); color: var(--header-primary); } .ui-tab-bar-header { font-size: 12px; font-weight: 700; line-height: 16px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; padding: 6px 10px; overflow: hidden; justify-content: space-between; } .ui-tab-bar-header .bd-icon { cursor: pointer; fill: var(--text-muted); } .ui-tab-bar-header .bd-icon:hover { fill: var(--text-normal); } .ui-tab-bar-separator { height: 1px; margin: 8px 10px; } .theme-dark .ui-tab-bar-separator { background-color: rgba(114, 118, 125, .3); } .theme-light .ui-tab-bar-separator { background-color: rgba(185, 187, 190, .3); } .ui-flex { display: flex; } h2.ui-form-title { font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } .theme-dark h2.ui-form-title { color: var(--header-primary); } .theme-light h2.ui-form-title { color: #4f545c; } .ui-switch-item { flex-direction: column; margin-top: 8px; } .ui-switch-item h3 { font-size: 16px; font-weight: 500; line-height: 24px; flex: 1; } .theme-dark .ui-switch-item h3 { color: var(--header-primary); } .theme-light .ui-switch-item h3 { color: #4f545c; } .ui-switch-item .style-description { font-size: 14px; font-weight: 500; line-height: 20px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid hsla(218, 5%, 47%, .3); } .theme-dark .ui-switch-item .style-description { color: #72767d; } .theme-light .ui-switch-item .style-description { color: rgba(114, 118, 125, .6); } .ui-switch-item .ui-switch-wrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; width: 44px; height: 24px; display: block; flex: 0 0 auto; } .ui-switch-item .ui-switch-wrapper input { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 1; } .ui-switch-item .ui-switch-wrapper .ui-switch { background: var(--bd-blue); position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #72767d; border-radius: 14px; transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out; } .ui-switch-item .ui-switch-wrapper .ui-switch:before { content: ""; display: block; width: 18px; height: 18px; position: absolute; top: 3px; left: 3px; bottom: 3px; background: var(--header-primary); border-radius: 10px; transition: all .15s ease; box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); } .ui-switch-item .ui-switch-wrapper .ui-switch.checked { background: var(--bd-blue); } .ui-switch-item .ui-switch-wrapper .ui-switch.checked:before { transform: translateX(20px); } .scroller-wrap { height: 100%; } .scroller-wrap .scroller { display: flex; } .content-column .ui-form-title:first-child { margin-top: 0; } /* ================= */ /* END BD SETTINGS */ /* BEGIN PLUGIN/THEME LIST */ /* ======================= */ .bd-reload { cursor: pointer; vertical-align: top; fill: #dcddde; } .bd-reload:hover { fill: #fff; } .bd-reload-header { margin-left: 5px; } .bd-reload-card { margin-right: 5px; } .bda-controls { display: flex; } .bd-addon-list { user-select: text; } .bd-addon-list .bd-addon-card { max-height: 175px; margin-bottom: 20px; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; overflow: hidden; } .theme-dark .bd-addon-list .bd-addon-card { background-color: rgba(32, 34, 37, .6); color: var(--header-primary); border-color: #202225; } .theme-light .bd-addon-list .bd-addon-card { background-color: #f8f9f9; color: #4f545c; border-color: #dcddde; } .bd-addon-list .bd-addon-card.settings-open { max-height: 800px; overflow-y: auto; } .bd-addon-list .bda-header { font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid transparent; overflow: hidden; } .theme-dark .bd-addon-list .bda-header { color: var(--header-primary); border-bottom-color: rgba(114, 118, 125, .3); } .theme-light .bd-addon-list .bda-header { color: #4f545c; border-bottom-color: rgba(185, 187, 190, .3); } .bd-addon-list .bda-description { word-break: break-word; max-height: 100px; margin: 5px 0; padding: 5px 0; overflow-y: auto; } .theme-dark .bd-addon-list .bda-description { color: #b9bbbe; } .theme-light .bd-addon-list .bda-description { color: #72767d; } .bd-addon-list .scroller::-webkit-scrollbar-track-piece, .bd-addon-list .scroller::-webkit-scrollbar-thumb { border-radius: 0 !important; border-color: transparent; } .bd-addon-list .bd-card-footer { font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding-top: 5px; border-top: 1px solid transparent; overflow: hidden; } .theme-dark .bd-addon-list .bd-card-footer { border-top-color: rgba(114, 118, 125, .3); } .theme-light .bd-addon-list .bd-card-footer { border-top-color: rgba(185, 187, 190, .3); } .bd-addon-list .bd-card-footer button { background: var(--bd-blue); color: #fff; border-radius: 5px; display: block; margin-left: auto; padding: 2px 16px; transition: opacity 250ms ease; } .theme-dark .bd-addon-list .bd-card-footer { border-top-color: rgba(114, 118, 125, .3); } .theme-light .bd-addon-list .bd-card-footer { border-top-color: rgba(185, 187, 190, .3); } .bd-addon-list .bd-card-footer button { padding: 3px 16px; transition: opacity 250ms ease; } .bd-addon-list .bd-card-footer button:disabled { opacity: 0.4; } .bd-addon-list a { color: var(--bd-blue); } .bd-addon-list a:hover { text-decoration: underline; } /* ======================= */ /* END PLUGIN/THEME LIST */ /* BEGIN MODALS */ /* ============ */ @keyframes bd-backdrop { to { opacity: 0.85; } } @keyframes bd-modal-wrapper { to { transform: scale(1); opacity: 1; } } @keyframes bd-backdrop-closing { to { opacity: 0; } } @keyframes bd-modal-wrapper-closing { to { transform: scale(0.7); opacity: 0; } } .bd-backdrop { animation: bd-backdrop 250ms ease; animation-fill-mode: forwards; opacity: 0; background-color: rgb(0, 0, 0); transform: translateZ(0px); } .bd-modal-wrapper.closing .bd-backdrop { animation: bd-backdrop-closing 200ms linear; animation-fill-mode: forwards; animation-delay: 50ms; opacity: 0.85; } .bd-modal-wrapper.closing .bd-modal { animation: bd-modal-wrapper-closing 250ms cubic-bezier(0.19, 1, 0.22, 1); animation-fill-mode: forwards; opacity: 1; transform: scale(1); } .bd-modal-wrapper .bd-modal { animation: bd-modal-wrapper 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-fill-mode: forwards; transform: scale(0.7); transform-origin: 50% 50%; display: flex; align-items: center; box-sizing: border-box; contain: content; justify-content: center; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; pointer-events: none; position: absolute; z-index: 1000; } .bd-modal-wrapper .bd-modal-inner { display: flex; contain: layout; flex-direction: column; pointer-events: auto; border: 1px solid rgba(28, 36, 43, .6); border-radius: 5px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2); overflow: hidden; max-height: 660px; min-height: 200px; width: 440px; user-select: text; } .bd-modal-wrapper .bd-content-modal .bd-modal-inner { height: 500px; width: 700px; } .bd-modal-wrapper .header { background-color: #35393e; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2); padding: 12px 20px; z-index: 1; color: var(--header-primary); font-size: 16px; font-weight: 700; line-height: 19px; } .bd-modal-wrapper .bd-modal-body { background-color: var(--background-primary); color: var(--header-primary); flex-direction: row; overflow: hidden; display: flex; flex-direction: column; flex: 1; contain: layout; position: relative; } .bd-modal-wrapper .scroller { padding: 10px; } .bd-modal-wrapper .bd-content-modal .bd-modal-body { padding: 0; } .bd-modal-wrapper .scroller { overflow-y: auto; } .bd-modal-wrapper .footer { display: flex; justify-content: flex-end; padding: 10px 20px; } .bd-modal-wrapper .footer button { background-color: var(--bd-blue); color: var(--header-primary); min-height: 32px; min-width: 60px; align-items: center; border-radius: 3px; display: flex; font-size: 14px; font-weight: 500; justify-content: center; line-height: 16px; padding: 2px 16px; user-select: none; } .bd-modal-wrapper .footer button:hover { background-color: #677bc4; } .bd-modal-wrapper .footer button:active { background-color: #5f6fb9; } .bd-modal-wrapper .tab-bar-container { align-items: center; border-bottom: 0; background: rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px; } .bd-modal-wrapper .tab-bar.TOP { margin: 0; border: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .bd-modal-wrapper .tab-bar-container .tab-bar-item { margin: 0 15px; padding: 15px 0; color: var(--header-primary) !important; opacity: 0.5; transition: opacity 200ms ease; border-bottom: 2px solid transparent; } .bd-modal-wrapper .tab-bar-container .tab-bar-item:hover { border-color: var(--header-primary); cursor: pointer; } .bd-modal-wrapper .tab-bar-container .tab-bar-item.selected { opacity: 1; border-color: var(--header-primary); } .bd-modal-wrapper .tab-bar.TOP .tab-bar-item+.tab-bar-item { margin: 0; } .bd-modal-wrapper .table-header { display: flex; justify-content: space-between; color: var(--header-primary); font-weight: 700; padding-bottom: 10px; margin: 3px 15px 0 15px; border-bottom: 1px solid #fff; font-size: 14px; } .bd-modal-wrapper .table-column { width: 25%; } .bd-modal-wrapper .table-column.column-error { width: 50%; } .bd-modal-wrapper .table-column { word-wrap: break-word; } .bd-modal-wrapper .errors { display: flex; flex-direction: column; padding: 0; font-size: 14px; padding: 0 5px; } .bd-modal-wrapper .error { display: flex; color: var(--header-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding: 15px 0; align-items: center; } .bd-modal-wrapper .bd-content-modal .scroller { padding-top: 0; } /* ============ */ /* END MODALS */ /* BEGIN TOASTS */ /* ============ */ .bd-toasts { position: fixed; display: flex; top: 0; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; z-index: 4000; } @keyframes bd-toast-up { from { transform: translateY(0); opacity: 0; } } .bd-toast { animation: bd-toast-up 300ms ease; transform: translateY(-10px); background: var(--background-primary); padding: 10px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(32, 34, 37, .6), 0 2px 10px 0 rgba(0, 0, 0, .2); font-weight: 500; color: var(--header-primary); user-select: text; font-size: 14px; opacity: 1; margin-top: 10px; pointer-events: none; user-select: none; } .theme-light .bd-toast.toast-error, .theme-light .bd-toast.toast-danger, .theme-light .bd-toast.toast-warning, .theme-light .bd-toast.toast-warn, .theme-light .bd-toast.toast-success, .theme-light .bd-toast.toast-info { color: #fff; } .theme-light .bd-toast { box-shadow: 0 0 0 1px rgba(223, 221, 218, .6), 0 2px 10px 0 rgba(255, 255, 255, .2); } @keyframes bd-toast-down { to { transform: translateY(0px); opacity: 0; } } .bd-toast.closing { animation: bd-toast-down 200ms ease; animation-fill-mode: forwards; opacity: 1; transform: translateY(-10px); } .bd-toast.icon { padding-left: 30px; background-size: 20px 20px; background-repeat: no-repeat; background-position: 6px 50%; } .bd-toast.toast-info { background-color: #4a90e2; } .bd-toast.toast-info.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMSAxNWgtMnYtNmgydjZ6bTAtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=); } .bd-toast.toast-success { background-color: #43b581; } .bd-toast.toast-success.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=); } .bd-toast.toast-danger, .bd-toast.toast-error { background-color: #f04747; } .bd-toast.toast-danger.icon, .bd-toast.toast-error.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTEyIDJDNi40NyAyIDIgNi40NyAyIDEyczQuNDcgMTAgMTAgMTAgMTAtNC40NyAxMC0xMFMxNy41MyAyIDEyIDJ6bTUgMTMuNTlMMTUuNTkgMTcgMTIgMTMuNDEgOC40MSAxNyA3IDE1LjU5IDEwLjU5IDEyIDcgOC40MSA4LjQxIDcgMTIgMTAuNTkgMTUuNTkgNyAxNyA4LjQxIDEzLjQxIDEyIDE3IDE1LjU5eiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+); } .bd-toast.toast-warning, .bd-toast.toast-warn { background-color: #FFA600; color: white; } .bd-toast.toast-warning.icon, .bd-toast.toast-warn.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMSAyMWgyMkwxMiAyIDEgMjF6bTEyLTNoLTJ2LTJoMnYyem0wLTRoLTJ2LTRoMnY0eiIvPjwvc3ZnPg==); } /* ============ */ /* END TOASTS */ /* BEGIN MINIMAL MODE */ /* ================== */ /* Messages */ /* message divider */ /*.bd-minimal .divider-32i8lo {opacity: 0;} There's no message divider anymore ??*/ /* message */ .bd-minimal .message-2qnXI6 { padding-top: 0; padding-bottom: 0; } /* message avatars */ .bd-minimal .message-2qnXI6>.contents-2mQqc9>.avatar-1BDn8e { max-width: 20px; max-height: 20px; background-size: 100%; margin-right: 2px; margin-top: 0; border-radius: 0; } /* message content */ .bd-minimal .contents-2mQqc9 { border-left: 2px solid #EBEBEB; padding-left: 4px; margin-left: -30px; } .bd-minimal .theme-dark .contents-2mQqc9 { border-left: 2px solid #303030; } /* message username */ .bd-minimal .username-1A8OIy { font-size: small; } /* message timestamp */ .bd-minimal .timestamp-3ZCmNB.timestampVisibleOnHover-2bQeI4 { margin-left: -20px } /* message group */ /*.bd-minimal .container-1YxwTf { padding: 5px; } Can't separate Message group as they're not marked anymore, instead add padding on the top.*/ .bd-minimal .groupStart-23k01U { padding-top: 5px; } /* message embed */ .bd-minimal .embed-IeVjo6 { padding: 2px; } /* Member List */ /* member list wrap */ .bd-minimal .membersWrap-2h-GB4 { min-width: 0px; } /* member list */ .bd-minimal .members-1998pB { width: 180px; } /* member group */ .bd-minimal .membersGroup-v9BXpm { padding: 0; height: auto; } /* member list avatars */ /*.bd-minimal foreignObject[mask="url(#svg-mask-avatar-status-round-32)"] > img.avatar-VxgULZ { max-width: 15px; max-height: 15px; background-size: 15px 15px; }*/ /* member list avatars */ .bd-minimal .member-3-YXUe>div>div.avatar-3uk_u9>div>svg { width: 30px; height: 30px; } .bd-minimal .member-3-YXUe>div>div.avatar-3uk_u9>div { width: 30px !important; height: 30px !important; } /* member list item inner */ .bd-minimal .members-1998pB .member-3-YXUe { transform: scale(0.9); padding: 0; margin: 0; max-width: 200px; } .bd-minimal .member-3-YXUe>.layout-2DM8Md>.content-3QAtGj { margin-left: -15px; } /* member list role label */ .bd-minimal .members-1998pB .membersGroup-v9BXpm { margin-top: 3px; transform: scale(0.9); } /* Channel List */ /* Hide Channel Mode */ .bd-minimal.bd-minimal-chan #channels { display: none; } /* channel list guild name */ /* .bd-minimal .container-2Rl01u:has(#channels) > header > h1 { font-size: 12px; } :has() does not exist in css3. If we do not add a class from JS, we can't select it.*/ /* channel list */ .bd-minimal #channels { width: 160px; } /* channel item */ .bd-minimal .containerDefault-3GGEv_ { transform: scale(0.9); } /* channel name */ .bd-minimal .content-3at_AU { transform: scale(0.9); } /* channel icon */ .bd-minimal .icon-1_QxNX { width: 14px; height: 14px; } /* Guild List */ /* guild */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh { width: 20px; height: 20px; background-size: 100%; font-size: 15px; line-height: 20px; margin: 0 12.5px 8px; } /* guild link and icon */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .wrapper-25eVIn a, .bd-minimal .listItem-2P_4kh .wrapper-25eVIn .icon-27yU2q { width: 20px; height: 20px; background-size: 100%; font-size: 15px; line-height: 20px; } /* guild inner */ .bd-minimal .listItem-2P_4kh .wrapper-25eVIn { width: 20px; height: 20px; background-size: 100%; font-size: 15px; line-height: 20px; } .bd-minimal .listItem-2P_4kh svg, .bd-minimal .listItem-2P_4kh foreignObject[mask] { mask: none; } /* home icon */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .homeIcon-tEMBK1 { width: 10px; height: 10px; background-size: 100%; font-size: 15px; line-height: 20px; } /* add and search */ .bd-minimal .circleIconButton-jET_ig { height: 20px; width: 20px; } .bd-minimal .circleIconButton-jET_ig svg { height: 14px; width: 14px; } /* friends online */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .friendsOnline-_wi_fM { margin-left: -15px; font-size: 7px; } /* public servers button */ .bd-minimal #bd-pub-li { height: 16px; } .bd-minimal #bd-pub-button { font-size: 8px; line-height: 16px; height: 16px; } /* guild list */ .bd-minimal .wrapper-1Rf91z, .bd-minimal .wrapper-1Rf91z .scrollerWrap-1IAIlv, .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG { width: 45px; } /* separator */ .bd-minimal .wrapper-1Rf91z .guildSeparator-3s64Iy { margin-left: -15px; } /* unread icon */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh .wrapper-sa6paO { height: 20px; margin-top: 0px; margin-left: -12.5px; } /* audio/video */ .bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .iconBadge-2wi9r4 { width: 12px; height: 12px; background-size: 12px; } /* Account Container */ /* avatar */ .bd-minimal .container-2Thooq .avatarSmall-3ACRaI { width: 15px; height: 15px; background-size: 15px 15px; } /* status */ .bd-minimal .container-2Thooq .avatarSmall-3ACRaI .status-oxiHuE { height: 5px; width: 5px; } /* username and discrim */ .bd-minimal .container-2Thooq .accountDetails-3k9g4n { transform: scale(0.8); } /* 3 buttons */ .bd-minimal .container-2Thooq .button-2b6hmh { height: 14px; width: 14px; background-size: 14px 14px; margin-left: 3px; } /* 3 buttons icons */ .bd-minimal .container-2Thooq .button-2b6hmh svg { height: 14px; width: 14px; } /* ================== */ /* END MINIMAL MODE */ /* BEGIN DARK MODE */ /* =============== */ /* add/create server */ .bda-dark .theme-dark .root-1gCeng, .bda-dark .slide-2pHaq5 { background: var(--background-primary); } .bda-dark .root-1gCeng .input-1mgnkM { color: #e3e5e8; border-bottom-color: #292b2f; } .bda-dark .theme-dark .theme-dark .action-1lSjCi, .bda-dark .theme-dark .theme-light .action-1lSjCi { background: var(--background-secondary); } .bda-dark .theme-dark .theme-light .footer-3rDWdC { background: var(--background-secondary); box-shadow: none; } /* centered or */ .bda-dark .theme-dark .theme-dark .or-3THJsp, .bda-dark .theme-dark .theme-light .or-3THJsp { background: var(--background-secondary); order: 2; height: 56px; width: 56px; top: 103px; line-height: 56px; left: calc(50% - 29px); border-radius: 50%; border: 2px solid #484B52; } .bda-dark .theme-dark .create-3jownz { order: 1; } .bda-dark .theme-dark .join-33Tr-7 { order: 3; } .bda-dark .theme-dark .theme-dark .actionIcon-2IISM_, .bda-dark .theme-dark .theme-light .actionIcon-2IISM_ { filter: grayscale(100%) brightness(60%); } .bda-dark .theme-dark .theme-light .footer-2yfCgX { background: var(--background-secondary); } /* Region Select */ .bda-dark .theme-dark .regionSelectModal-12e-57 { background: var(--background-primary); } .bda-dark .theme-dark .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 { background: var(--background-secondary); border: 2px solid #484B52; } /* =============== */ /* END DARK MODE */ .bd-switch { background-color: #72767d; border-radius: 14px; width: 42px; height: 24px; opacity: 1; overflow: hidden; user-select: none; position: relative; display: block; flex: 0 0 auto; transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out, opacity .15s ease-in-out; margin-left: 10px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15); } .bd-switch::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; opacity: 0; background-color: #000; } .bd-switch::after { content: ""; display: block; position: absolute; background-color: var(--header-primary); z-index: 1; width: 18px; margin: 3px; border-radius: 9px; height: 18px; left: 0; transition: transform .15s ease-in-out, width .1s ease-in-out, left .1s ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .bd-switch .bd-checkbox { position: absolute; width: 100%; height: 100%; opacity: 0; padding: 0; margin: 0; z-index: 2; cursor: pointer; } .bd-switch-checked { background-color: var(--bd-blue); } .bd-switch-checked::after { transform: translate3d(18px, 0, 0); } .bd-switch-disabled { opacity: .3; cursor: not-allowed; } .bd-addon-button { cursor: pointer; } .bd-addon-button+.bd-addon-button { margin-left: 5px; } .bd-addon-controls { display: flex; align-items: center; justify-content: space-between; } .bd-addon-controls .bd-search { font-size: 13px; margin: 0; width: 200px; } .bd-addon-dropdowns { display: flex; } .bd-select-wrapper+.bd-select-wrapper { margin-left: 10px; } .bd-select-wrapper { color: var(--header-primary); font-size: 13px; display: flex; align-items: center; } .bd-select-wrapper label { opacity: .3; margin-right: 5px; } .bd-select { position: relative; cursor: pointer; color: var(--header-primary); font-size: 13px; display: flex; align-items: center; justify-content: space-between; background-color: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 5px 5px 5px 0; } .bd-select.bd-select-transparent { background: none; border: none; padding: 0; } .bd-select-value { padding-left: 12px; } .bd-select-arrow { margin-left: 10px; } .bd-select .bd-select-options { position: absolute; background: var(--background-secondary); border-radius: 0 0 3px 3px; max-height: 300px; min-width: calc(100% + 2px); overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px 0px; border: 1px solid rgba(0, 0, 0, 0.3); border-top: 0; margin-top: -1px; margin-left: -1px; z-index: 3; top: 100%; } .bd-select-transparent .bd-select-options { border: 1px solid rgba(0, 0, 0, 0.3); margin-top: 3px; border-radius: 3px; } .bd-select .bd-select-option { padding: 8px 12px; cursor: pointer; white-space: pre; } .bd-select .bd-select-option:hover { background: var(--background-modifier-hover); } .bd-select .bd-select-option:active { background: var(--background-modifier-active); } .bd-select .bd-select-option.selected { background: var(--background-modifier-selected); } .bd-search-wrapper { padding: 3px; border-radius: 3px; outline: none; border: 0; background-color: var(--background-secondary); color: var(--text-normal); display: flex; align-items: center; } .bd-search-wrapper.focused { background-color: var(--background-modifier-selected) } .bd-search { padding: 2px 3px; background: none; border: 0; color: var(--header-primary); flex: 1; } .bd-search-wrapper>svg { margin-right: 2px; } .bd-chat-badge { vertical-align: bottom; line-height: 1.375rem; display: inline-block; height: 21px; } .compact-T3H92H .bd-chat-badge { position: absolute; left: 5px; top: 4px; width: 16px; display: inline-flex; } .bd-member-badge { height: 15px; margin-left: 4px; }