From aaf2c00a06ba711522f2f1dd085563ed44f02b2f Mon Sep 17 00:00:00 2001 From: hormelcookies Date: Sat, 5 Sep 2020 13:54:46 -0700 Subject: [PATCH] fix line endings for css, html files, and jsx files --- .gitattributes | 3 + BetterDiscordApp/dist/style.css | 4568 ++++++++--------- BetterDiscordApp/src/styles/index.css | 4568 ++++++++--------- .../core/app/BetterDiscord/lightcord.css | 2042 ++++---- .../core/app/tabs/controls.css | 12 +- 5 files changed, 5598 insertions(+), 5595 deletions(-) diff --git a/.gitattributes b/.gitattributes index 26f91df..ad72f45 100644 --- a/.gitattributes +++ b/.gitattributes @@ -5,3 +5,6 @@ *.patch text eol=lf *.yml text eol=lf *.yaml text eol=lf +*.jsx text eol=lf +*.html text eol=lf +*.htm text eol=lf diff --git a/BetterDiscordApp/dist/style.css b/BetterDiscordApp/dist/style.css index 1bb7c12..bfeef13 100644 --- a/BetterDiscordApp/dist/style.css +++ b/BetterDiscordApp/dist/style.css @@ -1,2285 +1,2285 @@ -: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; +: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; } \ No newline at end of file diff --git a/BetterDiscordApp/src/styles/index.css b/BetterDiscordApp/src/styles/index.css index 1bb7c12..bfeef13 100644 --- a/BetterDiscordApp/src/styles/index.css +++ b/BetterDiscordApp/src/styles/index.css @@ -1,2285 +1,2285 @@ -: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; +: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; } \ No newline at end of file diff --git a/modules/discord_desktop_core/core/app/BetterDiscord/lightcord.css b/modules/discord_desktop_core/core/app/BetterDiscord/lightcord.css index bae521c..d7961de 100644 --- a/modules/discord_desktop_core/core/app/BetterDiscord/lightcord.css +++ b/modules/discord_desktop_core/core/app/BetterDiscord/lightcord.css @@ -1,1022 +1,1022 @@ -/** Lightcord Custom */ -.lc-tabWrapper { - position: relative; - overflow: hidden; - height: 100%; - background: var(--background-floating); - border: 1px solid var(--deprecated-text-input-border-hover); - border-radius: 5px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.lc-tabnav { - top: 0; - border-bottom: 1px solid var(--deprecated-text-input-border-hover); - padding: 0 4px; - width: 100%; - -ms-flex-item-align: start; - align-self: flex-start; - position: relative; - overflow: hidden; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} -.lc-tab { - /*border-radius: 8px;*/ - overflow: hidden; - position: relative; - margin: 0 auto; - width: 100%; - max-width: 100%; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 40px; -} -.theme-dark .lc-tab-box-shadow { - -webkit-box-shadow: 0 0 20px 2px rgba(4,4,5,.3); - box-shadow: 0 0 20px 2px rgba(4,4,5,.3); -} -.theme-light .lc-tab-box-shadow { - -webkit-box-shadow: 0 0 5px 2px rgba(4,4,5,.1); - box-shadow: 0 0 5px 2px rgba(4,4,5,.1); -} -.lc-navItem { - padding: 14px 20px; - position: relative; - font-weight: 500; - -webkit-transform: color .125s; - transform: color .125s; - cursor: pointer; - max-height: 100%; -} -.lc-navItem::after { - position: absolute; - bottom: 0; - left: 20px; - right: 20px; - background: #7289da; - -webkit-box-shadow: 0 -4px 12px 0 #7289da; - box-shadow: 0 -4px 12px 0 #7289da; - content: ""; - height: 2px; - -webkit-transition: -webkit-transform .125s; - transition: -webkit-transform .125s; - transition: transform .125s; - transition: transform .125s,-webkit-transform .125s; -} -.lc-navItemActive { - color: var(--interactive-active); -} -.lc-navItemActive::after { - -webkit-transform: none; - transform: none; -} -.lc-navItemInactive { - color: var(--interactive-normal); -} -.lc-navItemInactive:hover { - color: var(--interactive-hover) -} -.lc-navItemInactive::after { - -webkit-transform: translateY(16px); - transform: translateY(16px); -} -.lc-fadeOverlay { - height: 20%; - left: 0; - bottom: 0; - background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(24,25,28,0)),color-stop(70%,#18191c),to(#18191c)); - background-image: linear-gradient(180deg,rgba(24,25,28,0),#18191c 70%,#18191c); - z-index: 900; - position: absolute; - width: 100%; -} -.lc-userPopout { - width: 250px; - border-radius: 5px; - overflow: hidden; - position: relative; - -webkit-box-shadow: 0 0 20px 2px rgba(4,4,5,.3); - box-shadow: 0 0 20px 2px rgba(4,4,5,.3); - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - margin: 40px auto; -} -.lc-link-disabled-span:hover { - cursor: pointer; -} - -/** Alert Box */ -.lc-alert-box { - margin: 20px 0; - padding: 10px; - border-radius: 5px; - font-size: 14px; - font-weight: 300; - line-height: 22px; -} -.lc-alert-box strong { - font-weight: 900 -} -.lc-alert-box span { - color: hsla(0,0%,100%,.9); - margin: 0!important -} -.lc-alert-box.lc-alert-box-warn { - background: rgba(250,166,26,.1); - border: 2px solid rgba(250,166,26,.5); -} -.lc-alert-box.lc-alert-box-info { - background: rgba(114,137,218,.1); - border: 2px solid rgba(114,137,218,.5); -} -.lc-alert-box.lc-alert-box-danger { - background: rgba(240,71,71,.1); - border: 2px solid rgba(240,71,71,.5); -} -.lc-alert-box.lc-alert-box-error { - background: rgba(240,71,71,.1); - border: 2px solid rgba(240,71,71,.5); -} -.lc-alert-box.lc-alert-box-success { - background: rgba(67,181,129,.1); - border: 2px solid rgba(67,181,129,.5) -} -.lc-blockquote > div { - margin-bottom: 0!important; -} - -/** Text */ -/*cases*/ -.lc-text-casesUppercase { - text-transform: uppercase -} - -.lc-text-casesLowercase { - text-transform: lowercase -} -/*weight*/ -.lc-text-weightLight { - font-weight: 300 -} - -.lc-text-weightNormal { - font-weight: 400 -} - -.lc-text-weightMedium { - font-weight: 500 -} - -.lc-text-weightSemibold { - font-weight: 600 -} - -.lc-text-weightBold { - font-weight: 700 -} -/*sizes*/ -.lc-text-size12 { - font-size: 12px; -} -.lc-text-size14 { - font-size: 14px; -} -.lc-text-size16 { - font-size: 16px; -} -.lc-text-size20 { - font-size: 20px; -} -.lc-text-size28 { - font-size: 28px; -} -/*height*/ -.lc-text-height16 { - line-height: 16px -} -.lc-text-height20 { - line-height: 20px -} -.lc-text-height26 { - line-height: 26px -} -.lc-text-height34 { - line-height: 34px -} -/*family*/ -.lc-text-primary { - font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif -} -.lc-text-code { - font-family: SourceCodePro,Whitney,Helvetica Neue,Helvetica,Arial,sans-serif -} -/*selectable*/ -.lc-text-selectable { - cursor: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text -} - -/** DateRange */ -.lc-dateWrapper { - padding-top: 8px -} - - -/*CalendarPicker*/ -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { - margin-left: -8px; - position: absolute -} - -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before { - -webkit-box-sizing: content-box; - box-sizing: content-box; - position: absolute; - border: 8px solid transparent; - height: 0; - width: 1px -} - -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before { - content: ""; - z-index: -1; - border-width: 8px; - left: -8px; - border-bottom-color: #aeaeae -} - -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { - top: 0; - margin-top: -8px -} - -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before { - border-top: none; - border-bottom-color: #f0f0f0 -} - -.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before { - top: -1px; - border-bottom-color: #aeaeae -} - -.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { - bottom: 0; - margin-bottom: -8px -} - -.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before { - border-bottom: none; - border-top-color: #fff -} - -.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before { - bottom: -1px; - border-top-color: #aeaeae -} - -.react-datepicker-wrapper { - display: inline-block -} - -.react-datepicker { - font-size: .8rem; - background-color: #fff; - color: #000; - border: 1px solid #aeaeae; - border-radius: .3rem; - display: inline-block; - position: relative -} - -.react-datepicker__triangle { - position: absolute; - left: 50px -} - -.react-datepicker-popper { - z-index: 1 -} - -.react-datepicker-popper[data-placement^=bottom] { - margin-top: 10px -} - -.react-datepicker-popper[data-placement^=top] { - margin-bottom: 6px -} - -.react-datepicker-popper[data-placement^=right] { - margin-left: 8px -} - -.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle { - left: auto; - right: 42px -} - -.react-datepicker-popper[data-placement^=left] { - margin-right: 8px -} - -.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle { - left: 42px; - right: auto -} - -.react-datepicker__header { - text-align: center; - background-color: #f0f0f0; - border-bottom: 1px solid #aeaeae; - border-top-left-radius: .3rem; - border-top-right-radius: .3rem; - padding-top: 8px; - position: relative -} - -.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select { - display: inline-block; - margin: 0 2px -} - -.react-datepicker__current-month { - margin-top: 0; - color: #000; - font-weight: 700; - font-size: .944rem -} - -.react-datepicker__navigation { - line-height: 1.7rem; - text-align: center; - cursor: pointer; - position: absolute; - top: 10px; - width: 0; - border: .45rem solid transparent; - z-index: 1 -} - -.react-datepicker__navigation--previous { - left: 10px; - border-right-color: #ccc -} - -.react-datepicker__navigation--previous:hover { - border-right-color: #b3b2b2 -} - -.react-datepicker__navigation--next { - right: 10px; - border-left-color: #ccc -} - -.react-datepicker__navigation--next:hover { - border-left-color: #b3b2b2 -} - -.react-datepicker__navigation--years { - position: relative; - top: 0; - display: block; - margin-left: auto; - margin-right: auto -} - -.react-datepicker__navigation--years-previous { - top: 4px; - border-top-color: #ccc -} - -.react-datepicker__navigation--years-previous:hover { - border-top-color: #b3b2b2 -} - -.react-datepicker__navigation--years-upcoming { - top: -4px; - border-bottom-color: #ccc -} - -.react-datepicker__navigation--years-upcoming:hover { - border-bottom-color: #b3b2b2 -} - -.react-datepicker__month-container { - display: inline; - float: left -} - -.react-datepicker__month { - margin: .4rem; - text-align: center -} - -.react-datepicker__week-number { - color: #ccc; - display: inline-block; - width: 1.7rem; - line-height: 1.7rem; - text-align: center; - margin: .166rem -} - -.react-datepicker__week-number.react-datepicker__week-number--clickable { - cursor: pointer -} - -.react-datepicker__week-number.react-datepicker__week-number--clickable:hover { - border-radius: .3rem; - background-color: #f0f0f0 -} - -.react-datepicker__day,.react-datepicker__day-name { - color: #000; - display: inline-block; - width: 1.7rem; - line-height: 1.7rem; - text-align: center; - margin: .166rem -} - -.react-datepicker__day { - cursor: pointer -} - -.react-datepicker__day:hover { - border-radius: .3rem; - background-color: #f0f0f0 -} - -.react-datepicker__day--today { - font-weight: 700 -} - -.react-datepicker__day--highlighted { - border-radius: .3rem; - background-color: #3dcc4a; - color: #fff -} - -.react-datepicker__day--highlighted:hover { - background-color: #32be3f -} - -.react-datepicker__day--highlighted-custom-1 { - color: #f0f -} - -.react-datepicker__day--highlighted-custom-2 { - color: green -} - -.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected { - border-radius: .3rem; - background-color: #216ba5; - color: #fff -} - -.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover { - background-color: #1d5d90 -} - -.react-datepicker__day--keyboard-selected { - border-radius: 0; - background-color: var(--blurple); - color: #fff -} - -.react-datepicker__day--keyboard-selected:hover { - background-color: #1d5d90 -} - -.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { - background-color: rgba(33,107,165,.5) -} - -.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { - background-color: #f0f0f0; - color: #000 -} - -.react-datepicker__day--disabled { - cursor: default; - color: #ccc -} - -.react-datepicker__day--disabled:hover { - background-color: transparent -} - -.react-datepicker__input-container { - position: relative; - display: inline-block -} - -.react-datepicker__month-read-view,.react-datepicker__year-read-view { - border: 1px solid transparent; - border-radius: .3rem -} - -.react-datepicker__month-read-view:hover,.react-datepicker__year-read-view:hover { - cursor: pointer -} - -.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow { - border-top-color: #b3b2b2 -} - -.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { - border-top-color: #ccc; - float: right; - margin-left: 20px; - top: 8px; - position: relative; - border-width: .45rem -} - -.react-datepicker__month-dropdown,.react-datepicker__year-dropdown { - background-color: #f0f0f0; - position: absolute; - width: 50%; - left: 25%; - top: 30px; - z-index: 1; - text-align: center; - border-radius: .3rem; - border: 1px solid #aeaeae -} - -.react-datepicker__month-dropdown:hover,.react-datepicker__year-dropdown:hover { - cursor: pointer -} - -.react-datepicker__month-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable { - height: 150px; - overflow-y: scroll -} - -.react-datepicker__month-option,.react-datepicker__year-option { - line-height: 20px; - width: 100%; - display: block; - margin-left: auto; - margin-right: auto -} - -.react-datepicker__month-option:first-of-type,.react-datepicker__year-option:first-of-type { - border-top-left-radius: .3rem; - border-top-right-radius: .3rem -} - -.react-datepicker__month-option:last-of-type,.react-datepicker__year-option:last-of-type { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-bottom-left-radius: .3rem; - border-bottom-right-radius: .3rem -} - -.react-datepicker__month-option:hover,.react-datepicker__year-option:hover { - background-color: #ccc -} - -.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming { - border-bottom-color: #b3b2b2 -} - -.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous { - border-top-color: #b3b2b2 -} - -.react-datepicker__month-option--selected,.react-datepicker__year-option--selected { - position: absolute; - left: 15px -} - -.react-datepicker__close-icon { - background-color: transparent; - border: 0; - cursor: pointer; - display: inline-block; - height: 0; - outline: 0; - padding: 0; - vertical-align: middle -} - -.react-datepicker__close-icon:after { - background-color: #216ba5; - border-radius: 50%; - bottom: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #fff; - content: "\D7"; - cursor: pointer; - font-size: 12px; - height: 16px; - width: 16px; - line-height: 1; - margin: -8px auto 0; - padding: 2px; - position: absolute; - right: 7px; - text-align: center; - top: 50% -} - -.react-datepicker__today-button { - background: #f0f0f0; - border-top: 1px solid #aeaeae; - cursor: pointer; - text-align: center; - font-weight: 700; - padding: 5px 0; - clear: left -} - -.react-datepicker__portal { - position: fixed; - width: 100vw; - height: 100vh; - background-color: rgba(0,0,0,.8); - left: 0; - top: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - z-index: 2147483647 -} - -.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name { - width: 3rem; - line-height: 3rem -} - -@media (max-height: 550px),(max-width:400px) { - .react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name { - width:2rem; - line-height: 2rem - } -} - -.react-datepicker__portal .react-datepicker__current-month { - font-size: 1.44rem -} - -.react-datepicker__portal .react-datepicker__navigation { - border: .81rem solid transparent -} - -.react-datepicker__portal .react-datepicker__navigation--previous { - border-right-color: #ccc -} - -.react-datepicker__portal .react-datepicker__navigation--previous:hover { - border-right-color: #b3b2b2 -} - -.react-datepicker__portal .react-datepicker__navigation--next { - border-left-color: #ccc -} - -.react-datepicker__portal .react-datepicker__navigation--next:hover { - border-left-color: #b3b2b2 -} - -.lc-calendarPicker { - min-width: 320px -} - -.lc-calendarPicker button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; -} - -.lc-calendarPicker .react-datepicker { - border: none; - padding: 20px -} - -.lc-calendarPicker .react-datepicker__month-container { - width: 300px -} - -.lc-calendarPicker .react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day--selected,.lc-calendarPicker .react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month--selected { - border-radius: 0 -} - -.lc-calendarPicker .react-datepicker__header { - padding-top: 0; - border-bottom: 0 -} - -.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month { - margin: 0 0 10px; - padding: 0 0 20px; - border-bottom: 1px solid; - font-size: 13px; - line-height: 20px; - font-weight: 600; - text-transform: uppercase; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - -.lc-calendarPicker .react-datepicker-year-header { - margin-bottom: 24px -} - -.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous { - top: 20px; - left: 20px; - width: 18px; - height: 18px; - border: 1px solid; - border-radius: 2px; - background-repeat: no-repeat; - background-size: 6px 12px; - background-position: 50%; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - font-size: 0 -} - -.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next { - left: auto; - right: 20px; - -webkit-transform: rotate(0deg); - transform: rotate(0deg) -} - -.lc-calendarPicker .react-datepicker__month { - margin: 0 -} - -.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:first-of-type { - border-radius: 3px 0 0 -} - -.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:last-of-type { - border-radius: 0 3px 0 0 -} - -.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day { - border-bottom: 1px solid #dcddde -} - -.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:first-of-type { - border-radius: 0 0 0 3px -} - -.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:last-of-type { - border-radius: 0 0 3px -} - -.lc-calendarPicker .react-datepicker__week>.react-datepicker__day:last-of-type { - border-right: 1px solid -} - -.lc-calendarPicker .react-datepicker__day-names { - margin-bottom: 10px -} - -.lc-calendarPicker .react-datepicker__day-name { - width: 40px; - font-size: 13px; - font-weight: 500; - line-height: 1em; - text-transform: uppercase; - margin: 0 -} - -.lc-calendarPicker .react-datepicker__day { - position: relative; - -webkit-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - width: 40px; - height: 40px; - line-height: 40px; - border-top: 1px solid; - border-left: 1px solid -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover { - border-radius: 0 -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected { - background: none; - border-radius: 0 -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 3px -} - -.lc-calendarPicker .react-datepicker__monthPicker { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column -} - -.lc-calendarPicker .react-datepicker__month-wrapper { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto -} - -.lc-calendarPicker .react-datepicker__month-wrapper:last-child .react-datepicker__month-text { - border-bottom: 1px solid #18191c -} - -.lc-calendarPicker .react-datepicker__month-text { - position: relative; - -webkit-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - width: 100%; - height: 56px; - line-height: 56px; - border-top: 1px solid; - border-left: 1px solid -} - -.lc-calendarPicker .react-datepicker__month-text:last-child { - border-right: 1px solid -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover { - border-radius: 0 -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected { - background: none; - border-radius: 0 -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 3px -} - -.lc-calendarPicker .react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day--outside-month { - font-weight: 500 -} - -.lc-calendarPicker .react-datepicker__month--in-range:not(.react-datepicker__month--in-selecting-range):not(.react-datepicker__month--disabled),.lc-calendarPicker .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__day--disabled) { - color: #f6f6f7 -} - -.lc-calendarPicker .react-datepicker { - background-color: #36393f; - -webkit-box-shadow: 0 0 10px #18191c,0 2px 2px #202225; - box-shadow: 0 0 10px #18191c,0 2px 2px #202225 -} - -.lc-calendarPicker .react-datepicker__header { - background-color: #36393f; - border-color: rgba(24,25,28,.2) -} - -.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month { - border-bottom-color: rgba(24,25,28,.3); - color: #f6f6f7 -} - -.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous { - border-color: #18191c; - background-image: url(/assets/7619529e87dad31fd2ae83d9b9583e49.svg) -} - -.lc-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day { - border-bottom-color: #18191c -} - -.lc-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type { - border-right-color: #18191c -} - -.lc-calendarPicker .react-datepicker__day-name { - color: rgba(246,246,247,.6) -} - -.lc-calendarPicker .react-datepicker__day { - border-top-color: #18191c; - border-left-color: #18191c; - color: #f6f6f7 -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover { - color: #fff; - background-color: #7289da -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover { - background-color: #2f3136; - color: rgba(246,246,247,.3) -} - -.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after { - background-color: #7289da -} - -.lc-calendarPicker .react-datepicker__month-text { - border-color: #18191c; - color: #f6f6f7; - cursor: pointer -} - -.lc-calendarPicker .react-datepicker__month-text:last-child { - border-right-color: #18191c -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover { - color: #fff; - background-color: #7289da -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled:hover { - background-color: #2f3136; - color: rgba(246,246,247,.3) -} - -.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after { - background-color: #7289da -} - -.lc-calendarPicker .react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month--outside-month { - background-color: #2f3136; - color: rgba(246,246,247,.3); - cursor: unset +/** Lightcord Custom */ +.lc-tabWrapper { + position: relative; + overflow: hidden; + height: 100%; + background: var(--background-floating); + border: 1px solid var(--deprecated-text-input-border-hover); + border-radius: 5px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.lc-tabnav { + top: 0; + border-bottom: 1px solid var(--deprecated-text-input-border-hover); + padding: 0 4px; + width: 100%; + -ms-flex-item-align: start; + align-self: flex-start; + position: relative; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.lc-tab { + /*border-radius: 8px;*/ + overflow: hidden; + position: relative; + margin: 0 auto; + width: 100%; + max-width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 40px; +} +.theme-dark .lc-tab-box-shadow { + -webkit-box-shadow: 0 0 20px 2px rgba(4,4,5,.3); + box-shadow: 0 0 20px 2px rgba(4,4,5,.3); +} +.theme-light .lc-tab-box-shadow { + -webkit-box-shadow: 0 0 5px 2px rgba(4,4,5,.1); + box-shadow: 0 0 5px 2px rgba(4,4,5,.1); +} +.lc-navItem { + padding: 14px 20px; + position: relative; + font-weight: 500; + -webkit-transform: color .125s; + transform: color .125s; + cursor: pointer; + max-height: 100%; +} +.lc-navItem::after { + position: absolute; + bottom: 0; + left: 20px; + right: 20px; + background: #7289da; + -webkit-box-shadow: 0 -4px 12px 0 #7289da; + box-shadow: 0 -4px 12px 0 #7289da; + content: ""; + height: 2px; + -webkit-transition: -webkit-transform .125s; + transition: -webkit-transform .125s; + transition: transform .125s; + transition: transform .125s,-webkit-transform .125s; +} +.lc-navItemActive { + color: var(--interactive-active); +} +.lc-navItemActive::after { + -webkit-transform: none; + transform: none; +} +.lc-navItemInactive { + color: var(--interactive-normal); +} +.lc-navItemInactive:hover { + color: var(--interactive-hover) +} +.lc-navItemInactive::after { + -webkit-transform: translateY(16px); + transform: translateY(16px); +} +.lc-fadeOverlay { + height: 20%; + left: 0; + bottom: 0; + background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(24,25,28,0)),color-stop(70%,#18191c),to(#18191c)); + background-image: linear-gradient(180deg,rgba(24,25,28,0),#18191c 70%,#18191c); + z-index: 900; + position: absolute; + width: 100%; +} +.lc-userPopout { + width: 250px; + border-radius: 5px; + overflow: hidden; + position: relative; + -webkit-box-shadow: 0 0 20px 2px rgba(4,4,5,.3); + box-shadow: 0 0 20px 2px rgba(4,4,5,.3); + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 40px auto; +} +.lc-link-disabled-span:hover { + cursor: pointer; +} + +/** Alert Box */ +.lc-alert-box { + margin: 20px 0; + padding: 10px; + border-radius: 5px; + font-size: 14px; + font-weight: 300; + line-height: 22px; +} +.lc-alert-box strong { + font-weight: 900 +} +.lc-alert-box span { + color: hsla(0,0%,100%,.9); + margin: 0!important +} +.lc-alert-box.lc-alert-box-warn { + background: rgba(250,166,26,.1); + border: 2px solid rgba(250,166,26,.5); +} +.lc-alert-box.lc-alert-box-info { + background: rgba(114,137,218,.1); + border: 2px solid rgba(114,137,218,.5); +} +.lc-alert-box.lc-alert-box-danger { + background: rgba(240,71,71,.1); + border: 2px solid rgba(240,71,71,.5); +} +.lc-alert-box.lc-alert-box-error { + background: rgba(240,71,71,.1); + border: 2px solid rgba(240,71,71,.5); +} +.lc-alert-box.lc-alert-box-success { + background: rgba(67,181,129,.1); + border: 2px solid rgba(67,181,129,.5) +} +.lc-blockquote > div { + margin-bottom: 0!important; +} + +/** Text */ +/*cases*/ +.lc-text-casesUppercase { + text-transform: uppercase +} + +.lc-text-casesLowercase { + text-transform: lowercase +} +/*weight*/ +.lc-text-weightLight { + font-weight: 300 +} + +.lc-text-weightNormal { + font-weight: 400 +} + +.lc-text-weightMedium { + font-weight: 500 +} + +.lc-text-weightSemibold { + font-weight: 600 +} + +.lc-text-weightBold { + font-weight: 700 +} +/*sizes*/ +.lc-text-size12 { + font-size: 12px; +} +.lc-text-size14 { + font-size: 14px; +} +.lc-text-size16 { + font-size: 16px; +} +.lc-text-size20 { + font-size: 20px; +} +.lc-text-size28 { + font-size: 28px; +} +/*height*/ +.lc-text-height16 { + line-height: 16px +} +.lc-text-height20 { + line-height: 20px +} +.lc-text-height26 { + line-height: 26px +} +.lc-text-height34 { + line-height: 34px +} +/*family*/ +.lc-text-primary { + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif +} +.lc-text-code { + font-family: SourceCodePro,Whitney,Helvetica Neue,Helvetica,Arial,sans-serif +} +/*selectable*/ +.lc-text-selectable { + cursor: text; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text +} + +/** DateRange */ +.lc-dateWrapper { + padding-top: 8px +} + + +/*CalendarPicker*/ +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { + margin-left: -8px; + position: absolute +} + +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before { + -webkit-box-sizing: content-box; + box-sizing: content-box; + position: absolute; + border: 8px solid transparent; + height: 0; + width: 1px +} + +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before { + content: ""; + z-index: -1; + border-width: 8px; + left: -8px; + border-bottom-color: #aeaeae +} + +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { + top: 0; + margin-top: -8px +} + +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before { + border-top: none; + border-bottom-color: #f0f0f0 +} + +.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before { + top: -1px; + border-bottom-color: #aeaeae +} + +.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { + bottom: 0; + margin-bottom: -8px +} + +.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before { + border-bottom: none; + border-top-color: #fff +} + +.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before { + bottom: -1px; + border-top-color: #aeaeae +} + +.react-datepicker-wrapper { + display: inline-block +} + +.react-datepicker { + font-size: .8rem; + background-color: #fff; + color: #000; + border: 1px solid #aeaeae; + border-radius: .3rem; + display: inline-block; + position: relative +} + +.react-datepicker__triangle { + position: absolute; + left: 50px +} + +.react-datepicker-popper { + z-index: 1 +} + +.react-datepicker-popper[data-placement^=bottom] { + margin-top: 10px +} + +.react-datepicker-popper[data-placement^=top] { + margin-bottom: 6px +} + +.react-datepicker-popper[data-placement^=right] { + margin-left: 8px +} + +.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle { + left: auto; + right: 42px +} + +.react-datepicker-popper[data-placement^=left] { + margin-right: 8px +} + +.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle { + left: 42px; + right: auto +} + +.react-datepicker__header { + text-align: center; + background-color: #f0f0f0; + border-bottom: 1px solid #aeaeae; + border-top-left-radius: .3rem; + border-top-right-radius: .3rem; + padding-top: 8px; + position: relative +} + +.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select { + display: inline-block; + margin: 0 2px +} + +.react-datepicker__current-month { + margin-top: 0; + color: #000; + font-weight: 700; + font-size: .944rem +} + +.react-datepicker__navigation { + line-height: 1.7rem; + text-align: center; + cursor: pointer; + position: absolute; + top: 10px; + width: 0; + border: .45rem solid transparent; + z-index: 1 +} + +.react-datepicker__navigation--previous { + left: 10px; + border-right-color: #ccc +} + +.react-datepicker__navigation--previous:hover { + border-right-color: #b3b2b2 +} + +.react-datepicker__navigation--next { + right: 10px; + border-left-color: #ccc +} + +.react-datepicker__navigation--next:hover { + border-left-color: #b3b2b2 +} + +.react-datepicker__navigation--years { + position: relative; + top: 0; + display: block; + margin-left: auto; + margin-right: auto +} + +.react-datepicker__navigation--years-previous { + top: 4px; + border-top-color: #ccc +} + +.react-datepicker__navigation--years-previous:hover { + border-top-color: #b3b2b2 +} + +.react-datepicker__navigation--years-upcoming { + top: -4px; + border-bottom-color: #ccc +} + +.react-datepicker__navigation--years-upcoming:hover { + border-bottom-color: #b3b2b2 +} + +.react-datepicker__month-container { + display: inline; + float: left +} + +.react-datepicker__month { + margin: .4rem; + text-align: center +} + +.react-datepicker__week-number { + color: #ccc; + display: inline-block; + width: 1.7rem; + line-height: 1.7rem; + text-align: center; + margin: .166rem +} + +.react-datepicker__week-number.react-datepicker__week-number--clickable { + cursor: pointer +} + +.react-datepicker__week-number.react-datepicker__week-number--clickable:hover { + border-radius: .3rem; + background-color: #f0f0f0 +} + +.react-datepicker__day,.react-datepicker__day-name { + color: #000; + display: inline-block; + width: 1.7rem; + line-height: 1.7rem; + text-align: center; + margin: .166rem +} + +.react-datepicker__day { + cursor: pointer +} + +.react-datepicker__day:hover { + border-radius: .3rem; + background-color: #f0f0f0 +} + +.react-datepicker__day--today { + font-weight: 700 +} + +.react-datepicker__day--highlighted { + border-radius: .3rem; + background-color: #3dcc4a; + color: #fff +} + +.react-datepicker__day--highlighted:hover { + background-color: #32be3f +} + +.react-datepicker__day--highlighted-custom-1 { + color: #f0f +} + +.react-datepicker__day--highlighted-custom-2 { + color: green +} + +.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected { + border-radius: .3rem; + background-color: #216ba5; + color: #fff +} + +.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover { + background-color: #1d5d90 +} + +.react-datepicker__day--keyboard-selected { + border-radius: 0; + background-color: var(--blurple); + color: #fff +} + +.react-datepicker__day--keyboard-selected:hover { + background-color: #1d5d90 +} + +.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { + background-color: rgba(33,107,165,.5) +} + +.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { + background-color: #f0f0f0; + color: #000 +} + +.react-datepicker__day--disabled { + cursor: default; + color: #ccc +} + +.react-datepicker__day--disabled:hover { + background-color: transparent +} + +.react-datepicker__input-container { + position: relative; + display: inline-block +} + +.react-datepicker__month-read-view,.react-datepicker__year-read-view { + border: 1px solid transparent; + border-radius: .3rem +} + +.react-datepicker__month-read-view:hover,.react-datepicker__year-read-view:hover { + cursor: pointer +} + +.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow { + border-top-color: #b3b2b2 +} + +.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow { + border-top-color: #ccc; + float: right; + margin-left: 20px; + top: 8px; + position: relative; + border-width: .45rem +} + +.react-datepicker__month-dropdown,.react-datepicker__year-dropdown { + background-color: #f0f0f0; + position: absolute; + width: 50%; + left: 25%; + top: 30px; + z-index: 1; + text-align: center; + border-radius: .3rem; + border: 1px solid #aeaeae +} + +.react-datepicker__month-dropdown:hover,.react-datepicker__year-dropdown:hover { + cursor: pointer +} + +.react-datepicker__month-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable { + height: 150px; + overflow-y: scroll +} + +.react-datepicker__month-option,.react-datepicker__year-option { + line-height: 20px; + width: 100%; + display: block; + margin-left: auto; + margin-right: auto +} + +.react-datepicker__month-option:first-of-type,.react-datepicker__year-option:first-of-type { + border-top-left-radius: .3rem; + border-top-right-radius: .3rem +} + +.react-datepicker__month-option:last-of-type,.react-datepicker__year-option:last-of-type { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-bottom-left-radius: .3rem; + border-bottom-right-radius: .3rem +} + +.react-datepicker__month-option:hover,.react-datepicker__year-option:hover { + background-color: #ccc +} + +.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming { + border-bottom-color: #b3b2b2 +} + +.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous { + border-top-color: #b3b2b2 +} + +.react-datepicker__month-option--selected,.react-datepicker__year-option--selected { + position: absolute; + left: 15px +} + +.react-datepicker__close-icon { + background-color: transparent; + border: 0; + cursor: pointer; + display: inline-block; + height: 0; + outline: 0; + padding: 0; + vertical-align: middle +} + +.react-datepicker__close-icon:after { + background-color: #216ba5; + border-radius: 50%; + bottom: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #fff; + content: "\D7"; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 1; + margin: -8px auto 0; + padding: 2px; + position: absolute; + right: 7px; + text-align: center; + top: 50% +} + +.react-datepicker__today-button { + background: #f0f0f0; + border-top: 1px solid #aeaeae; + cursor: pointer; + text-align: center; + font-weight: 700; + padding: 5px 0; + clear: left +} + +.react-datepicker__portal { + position: fixed; + width: 100vw; + height: 100vh; + background-color: rgba(0,0,0,.8); + left: 0; + top: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + z-index: 2147483647 +} + +.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name { + width: 3rem; + line-height: 3rem +} + +@media (max-height: 550px),(max-width:400px) { + .react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name { + width:2rem; + line-height: 2rem + } +} + +.react-datepicker__portal .react-datepicker__current-month { + font-size: 1.44rem +} + +.react-datepicker__portal .react-datepicker__navigation { + border: .81rem solid transparent +} + +.react-datepicker__portal .react-datepicker__navigation--previous { + border-right-color: #ccc +} + +.react-datepicker__portal .react-datepicker__navigation--previous:hover { + border-right-color: #b3b2b2 +} + +.react-datepicker__portal .react-datepicker__navigation--next { + border-left-color: #ccc +} + +.react-datepicker__portal .react-datepicker__navigation--next:hover { + border-left-color: #b3b2b2 +} + +.lc-calendarPicker { + min-width: 320px +} + +.lc-calendarPicker button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; +} + +.lc-calendarPicker .react-datepicker { + border: none; + padding: 20px +} + +.lc-calendarPicker .react-datepicker__month-container { + width: 300px +} + +.lc-calendarPicker .react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day--selected,.lc-calendarPicker .react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month--selected { + border-radius: 0 +} + +.lc-calendarPicker .react-datepicker__header { + padding-top: 0; + border-bottom: 0 +} + +.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month { + margin: 0 0 10px; + padding: 0 0 20px; + border-bottom: 1px solid; + font-size: 13px; + line-height: 20px; + font-weight: 600; + text-transform: uppercase; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.lc-calendarPicker .react-datepicker-year-header { + margin-bottom: 24px +} + +.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous { + top: 20px; + left: 20px; + width: 18px; + height: 18px; + border: 1px solid; + border-radius: 2px; + background-repeat: no-repeat; + background-size: 6px 12px; + background-position: 50%; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + font-size: 0 +} + +.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next { + left: auto; + right: 20px; + -webkit-transform: rotate(0deg); + transform: rotate(0deg) +} + +.lc-calendarPicker .react-datepicker__month { + margin: 0 +} + +.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:first-of-type { + border-radius: 3px 0 0 +} + +.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:last-of-type { + border-radius: 0 3px 0 0 +} + +.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day { + border-bottom: 1px solid #dcddde +} + +.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:first-of-type { + border-radius: 0 0 0 3px +} + +.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:last-of-type { + border-radius: 0 0 3px +} + +.lc-calendarPicker .react-datepicker__week>.react-datepicker__day:last-of-type { + border-right: 1px solid +} + +.lc-calendarPicker .react-datepicker__day-names { + margin-bottom: 10px +} + +.lc-calendarPicker .react-datepicker__day-name { + width: 40px; + font-size: 13px; + font-weight: 500; + line-height: 1em; + text-transform: uppercase; + margin: 0 +} + +.lc-calendarPicker .react-datepicker__day { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 40px; + height: 40px; + line-height: 40px; + border-top: 1px solid; + border-left: 1px solid +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover { + border-radius: 0 +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected { + background: none; + border-radius: 0 +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 3px +} + +.lc-calendarPicker .react-datepicker__monthPicker { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column +} + +.lc-calendarPicker .react-datepicker__month-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto +} + +.lc-calendarPicker .react-datepicker__month-wrapper:last-child .react-datepicker__month-text { + border-bottom: 1px solid #18191c +} + +.lc-calendarPicker .react-datepicker__month-text { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; + height: 56px; + line-height: 56px; + border-top: 1px solid; + border-left: 1px solid +} + +.lc-calendarPicker .react-datepicker__month-text:last-child { + border-right: 1px solid +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover { + border-radius: 0 +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected { + background: none; + border-radius: 0 +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 3px +} + +.lc-calendarPicker .react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day--outside-month { + font-weight: 500 +} + +.lc-calendarPicker .react-datepicker__month--in-range:not(.react-datepicker__month--in-selecting-range):not(.react-datepicker__month--disabled),.lc-calendarPicker .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__day--disabled) { + color: #f6f6f7 +} + +.lc-calendarPicker .react-datepicker { + background-color: #36393f; + -webkit-box-shadow: 0 0 10px #18191c,0 2px 2px #202225; + box-shadow: 0 0 10px #18191c,0 2px 2px #202225 +} + +.lc-calendarPicker .react-datepicker__header { + background-color: #36393f; + border-color: rgba(24,25,28,.2) +} + +.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month { + border-bottom-color: rgba(24,25,28,.3); + color: #f6f6f7 +} + +.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous { + border-color: #18191c; + background-image: url(/assets/7619529e87dad31fd2ae83d9b9583e49.svg) +} + +.lc-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day { + border-bottom-color: #18191c +} + +.lc-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type { + border-right-color: #18191c +} + +.lc-calendarPicker .react-datepicker__day-name { + color: rgba(246,246,247,.6) +} + +.lc-calendarPicker .react-datepicker__day { + border-top-color: #18191c; + border-left-color: #18191c; + color: #f6f6f7 +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover { + color: #fff; + background-color: #7289da +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover { + background-color: #2f3136; + color: rgba(246,246,247,.3) +} + +.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after { + background-color: #7289da +} + +.lc-calendarPicker .react-datepicker__month-text { + border-color: #18191c; + color: #f6f6f7; + cursor: pointer +} + +.lc-calendarPicker .react-datepicker__month-text:last-child { + border-right-color: #18191c +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover { + color: #fff; + background-color: #7289da +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled:hover { + background-color: #2f3136; + color: rgba(246,246,247,.3) +} + +.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after { + background-color: #7289da +} + +.lc-calendarPicker .react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month--outside-month { + background-color: #2f3136; + color: rgba(246,246,247,.3); + cursor: unset } \ No newline at end of file diff --git a/modules/discord_desktop_core/core/app/tabs/controls.css b/modules/discord_desktop_core/core/app/tabs/controls.css index 2f7625a..865f52b 100644 --- a/modules/discord_desktop_core/core/app/tabs/controls.css +++ b/modules/discord_desktop_core/core/app/tabs/controls.css @@ -1,7 +1,7 @@ - -#title-bar-btns { - -webkit-app-region: no-drag; - position: fixed; - top: 0px; - right: 6px; + +#title-bar-btns { + -webkit-app-region: no-drag; + position: fixed; + top: 0px; + right: 6px; } \ No newline at end of file