Created
June 23, 2022 19:37
-
-
Save fishd72/718a5a33064a40c413e563f534c0313f to your computer and use it in GitHub Desktop.
First draft of a Nord theme for the ModernDeck app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| nord.css | |
| Copyright (c) 2022 dangered wolf, et al | |
| Released under the MIT License | |
| */ | |
| :root { | |
| --primaryColor:#3b4252; | |
| --mdlPrimaryColor:var(--primaryColor); | |
| --columnBorderColor:var(--primaryColor); | |
| --secondaryColor:#88c0d0; | |
| --secondaryColorPress:var(--secondaryColor); | |
| --secondaryColorAlt: #3b4252; | |
| --secondaryColorDeep:var(--secondaryColor); | |
| --secondaryColorDeepTrans:rgba(54, 58, 104, 0.5); | |
| --secondaryColorBright:var(--secondaryColor); | |
| --redDefault:#c35252; | |
| --redHover:#d43737; | |
| --redActive:#7b0d0d; | |
| --redDisabled:rgba(197,84,84,0.45); | |
| --txtMuteLink:rgb(139, 152, 165); | |
| --disabledColor:rgb(139, 152, 165); | |
| --linkPressColor:rgba(0,0,0,.05); | |
| --buttonPressColor:rgba(255,255,255,.1); | |
| --scrollbarDefaultColor:rgba(149,175,191,.5); | |
| --scrollbarHoverColor:#8498A5; | |
| --bodyTextColor:#eee; | |
| --bodyTextHoverColor:#eee; | |
| --typeaheadColor:#DFDFDF; | |
| --typeaheadBackgroundColor:#18191c; | |
| --primaryTextColor:#fff; | |
| --placeholderTextColor:rgb(139, 152, 165); | |
| --selectionBackgroundColor:var(--secondaryColor); | |
| --selectionTextColor:#3B4252; | |
| --tweetDetailWrapperColor:rgba(255,255,255,0.03); | |
| --contextMenuDividerColor:rgba(79,84,92,0.48); | |
| --backdropColor:#434c5e; | |
| --modalWindowColor:var(--primaryColor); | |
| --overlayBackgroundColor:rgba(91, 112, 131, 0.4); | |
| --navDrawerBackground:rgba(91, 112, 131, 0.4); | |
| --defaultShadowColor:rgba(91, 112, 131, 0.4); | |
| --settingsTabColor:var(--primaryColor); | |
| --twitterBorderColor: rgb(56, 68, 77); | |
| } | |
| a, | |
| a:not([href="#"]):not(.column-header-link):not(.js-column-back):not(.js-tweet-social-proof-back):not(.account-selector-grid-mode):not(.account-link):not(.dropdown-menu-url-item):hover, | |
| .btn:not([disabled]):not(.is-disabled):not(.btn-options-tray):not(.mtd-nav-button):not(.btn-bg-negative):not(.btn-negative):not(.mtd-alert-button), | |
| #caltoday, | |
| input[type="checkbox"]:checked:before, | |
| input[type="radio"]:checked:before | |
| { | |
| color:var(--secondaryColor); | |
| transition:color .3s | |
| } | |
| a:not(.list-account):not(.js-column-back):not(.compose-account):not(.js-toggle-item):not(.column-header-link):active, | |
| a:not(.list-account):not(.js-column-back):not(.compose-account):not(.js-toggle-item):not(.column-header-link):focus, | |
| .js-send-button:not([disabled]):active | |
| { | |
| color:var(--secondaryColorPress); | |
| background-color:var(--linkPressColor) | |
| } | |
| .account-link, | |
| .account-link:hover, | |
| .account-link:focus, | |
| .mtd-about-title.list-placeholder, | |
| .cal, | |
| select, | |
| input, | |
| .txt-normal, | |
| .account-bio, | |
| .link-complex.block[rel="user"] | |
| { | |
| color:var(--bodyTextColor)!important | |
| } | |
| .account-summary-text .fullname, | |
| .compose-reply-tweet .fullname, | |
| .compose-reply-tweet, | |
| .list-item, | |
| .list-item.is-actionable.item-box.is-selected, | |
| .tooltip-inner, | |
| .Tooltip-inner, | |
| .list-account .fullname, | |
| option, | |
| .dropdown-menu li a, | |
| .dropdown-menu li a[data-action]:hover,.dropdown-menu li a:hover, | |
| .frm, | |
| .med-fullpanel, | |
| .media-sensitive, | |
| .prf-stats a strong, | |
| .js-item-launch a.btn:not([disabled]):not(.is-disabled), | |
| .js-item-launch a.Button:not([disabled]):not(.is-disabled), | |
| .media-sensitive-content p, | |
| .compose .typeahead-item strong.fullname, | |
| .account-remove-check-message, | |
| .media-sensitive-title | |
| { | |
| color:var(--bodyTextColor) | |
| } | |
| .dropdown-menu a[data-action]:active, | |
| .js-account-manager-container, | |
| .js-contributor-manager-container, | |
| .column-panel, | |
| .contributor-adder-block, | |
| .contributor-row, | |
| .DateRange | |
| { | |
| background:var(--backdropColor) | |
| } | |
| .sprite:before, | |
| .account-stats a, | |
| .tweet-action[data-actions-menu-position]:focus, | |
| .tweet-actions .tweet-action.is-selected, | |
| .tweet-detail-actions .tweet-action.is-selected, | |
| .tweet-detail-actions .js-reply-action.is-selected | |
| { | |
| color:var(--secondaryColorAlt) | |
| } | |
| .media-sensitive, | |
| .stream-item.is-actionable .quoted-tweet, | |
| .stream-item.is-actionable:not(.is-unread):hover, | |
| .stream-item.is-actionable:not(.is-unread).is-selected-tweet, | |
| .tweet-detail-wrapper | |
| { | |
| background:var(--tweetDetailWrapperColor) | |
| } | |
| .lst-group .selected, | |
| #calcurrent, | |
| .btn-compose:not(.js-hide-drawer), | |
| .column-options .button-tray, | |
| .column-options, | |
| .facet-type, | |
| .is-options-open .column-settings-link, | |
| .is-unread, | |
| .js-add-column, | |
| .mdl .js-add-column, | |
| .list-item.is-selected, | |
| .more-tweets-btn, | |
| .more-tweets-btn:hover, | |
| .tweet-button:not(.js-hide-drawer), | |
| .PillGroup .Pill.is-selected, | |
| .DatePicker-calendarDay.is-withinRange, | |
| button.try-query | |
| { | |
| background:var(--secondaryColorAlt) | |
| } | |
| .prf-actions .js-follow-button | |
| { | |
| background:var(--secondaryColorAlt)!important | |
| } | |
| li:not(.selected) .list-twitter-list .txt-ellipsis, .list-twitter-list .subtitle, .mtd-back-default .js-setting-list>li:not(.selected)>.list-link strong, .txt-mute, .txt-r-dark-gray, .typeahead .username, .l-column.mdl-column.mdl-column-sml .list-link, html .btd-grayscale_notification_icons i.icon.activity-indicator, .other-replies, .tweet-stats>li, .txt-r-deep-gray, .color-twitter-dark-gray, .lst-launcher :not(.is-disabled) .color-twitter-darker-gray, .js-send-button[disabled], button[disabled] | |
| { | |
| color:var(--placeholderTextColor) | |
| } | |
| input[type="checkbox"][disabled]:before | |
| { | |
| color:var(--placeholderTextColor) !important | |
| } | |
| .txt-r-deep-gray { | |
| opacity:1 | |
| } | |
| input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { | |
| color:var(--placeholderTextColor) | |
| } | |
| input::-moz-placeholder,textarea::-moz-placeholder { | |
| color:var(--placeholderTextColor) | |
| } | |
| input::placeholder,textarea::placeholder { | |
| color:var(--placeholderTextColor) | |
| } | |
| .search-input, | |
| textarea:not(.compose-text):not(.js-compose-text), | |
| .mtd-nav-button, | |
| .js-setting-list .selected strong, | |
| .lst-group.js-setting-list .selected, | |
| .character-count-compose, | |
| .btn-options-tray:not([disabled]):not(.is-disabled), | |
| .toggle-item-text, | |
| .accordion-panel .txt-bold, | |
| .Notification-icon, | |
| .mtd-settings-tab | |
| { | |
| color:var(--primaryTextColor)!important | |
| } | |
| .is-new .column-message, | |
| .is-unread:active | |
| { | |
| background:var(--secondaryColorDeep) | |
| } | |
| .application, | |
| .tooltip-inner, | |
| .Tooltip-inner, | |
| .dropdown-menu, | |
| .app-navigator .js-hide-drawer, | |
| .app-columns-container, | |
| body[class=""], | |
| html.js, | |
| .prf-header, | |
| body, | |
| .mdl-column.mdl-column-rhs, | |
| .text-like-keyboard-key, | |
| .js-quote-tweet-holder .quoted-tweet, | |
| .app-content, | |
| .compose-media-bar-holder, | |
| optgroup, | |
| .popover, | |
| .compose-reply-tweet, | |
| .compose-message-recipient-list, | |
| .compose-message-recipient-input-container, | |
| .compose-media-grid-holder, | |
| .compose-text-container, | |
| .status-message | |
| { | |
| background:var(--primaryColor) | |
| } | |
| .btd-dark-theme.btd-minimal_mode .compose-reply-tweet { | |
| background:var(--primaryColor)!important | |
| } | |
| .column-header, | |
| .column-header-temp | |
| { | |
| background:linear-gradient(var(--primaryColor),var(--primaryColor)) | |
| } | |
| .is-new .column-header, | |
| .is-new .column-header-temp | |
| { | |
| background:linear-gradient(var(--primaryColor),var(--secondaryColorDeep)) | |
| } | |
| .txt-mute a:not(:focus):not(.tweet-action):not([data-action]), | |
| .lst-group h3, | |
| .lst-group .username | |
| { | |
| color:var(--txtMuteLink) | |
| } | |
| .tweet-action:active, | |
| .tweet-action:hover, | |
| .tweet-detail-action:active, | |
| .tweet-detail-action:hover, | |
| .stream-item.is-actionable .tweet-action:hover, | |
| .stream-item.is-actionable .tweet-detail-action:hover, | |
| .stream-item.is-actionable .tweet-action:focus, | |
| .stream-item.is-actionable .tweet-detail-action:focus, | |
| .stream-item.is-actionable .tweet-action:active, | |
| .stream-item.is-actionable .tweet-detail-action:active, | |
| .stream-item.is-actionable .tweet-action.is-selected, | |
| .stream-item.is-actionable a.is-selected.tweet-detail-action, | |
| .tweet-stats>li>a:hover | |
| { | |
| color:var(--scrollbarHoverColor)!important | |
| } | |
| .btn:active, | |
| .btn.is-selected | |
| { | |
| background-color:var(--buttonPressColor) | |
| } | |
| .app-nav-link.is-selected, | |
| .app-nav-link:hover, | |
| .column-nav-link.is-selected, | |
| .column-nav-link:hover | |
| { | |
| color:inherit!important | |
| } | |
| option, | |
| .mtd-nav-drawer, | |
| .mdl, | |
| .DrawerModal, | |
| .prf-meta, | |
| .mdl-column, | |
| .med-fullpanel | |
| { | |
| background:var(--modalWindowColor) | |
| } | |
| .mtd-nav-divider, | |
| .tweet-detail .margin-tl.txt-small:before, | |
| .cmp-replyto, | |
| .column-background-fill | |
| { | |
| background:var(--backdropColor) | |
| } | |
| .social-proof-for-tweet-title, | |
| .account-bio, | |
| .btn[disabled], | |
| .btn[disabled]:hover, | |
| .btn[disabled]:active, | |
| button.is-disabled, | |
| button.is-disabled:hover, | |
| button.is-disabled:focus, | |
| button.is-disabled:active, | |
| .btn.is-disabled, | |
| .btn.is-disabled:hover, | |
| .btn.is-disabled:focus, | |
| .btn.is-disabled:active, | |
| .Button[disabled], | |
| .Button[disabled]:hover, | |
| .Button[disabled]:active, | |
| .Button.is-disabled, | |
| .Button.is-disabled:hover, | |
| .Button.is-disabled:focus, | |
| .Button.is-disabled:active, | |
| .Button-primary[disabled], | |
| .Button-primary[disabled]:hover, | |
| .Button-primary[disabled]:active, | |
| .Button-primary.is-disabled, | |
| .Button-primary.is-disabled:hover, | |
| .Button-primary.is-disabled:focus, | |
| .Button-primary.is-disabled:active, | |
| .stroke-twitter-light-gray | |
| { | |
| color:var(--disabledColor)!important; | |
| transition:.2s all | |
| } | |
| ::-moz-selection | |
| { | |
| background:var(--secondaryColorAlt); | |
| color:var(--bodyTextColor) | |
| } | |
| ::selection | |
| { | |
| background:var(--secondaryColorAlt); | |
| color:var(--bodyTextColor) | |
| } | |
| .js-add-column:active, | |
| .lst-group .selected:active | |
| { | |
| background:var(--secondaryColorPress) | |
| } | |
| .tooltip-inner, | |
| .Tooltip-inner | |
| { | |
| box-shadow:0 3px 10px var(--defaultShadowColor) | |
| } | |
| .invalid-char-count, | |
| .unfollow-text, | |
| .cancel-req-text, | |
| #add-filter:not([disabled]), | |
| .btn-negative:not([disabled]):not(.is-disabled), | |
| .Button--danger:not([disabled]):not(.is-disabled), | |
| .txt-twitter-red, | |
| .color-twitter-red, | |
| .bg-color-twitter-red | |
| { | |
| color:var(--redDefault)!important | |
| } | |
| .btn-negative:not([disabled]):not(.is-disabled):hover, | |
| .Button--danger:not([disabled]):not(.is-disabled):hover | |
| { | |
| color:var(--redHover)!important | |
| } | |
| .btn-negative:active, | |
| .btn-negative.is-selected, | |
| .Button--danger:not([disabled]):not(.is-disabled):active | |
| { | |
| color:var(--redActive)!important | |
| } | |
| .btn-negative[disabled], | |
| .btn-negative[disabled]:hover, | |
| .btn-negative[disabled]:active, | |
| .btn-negative.is-disabled, | |
| .btn-negative.is-disabled:hover, | |
| .btn-negative.is-disabled:focus, | |
| .btn-negative.is-disabled:active | |
| { | |
| color:var(--redDisabled)!important | |
| } | |
| .contributor-adder input.js-username-input.js-submittable-input | |
| { | |
| border-bottom:3px solid var(--secondaryColorAlt) | |
| } | |
| .compose-text | |
| { | |
| color:var(--bodyTextColor); | |
| border-bottom:none | |
| } | |
| .drp-h-divider | |
| { | |
| border-color:var(--contextMenuDividerColor) | |
| } | |
| .is-unread .txt-mute, | |
| .is-unread .conversation-indicator | |
| { | |
| color:rgba(255,255,255,.7) | |
| } | |
| .lst-group .list-link:active | |
| { | |
| background:var(--secondaryColorDeepTrans) | |
| } | |
| .mdl::-webkit-scrollbar-thumb, | |
| .mdl.s-profile::-webkit-scrollbar-thumb, | |
| .mtd-nav-drawer::-webkit-scrollbar-thumb, | |
| .lst-launcher::-webkit-scrollbar-thumb, | |
| .scroll-styled-v::-webkit-scrollbar-thumb, | |
| .scroll-v::-webkit-scrollbar-thumb, | |
| .emoji-picker__emojis::-webkit-scrollbar-thumb, | |
| .scroll-styled-h::-webkit-scrollbar-thumb, | |
| .s-tall-fixed::-webkit-scrollbar-thumb, | |
| #lists-modal .mdl-content::-webkit-scrollbar-thumb, | |
| .keyboard-shortcut-list-modal::-webkit-scrollbar-thumb, | |
| .Dropdown::-webkit-scrollbar-thumb | |
| { | |
| border-radius:var(--scrollbarWidth); | |
| background:var(--scrollbarDefaultColor) | |
| } | |
| .mdl::-webkit-scrollbar-thumb:hover, | |
| .mdl.s-profile::-webkit-scrollbar-thumb:hover, | |
| .mtd-nav-drawer::-webkit-scrollbar-thumb:hover, | |
| .lst-launcher::-webkit-scrollbar-thumb:hover, | |
| .scroll-styled-v::-webkit-scrollbar-thumb:hover, | |
| .scroll-v::-webkit-scrollbar-thumb:hover, | |
| .emoji-picker__emojis::-webkit-scrollbar-thumb:hover, | |
| .scroll-styled-h::-webkit-scrollbar-thumb:hover, | |
| #lists-modal .mdl-content::-webkit-scrollbar-thumb:hover, | |
| .keyboard-shortcut-list-modal::-webkit-scrollbar-thumb:hover, | |
| .Dropdown::-webkit-scrollbar-thumb:hover | |
| { | |
| background:var(--scrollbarHoverColor) | |
| } | |
| .mdl, | |
| .mdl.s-profile, | |
| .mtd-nav-drawer, | |
| .lst-launcher, | |
| .scroll-styled-v, | |
| .scroll-v, | |
| .emoji-picker__emojis, | |
| .scroll-styled-h, | |
| #lists-modal .mdl-content, | |
| .keyboard-shortcut-list-modal, | |
| .Dropdown { | |
| scrollbar-color:var(--scrollbarDefaultColor) var(--backdropColor) | |
| } | |
| .s-following .follow-btn:hover | |
| { | |
| color:var(--redHover) | |
| } | |
| .modal-content,.med-tweet | |
| { | |
| background:var(--modalWindowColor) | |
| } | |
| .list-item.is-actionable.item-box.is-selected, | |
| .js-typeahead-recent-search-clear.js-typeahead-item.is-selected | |
| { | |
| background:var(--backdropColor) | |
| } | |
| .js-typeahead-item.is-actionable:active | |
| { | |
| background:var(--backdropColor); | |
| color:var(--typeaheadColor) | |
| } | |
| .js-typeahead-recent-search-clear.js-typeahead-item.recent-search-clear:active | |
| { | |
| background:var(--backdropColor); | |
| color:var(--typeaheadColor) | |
| } | |
| .list-placeholder, | |
| .mdl-placeholder | |
| { | |
| color:var(--placeholderTextColor) | |
| } | |
| .is-selected-tweet | |
| { | |
| background:var(--backdropColor) | |
| } | |
| .typeahead .fullname | |
| { | |
| color:var(--typeaheadColor) | |
| } | |
| .ovl, | |
| .overlay, | |
| .ModalOverlay | |
| { | |
| background:var(--overlayBackgroundColor) | |
| } | |
| .lst-modal, | |
| .typeahead | |
| { | |
| background:var(--typeaheadBackgroundColor) | |
| } | |
| .more-tweets-btn:active, | |
| .more-tweets-btn:focus | |
| { | |
| background:var(--secondaryColorPress)!important | |
| } | |
| .add-participant .js-username-input.js-submittable-input | |
| { | |
| border-bottom:2px solid var(--placeholderTextColor) | |
| } | |
| .add-participant input::-moz-placeholder | |
| { | |
| color:var(--placeholderTextColor); | |
| opacity:1 | |
| } | |
| .app-navigator .js-hide-drawer | |
| { | |
| box-shadow:0 -5px 10px var(--defaultShadowColor) | |
| } | |
| html.mtd-acc-focus-ring a:focus, | |
| html.mtd-acc-focus-ring button:focus | |
| { | |
| outline:var(--secondaryColor) solid 3px | |
| } | |
| option, | |
| .list-twitter-list .inner strong | |
| { | |
| color:var(--bodyTextColor) | |
| } | |
| .list-listmember .bio, | |
| .list-listmember .username | |
| { | |
| color:var(--txtMuteLink) | |
| } | |
| input, | |
| select, | |
| .uneditable-input | |
| { | |
| border-bottom:2px solid var(--disabledColor) | |
| } | |
| .search-input | |
| { | |
| border-bottom:2px solid var(--disabledColor) | |
| } | |
| .mdl-column.l-column .search-input | |
| { | |
| background:var(--tweetDetailWrapperColor); | |
| color:var(--primaryTextColor) | |
| } | |
| .recent-search-clear.is-actionable.list-item-last | |
| { | |
| background-color:var(--primaryColor); | |
| color:var(--typeaheadColor) | |
| } | |
| #caldays span, | |
| .caloff | |
| { | |
| color:var(--disabledColor) | |
| } | |
| .caldisabled, | |
| .caldisabled:hover, | |
| .caldisabled:active | |
| { | |
| color:var(--placeholderTextColor)!important | |
| } | |
| .prf-header | |
| { | |
| background-color:var(--primaryColor) /* IMPORTANT; This needs to be background colour because background image is SOMETIMES laid over it */ | |
| } | |
| .prf-follow-status | |
| { | |
| background:var(--modalWindowColor); | |
| color:var(--bodyTextColor) | |
| } | |
| .js-translate-call-to-action, | |
| .tweet-translation-original-text, | |
| .mdl-links span | |
| { | |
| color:var(--placeholderTextColor) | |
| } | |
| .js-toggle.padding-al button>span | |
| { | |
| color:var(--placeholderTextColor) | |
| } | |
| .spinner-layer | |
| { | |
| border-color:var(--secondaryColor) | |
| } | |
| .mdl-column.l-column .search-input::-webkit-input-placeholder | |
| { | |
| color:var(--primaryTextColor) | |
| } | |
| .mdl-column.l-column .search-input::-moz-placeholder | |
| { | |
| color:var(--primaryTextColor) | |
| } | |
| .mdl-column.l-column .search-input:input-placeholder | |
| { | |
| color:var(--primaryTextColor) | |
| } | |
| .btn-primary:hover,.Button--primary:not(.tweet-button):not(.action-text):not(.more-tweets-btn):not(.js-add-column):not(.js-spinner-button):hover { | |
| background:var(--secondaryColorBright) | |
| } | |
| .btn-primary:focus,.Button--primary:not(.tweet-button):not(.action-text):not(.more-tweets-btn):not(.js-add-column):not(.js-spinner-button):focus,.btn-primary:active,.Button--primary:not(.tweet-button):not(.action-text):not(.more-tweets-btn):not(.js-add-column):not(.js-spinner-button):active { | |
| background:var(--secondaryColorBright)!important | |
| } | |
| .js-character-count:not(.color-twitter-red), .lst-group .selected, .lst-launcher a:not(.is-disabled), .lst-launcher a:not(.is-disabled):hover, .character-count, .character-count-compose, .lst-launcher a:not(.is-disabled):focus, .lst-launcher a:not(.is-disabled):active, .lst-launcher li:not(.is-disabled) span, .calweek a:not(.caloff), .mtd-settings-tab | |
| { | |
| color:var(--primaryTextColor)!important | |
| } | |
| .sprite-verified-mini:before,.sprite-verified:before { | |
| color:inherit!important | |
| } | |
| .account-settings-bb a[rel="user"] { | |
| color:var(--primaryTextColor) | |
| } | |
| .detail-view-inline-text { | |
| color:var(--txtMuteLink); | |
| border-bottom:3px solid var(--secondaryColorAlt) | |
| } | |
| .tweet-action-item .tweet-action, | |
| .tweet-detail-action-item .tweet-detail-action | |
| { | |
| color:var(--scrollbarDefaultColor) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment