Change the colors of your Tumblr dashboard.
目前為
/* ==UserStyle==
@name Tumblr - Old / Custom Colors
@namespace https://greasyfork.org/users/673307
@version 2.2.0
@description Change the colors of your Tumblr dashboard.
@author BabblingFishes
@license CC-BY-4.0
@namespace https://greasyfork.org/users/673307
@homepageURL https://greasyfork.org/en/scripts/TODO
@preprocessor uso
@var text mainBg "Background (Navy)" "54, 70, 93"
@var text brightButton "Bright Buttons (Blue)" "82, 158, 204"
@var text dullButton "Dull Buttons (Gray)" "157, 166, 175"
@var text textPost "Text Post (Gray/Black)" "68, 68, 68"
@var text photoPost "Photo Post & Likes (Red)" "217, 94, 64"
@var text quotePost "Quote Post (Gold)" "242, 153, 46"
@var text linkPost "Link Post & Reblogs (Green)" "86, 188, 138"
@var text chatPost "Chat Post & Notifs (Blue)" "82, 158, 204"
@var text audioPost "Audio Post (Purple)" "167, 125, 194"
@var text videoPost "Video Post (Gray/Pink)" "116, 128, 137"
@var text miscColor "Misc Color (Yellow)" "232, 215, 56"
@var text highlight "Notes Highlight (Blue-white)" "243, 248, 251"
@var select fontFamily "Font Family" {
"Helvetica Neue (Old Font)":"'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif",
"Favorit (New Font))":"Favorit, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif",
"Open Dyslexic":"opendyslexic, dyslexie, 'comic sans ms', sans-serif"}
@var text postBgIns "Post Background (White)" "255, 255, 255"
@var text postTextIns "Post Text Color (Black)" "0, 0, 0"
@var text menuTextIns "Menu Text, Icons, & Scrollbar (White)" "255, 255, 255"
}
==/UserStyle== */
@-moz-document domain("www.tumblr.com"){
@font-face{
font-family: "opendyslexic";
src: url('https://github.com/antijingoist/web-accessibility/tree/master/fonts/OpenDyslexic-Regular.otf?raw=true');
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('https://github.com/antijingoist/web-accessibility/tree/master/fonts/OpenDyslexic-Italic.otf?raw=true');
font-style: italic;
font-weight: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('https://github.com/antijingoist/web-accessibility/tree/master/fonts/OpenDyslexic-Bold.otf?raw=true');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "opendyslexic";
src: url('https://github.com/antijingoist/web-accessibility/blob/master/fonts/OpenDyslexic-BoldItalic.otf?raw=true');
font-weight: bold;
font-style: italic;
}
:root
{
--tcc-main-bg: /*[[mainBg]]*/; /* NEW: #001935 OLD: #36465d */
--tcc-transparent-bg: 255, 255, 0, 0.95; /* NEW: #001935f2 OLD: #36465df2 */
--tcc-transparent-bg-beta: /*[[mainBg]]*/, 0.95; /* NEW: #000000d8 OLD: #36465dd8 */
--tcc-bright-button: /*[[brightButton]]*/; /* NEW: #00b8ff OLD: #529ecc*/
--tcc-dull-button: /*[[dullButton]]*/; /* NEW: #9da6af OLD: #9da6af */
--tcc-highlight: /*[[highlight]]*/; /* NEW: #f3f8fb (not in the old theme) */
--tcc-text-post: /*[[textPost]]*/; /* NEW: #000000 OLD: #444444 */
--tcc-photo-post: /*[[photoPost]]*/; /* NEW: #ff492f OLD: #d95e40 */
--tcc-quote-post: /*[[quotePost]]*/; /* NEW: #ff8a00 OLD: #f2992e */
--tcc-link-post: /*[[linkPost]]*/; /* NEW: #00cf35 OLD: #56bc8a */
--tcc-chat-post: /*[[chatPost]]*/; /* NEW: #00b8ff OLD: #529ecc*/
--tcc-audio-post: /*[[audioPost]]*/; /* NEW: #7c5cff OLD: #a77dc2 */
--tcc-video-post: /*[[videoPost]]*/; /* NEW: #ff62ce OLD: #748089 */
--tcc-misc-color: /*[[miscColor]]*/; /* NEW: #e8d738 (not in the old theme) */
--tcc-like: /*[[photoPost]]*/; /* see --tcc-photo-post^ */
--tcc-reblog: /*[[linkPost]]*/; /* see --tcc-link-post^ */
--tcc-follow: /*[[quotePost]]*/; /* see --tcc-quote-post^ */
--tcc-reply: /*[[chatPost]]*/; /* see --tcc-chat-post^ */
--tcc-mention: /*[[audioPost]]*/;
/* see --tcc-audio-post^ */
/* ^ These do NOT show up in the beta dashboard as there is currently no way to implement them. */
/* post background color */
--rgb-white: /*[[postBgIns]]*/; /* DEFAULT: 255, 255, 255 */
/* post text color */
--rgb-black: /*[[postTextIns]]*/; /* DEFAULT: 0, 0, 0 */
/* menu text, symbols, and scrollbar */
--rgb-white-on-dark: /*[[menuTextIns]]*/; /* DEFAULT: 255, 255, 255 */
/*** END EDITABLE COLORS ***/
--navy: var(--tcc-main-bg);
--red: var(--tcc-photo-post);
--orange: var(--tcc-quote-post);
--yellow: var(--tcc-misc-color);
--green: var(--tcc-link-post);
--blue: var(--tcc-chat-post);
--purple: var(--tcc-audio-post);
--pink: var(--tcc-video-post);
--accent: var(--tcc-bright-button);
--secondary-accent: var(--tcc-dull-button);
--follow: var(--tcc-highlight);
/* if alternate beta dashboard fonts are enabled, the font family will appear here: */
--font-family: /*[[fontFamily]]*/;
}
/*** 2020 BETA THEME ***/
/* font resizing for alternate beta dashboard fonts: */
._16Les,
._2pkEd, .koBc0,
._2n1fq._2dmHk ._2zt7X ._2zx9B,
._3djI6 .a2kD7 input, ._3djI6 .a2kD7 span,
.sxFXf ._18SLV ._3ymhx ._2_bWb, .sxFXf ._18SLV ._3ymhx ._3cX2L, .sxFXf ._18SLV ._3ymhx .rW5mf,
._2U-M4 ._1dLVj .XcYVy,
._2U-M4 ._23Rn9 button,
.ooZvy ._3Sd8E,
._2iUzn ._3Xaga,
._2hnbH,
.KaKFG,
._2m1qj, .LN-U6,
._2m1qj._1pexr,
._3-bkQ a,
._2ZgTp ._2jAyq .yIE9S,
._3CU0u,
._38Ao5,
._2LUdG ._2qdYK, ._3hRvh,
._3hRvh._32O5L,
._20lsP,
._1Ts5C, ._3h1w4,
._2x8f4,
._2CuW0,
._2MWcK ._3plco,
.SVPap,
.Wnlgp,
.pOoZl,
.pOoZl .L0N4W:focus,
.pOoZl ._nUEo,
._2D-AO,
._3t3fM,
._33VXm,
.uI1gN,
._7k642,
.LihFc,
._2oITk,
._2_vyB, .hjr__,
._2_vyB .D9Rlt,
._1xDRl,
._36gC7,
._3dOVA p,
._2DJRP,
._27qMJ ._3uGZX,
._2gYCA,
._3m4dQ ._1EwpT ._1p8YQ,
.gFz00 ._866Xo,
._1AcPw,
.thpg9 ._30x4c,
._3fXz-,
.NfAio ._2OWXu ._1P5VR,
._3XT8I,
._3WA3M .onnEk ._1PyOv,
._2_5Hp, ._2oQxF,
._3IfFb,
._2C7HC .Cs_JH .vtX8i,
._3a9Me,
._1gkvT, .L5OmD, ._2nXIt {
font-size: 14px;
}
@media (max-width:989px) {
._2iUzn ._3Xaga {
font-size:14px;
}
}
@media (max-width:540px) {
._2nXIt,
.L5OmD,
._36wTL,
._1vRpg,
._3lVNJ {
font-size:14px;
}
}
._9_iKR, .f9S7I .SsTCF {
font-size:15px;
}
/* end font resizing block */
/*TODO these may need adjusted but i have no idea what they're for
._3djI6 .Tysyw._33zMC,
._1N6Lo ._1dLVj ._3A6x8,
._1mXTR,
._2m1qj._39i5p h1, ._2m1qj._39i5p h2 {
font-size:16px;
}*/
/*._2KXPE,*/
._3e9MM {
background-color: rgba(var(--tcc-transparent-bg-beta)) !important;
}
/*** 2019 THEME ***/
/* Main Background */
.l-container.l-container--two-column-dashboard .l-content,
.l-container.l-container--two-column .l-content,
.post_avatar,
.l-container.l-container--two-column-dashboard .left_column,
.l-container.l-container--two-column,
.l-container.l-container--two-column-dashboard,
.l-header-container--refresh,
.identity,
.identity,
.l-container.l-container--two-column-dashboard .right_column,
.l-container.l-container--two-column .right_column,
.post_avatar .post_avatar_link,
.toastr .toast,
.l-container.l-container--flex .l-content,
.search_results_container .tumblelog_mask_item {
background-color: rgb(var(--tcc-main-bg));
}
.identity .right_column::after {
background: linear-gradient(180deg, rgb(var(--tcc-main-bg)), rgba(0, 0, 0, 0));
}
.radar .radar_footer .radar_avatar::before {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(var(--tcc-main-bg)));
}
.rapid-recs-container .rapid-recs {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgb(var(--tcc-main-bg)) 15%, rgb(var(--tcc-main-bg)) 85%, rgba(0, 0, 0, 0));
}
.identity .controls_section.user_list li .follow_list_item_blog::before {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--tcc-main-bg));
border-right: 5px solid rgb(var(--tcc-main-bg));
}
#left_column .post_full .post_permalink,
#search_posts .post_full .post_permalink {
border-top-color: rgb(var(--tcc-main-bg)) !important;
border-right-color: rgb(var(--tcc-main-bg)) !important;
}
.tab-bar-container .tab_notice,
.tab_notice .tab_notice_value,
.plus-follow-button {
color: rgb(var(--tcc-main-bg));
}
.tab-notice--outlined {
border-color: rgb(var(--tcc-main-bg));
}
/* Transparent overlay background */
.blue#glass_overlay,
.blue#hello_glass,
.blue.glass,
body.flag--always-opaque-peepr .ui_peepr_glass,
.ui_peepr_glass,
.ui_dialog_lock {
background: rgb(var(--tcc-transparent-bg));
}
.blue#glass_overlay,
.blue#hello_glass,
.blue.glass {
transition: background-color .2s linear;
background: rgb(var(--tcc-transparent-bg));
z-index: 160;
}
.post-forms-glass,
.discover_actions_discover .elevator,
.search_actions_search .elevator {
background-color: rgb(var(--tcc-transparent-bg));
}
/* Likes */
.post_controls .post_control.like.liked::before,
.post .post_animated_heart,
.standalone-ad-container .post_animated_heart {
color: rgb(var(--tcc-like));
}
.notification_like .avatar_frame::before,
.notes .note.like .avatar_frame::before,
.ui_avatar .frame.like::before {
background: rgb(var(--tcc-like));
}
.like .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: rgb(var(--tcc-like));
}
/* Cancel/Remove Buttons */
.control-reblog-trail .remove-button,
.editor .media-holder .media-killer {
background: rgb(var(--tcc-like));
border-color: rgb(var(--tcc-like));
}
/* Reblogs */
.post_controls .post_control.reblog.reblogged::before,
.post .post_reblog_poof {
color: rgb(var(--tcc-reblog));
}
.reblog .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: rgb(var(--tcc-reblog));
}
.notification_reblog .avatar_frame::before,
.notes .note.reblog .avatar_frame::before,
.ui_avatar .frame.reblog::before,
.chrome.green,
.reblog-list-item .reblog-avatar.sub-icon-reblog::before {
background: rgb(var(--tcc-reblog));
}
/* Replies & Asks */
.notification_reply .avatar_frame::before,
.notification_photo_reply .avatar_frame::before,
.notification_answer .avatar_frame::before,
.notes .note.reply .avatar_frame::before,
.notes .note.photo .avatar_frame::before,
.notes .note.answer .avatar_frame::before,
.notes .note.user_mention .avatar_frame::before,
.ui_avatar .frame.reply::before {
background: rgb(var(--tcc-reply));
}
.notification .notification_right .preview_frame.conversation,
.ui_post_badge.conversation {
background-color: rgb(var(--tcc-reply));
}
.answer .post-activity-note-avatar .post-activity-avatar-link::after,
.reply .post-activity-note-avatar .post-activity-avatar-link::after {
background-color: rgb(var(--tcc-reply));
}
/* Mentions */
.notification_user_mention .avatar_frame::before,
.notes .note.user_mention .avatar_frame::before,
.ui_avatar .frame.user_mention::before,
.ui_avatar .frame.note_mention::before {
background: rgb(var(--tcc-mention));
}
/* Follows */
.notification_follower .avatar_frame::before,
.notification_group_member .avatar_frame::before,
.notes .note.follower .avatar_frame::before,
.ui_avatar .frame.follower::before {
background: rgb(var(--tcc-follow));
}
/* Notification Flags, Buttons, and Other Bright Blue Things */
.popover--reblog-graph .reblog-graph-info-button,
.messaging-conversation--open .conversation-compose .compose-text-input-container .submit-button .submit,
.messaging-conversation--open .conversation-compose .compose-text-input-container .submit-button .submit,
.post-activity-reply .submit,
.search-follow-button .follow-text,
.worded-follow-button .follow-text,
.post-content-text .tmblr-truncated .tmblr-truncated-link,
.post-content-text .tmblr-truncated::after,
.post .post_body .tmblr-truncated .tmblr-truncated-link,
.post .post_body .tmblr-truncated::after,
.reblog-content .tmblr-truncated .tmblr-truncated-link, .reblog-content .tmblr-truncated::after,
.ui_notes .activity-notification .activity-notification__activity .activity-notification__activity_message .activity-notification__activity_reply .activity-notification__activity_reply_link,
.messaging-inbox .inbox-compose-toggle .compose-start,
.ui_notes .activity-notification .activity-notification__icon .note_follow,
.post .post_content_inner.safemode .link,
.post .post_content_inner.tagfiltering .link,
.post-form--tag-editor .tag-label.hover-style,
.post-form--tag-editor .tag-label.selected,
.reblog_follow_button .follow-text,
.worded-follow-button .follow-text,
.sidebar_link.explore_link,
.blog-selector-container .selected-blog .caret.is-open,
.messaging-inbox .inbox-conversations .is-unread.inbox-conversation .name-container {
color: rgb(var(--tcc-bright-button));
}
.logged-out-header .signup-button,
.logged-out-header .signup-button:active,
.logged-out-header .signup-button:focus,
.tab_notice,
.post-form--controls .controls-container .post-form--save-button .split-button,
.post-form--controls .controls-container .post-form--save-button .split-button:active,
.ui_dialog .chrome.blue,
.chrome.blue:active,
.messaging-conversation--open .conversation-header:not(.has-image),
.messaging-conversation--open .conversation-header:not(.has-image),
.bubbles > div.active {
background-color: rgb(var(--tcc-bright-button));
}
.yahoo-view-link-container .yahoo-view-link,
.selected .tab_notice,
.chrome.blue,
.blog-selector-container .selected-blog .caret.has-badge,
.tumblr_settings .blocked_blogs .tag-pill,
.binary_switch input[type="checkbox"]:checked ~ .binary_switch_track {
background: rgb(var(--tcc-bright-button));
}
.compose-button {
fill: rgb(var(--tcc-bright-button));
}
.chrome.blue,
.chrome.blue:active {
border-color: rgb(var(--tcc-bright-button));
}
.chrome.blue:active {
filter: saturate(50%);
}
.post-form--controls .controls-container .post-form--save-button .split-button .button-area.disabled,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area.disabled.active,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area[disabled],
.post-form--controls .controls-container .post-form--save-button .split-button .button-area[disabled]:active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area.disabled,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area.disabled.active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area[disabled],
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area[disabled]:active,
.post-form--controls .controls-container .post-form--save-button .split-button:active,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area:focus,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area:focus,
.post-form--controls .controls-container .post-form--save-button .split-button .button-area:active,
.post-form--controls .controls-container .post-form--save-button .split-button .dropdown-area:active {
border-color: rgb(var(--tcc-bright-button));
background-color: rgb(var(--tcc-bright-button));
}
.editor .over-bottom:after,
.editor .over-top:before {
background-color: rgb(var(--tcc-bright-button));
}
/* Dull (mostly used for toggles that are turned off */
.chrome {
border-color: rgb(var(--tcc-dull-button));
border-bottom-color: rgb(var(--tcc-dull-button));
background: rgb(var(--tcc-dull-button));
}
.binary_switch .binary_switch_track {
background-color: rgb(var(--tcc-dull-button));
}
.logged-out-header .login-button,
.logged-out-header .login-button:active,
.logged-out-header .login-button:focus {
background-color: rgb(var(--tcc-dull-button));
color: rgb(var(--tcc-main-bg));
}
/* Active Buttons */
.tumblr_settings--account .account-sessions .current .bold-copy {
color: rgb(var(--tcc-link-post));
}
.chrome.green {
border-color: rgb(var(--tcc-link-post));
}
/* Text Posts */
.new_post_label i.icon_post_text {
color: rgb(var(--tcc-text-post));
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.regular,
.notification .notification_right .preview_frame.regular,
.ui_post_badge.regular,
.notification .notification_right .preview_frame.regular,
.ui_post_badge.regular,
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.ask_answer {
background-color: rgb(var(--tcc-text-post));
}
/* Photo Posts */
.new_post_label i.icon_post_photo {
color: rgb(var(--tcc-photo-post));
}
/* Quote Posts */
.new_post_label i.icon_post_quote {
color: rgb(var(--tcc-quote-post));
}
.post_micro.is_quote .post_content {
background: rgb(var(--tcc-quote-post));
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.quote,
.notification .notification_right .preview_frame.quote,
.ui_post_badge.quote {
background-color: rgb(var(--tcc-quote-post));
}
/* Link Posts */
.new_post_label i.icon_post_link {
color: rgb(var(--tcc-link-post));
}
.post_micro.is_link .post_content {
background: rgb(var(--tcc-link-post));
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.link,
.notification .notification_right .preview_frame.link,
.ui_post_badge.link {
background-color: rgb(var(--tcc-link-post));
}
/* Chat Posts */
.new_post_label i.icon_post_chat {
color: rgb(var(--tcc-chat-post));
}
.post_micro.is_chat .post_content {
background: rgb(var(--tcc-chat-post));
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.conversation,
.notification .notification_right .preview_frame.conversation,
.ui_post_badge.conversation,
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.conversation {
background-color: rgb(var(--tcc-chat-post));
}
/* Audio Posts */
.new_post_label i.icon_post_audio {
color: rgb(var(--tcc-audio-post));
}
.audio-player,
.post_micro.is_audio .post_content {
background: rgb(var(--tcc-audio-post));
}
.ui_notes .activity-notification .activity-notification__icon .ui_post_badge.audio,
.notification .notification_right .preview_frame.audio,
.ui_post_badge.audio {
background-color: rgb(var(--tcc-audio-post));
}
/* Video Posts */
.new_post_label i.icon_post_video {
color: rgb(var(--tcc-video-post));
}
/* The showcase, which is bad */
.showcase .login-section .about-tumblr-btn,
.showcase .about-section {
background: rgb(var(--tcc-link-post));
}
.showcase .about-section .about-graphic .big-t path {
fill: rgb(var(--tcc-link-post));
}
.showcase .about-section .about-graphic .graphic-icon, .showcase .about-section .about-graphic .graphic-icon circle, .showcase .about-section .about-graphic .graphic-icon line, .showcase .about-section .about-graphic .graphic-icon path, .showcase .about-section .about-graphic .graphic-icon polygon{
fill: rgb(var(--tcc-link-post));
stroke: #333; /* TODO maybe use something else? */
}
.showcase .blogs-section {
background: rgb(var(--tcc-audio-post));
}
.showcase .dashboard-section {
background: rgb(var(--tcc-main-bg));
}
.showcase .create-section {
background: rgb(var(--tcc-quote-post));
}
.showcase .create-section .create-graphic .post-icon {
color: rgb(var(--tcc-quote-post));
}
/* Rec searches and other garbage */
.discover .discover-search-term-item:nth-child(6n+1) .discover-search-term {
background-color: rgb(var(--tcc-link-post));
}
.discover .discover-search-term-item:nth-child(6n+2) .discover-search-term {
background-color: rgb(var(--tcc-photo-post));
}
.discover .discover-search-term-item:nth-child(6n+3) .discover-search-term {
background-color: rgb(var(--tcc-quote-post));
}
.discover .discover-search-term-item:nth-child(6n+4) .discover-search-term {
background-color: rgb(var(--tcc-chat-post));
}
.discover .discover-search-term-item:nth-child(6n+5) .discover-search-term {
background-color: rgb(var(--tcc-video-post));
}
.discover .discover-search-term-item:nth-child(6n+6) .discover-search-term {
background-color: rgb(var(--tcc-misc-color));
}
/* This is a hack on tumblr's end that I'm electing to remove instead of fix */
.identity .controls_section.user_list li:active .follow_list_item_blog::before,
.identity .controls_section.user_list li:hover .follow_list_item_blog::before,
.identity .user_list li:hover .follow_list_item_blog::before {
background-image: none;
border-right: none;
}
/* If the Make-New-Post Screen is set to anything other than "New (Bright) Colors", that code will show up below: */
/*[[postTypeImg]]*/
}