472 lines
15 KiB
CSS
472 lines
15 KiB
CSS
/**
|
|
* @name GitHub Dark
|
|
* @version 1.0.0
|
|
* @description A theme based off of the GitHub Dark theme.
|
|
* @author Sango
|
|
* @source https://github.com/moistp1ckle/GitHub_Dark
|
|
* @website https://github.com/moistp1ckle
|
|
**/
|
|
|
|
:root {
|
|
/* --------- BASE THEME --------- */
|
|
--blurple-replace: #7289DA;
|
|
--background-primary: rgb(9, 12, 16);
|
|
--background-secondary: rgb(13, 17, 23);
|
|
--background-floating: rgb(22, 27, 34);
|
|
--background-secondary-alt: var(--background-floating);
|
|
--background-tertiary: rgb(7, 10, 16);
|
|
--background-accent: rgb(17, 29, 46);
|
|
--userarea-background: var(--background-tertiary);
|
|
--header-primary: rgb(240, 246, 252);
|
|
--header-secondary: rgb(139, 148, 158);
|
|
--elevation-low: 0 1px 0 rgba(40, 40, 50, 0.2), 0 1.5px 0 rgba(60, 60, 70, 0.05), 0 2px 0 rgba(40, 40, 50, 0.05);
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
|
|
--channels-default: rgb(139, 148, 158);
|
|
--channeltextarea-background: rgb(7, 10, 16);
|
|
--voice-color: var(--brand-experiment);
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
|
|
--activity-card-background: #0f0f0f;
|
|
--interactive-normal: rgb(139, 148, 158);
|
|
--interactive-hover: #dcddde;
|
|
--interactive-active: #fff;
|
|
--interactive-muted: rgb(76, 82, 88);
|
|
--background-modifier-hover: rgba(33, 38, 45, 0.26);
|
|
--background-modifier-active: rgba(33, 38, 45, 0.44);
|
|
--background-modifier-selected: rgba(33, 38, 45, 0.52);
|
|
--background-modifier-accent: rgb(33, 38, 45);
|
|
--text-link: rgb(88, 166, 255);
|
|
--text-normal: rgb(201, 209, 217);
|
|
--text-muted: rgb(139, 148, 158);
|
|
--deprecated-panel-background: #2a2f29;
|
|
--deprecated-card-bg: var(--background-secondary);
|
|
--deprecated-card-editable-bg: var(--background-secondary);
|
|
--deprecated-store-bg: #36393f;
|
|
--deprecated-quickswitcher-input-background: #72767d;
|
|
--deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
|
|
--deprecated-text-input-bg: var(--channeltextarea-background);
|
|
--deprecated-text-input-border: var(--border-color);
|
|
--deprecated-text-input-border-hover: #040405;
|
|
--deprecated-text-input-border-disabled: #202225;
|
|
--deprecated-text-input-prefix: #dcddde;
|
|
--background-accent-1: rgb(15, 15, 15, 0.1);
|
|
--background-accent-3: rgb(15, 15, 15, 0.3);
|
|
--background-floating-2: rgba(0, 0, 0, 0.2);
|
|
--border: 1px solid rgb(48, 54, 61);
|
|
--border-color: rgb(48, 54, 61);
|
|
--blurple-border: 1px solid rgb(31, 47, 71);
|
|
--border-radius: 5px;
|
|
--divide-color: var(--brand-experiment);
|
|
--brand-experiment: rgb(88, 101, 242);
|
|
--deprecated-quickswitcher-input-background: var(--channeltextarea-background)
|
|
}
|
|
|
|
.theme-light {
|
|
--background-secondary: rgb(13, 17, 23);
|
|
--header-primary: rgb(240, 246, 252);
|
|
--header-secondary: rgb(139, 148, 158);
|
|
--background-primary: rgb(22, 27, 34);
|
|
--text-normal: rgb(201, 209, 217);
|
|
--background-floating: rgb(22, 27, 34);
|
|
--background-tertiary: transparent;
|
|
--deprecated-text-input-bg: rgb(7, 10, 16);
|
|
}
|
|
|
|
.theme-dark {
|
|
--text-positive: hsl(139, calc(var(--saturation-factor, 1)*66.8%), 58.6%);
|
|
--text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
|
|
--text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
|
|
--info-positive-text: #fff;
|
|
--info-warning-text: #fff;
|
|
--info-danger-text: #fff;
|
|
--info-help-background: hsla(197, calc(var(--saturation-factor, 1)*100%), 47.8%, 0.1);
|
|
--info-help-foreground: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
|
|
--info-help-text: #fff;
|
|
--status-warning-text: #000;
|
|
--scrollbar-thin-thumb: rgb(22, 27, 34);
|
|
--scrollbar-thin-track: transparent;
|
|
--scrollbar-auto-thumb: rgb(22, 27, 34);
|
|
--scrollbar-auto-track: rgba(17, 19, 24, 0.308);
|
|
--scrollbar-auto-scrollbar-color-thumb: rgb(22, 27, 34);
|
|
--scrollbar-auto-scrollbar-color-track: rgba(17, 19, 24, 0.308);
|
|
--elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15);
|
|
--elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
|
|
--elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16);
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
|
|
--logo-primary: rgb(240, 246, 252);
|
|
--control-brand-foreground: hsl(227, calc(var(--saturation-factor, 1)*57.9%), 77.6%);
|
|
--control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
|
|
--background-mentioned: rgba(13, 17, 23, 0.466);
|
|
--background-mentioned-hover: rgba(20, 33, 53, 0.233);
|
|
--background-message-hover: rgba(4, 4, 5, 0.07);
|
|
--activity-card-background: #202225;
|
|
--textbox-markdown-syntax: rgb(82, 89, 95);
|
|
}
|
|
|
|
.resultsGroup-r_nuzN {
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--border-radius);
|
|
border-left: var(--border);
|
|
border-right: var(--border);
|
|
}
|
|
|
|
.lookBlank-3eh9lL {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.footer-2gL1pp .lookFilled-1Gx00P.colorGrey-2DXtkV {
|
|
background-color: rgb(43, 50, 59) !important;
|
|
}
|
|
|
|
.mentioned-xhSam7:before {
|
|
background-color: var(--brand-experiment);
|
|
}
|
|
|
|
.theme-dark .emptyHintCard-2mUdMe {
|
|
background-color: var(--background-secondary-alt);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#MemberCount {
|
|
border-left: var(--border);
|
|
}
|
|
|
|
.theme-dark .contentWrapper-3WC1ID {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.divider-JfaTT5 {
|
|
--divider-color: var(--divide-color);
|
|
}
|
|
|
|
.children-19S4PO:after {
|
|
content: none
|
|
}
|
|
|
|
.theme-dark .outer-1AjyKL.interactive-3B9GmY:hover, .theme-dark .outer-1AjyKL.active-1xchHY {
|
|
background-color: var(--background-modifier-selected);
|
|
}
|
|
|
|
.theme-light .footer-2gL1pp {
|
|
box-shadow: none;
|
|
border-top: var(--border);
|
|
}
|
|
|
|
.border-Jn5IOt.speaking-B2MXPi {
|
|
-webkit-box-shadow: inset 0 0 0 2px #0FF;
|
|
box-shadow: inset 0 0 0 2px #0FF;
|
|
-webkit-animation: rainbow 3s infinite linear !important;
|
|
animation: rainbow 3s infinite linear !important;
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% {
|
|
-webkit-filter: hue-rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV {
|
|
background-color: var(--background-floating);
|
|
}
|
|
|
|
.theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV:hover {
|
|
background-color: var(--background-modifier-selected);
|
|
}
|
|
|
|
.theme-dark .container-1D34oG {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.item-26Dhrx[aria-checked=true] {
|
|
background-color: var(--background-modifier-selected);
|
|
border: var(--border);
|
|
}
|
|
|
|
.phoneField-38N1bJ, .phoneField-38N1bJ .inputField-aNPXsv {
|
|
background-color: var(--channeltextarea-background);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.option-n0icdO, .theme-dark .notDetected-33MY4s, .theme-light .notDetected-33MY4s {
|
|
background-color: var(--background-floating);
|
|
}
|
|
|
|
.container-1r6BKw.themed-ANHk51 {
|
|
background-color: var(--background-secondary);
|
|
border-top: var(--border);
|
|
border-bottom: var(--border);
|
|
}
|
|
|
|
.menu-3sdvDG {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.container-enaOkj, .messagesPopoutWrap-1MQ1bW, .role-3UN8jj:hover {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
margin: -1px;
|
|
}
|
|
|
|
.peopleListItem-2nzedh.active-rhSpJJ, .peopleListItem-2nzedh:hover {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
margin: 0 10px 0 20px;
|
|
}
|
|
|
|
.peopleListItem-2nzedh {
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.item-1tOPte, .container-2Pjhx-, .membershipDialog-rVL-t_, .listRow-1iDGel, .content-1x5b-n, .side-8zPYf6 .item-PXvHYJ, .memberRow-1wwtfV, .roleRow-30TwGe, .result-oB0z--, .container-jSV3OF, .theme-dark .lookFilled-1Gx00P.colorGrey-2DXtkV, .container-2rNpDV, .wrapper-3D2qGf, .friend-3KALPe, .item-26Dhrx {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.tertiary-aMXF0g:hover:not(.disabled-3Njyym), .secondary-dIudih:hover:not(.disabled-3Njyym) {
|
|
border: var(--border);
|
|
}
|
|
|
|
.actionButton-uPB8Fs:hover, .listRow-1iDGel:hover {
|
|
border: var(--border);
|
|
}
|
|
|
|
.actionButton-uPB8Fs, .item-26Dhrx, .listRow-1iDGel, .side-8zPYf6 .item-PXvHYJ, .memberRow-1wwtfV {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.theme-dark .userSettingsVoice-iwdUCU .previewOverlay-2O7_KC {
|
|
background-color: var(--background-secondary);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.searchBar-3dMhjb {
|
|
border: var(--border);
|
|
padding: 0;
|
|
}
|
|
|
|
.searchBar-6Kv8R2 .searchBarComponent-32dTOx, .bd-select, .bd-select:hover, .bd-select.menu-open {
|
|
border: var(--border)
|
|
}
|
|
|
|
.panels-j1Uci_ {
|
|
border-top: var(--border);
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.topPill-30KHOu .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.topPill-30KHOu .item-PXvHYJ, .friend-3KALPe, .selectable-3dP3y-, .roleRow-30TwGe {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.sidebar-2K8pFh {
|
|
border-left: var(--border);
|
|
border-top: var(--border);
|
|
border-right: var(--border);
|
|
}
|
|
|
|
.theme-dark .root-1gCeng, .theme-dark .popoutList-T9CKZQ {
|
|
background-color: var(--background-secondary);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.members-1998pB {
|
|
border-left: var(--border);
|
|
}
|
|
|
|
.userPopout-xaxa6l {
|
|
border: var(--border);
|
|
}
|
|
|
|
.theme-dark .friendSelected-1sa4bG {
|
|
border: var(--border);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.theme-dark .selectableItem-1MP3MQ:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.theme-dark .footer-2gL1pp {
|
|
background-color: var(--background-floating);
|
|
}
|
|
|
|
.theme-dark .container-1nZlH6 {
|
|
background-color: var(--channeltextarea-background);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.inputDefault-_djjkz.input-cIJ7To.multiInputField-3K361B {
|
|
border: none !important;
|
|
}
|
|
|
|
.theme-dark .codeRedemptionRedirect-1wVR4b {
|
|
background-color: var(--background-secondary);
|
|
border-color: var(--border-color);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.bd-addon-list .bd-addon-card {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.bd-select .bd-select-options {
|
|
border-left: var(--border);
|
|
border-right: var(--border);
|
|
border-bottom: var(--border);
|
|
}
|
|
|
|
.searchHeader-2XoQg7 {
|
|
background-color: var(--background-secondary-alt);
|
|
border-bottom: var(--border);
|
|
}
|
|
|
|
.theme-dark .headerExpanded-CUEwZ5, .checklistHeader-1KWcEY, .header-2Y0-A- {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.theme-dark .pageWrapper-1PgVDX {
|
|
border-top: var(--border);
|
|
}
|
|
|
|
.panels-j1Uci_, .theme-dark .changeDetails-bk98pu, .theme-dark .tierBody-16Chc9, .theme-dark .headerClickable-2IVFo9, .theme-dark .headerDefault-1wrJcN {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.bf-toolbar::before {
|
|
background-color: var(--background-secondary) !important;
|
|
}
|
|
|
|
.option-3KoAJB[aria-selected=true] {
|
|
background-color: var(--background-modifier-selected);
|
|
}
|
|
|
|
.cardWrapper-2Min21, .cardPrimaryOutline-29Ujqw, .theme-dark .tierHeaderUnlocked-3lTDnP, .theme-dark .tierBody-3aUxuc, .theme-dark .pageWrapper-1PgVDX {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.container-cMG81i, .theme-dark .copyInput-2rOSt7, .searchPage-3GKAdT .search-1iTphC .searchBox-2_mAlO {
|
|
background-color: var(--channeltextarea-background);
|
|
}
|
|
|
|
.channelTextArea-rNsIhG, .detailsBlock-FoDTGA, .container-UC8Ug1, .bf-toolbar::before, .tier-12tKuZ, .ctaBar-2UsjF2, .theme-dark .uploadModal-2ifh8j, .container-2Yth53, .wrapper-1rqM3x, .searchPage-3GKAdT .search-1iTphC .searchBox-2_mAlO, .theme-dark .card-3DjzTQ, .getStartedWrapper-2AGgRZ, .settingsFormItem-103g1I, .enableContainer-2DIT9Q, .container-2w0lh0, .checklistContainer-mFJZEJ, .featureCard-1RR4Tl, .developerPortalCtaWrapper-2XNafh, .upsellContainer-L9xv7w, .analyticsCard-qckucw, .descriptionBox-1EKQKL, .theme-dark .copyInput-2rOSt7, .wrapper-18yWki, .theme-dark .auditLog-3jNbM6, .theme-dark .tierHeaderUnlocked-3lTDnP, .side-8zPYf6 .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ, .topPill-30KHOu .themed-OHr7kt.selected-3s45Ha.item-PXvHYJ, .previewContainer-1KQDJS, .memberRow-1wwtfV:hover, .roleRow-30TwGe:hover:not(.roleRowDisableHover-1HiqqT), .container-cMG81i, .container-_phMUq, .popout-VcNcHB, .lookFilled-22uAsw.select-2fjwPw, .searchResult-9tQ1uo, .background-1QDuV2, .cardPrimaryOutline-29Ujqw, .accountBtn-2Nozo3 .accountBtnInner-sj5jLs, .connection-1fbD7X, .accountList-33MS45, .theme-dark .feature-2w65J5, .activeGame-14JI7o, .cardWrapper-2Min21, .guild-Hq0WWA, .preview-2nSL_2, .previewMessage-1ZN7YG, .cardPrimary-1Hv-to, .cardPrimaryEditable-3KtE4g, .channelTextArea-2VhZ6z, #bd-editor-panel, .bd-search-wrapper, .input-cIJ7To, .messageGroupWrapper-o-Zw7G, .wrapper-1cBijl, .contentWrapper-SvZHNd, .quickswitcher-3JagVE, .input-2VB9rf, .container-2XeR5Z, .tutorial-3w5I9h, .messages-3G3erD, .messageContainer-gbhlwo, .section-2gLsgF {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.theme-dark .iconWrapper-3LVgIo {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.searchResultsWrap-3-pOjs {
|
|
border-left: var(--border);
|
|
}
|
|
|
|
.theme-dark .tierHeaderLocked-3S508x, .theme-dark .footer-3mqk7D {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.root-1gCeng, .theme-dark .uploadModal-2ifh8j {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.theme-dark .perksModal-fSYqOq {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.reaction-1hd86g .emoji {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
|
|
.embed-IeVjo6, .wrapper-35wsBm {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.container-S9SaVf {
|
|
border: var(--border) !important;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.accountBtn-2Nozo3 .accountBtnInner-sj5jLs:hover {
|
|
border: var(--border);
|
|
}
|
|
|
|
.css-gvi9bl-control, .css-gvi9bl-control:hover, .css-6fzn47-control:hover, .css-6fzn47-control, .css-17e1tep-control:hover, .css-17e1tep-control {
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--border-radius);
|
|
border: var(--border);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.css-3vaxre-menu {
|
|
border-radius: var(--border-radius);
|
|
border: var(--border);
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.theme-dark .addGamePopout-2RY8Ju {
|
|
background-color: var(--background-floating);
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.theme-dark .default-3oAQTF {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.diversitySelectorOptions-4YM-vX {
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.header-2-Imhb .tabBar-1kuXvJ .tab-ck0077.active-1MbGPa {
|
|
border: var(--blurple-border);
|
|
border-radius: var(--border-radius);
|
|
color: var(--header-primary);
|
|
margin: -1px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.navButtonActive-1MkytQ {
|
|
border: var(--blurple-border);
|
|
border-radius: var(--border-radius);
|
|
color: var(--header-primary);
|
|
margin: -1px;
|
|
}
|
|
|
|
.autocomplete-1vrmpx {
|
|
background-color: var(--background-secondary) !important;
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.header-ykumBX {
|
|
background-color: var(--background-floating);
|
|
border-bottom: var(--border);
|
|
}
|
|
|
|
.selected-1Tbx07 {
|
|
background-color: var(--background-modifier-selected) !important;
|
|
border: var(--border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.option-96V44q:after {
|
|
width: 0px;
|
|
}
|