X-Git-Url: https://git.rmz.io/dotfiles.git/blobdiff_plain/5a68a96d656e686f632dd805bafe462b1e19bc70..d4b51f09d83f75a663c5711af77e0e6da40764a9:/dwb/userstyles/stackoverflow.com.css?ds=sidebyside diff --git a/dwb/userstyles/stackoverflow.com.css b/dwb/userstyles/stackoverflow.com.css index 8dca586..0ecb7c3 100644 --- a/dwb/userstyles/stackoverflow.com.css +++ b/dwb/userstyles/stackoverflow.com.css @@ -1,8 +1,17 @@ /*************************************************************** - StackOverflow Dark v2.6.2 (2/26/2015) + StackOverflow Dark v2.8.10 (10/18/2015) https://github.com/StylishThemes/StackOverflow-Dark http://userstyles.org/styles/35345 + ** Will apply to almost all StackExchange Sites ** + Except: + * Area 51 (area51.stackexchange.com) + * Gaming (gaming.stackexchange.com) + * Rope Playing Games (rpg.stackexchange.com) + + ** Please open an issue to report sites where the style breaks ** + https://github.com/StylishThemes/StackOverflow-Dark/issues + previous version information contained at the userstyles site ****************************************************************/ @@ -17,22 +26,29 @@ background-image: /*[[bg-choice]]*/ url() !important; background-clip: border-box !important; background-origin: padding-box !important; + background-attachment: /*[[bg-attachment]]*/ fixed !important; /*[[bg-options]]*/ - /*[[bg-options2]]*/ + } + + /* custom code font */ + pre.prettyprint { + font-family: "/*[[font-choice]]*/", Monaco, Consolas, "Liberation Mono", Menlo, Courier, monospace !important; } /* === custom color === */ - a, .profile-popup a, .seWrapper a, .post-tag, .comments-link, .tag-synonym-link { - color: /*[[base-color]]*/ #008080 !important + a, .profile-popup a, .seWrapper a, .post-tag, .comments-link, .tag-synonym-link, .gs-title b { + color: /*[[base-color]]*/ #008080 !important; } - .nav .primarynav li a:hover { + .nav .primarynav li a:hover, .message.message-config .actions .button, .btn-careers:hover, + .btn-careers:visited { color: #fff !important; background: /*[[base-color]]*/ #008080 !important; } .post-tag:hover, .comments-link:hover, .summary .post-tag:hover , .commentslink, .bounty-indicator, - .bounty-indicator-tab, .bounty-award, span.bounty-indicator-tab { + .bounty-indicator-tab, .bounty-award, span.bounty-indicator-tab, #change-picture, .top-badge, + .supernovabg, .hotbg, .nav li.youarehere a, .nav a:hover, a.button:hover, .edit-count, .pager a:hover span { background-color: /*[[base-color]]*/ #008080 !important; color: #eee !important; } @@ -48,11 +64,12 @@ } /* === input focus hightlight === */ - input:focus { + input:focus, textarea:focus { border-color: /*[[base-color]]*/ #008080 !important; - box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.075) inset, 0px 0px 5px rgba(255, 255, 255, .075) !important; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 2px /*[[base-color]]*/ #008080 !important; + outline-color: transparent !important; } - .tag-editor input:focus { + .tag-editor input:focus, .previous-button, .next-button { border: 0 !important; box-shadow: none !important; } @@ -67,6 +84,9 @@ .search-container input[type=text] { background-color: #000 !important; } + .popup-badges .all-badge-progress .completed:before, .previous-button, .next-button { + background-color: rgba(0,0,0,0.4) !important; + } #custom-header, .review-bar, .diff-choices a.selected, #header #topbar, td.owner, a.owner, .question-status, .profile-popup, .profile-popup div, .profile-popup th, .profile-popup td, #global, .actual-edit-overlay, @@ -75,7 +95,7 @@ color: #ddd !important; } - .summary .post-tag, .onebox, .profile-ad { + .summary .post-tag, .onebox, .profile-ad, .message.message-config { background: #151515 !important; } @@ -92,29 +112,34 @@ #tabs a { border: 1px solid transparent !important; + padding: 2px 6px 4px 6px !important; } - #tabs a.youarehere, .tag-suggestions { + #tabs a.youarehere, .tabs a.youarehere, .tag-suggestions { background: #191919 !important; border: 1px solid #444 !important; } + .tabs a.youarehere { + border-bottom: 0 !important; + } - #user-about-me, .user-about-me, .mine .messages { + #user-about-me, .user-about-me, .mine .messages, .avatar-card, .tag-container { background: #191919 !important; - border: 0px !important; + border: 0 !important; color: #C1BEBA !important; } - .topbar-dialog, .topbar-dialog .header, .share-tip, #input-area, + .topbar-dialog, .topbar-dialog .header, .share-tip, #input-area, .messages, #tag-menu, .sidebar h3, #overlay-header, .action-list .action-selected, .switcher-nudge-lightbox, - .user-rep-chart-summary-tooltip:hover, .current-site-container { + .user-rep-chart-summary-tooltip:hover, .current-site-container, #or { background-color: #222 !important; color: #ddd !important; } .profile-popup, .profile-popup tr, .profile-popup th, .profile-gravatar, .newuser, .roomcard, .seWrapper, h2.index.header, .privilege-table-row:hover, .list-originals .item.hover, - .list-originals .body-summary, .review-instructions-reason { + .list-originals .body-summary, .review-instructions-reason, .room-mini, #formContainer, #switch, + .login-topbar, .newsletter-category, .newsletter-item, .blogcontainer { background-color: #222 !important; border-color: #555 !important; color: #ddd !important; @@ -127,36 +152,61 @@ -webkit-border-radius: 3px !important; border-radius: 3px !important; } + .calendar, .calendar-small, .mspark .mspbar, #promo-box { + background: #222 !important; + } - .ad502-room { + .ad502-room, .message.message-config .actions, .tag-container .col, .congrats { background-color: #232323 !important; border: 1px solid #191919 !important; } - .rep-recent-row, .bounty, .diff-choices a:hover, div.meter, .narrow .votes, .ob-post-votes { + .rep-recent-row, .bounty, .diff-choices a:hover, div.meter, .narrow .votes, .ob-post-votes, .card, + .congrats { background-color: #232323 !important; color: #bbb !important; } - .answer, #system-message, .commentlist, .revision td, #hero-content, .mdhelp-tabs .selected, .tabs .selected { + .answer, #system-message, .commentlist, .revision td, #hero-content, .mdhelp-tabs .selected, .tabs .selected, + .rep-card .rep-col { background: #232323 !important; color: #999 !important; } - .tagged-interesting, .tagged-interesting .views, .highlight-row, .highlighted { + .container { + background-image: none !important; + } + + .tagged-interesting, .tagged-interesting .views, .highlight-row, .highlighted, .card.rep-card .graph, + .popup-badges .badge-progress:hover:not(.completed), #newsletter-ad { background-color: #242424 !important; background-image: none !important; } + #newsletter-ad { + padding: 10px !important; + } + #newsletter-ad:before { + content: 'Love this site?'; + font-size: 18px !important; + } + + .youarehere { + background: #333 !important; + color: #ccc !important; + } + .nav li, .seNav, .topbar a.topbar-icon-on, .topbar a.topbar-icon-on:hover, .owner, .nav a, .module li.current, .seCurrent, .community-bulletin, .owner-revision td, .markdown-diff .skip, #footer .container, .body-diffs .skip, .newsletter-anon, .tag-suggestions>div:hover, - .topbar-dialog .modal-content li:hover, .timestamp:hover+div.message .meta, div.message:hover .meta { + .topbar-dialog .modal-content li:hover, .timestamp:hover+div.message .meta, div.message:hover .meta, + #side-menu ul li a:hover, .conversation-info, .message.reply-parent, .message.reply-child, + .sidebar-element .list li .rep-and-badges, .congrats .actions, .newsletters-toggle { background-color: #333 !important; } .owner-answer, .question-status, .notification, #feed-ticker, #top-menu, .vote-revision td, - .topbar-dialog .unread-item { + .topbar-dialog .unread-item, .privileges-wrapper .stroke, .progress-bar .bar { background: #404040 !important; } @@ -171,9 +221,13 @@ background: #c1beba !important } + .sidebar-element .list li .rep-and-badges:before { + background: linear-gradient(270deg, #333, rgba(51,51,51,0)); + } + /* === Brown(ish) === */ - .new-post-activity, #new-answer-activity { - background-color: #840 !important; + .new-post-activity, #new-answer-activity, .val-info, .highlight { + background-color: #321 !important; } /* chat room buttons */ @@ -182,15 +236,23 @@ color: #eee !important; } - .supernovabg, .hotbg, .nav li.youarehere a, .nav a:hover, a.button:hover { - background-color: #d80 !important; - } - /* === Green === */ - .accepted-answer, .suggested-edit .inserted, .markdown-diff .inserted { + .accepted-answer, .suggested-edit .inserted, .markdown-diff .inserted, .rep-increase, .progress-bar .percent, + .recommended, .vote.accepted, .suggested-edit .inserted>div { background: #232 !important; } + span.diff-add { + background: #3F4E1D !important; + color: #92CC09 !important; + } + + /* accepted answer code blocks */ + .accepted-answer pre, .accepted-answer code, .accepted-answer pre.prettyprint, + .accepted-answer .prettyprint .pln, .accepted-answer .youarehere, .accepted-answer pre:not(.prettyprint) { + background: #202A20 !important; + } + .answered, .answer-votes, .answered .vote-count-post { background: #232323 !important; color: #4b553c !important @@ -207,9 +269,13 @@ } /* === Red === */ - .deleted-answer, .suggested-edit .deleted, .markdown-diff .deleted { + .deleted-answer, .suggested-edit .deleted, .markdown-diff .deleted, .suggested-edit .deleted>div { background-color: #200 !important; } + span.diff-delete { + background-color: #400f00 !important; + color: #ff4a15 !important; + } a.moderator-tag { background-color: #400 !important; @@ -221,14 +287,15 @@ /* === Transparent background === */ div.message .meta, .spaces, .comment, span.feed-icon, a.role-switch, .nav.careers li, .nav.careers li:hover, - .switcher-nudge-content p, #content, #tabs a, #chat .username, #chat .messages { + .switcher-nudge-content p, #content, #tabs a, .tabs a, #chat .username, #chat .messages, .tag-container, + .prettyprint code, .lv-info, .lv-stats-wrapper, .lv-stats-wrapper .number, .container, .bottom-notice, + #question-header, .question-form .form-item, .post-menu>a:hover, a.comments-link:hover, #main-content { background-color: transparent !important; } #tabs a:hover { background-color: #191919 !important; border: 1px solid #666666 !important; - border-bottom: 1px solid #191919 !important; } .highcharts-container rect[fill="#FFFFFF"], rect[fill="rgb(255, 255, 255)"] { @@ -244,29 +311,50 @@ border-color: #333 !important; } - #tabs a.youarehere { - border-bottom: 1px solid #191919 !important; + .message .message-tip-top-right:before, .message .message-tip-top-left:before { + border-bottom-color: #191919 !important; + } + + .left-arrow { + border-right-color: rgba(119,119,119,0.4) !important; + } + .previous-button:hover .left-arrow { + border-right-color: #c0c0c0 !important; + } + .right-arrow { + border-left-color: rgba(119,119,119,0.4) !important; + } + .next-button:hover .right-arrow { + border-left-color: #c0c0c0 !important; } /* === No/hide border === */ div.list > div { border-right: 0 !important; } - - .module { + .module, .tabs a, div.message { border-color: transparent !important; } + .left-arrow, .right-arrow { + border-bottom-color: transparent !important; + border-top-color: transparent !important; + } + div.message:hover, .timestamp:hover + div.message { + visibility: inherit; + border: 1px dotted #333; + } /* blue label count */ - .bounty-indicator-tab { - background: #07d !important; + .bounty-indicator-tab, .hero.profile { + background: #046 !important; color: #ccc !important; } /* === Text Color === */ div, input, .accepted-answer .post-text, .accepted-answer .user-action-time, #question-header a, .post-text, .user-info, .topbar-dialog .header h3, .topbar-dialog .header h3 a, .topbar-dialog span, - .search-result .answered .vote-count-post strong, .votes-cast-stats th, .subheader h1 { + .search-result .answered .vote-count-post strong, .votes-cast-stats th, .subheader h1, .vote.accepted, + .message.message-config h1, .message.message-config h2, .message.message-config h3, .message.message-config h4 { color: #ddd !important; } @@ -279,14 +367,17 @@ } .user-details td, .content-page, h2, h2 a, .profile-popup a:hover, .module h4, .page-description, - #openid_identifier, .form-item label { + #openid_identifier, .form-item label, .subheader h2 { color: #c1beba !important } - - .comment, #top-menu a, .subheader a, .reputation a, .reputation-score, a:visited, .relativetime.old, - .votes-cast-stats td, .mini-counts span, #chat .system-message { + .comment, #top-menu a, .subheader a, .reputation a, .reputation-score, .relativetime.old, + .votes-cast-stats td, .mini-counts span, #chat .system-message, .card .rep, a.badge, a.badge-tag, + .user-card .user-stats .number, .user-card .user-card-name { color: #aaa !important; } + .ob-post-tag, .ob-user-tag { + color: #999 !important; + } .answered-accepted strong, .youarehere, .nav .primarynav li a, .nav a, a:hover, .rep-up.special-rep { color: #fff !important @@ -296,6 +387,9 @@ -webkit-text-fill-color: #fff !important; } + a:visited { + color: /*[[visited-color]]*/ #ff32a0 !important; + } .rep-up { color: #4b553c !important; } @@ -332,6 +426,10 @@ text-decoration: none !important; } + .form-item { + padding-left: 20px !important; + } + .post-tag, .comments-link, .tag-synonym-link { margin: 2px !important; padding: 3px !important; @@ -340,14 +438,19 @@ white-space: nowrap !important } + .tag-container .col { + margin: 0 !important; + border: #333 1px solid !important; + } + .tag-container.row { + margin: 2px !important; + } .stats { margin-top: 5px !important; } - #hsearch, .statscontainer { margin-right: 5px !important; } - .stats { margin-bottom: 4px !important; } @@ -367,36 +470,33 @@ a.badge[title^="gold"], a.badge-tag[title^="gold"], .badge1 + .badgecount { color: #ffcc46 !important; } - .badge-tag { + .badge-tag, a.tag, .ob-post-tag, .ob-user-tag, .events-tooltip { background-color: #191919 !important; border-color: #111 !important; } - - /* === code & syntax highlighting === */ - pre, code, .pln, .youarehere { - background: #333 !important; - color: #ccc !important; + .badge3-alternate, .progress-bar.badge-3 .bar .percent { + background-color: #7C4318 !important; /* bronze */ + } + .badge2-alternate, .progress-bar.badge-2 .bar .percent { + background-color: #464a4f !important; /* silver */ + } + .badge1-alternate, .progress-bar.badge-1 .bar .percent { + background-color: #957000 !important; /* gold */ } - - .str { color: #0a0 !important; } - .lit { color: #d65 !important; } - .pun { color: #999 !important; } /* parenthesis */ - .kwd { color: #08f !important; } /* keyword */ - .tag { color: #999 !important; } /* html tag */ - .atn { color: #088 !important; } /* attribute */ - .atv { color: #0a0 !important; } /* attribute value*/ - .dec { color: #90a !important; } /* doc type */ /* === Images === */ .wmd-button>span { background-image: url(http://StylishThemes.github.io/StackOverflow-Dark/images/wmd-buttons.png) !important; } - #hlogo img, .everyonelovesstackoverflow, #newsletter-ad { opacity: 0.3 !important; } + #hlogo img, .everyonelovesstackoverflow { opacity: 0.3 !important; } + + #hlogo a, #footer-logo { + background-repeat: no-repeat !important; + } #footer-logo { background-size: contain !important; - background-repeat: no-repeat !important; } #header-logo img, #footer-logo img { @@ -404,18 +504,330 @@ } #sound, .vote-count-container.stars .img { - filter: url("data:image/svg+xml;utf8, #i"); -webkit-filter: invert(100%) !important; + filter: invert(100%) !important; } + .axis .tick, .pie text { + fill: #ccc !important; + } + .axis line, .axis path { + stroke: #999 !important; + } + + /* override prettyprint bright border styles */ + pre.prettyprint { + border-color: transparent !important; + } + /* style non-prettyprint code */ + code, pre:not(.prettyprint) { + background: #333 !important; + } + .prettyprint code { + background: transparent !important; + } + + /*[[syntax-theme]]*/ + /* grunt-webkit-remove-to-end-of-file */ + /* grunt-remove-block-below */ + + /* === basic dark code & syntax highlighting === */ + pre, code, .pln { + background: #333 !important; + color: #ccc !important; + } + .str { color: #0a0 !important; } + .lit { color: #d65 !important; } + .pun { color: #999 !important; } /* parenthesis */ + .kwd { color: #08f !important; } /* keyword */ + .tag { color: #999 !important; } /* html tag */ + .atn { color: #088 !important; } /* attribute */ + .atv { color: #0a0 !important; } /* attribute value*/ + .dec { color: #90a !important; } /* doc type */ + + /* grunt-remove-block-above */ + + * build because Chrome Stylish puts these extra definitions into separate sections + * with separate regexp/domain definitions. + * If the css below changes, it will have to be manually updated + */ + +/* === StackExchange tweaks === + _____ _ _ _____ _ _ _ +| __| |_ ___ ___| |_| __|_ _ ___| |_ ___ ___ ___ ___ | |_ _ _ _ ___ ___| |_ ___ +|__ | _| .'| _| '_| __|_'_| _| | .'| | . | -_| | _| | | | -_| .'| '_|_ -| +|_____|_| |__,|___|_,_|_____|_,_|___|_|_|__,|_|_|_ |___| |_| |_____|___|__,|_,_|___| + |___| +*/ + /* login screen StackExchange logo replacement */ + .login-page .se-logo { + -moz-box-sizing: border-box !important; + box-sizing: border-box !important; + background: url(http://StylishThemes.github.io/StackOverflow-Dark/images/stackexchange-logo.svg) no-repeat !important; + background-size: cover !important; + background-position: center center !important; + width: 200px !important; /* Width of new image */ + height: 48px !important; /* Height of new image */ + padding-left: 200px !important; /* Equal to width of new image */ + } + /* login button (input type=button")*/ + .login-page input.fr { + background-color: /*[[base-color]]*/ #008080 !important; + } + /* remove content border */ + #content { + border: 0 !important; + } + #sidebar #newsletter-ad, #sidebar .ad-container, #sidebar .everyonelovesstackoverflow { + border-width: 2px !important; + } + /* start blog.stackexchange.com */ + header, .cse .gsc-control-cse, .gsc-control-cse, div.pagination { + background-color: #181818 !important; + } + .sidebar p { + color: #ddd !important; + } + .job { + color: #888 !important; + } + .gsc-control-wrapper-cse { + padding-top: 10px !important; + } + /* hide google custom search placeholder */ + .gsc-input input:not(.gse-input-focus) { + background-image: none !important; + } + .podcast-container { + -webkit-filter: invert(100%) !important; + filter: invert(100%) !important; + } + /* end blog.stackexchange.com */ + /* chat.stackexchange.com */ + .event-banner { + background-color: #222 !important; + border-color: #555 !important; + } + /* target sites to *NOT* hide the header background */ + #header, #hmenus { + background-color: transparent !important; + } + #header { + background-image: none !important; + } + /* target sites that need an inverted header */ + #header, #header > * { + -webkit-filter: invert(100%) !important; + filter: invert(100%) !important; + } + /* target sites needing menu adjustments */ + .nav.mainnavs li, .nav.askquestion li { + background-color: transparent !important; + } + .nav.mainnavs, .footerwrap { + background-image: none !important; + } + .nav.mainnavs li { + margin: 0 6px !important; + } + .nav.mainnavs li a, .nav.askquestion li a { + padding: 6px !important; + margin: 2px !important; + border-radius: 3px !important; + } + /* darken everything that uses sprite.svg (vote arrows, feed icons, etc) */ + .envelope-on, .envelope-off, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, + .comment-up-off, .comment-up-on, .comment-flag, .edited-yes, .feed-icon, .vote-accepted-off, .vote-accepted-on, + .vote-accepted-bounty, .badge-earned-check, .delete-tag, .expander-arrow-hide, .expander-arrow-show, + .expander-arrow-small-hide, .expander-arrow-small-show, .anonymous-gravatar, .gp-share, .fb-share, .twitter-share, + #notify-container span.notify-close, .migrated.to, .migrated.from { + -webkit-filter: invert(100%) hue-rotate(180deg) brightness(1.1) !important; + filter: invert(100%) hue-rotate(180deg) brightness(1.1) !important; + } + /* nav manu text coloring only */ + .nav li.youarehere a, .nav li a:hover, + .nav li.youarehere a, .nav li a:hover { + background-color: transparent !important; + color: #ddd !important; + } + .nav li.youarehere a, .nav li a:hover { + color: /*[[base-color]]*/ #008080 !important; + } + /* hide top nav background on