Upwork Dark Theme
Upwork Dark Theme by barmaleyko
Details
Authorbarmaleyko
LicenseNo License
Categoryupwork.com
Created
Updated
Size64 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Upwork dark style
@namespace B@rm@le1ko
@author B@rm@le1ko
@description `Dark theme for www.upwork.com`
@version 1.21
@license MIT
@preprocessor uso
==/UserStyle== */
@-moz-document domain("www.upwork.com") {
html,
body,
a body,
.nav-v2,
.nav-dropdown .nav-item,
.up-card-section div .unread,
.up-card-section .unread,
.desktop-layout-header,
#layout-index,
.rooms-container,
.up-d-room-list,
.up-d-room-list-item,
.up-input-group,
.search-input-group,
.up-d-room,
.up-d-room-header,
.scroll-wrapper,
.story-day-header,
.separator,
.story-day-header span,
.up-d-room-actions,
.up-d-room-actions:hover,
.up-d-generic-info-panel,
.add-coworker,
.story-message-header:hover,
.story-menu,
.story-menu:hover,
.favorite-menu,
.favorite-menu:hover,
.up-d-story,
.up-d-story:hover,
.nav-dropdown-menu,
.d-md-block,
.d-flex li,
.list-unstyled li,
.title,
.content,
.pb-15,
.pt-30,
.m-0,
.d-block,
#nav-main,
.sticky-header,
.py-5,
.sidebar-layout,
.sidebar-layout .up-d-resizer,
.up-d-sidebar,
.sidebar,
.up-skill-badge,
.up-loader-overlay,
#bench-link-allYourSaves,
.expand-control span,
.info-list .strong,
.info-list .strong-sm,
.left-menu button,
.nav-search-form .nav-search-input-container input,
.nav-search-dropdown-container,
.nav-search-autosuggest-input,
input::placeholder,
.nav-search-dropdown-container button,
.room-list-menu,
.layout-container .layout main#main,
.browse-category-container button,
.browse-category-container a,
.skeleton,
.is-skeleton,
.up-d-skeleton,
#user_undefined_avatar,
.layout-container,
.container-visitor,
.image-wrapper,
.gallery-preview,
.gallery,
.steps,
.pb-lg-20,
#more-projects,
#completed h4 a,
#main,
.login-link,
.vs-bg-white,
.how-to-hire-home-page-container .air3-step,
.how-to-hire-home-page-container .how-to-hire-details,
.air3-card,
.updated-why-upwork .vs-bg-up-gray,
.visitor-actions-v3,
#visitor-v2-top-navigation-container .nav-v2.nav-visitor .nav-wrapper {
--bg-inverse: #111;
--body-bg: #111;
--primary-bg-highlight: #111;
--btn-bg: #111;
--btn-bg-hover: #111;
--bg-5: #111;
--bg-6: #111;
--text-1: #aaa;
--text-2: #6b8f55;
--text-3: #aaa;
--text-4: #aaa;
--text-5: #aaa;
--text-6: #aaa;
--text-7: #aaa;
--text-8: #aaa;
--text-dark: #aaa;
background: #111 !important;
background-color: #111 !important;
color: #aaa !important;
box-shadow: none !important;
}
*::-webkit-scrollbar {
width: 12px !important;
}
*::-webkit-scrollbar-track {
background: #222 !important;
}
*::-webkit-scrollbar-thumb {
background-color: #555 !important;
border-radius: 20px !important;
border: 3px solid #333 !important;
}
[design-system=air-3-0],
[theme=air-2-76],
[theme=air-3-0],
html[theme=dark],
html[theme=high-contrast-light] {
--ws-mobile-x: var(--ws-4x);
--ws-heading: 0.5em;
--height-base: 40px;
--height-sm: 32px;
--width-sm: 218px;
--max-width-global-container: 1600px;
--font-family-base: "Neue Montreal";
--font-family-rebrand: Rza, Rza-fallback;
--font-size-base: 16px;
--line-height-base: 22px;
--font-size-base-sm: 14px;
--line-height-base-sm: 20px;
--font-size-base-xs: 11px;
--line-height-base-xs: 16px;
--font-size-h1: 48px;
--line-height-h1: 48px;
--font-size-h2: 36px;
--line-height-h2: 40px;
--font-size-h3: 28px;
--line-height-h3: 36px;
--font-size-h4: 24px;
--line-height-h4: 32px;
--font-size-h5: 20px;
--line-height-h5: 28px;
--font-weight-base: var(--font-weight-500);
--font-weight-body: var(--font-weight-400);
--font-weight-strong: var(--font-weight-500);
--font-weight-heading: var(--font-weight-500);
--font-weight-label: var(--font-weight-500);
--font-weight-sub-label: var(--font-weight-400);
--font-weight-rebrand: var(--font-weight-400);
--letter-spacing-base: 0.02em;
--letter-spacing-h1: 0;
--letter-spacing-h2: 0.1px;
--letter-spacing-h3: 0.2px;
--letter-spacing-h4: 0.3px;
--letter-spacing-h5: 0.4px;
--letter-spacing-h1-rebrand: -2px;
--letter-spacing-h2-rebrand: -1px;
--letter-spacing-h3-rebrand: -0.5px;
--letter-spacing-h4-rebrand: -0.25px;
--letter-spacing-h5-rebrand: 0;
--text-heading: inherit;
--text-label: inherit;
--text-link: var(--brand-green);
--text-link-hover: var(--up-green);
--text-link-navigation: var(--up-black);
--text-link-navigation-hover: var(--up-green);
--text-link-navigation-dark: var(--up-black);
--text-link-navigation-dark-hover: var(--up-black);
--text-link-navigation-light: var(--gray-45);
--text-link-navigation-light-hover: var(--up-green);
--text-link-navigation-selected: var(--brand-green);
--text-link-inverse: var(--white);
--text-link-inverse-hover: var(--opacity-white-80);
--underline-link: underline;
--underline-link-hover: underline;
--border-color: var(--gray-70);
--border: 1px solid #555;
--border-color-inverse: var(--white);
--border-inverse: 1px solid var(--border-color-inverse);
--bg-info: var(--up-black);
--text-on-info: var(--white);
--bg-success: var(--up-green);
--text-on-success: var(--white);
--bg-warning: var(--yellow);
--text-on-warning: var(--up-black);
--bg-danger: var(--brick);
--text-on-danger: var(--white);
--bg-notification: var(--orange-red);
--text-on-notification: var(--white);
--bg-offline: var(--gray-60);
--bg-info-light: var(--gray-95);
--text-on-info-light: var(--up-black);
--bg-success-light: var(--opacity-up-green-15);
--text-on-success-light: var(--up-black);
--bg-warning-light: var(--opacity-yellow-25);
--text-on-warning-light: var(--up-black);
--bg-danger-light: var(--opacity-brick-15);
--text-on-danger-light: var(--up-black);
--color-info: var(--up-black);
--color-success: var(--up-green);
--color-warning: var(--yellow);
--color-danger: var(--brick);
--color-notification: var(--orange-red);
--border-width-btn: 2px;
--bg-btn-dark: var(--brand-green);
--bg-btn-dark-hover: var(--up-green);
--text-on-btn-dark: var(--white);
--text-on-btn-dark-hover: var(--white);
--border-color-btn-dark: transparent;
--shadow-on-btn-dark: none;
--text-icon-on-btn-dark: inherit;
--bg-btn-light: var(--white);
--bg-btn-light-hover: var(--gray-95);
--text-on-btn-light: var(--brand-green);
--text-on-btn-light-hover: var(--brand-green);
--border-color-btn-light: currentColor;
--shadow-on-btn-light: none;
--text-icon-on-btn-light: inherit;
--bg-btn-muted: var(--white);
--bg-btn-muted-hover: var(--gray-95);
--text-on-btn-muted: var(--brand-green);
--text-on-btn-muted-hover: var(--brand-green);
--border-color-btn-muted: var(--gray-70);
--shadow-on-btn-muted: none;
--text-icon-on-btn-muted: inherit;
--bg-btn-dark-inverted: var(--white);
--bg-btn-dark-inverted-hover: var(--opacity-white-80);
--text-on-btn-dark-inverted: var(--up-black);
--text-on-btn-dark-inverted-hover: var(--up-black);
--border-color-btn-dark-inverted: transparent;
--shadow-on-btn-dark-inverted: none;
--text-icon-on-btn-dark-inverted: inherit;
--bg-btn-light-inverted: transparent;
--bg-btn-light-inverted-hover: var(--opacity-up-black-20);
--text-on-btn-light-inverted: var(--white);
--text-on-btn-light-inverted-hover: var(--white);
--border-color-btn-light-inverted: currentColor;
--shadow-on-btn-light-inverted: none;
--text-icon-on-btn-light-inverted: inherit;
--bg-btn-muted-inverted: transparent;
--bg-btn-muted-inverted-hover: var(--opacity-up-black-20);
--text-on-btn-muted-inverted: var(--white);
--text-on-btn-muted-inverted-hover: var(--white);
--border-color-btn-muted-inverted: var(--opacity-up-black-20);
--shadow-on-btn-muted-inverted: none;
--text-icon-on-btn-muted-inverted: inherit;
--bg-btn-link: transparent;
--bg-btn-link-hover: transparent;
--text-on-btn-link: var(--brand-green);
--text-on-btn-link-hover: var(--up-green);
--underline-btn-link: none;
--underline-btn-link-hover: none;
--bg-btn-circle: transparent;
--bg-btn-circle-hover: var(--gray-90);
--text-on-btn-circle: var(--brand-green);
--text-on-btn-circle-hover: var(--brand-green);
--bg-btn-circle-inverted: transparent;
--bg-btn-circle-inverted-hover: var(--opacity-up-black-20);
--text-on-btn-circle-inverted: var(--white);
--text-on-btn-circle-inverted-hover: var(--white);
--text-on-btn-close: var(--up-black);
--text-on-btn-close-hover: var(--up-black);
--text-inverse-on-btn-close: var(--white);
--bg-btn-group: var(--white);
--bg-btn-group-hover: var(--gray-95);
--border-color-btn-group: var(--gray-70);
--border-color-bt...