@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap');
/*
:root =
:host > * = the root of the extension shadow DOM contents
*//* SPACING */:host > *,
:root {
--s1: 10px;
--s2: 20px;
--s3: 30px;
--s4: 40px;
--s5: 50px;
--spacer-0: 0;
--spacer-1: .125rem;/* 2px */
--spacer-2: .25rem; /* 4px */
--spacer-3: .5rem; /* 8px */
--spacer-4: .75rem; /* 12px */
--spacer-5: 1rem; /* 16px */
--spacer-6: 1.25rem;/* 20px */
--spacer-7: 1.5rem; /* 24px */
--spacer-8: 2rem; /* 32px */
--spacer-9: 2.5rem; /* 40px */
--spacer-10: 3rem; /* 48px */
--min-left-pad: 32px;
}/* FONTS */:host > *,
:root {
/* font weights */
--font-weight-lighter: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-size-xs: 0.6875rem; /* 11px */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 0.875rem; /* 14px */ /* --f9 */
--font-size-lg: 1rem; /* 16px */
--font-size-xl: 1.25rem; /* 20px */
--line-height-xs: 1rem; /* 16px */
--line-height-sm: 1.125rem; /* 18px */
--line-height-base: 1.25rem; /* 20px */
--line-height-lg: 1.5rem; /* 24px */
--line-height-xl: 1.5625rem; /* 25px */
--f2: 3.25rem;/* Deprecated */
--f3: 1.8rem;/* Deprecated */
--f4: 1.38rem;/* Deprecated */
--f5: 1.35rem;/* Deprecated */
--f6: var(--font-size-2xl); /* Deprecated */
--f7: var(--font-size-xl); /* Deprecated */
--f8: var(--font-size-lg); /* Deprecated */
--f9: var(--font-size-base); /* Deprecated */
--f10: var(--font-size-sm); /* Deprecated */
--f11: var(--font-size-xs); /* Deprecated */
/* letter-spacing that works with the above sizes */
--ls-6: -0.017em;
--ls-7: -0.014em;
--ls-8: -0.011em;
--ls-9: -0.006em;
--ls-10: 0em;
--ls-11: 0.005em;
--ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--content-line-height: 1.6;
}/* base COLORS (not themed) */:host > *,
:root {
/*
Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
*/
/* Readwise - Neutrals color palette */
/* neutral */
--neutral-100: #ffffff;
--neutral-97: #f8f9fa;
--neutral-95: #f0f1f2;
--neutral-90: #e0e3e6;
--neutral-85: #d1d5d9;
--neutral-80: #c1c7ce;
--neutral-75: #b1b9c2;
--neutral-70: #a2acb7;
--neutral-65: #959faa;
--neutral-60: #88929c;
--neutral-55: #7c858f;
--neutral-50: #6e7883;
--neutral-45: #616c77;
--neutral-40: #545f6b;
--neutral-35: #48535f;
--neutral-30: #3e4853;
--neutral-25: #333c46;
--neutral-20: #28313b;
--neutral-15: #1f272f;
--neutral-10: #151c23;
--neutral-07: #10161d;
--neutral-05: #0c1117;
--neutral-00: #000000;
/* Readwise - Color color palette
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
*/
/* red */
--red-97: #fff6f3;
--red-90: #f9dcd2;
--red-80: #f9b3a3;
--red-70: #f5897b;
--red-60: #f65c52;
--red-50: #d8403a;
--red-40: #a73832;
--red-30: #78312a;
--red-20: #4d2520;
--red-10: #2b1612;
/* orange */
--orange-97: #fcf9ed;
--orange-90: #fae0af;
--orange-80: #fab960;
--orange-70: #fa8b25;
--orange-60: #ea6215;
--orange-50: #c74e1e;
--orange-40: #9a461c;
--orange-30: #73350c;
--orange-20: #4b290d;
--orange-10: #2c1701;
/* yellow */
--yellow-97: #fafae1;
--yellow-90: #f3e781;
--yellow-80: #f7dc1f;
--yellow-70: #e1bf0c;
--yellow-60: #c19d18;
--yellow-50: #a4780e;
--yellow-40: #895401;
--yellow-30: #6b3d13;
--yellow-20: #472b0d;
--yellow-10: #281901;
/* green */
--green-97: #eefdee;
--green-90: #c4f3c2;
--green-80: #8fdc8e;
--green-70: #62bd63;
--green-60: #43ac47;
--green-50: #318835;
--green-40: #357136;
--green-30: #2e542e;
--green-20: #233823;
--green-10: #152114;
/* teal */
--teal-97: #effbfd;
--teal-90: #c1eef4;
--teal-80: #77d8e4;
--teal-70: #12c1d2;
--teal-60: #00a6b4;
--teal-50: #008692;
--teal-40: #136f79;
--teal-30: #18535a;
--teal-20: #0d363b;
--teal-10: #002226;
/* blue */
--blue-97: #f2faff;
--blue-90: #cfe7fd;
--blue-80: #a8ccef;
--blue-70: #76b2ed;
--blue-60: #5292f1;
--blue-50: #2d75e5;
--blue-40: #1a59c8;
--blue-30: #25438f;
--blue-20: #243056;
--blue-10: #181c2b;
/* indigo */
--indigo-97: #f8f7fe;
--indigo-90: #e4e0f8;
--indigo-80: #c6bfee;
--indigo-70: #aca0e6;
--indigo-60: #957de8;
--indigo-50: #8059e4;
--indigo-40: #693fc6;
--indigo-30: #4e358e;
--indigo-20: #362c57;
--indigo-10: #1e1636;
/* purple */
--purple-97: #fdf6fc;
--purple-90: #f2dbf2;
--purple-80: #e4b7ea;
--purple-70: #d693e0;
--purple-60: #c66ed9;
--purple-50: #b543d0;
--purple-40: #8c3ca2;
--purple-30: #663473;
--purple-20: #412a48;
--purple-10: #241a27;
/* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
--black: var(--neutral-00);
--white: var(--neutral-100);
/* New base styles for these colours will come */
--svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
--svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
--svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
--svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}/* default THEME colors */:host > *,
:root {
/* FOUNDATIONS */
/* Naming syntax
We use the following order when naming css properties. The "default" text can be omitted.
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
background default default default default default
text button error selected primary hover
icon galleryList success secondary active
border toolbar info
Button example:
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
background button default default secondary hover
background-button-secondary-hover
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
text button default default primary active
text-button-primary-active
/*
/* Utility alpha classes */
--u-alpha-100: rgba(40,49,59,0.03);
--u-alpha-200: rgba(40,49,59,0.06);
--u-alpha-300: rgba(40,49,59,0.09);
--u-alpha-400: rgba(40,49,59,0.12);
--u-alpha-500: rgba(40,49,59,0.15);
--u-alpha-blue-100: rgba(26,89,200,0.03);
--u-alpha-blue-200: rgba(26,89,200,0.06);
--u-alpha-blue-300: rgba(26,89,200,0.09);
--u-alpha-blue-400: rgba(26,89,200,0.12);
--u-alpha-blue-500: rgba(26,89,200,0.15);
--u-alpha-red-100: rgba(216,64,58,0.03);
--u-alpha-red-200: rgba(216,64,58,0.06);
--u-alpha-red-300: rgba(216,64,58,0.09);
--u-alpha-red-400: rgba(216,64,58,0.12);
--u-alpha-red-400: rgba(216,64,58,0.15);
--focus-ring-color: var(--blue-60);
/* Text */
--text-primary: var(--neutral-20);
--text-secondary: var(--neutral-45);
--text-tertiary: var(--neutral-60);
--text-placeholder: var(--neutral-65);
--text-disabled: var(--neutral-75);
--text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
--text-interactive: var(--blue-50);
--text-backlink: var(--indigo-40);
--text-error: var(--red-50);
--text-success: var(--green-50);
/* Icons */
--icon-primary: var(--neutral-25);
--icon-secondary: var(--neutral-45);
--icon-tertiary: var(--neutral-60);
--icon-disabled: var(--neutral-75);
--icon-interactive: var(--blue-50);
--icon-danger: var(--red-50);
--icon-success: var(--green-50);
--icon-inverse: var(--neutral-97);
--icon-faint: var(--neutral-90);
/* Extension bar */
--extension-bar-background-color: var(--neutral-97);
/* Highlights */
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
--highlight-background-color--active: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--highlight-text-color: var(--black);
--highlight-text-color--active: var(--black);
--highlight-text-pre-color: var(--white);
--highlight-text-pre-color--active: var(--white);
/* Text Selection */
--selection-color: rgba(0, 114, 255, 0.3);
/* Borders */
--border-primary: var(--neutral-80);
--border-secondary: var(--neutral-90);
--border-secondary-alpha: var(--u-alpha-400);
--border-tertiary-alpha: var(--u-alpha-200);
--border-focus: var(--blue-60);
--border-error: var(--red-60);
/* Backgrounds */
--background-primary: var(--neutral-100);
--background-secondary: var(--neutral-90);
--background-tertiary: var(--neutral-95);
--background-inverse: var(--neutral-10);
--background-canvas: var(--neutral-97);
--background-elevated: var(--neutral-100);
--background-backdrop: var(--u-alpha-300);
--background-dragging: rgba(f, f, f, 0.7);
--background-interactive: var(--blue-50);
--background-error: var(--red-97);
--background-bulk-actions-header: var(--blue-90);
/* Shadows */
--shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
--shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
--shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
--shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);
/* COMPONENTS */
/* Progress bar */
--reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
--reading-progress-background: var(--neutral-90);
--reading-progress-max-background: var(--neutral-75);
--reading-progress-point: var(--neutral-40);
/* Buttons */
/* primary - deprecated */
--primary-button-background: var(--u-alpha-blue-200); /* deprecated */
--primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
--primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
--primary-button-color: var(--text-primary); /* deprecated */
/* primary */
--background-button-primary: var(--u-alpha-blue-200);
--background-button-primary-hover: var(--u-alpha-blue-300);
--background-button-primary-active: var(--u-alpha-blue-400);
--text-button-primary: var(--text-primary);
--text-button-primary-disabled: var(--text-disabled);
/* secondary */
--background-button-secondary: var(--u-alpha-200);
--background-button-secondary-hover: var(--u-alpha-300);
--background-button-secondary-active: var(--u-alpha-400);
--background-button-secondary-disabled: var(--u-alpha-200);
--text-button-secondary: var(--text-primary);
--text-button-secondary-disabled: var(--text-disabled);
--btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */
/* blue */
--background-button-blue: var(--blue-50);
--background-button-blue-hover: var(--blue-40);
--background-button-blue-active: var(--blue-30);
--background-button-blue-disabled: var(--u-alpha-200);
--text-button-blue: var(--white);
--text-button-blue-disabled: var(--text-disabled);
/* caution */
--background-button-caution: var(--u-alpha-red-200);
/* Document card */
--document-card-width: 208px;
--document-card-border: var(--border-secondary-alpha);
--document-card-border-divider: var(--white);
--document-card-focus-border-color: var(--focus-ring-color);
--document-card-border-radius: 8px;
--document-card-background: #fff;
--document-card-background--hover: var(--document-card-background);
--document-card-book-image-container-background: var(--background-canvas);
--document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
--document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);
/* Link card */
--link-card-background: var(--document-card-background);
--link-card-border-radius: var(--document-card-border-radius);
--link-card-border: var(--border-secondary-alpha);
--link-card-border--hover: var(--border-primary);
/* Donut progress indicator */
--donut-progress-indicator-center-color: var(--document-card-background);
/* Sidebar */
--sidebar-background: var(--background-canvas);
--empty-sidebar-background: var(--blue-97);
--sidebar-button-icon-color: var(--icon-secondary);
--sidebar-inbox-nav-background: #fff;
--hide-sidebar-button-background: var(--neutral-95);
--thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
--sidebar-logo-color: #000;
/* Image placeholders */
--image-placeholder-color: var(--neutral-97);
--image-placeholder-shadow-color: var(--neutral-85);
/* Main background surfaces */
--background-color: var(--background-primary);
--content-background-color: var(--background-primary);
--code-background-color: var(--background-tertiary);
/* Popovers */
--edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);
--main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
--main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
--main-highlighter-popover-action-hover-background: var(--u-alpha-100);
--highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);
/* Sort menu */
--sort-menu-background: #fff;
/* Tag */
--tag-background: var(--u-alpha-200);
/* Misc */
--content-secondary-color: var(--text-secondary);
--focus-indicator-color: var(--blue-70);
--section-border-color: var(--border-secondary-alpha);
--app-side-drop-shadow-width: 18px;
/* Appearance panel */
--appearance-panel-background: var(--background-elevated);
--appearance-panel-item-hover-background: var(--u-alpha-100);
/* Command palette */
--cmd-palette-background: var(--neutral-97);
--cmd-palette-cmd-container: var(--neutral-97);
--cmd-palette-section-title: var(--neutral-97);
--cmd-palette-row-hover: var(--u-alpha-100);
--cmd-palette-drop-shadow: var(--shadow-400);
--cmd-palette-scrollbar: var(--neutral-80);
--cmd-palette-key-background: var(--u-alpha-200);
--cmd-palette-row-border: var(--blue-50);
--cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
--cmd-palette-context-item-background: var(--background-tertiary);
--cmd-palette-context-item-border: var(--border-secondary);
--cmd-palette-label-color: var(--text-secondary);
--cmd-palette-close-icon-color: var(--icon-secondary);
/* Quoteshot modal */
--quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
--quoteshot-modal-background: var(--neutral-00);
--quoteshot-modal-settings-background: var(--neutral-10);
--quoteshot-interactive-border: var(--blue-60);
--quoteshot-ratio-border-inactive: var(--neutral-70);
--quoteshot-ratio-border-active: var(--neutral-95);
--quoteshot-save-button-text: var(--neutral-90);
--quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
--quoteshot-share-button-text: var(--neutral-00);
--quoteshot-share-button-background: var(--blue-70);
--quoteshot-share-dropdown-background: var(--neutral-20);
--quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
--quoteshot-share-dropdown-text: var(--neutral-90);
--modal-z-index: 9999;
/* PDF Search Bar */
--document-search-input-background: var(--neutral-100);
/* Inbox */
--inbox-sidebar-background: var(--background-canvas);
--inbox-icon-color: var(--icon-secondary);
--inbox-icon-color-disabled: var(--icon-disabled);
--inbox-icon-color-active: var(--icon-primary);
--inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
--inbox-zero-foreground-image-filter:
contrast(84%)
brightness(80%)
drop-shadow(0 0 1px rgba(0,0,0,0))
opacity(100%)
saturate(25%);
--inbox-zero-header-items-filter:
contrast(70%)
brightness(400%)
hue-rotate(0)
drop-shadow(0 0 2px rgba(0,0,0,1))
opacity(90%)
saturate(30%);
--inbox-zero-sidebar-items-filter:
contrast(98%)
brightness(500%)
hue-rotate(0)
drop-shadow(0px 0px 5px rgba(0,0,0,1))
opacity(100%)
saturate(300%);
--nav-item-filter: var(--svg-filter-inbox);
--nav-item-active-filter: var(--svg-filter-black);
--document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
--inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);
--import-link-color: var(--blue-50);
--tag-color: var(--u-alpha-200);
--tag-text-color: var(--text-secondary);
--scrollbar-color: var(--neutral-90);
--scrollbar-color-hover: var(--neutral-80);
--separator-color: rgba(0, 0, 0, 0.1);
--status-dot--unopened-color: var(--text-interactive);
--toast-background: #151C23;
--toast-background--error: var(--red-20);
--toast-background--info: var(--toast-background);
--toast-background--success: var(--toast-background);
--toast-background--warning: var(--toast-background);
--toast-border-radius: 6px;
--toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
--toast-max-width: calc(var(--s1)*40);
--toast-min-height: calc(var(--s1)*4.4);
--toast-font-size: var(--font-size-base);
--toast-gap: var(--s1);
--toast-icon-height: var(--s2);
--toast-icon-circle-fill: var(--icon-inverse);
--toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
--toast-progress-bar-color: var(--neutral-70);
--toast-progress-bar-color--error: var(--red-50);
--toast-progress-bar-color--info: var(--blue-60);
--toast-progress-bar-color--success: var(--green-60);
--toast-progress-bar-color--warning: var(--orange-70);
--toast-text-color: var(--white);
--toast-text-color-error: var(--toast-text-color);
--toast-button-color: var(--white);
--toast-button-color--error: var(--white);
--toast-button-color--info: var(--white);
--toast-button-color--success: var(--white);
--toast-button-color--warning: var(--white);
--tooltip-background--default: #3E4046;
--tooltip-background--error: var(--red-10);
--tooltip-background--info: var(--blue-10);
--tooltip-background--success: #021100;
--tooltip-background--warning: #4c2b00;
--tooltip-color--default: var(--text-inverse);
--tooltip-shortcut-background: var(--neutral-40);
--tooltip-shortcut-color:var(--text-inverse);
--document-list-focus-color: var(--u-alpha-100);
--primary-icon-filter: var(--svg-filter-black);
--action-button-border-color: var(--neutral-85);
--action-button-background: var(--neutral-97);
--action-button-shadow: var(--neutral-85);
--action-button-svg-color: var(--svg-filter-grey);
/* Metadata */
--summary-text: var(--text-primary);
--metadata-title: var(--text-secondary);
--metadata-value: var(--text-primary);
--metadata-input-background: var(--white);
--metadata-input-focus-background: var(--white);
--metadata-footer-button-background: rgba(255, 255, 255, 0.25);
--metadata-footer-color: var(--white);
--notebook-highlight-color: #344255;
--default-button-text-color: var(--text-primary);
--default-button-background: var(--u-alpha-200);
--default-button-hover-background: var(--u-alpha-300);
--default-button-active-background: var(--u-alpha-400);
--default-blurred-button-background: rgba(235, 237, 238, 0.7);
--default-blurred-button: 20px;
--inbox-header-tab-text-color: var(--text-tertiary);
--inbox-header-active-tab-text-color: var(--text-primary);
--inbox-header-search-icon: var(--icon-primary);
--inbox-header-tab-count-background: var(--u-alpha-200);
--inbox-header-tab-count-text-color: var(--text-secondary);
--inbox-header-tab-active-count-text-color: var(--text-secondary);
--document-list-title-color: var(--text-primary);
--document-list-item-tertiary-text-color: var(--text-secondary);
--document-list-doc-icon-color: var(--icon-tertiary);
--document-list-info-color: var(--text-secondary);
--document-list-action-button-color: var(--icon-primary);
--table-of-contents-item-color: var(--text-secondary);
--table-of-contents-bar-color: var(--border-secondary);
--table-of-contents-bar-active-color: #B5C3FB;
--search-input-background: var(--u-alpha-200);
--placeholder-fill-color: #A1AAC4;
--placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
--placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
--placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
--placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");
--empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");
/* Document share */
--document-share-width-popovers-float-at: 700px;
/* Radio group */
--radio-group-indicator-width: 20px;
--radio-group-indicator-background-color: var(--surface-primary);
--radio-group-indicator-border-color: var(--neutral-60);
--radio-group-indicator-active-color: var(--background-interactive);
--radio-group-indicator-hover-color: var(--neutral-97);
/* Badge */
--badge-background-color: var(--green-90);
--badge-text-color: var(--green-30);
/* TTS / audio player */
--tts-trigger-button-color: var(--text-secondary);
--tts-trigger-border-color: var(--u-alpha-300);
--tts-player-background: var(--white);
--tts-player-box-shadow:
0px 3px 10px 0px rgba(60, 64, 67, 0.2),
0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
0px 0px 0px 1px rgba(60, 64, 67, 0.05);
--tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);
/* Slider */
--slider-track-background: var(--neutral-80);
--slider-range-background: var(--neutral-50);
--slider-hover-range-background-color: var(--blue-50);
--slider-range-border-right-color: var(--white);
--slider-thumb-background: var(--white);
--slider-thumb-box-shadow:
0px 1px 4px 0px rgba(60, 64, 67, 0.4),
0px 0px 0px 1px rgba(0, 0, 0, 0.08);
/* These text variables will eventually be deprecated */
--text: var(--text-primary);
--text-grey: var(--text-secondary);
--text-grey-medium: var(--text-secondary);
--text-grey-lightish: var(--neutral-70);
--text-grey-lighter: var(--neutral-80);
--text-grey-dark: var(--text-primary);
--text-grey-darker: var(--text-primary);
--box-shadow-color: rgba(0, 0, 0, 0.15);
--file-dropzone-background: rgba(0, 0, 0, 0.7);
--file-dropzone-color: var(--white);
--transcript-teleprompt-background: rgba(89,142,244, .3);
--transcript-teleprompt-color: black
}@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {:host > *,
:root {
--default-blurred-button-background: #F2F3F4;
--default-blurred-button: 0px
}
}:host > *,
:root {
--onboarding-background-image: url("/onboarding/onboarding-background.webp");
--onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
--onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
--onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
--onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
--onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");
--checkbox-icon-color: var(--icon-inverse)
}:host > * .high-contrast, :root .high-contrast {
--highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
--highlight-background-color--active: hsl(50, 100%, 50%);
--highlight-image-background-color--normal: hsl(50, 100%, 50%);
--highlight-image-background-color--active: hsl(50, 100%, 50%);
--selection-color: rgb(74, 153, 255);
}.theme--dark {
/* FOUNDATIONS */
/* Utility alpha classes */
--u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
--u-alpha-200: rgba(110,120,131,0.15);
--u-alpha-300: rgba(110,120,131,0.20);
--u-alpha-400: rgba(110,120,131,0.25);
--u-alpha-500: rgba(110,120,131,0.30);
--u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
--u-alpha-blue-200: rgba(45,117,229,0.15);
--u-alpha-blue-300: rgba(45,117,229,0.20);
--u-alpha-blue-400: rgba(45,117,229,0.25);
--u-alpha-blue-500: rgba(45,117,229,0.30);
--u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
--u-alpha-red-200: rgba(216,64,58,0.15);
--u-alpha-red-300: rgba(216,64,58,0.20);
--u-alpha-red-400: rgba(216,64,58,0.25);
--u-alpha-red-500: rgba(216,64,58,0.30);
/* Text */
--text-primary: var(--neutral-90);
--text-secondary: var(--neutral-65);
--text-tertiary: var(--neutral-50);
--text-placeholder: var(--neutral-45);
--text-disabled: var(--neutral-40);
--text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
--text-interactive: var(--blue-70);
--text-backlink: var(--indigo-70);
--text-error: var(--red-60);
--text-success: var(--green-60);
/* Icons */
--icon-primary: var(--neutral-80);
--icon-secondary: var(--neutral-70);
--icon-tertiary: var(--neutral-45);
--icon-placeholder: var(--neutral-45);
--icon-disabled: var(--neutral-40);
--icon-interactive: var(--blue-70);
--icon-danger: var(--red-60);
--icon-success: var(--green-60);
--icon-inverse: var(--neutral-20);
--icon-faint: var(--neutral-30);
/* Highlights */
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
--highlight-background-color--active: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--highlight-text-color: var(--white);
--highlight-text-color--active: var(--white);
--highlight-text-pre-color: var(--white);
--highlight-text-pre-color--active: var(--white);
/* Borders */
--border-primary: var(--neutral-65);
--border-secondary: var(--neutral-20);
--border-secondary-alpha: var(--u-alpha-400);
--border-tertiary-alpha: var(--u-alpha-200);
--border-focus: var(--blue-60);
--border-error: var(--red-40);
/* Backgrounds */
--background-primary: var(--neutral-10);
--background-secondary: var(--neutral-15);
--background-tertiary: var(--neutral-20);
--background-inverse: var(--neutral-90);
--background-canvas: var(--neutral-07);
--background-elevated: var(--neutral-20);
--background-backdrop: rgba(0,0,0,0.4);
--background-dragging: rgba(40, 49, 59, 0.7);
--background-interactive: var(--blue-70);
--background-error: var(--red-10);
--background-bulk-actions-header: var(--blue-30);
/* Shadows */
--shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
--shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
--shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
--shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);
/* COMPONENTS */
/* Progress bar */
--reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
--reading-progress-background: var(--neutral-20);
--reading-progress-max-background: var(--neutral-35);
--reading-progress-point: var(--neutral-90);
/* Buttons */
/* primary - deprecated */
--primary-button-background: var(--u-alpha-blue-200); /* deprecated */
--primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
--primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
--primary-button-color: var(--text-primary); /* deprecated */
/* primary */
--background-button-primary: var(--u-alpha-blue-200);
--background-button-primary-hover: var(--u-alpha-blue-300);
--background-button-primary-active: var(--u-alpha-blue-400);
--text-button-primary: var(--text-primary);
--text-button-primary-disabled: var(--text-disabled);
/* secondary */
--background-button-secondary: var(--u-alpha-200);
--background-button-secondary-hover: var(--u-alpha-300);
--background-button-secondary-active: var(--u-alpha-400);
--text-button-secondary: var(--text-primary);
--text-button-secondary-disabled: var(--text-disabled);
--btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */
/* blue button */
--background-button-blue: var(--blue-60);
--background-button-blue-hover: var(--blue-70);
--background-button-blue-active: var(--blue-80);
--background-button-blue-disabled: var(--u-alpha-200);
--text-button-blue: var(--black);
--text-button-blue-disabled: var(--text-disabled);
/* caution */
--background-button-caution: var(--u-alpha-red-200);
/* Document card */
--document-card-border: rgba(0,0,0,0);
--document-card-border-divider: rgba(0,0,0,.2);
--document-card-height: var(--background-elevated);
--document-card-background: var(--neutral-15);
--document-card-background--hover: var(--neutral-20);
--document-card-book-image-container-background: var(--background-secondary);
--document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
--document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);
/* Link card */
--link-card-border--hover: var(--neutral-40);
/* Donut progress indicator */
--donut-progress-indicator-center-color: var(--document-card-background);
/* Sidebar */
--sidebar-background: var(--background-canvas);
--empty-sidebar-background: var(--neutral-07);
--hide-sidebar-button-background: #445064;
--sidebar-button-icon-color: var(--inbox-icon-color);
--sidebar-inbox-nav-background: var(--neutral-20);
--thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
--sidebar-logo-color: #fff;
/* Image placeholders */
--image-placeholder-color: var(--neutral-80);
--image-placeholder-shadow-color: var(--black);
/* Main background surfaces */
--background-color: var(--background-primary);
--content-background-color: var(--background-primary);
--code-background-color: var(--neutral-25);
/* Popovers */
--edit-tags-form-focused-option-background: var(--neutral-25);
--main-highlighter-popover-action-hover-background: var(--u-alpha-100);
--main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
--main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
--highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);
/* Sort menu */
--sort-menu-background: var(--background-elevated);
/* Misc */
--content-secondary-color: var(--text-secondary);
--focus-indicator-color: var(--blue-50);
--section-border-color: var(--border-secondary-alpha);
--app-side-drop-shadow: rgba(40, 40, 40, 0.75);
/* Appearance panel */
--appearance-panel-background: var(--background-elevated);
--appearance-panel-item-hover-background: var(--u-alpha-100);
/* Command palette */
--cmd-palette-background: var(--neutral-15);
--cmd-palette-cmd-container: var(--neutral-15);
--cmd-palette-section-title: var(--neutral-15);
--cmd-palette-row-hover: var(--u-alpha-100);
--cmd-palette-drop-shadow: var(--shadow-400);
--cmd-palette-scrollbar: var(--neutral-40);
--cmd-palette-key-background: var(--u-alpha-200);
--cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
--cmd-palette-context-item-background:var(--background-primary);
--cmd-palette-context-item-border: var(--border-secondary);
--cmd-palette-label-color: var(--text-secondary);
--cmd-palette-close-icon-color: #B6B9BF;
/* Inbox */
--inbox-sidebar-background: #12171C;
--inbox-icon-color: var(--icon-secondary);
--inbox-icon-color-disabled: var(--icon-disabled);
--inbox-icon-color-active: var(--icon-primary);
--inbox-zero-background-image-filter: opacity(30%) saturate(0%);
--inbox-zero-foreground-image-filter:
brightness(300%)
opacity(50%)
contrast(30%)
saturate(100%);
--inbox-zero-header-items-filter:
contrast(70%)
brightness(200%)
hue-rotate(0)
drop-shadow(0 0 2px rgba(0,0,0,1))
opacity(70%)
saturate(30%);
--inbox-zero-sidebar-items-filter:
contrast(98%)
brightness(500%)
hue-rotate(0)
drop-shadow(0px 0px 5px rgba(0,0,0,1))
opacity(100%)
saturate(300%);
--nav-item-filter: var(--svg-filter-inbox);
--nav-item-active-filter: var(--svg-filter-white);
--document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
--inbox-container-drop-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);
--import-link-color: var(--blue-50);
--tag-color: var(--u-alpha-200);
--tag-text-color: var(--text-secondary);
--scrollbar-color:var(--neutral-40);
--scrollbar-color-hover: var(--neutral-50);
--separator-color: rgba(255, 255, 255, 0.1);
--toast-background: var(--white);
--toast-background--error: var(--red-90);
--toast-background--info: var(--toast-background);
--toast-background--success: var(--toast-background);
--toast-background--warning: var(--toast-background);
--toast-button-color: var(--text-inverse);
--toast-button-color--error: var(--text-error);
--toast-button-color--info: var(--toast-button-color);
--toast-button-color--success: var(--toast-button-color);
--toast-button-color--warning: var(--toast-button-color);
--toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
--toast-icon-circle-fill--error: var(--icon-danger);
--toast-text-color: var(--text-inverse);
--toast-text-color--error: var(--red-20);
--tooltip-background--default: var(--white);
--tooltip-color--default: #202226;
--tooltip-shortcut-background: #ECECED;
--tooltip-shortcut-color: rgba(32, 34, 38, 0.64);
--document-list-focus-color: var(--u-alpha-100);
--primary-icon-filter: var(--svg-filter-white);
--action-button-border-color: var(--neutral-15);
--action-button-background: var(--neutral-10);
--action-button-shadow: var(--black);
--action-button-svg-color: var(--svg-filter-white);
/* PDF Search Bar */
--document-search-input-background: var(--neutral-00);
/* Metadata */
--summary-text: var(--text-primary);
--metadata-title: var(--text-secondary);
--metadata-value: var(--text-primary);
--metadata-input-background: var(--background-secondary);
--metadata-input-focus-background: var(--background-primary);
--metadata-footer-button-background: rgba(43, 46, 55, 0.05);
--metadata-footer-color: var(--background-canvas);
--notebook-highlight-color: var(--black);
--default-button-text-color: var(--text-primary);
--default-button-background: var(--u-alpha-200);
--default-button-hover-background: var(--u-alpha-300);
--default-button-active-background: var(--u-alpha-400);
--default-blurred-button-background: rgba(62, 72, 83, 0.7);
--default-blurred-button: 20px;
--inbox-header-tab-text-color: var(--text-grey-medium);
--inbox-header-active-tab-text-color: var(--text-primary);
--inbox-header-search-icon: var(--white);
--inbox-header-tab-count-background: var(--u-alpha-200);
--inbox-header-tab-count-text-color: var(--text-grey-lighter);
--inbox-header-tab-active-count-text-color: var(--text-grey-darker);
--document-list-title-color: var(--text-primary);
--document-list-item-tertiary-text-color: var(--text-secondary);
--document-list-doc-icon-color: var(--icon-secondary);
--document-list-info-color: var(--text-secondary);
--document-list-action-button-color: rgba(255, 255, 255, 0.8);
--table-of-contents-item-color: var(--text-secondary);
--table-of-contents-bar-color: #464851;
--table-of-contents-bar-active-color: #4E94FD;
--search-input-background: var(--u-alpha-200);
--transcript-teleprompt-background: rgba(89,142,244, .4);
--transcript-teleprompt-color: white;
--placeholder-fill-color: #7F8494;
--placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
--placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
--placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
--placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");
--empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");
/* Radio group */
--radio-group-indicator-hover-color: var(--neutral-20);
/* Badge */
--badge-background-color: var(--green-30);
--badge-text-color: var(--green-90);
/* TTS / audio player */
--tts-trigger-button-color: var(--neutral-70);
--tts-trigger-border-color: var(--u-alpha-300);
--tts-player-background: var(--neutral-10);
--tts-player-box-shadow:
0px 3px 10px 0px rgba(0, 0, 0, 0.3),
0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px 1px rgba(0, 0, 0, 0.15);
--tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);
/* Slider */
--slider-track-background: var(--neutral-30);
--slider-range-background: var(--neutral-50);
--slider-hover-range-background-color: var(--blue-50);
--slider-range-border-right-color: var(--neutral-10);
--slider-thumb-background: var(--white);
--slider-thumb-box-shadow:
0px 1px 4px 0px rgba(60, 64, 67, 0.4),
0px 0px 0px 1px rgba(0, 0, 0, 0.08);
/* These text variables will eventually be deprecated */
--text: var(--text-primary);
--text-grey-lighter: var(--neutral-80);
--text-grey: var(--text-secondary);
--text-grey-medium: var(--text-secondary);
--text-grey-lightish: var(--neutral-70);
--text-grey-lighter: var(--neutral-80);
--text-grey-dark: var(--text-primary);
--text-grey-darker: var(--text-primary);
}@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {.theme--dark {
--default-blurred-button-background: #2B323A;
--default-blurred-button: 0px;
}
}.theme--dark {
--onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
--onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
--onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
--onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
--onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
--onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");
--checkbox-icon-color: var(--neutral-00);
}/* Component variables (NO COLORS) */:host > *,
:root {
--animation-duration--imply-interactivity: 0;
--animation-duration--move: 0;
--animation-duration--reveal: 0;
--content-gutter: var(--s3);
--reading-editable-line-length: 648px;
--document-list-item-height: calc(var(--f1) * 11.3);
--document-list-item-height_js: 113px; /* JS can't parse the above easily */
--document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
--document-list-image-height: 62px;
--document-list-image-width: 62px;
--document-list-padding-top: 8px;
--focus-indicator-width: 3px;
--inbox-header-height: 65px;
--inbox-header-height_js: 65px; /* JS can't parse the above easily */
--inbox-sidebar-width: 240px;
--person-card-image-size: 40px;
--sidebar-padding-vertical: 0.5rem;
--sidebar-nav-height: 64px;
--sidebar-padding-horizontal: 24px;
--sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);
--popover-max-width: 305px;
--popover-background: var(--background-elevated);
--popover-z-index: 100;
--popover-focused-z-index: 101;
--sidebars-max-width: 296px;
--progress-bar-large-height: 3px;
--table-of-contents-font-size: 0.875rem;
--table-of-contents-bar-margin-right: 16px;
--table-of-contents-bar-height: 4px;
--table-of-contents-max-bar-width: 32px;
--table-of-contents-width-diff: 8px;
--scrollbar-border-radius: 12px;
--scrollbar-thickness: 14px;
--status-dot-size: 6px;
--appearance-panel-width: 292px;
--feed-icon-in-palette: 16px;
--action-button-border-radius: 31px
}@media (prefers-reduced-motion: no-preference) {:host > *,
:root {
--animation-duration--imply-interactivity: 0.15s;
--animation-duration--move: 0.25s;
--animation-duration--reveal: 0.15s
}
}:host > *,
:root {
--theme-transition-time: 0s;
--panels-transition-time: 0.2s;
--tts-player-height: 96px;
--js__tts-player-current-height: 0; /* Updated by JS */
--safe100vh: calc(100vh - var(--js__tts-player-current-height));
--safeBottom0: calc(0px + var(--js__tts-player-current-height))
}:host > * .high-contrast, :root .high-contrast {
}/* Reset html elements. */.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}.document-content {
/* HTML5 display-role reset for older browsers */
}.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
display: block;
}.document-content ol, .document-content ul {
list-style: none;
}.document-content blockquote, .document-content q {
quotes: none;
}.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
content: '';
content: none;
}.document-content table {
border-collapse: collapse;
border-spacing: 0;
}.document-content span[data-rw-start] {
cursor: pointer;
transition: color 0.2s ease-in-out, background 0.2s ease-in-out
}.document-content span[data-rw-start]:hover {
border-radius: 4px;
background: var(--u-alpha-400);
color: var(--transcript-teleprompt-color);
}.document-content span[data-rw-start]:has(.rw-highlight:hover) {
background: none;
color: inherit;
}@media (max-width: 768px) {
.document-content span[data-rw-start].touchstart {
border-radius: 4px;
background: var(--u-alpha-400) !important;
color: var(--transcript-teleprompt-color) !important;
}
.document-content span[data-rw-start]:hover {
background: none;
color: inherit;
}
}/* End of Reset */:root #document-header {
--reading-text-title: #0C1117;
}.theme--dark #document-header {
--reading-text-title: #F0F1F2;
}.theme--dark .document-content img, .theme--dark .document-content figure img {
opacity: .7;
transition: opacity 500ms;
}:root .document-content { /* Light theme */
/* Reading colours */
--reading-text-title: var(--black);
--reading-text-primary: var(--text-primary);
--reading-text-secondary: var(--text-secondary);
--reading-text-primary-inverse: var(--text-inverse);
--reading-text-link: 13 30 142;
--reading-text-link-highlight: 0 0 0;
--reading-text-primary-link-highlight: var(--black);
--reading-text-code: var(--red-40);
/* Surface colors */
--reading-surface-primary-inverse: #1E272F;
--reading-surface-tertiary: rgba(92, 105, 119, 0.06);
--reading-surface-code: #333C46;
/* Border colors */
--reading-border-secondary: rgba(40, 49, 59, 0.12);
--text-selection-background-color: rgba(70, 147, 254, 0.18);
}.theme--dark .document-content { /* Dark theme */
--reading-text-title: var(--white);
--reading-text-primary: var(--neutral-80);
--reading-text-secondary: var(--text-secondary);
--reading-text-primary-inverse: var(--text-primary);
--reading-text-link: 174 200 241;
--reading-text-link-highlight: 255 255 255;
--reading-text-primary-link-highlight: var(--neutral-100);
--reading-text-code: var(--orange-80);
/* Surface colors */
--reading-surface-primary-inverse: #10161D;
--reading-surface-tertiary: rgba(92, 105, 119, 0.15);
--reading-surface-code: #E2E8F0;
/* Border colors */
--reading-border-secondary: rgba(92, 105, 119, 0.3);
}.theme--sepia .document-content {
--reading-text-title: #3C2D23;
--reading-text-primary: #3C2D23;
--reading-text-secondary: #7A6755;
}:root {
--reading-editable-font-size: 20;
--reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
--reading-editable-font-family: "Source Serif VF", Georgia, Serif;
/* auto generate */
--reading-scale: 1.2;
--reading-root-size: 16; /* This is to replicate the browser base size for math purposes */
--reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
--reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
--reading-base-line-height: var(--reading-editable-line-height);
--reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
/* Caption = table divided by scale */
--reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale) / var(--reading-scale));
--reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
--reading-caption-line-height: var(--reading-editable-line-height);
--reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);
/* Table = base size divided by scale */
--reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
--reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
--reading-table-line-height: var(--reading-editable-line-height);
--reading-table-margin: calc(var(--reading-editable-font-size)*.75);
/* P = base size */
--reading-p-fs: calc(var(--reading-base-fs));
--reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
--reading-p-line-height: var(--reading-editable-line-height);
--reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
--reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );
/* H3 = base size x scale */
--reading-h3-fs: var(--reading-p-fs);
--reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
--reading-h3-line-height: var(--reading-editable-line-height);
--reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);
/* H2 = H3 size x scale */
--reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
--reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
--reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);
/* H1 = H2 size x scale */
--reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
--reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
--reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
--reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);
/* Typefaces */
--reading-font-body: var(--reading-editable-font-family);
--reading-font-title: var(--reading-editable-font-family);
--reading-font-caption: "Inter VF", sans-serif;
--reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}#document-header {
margin-bottom: 0;
user-select: none;
-webkit-user-select: none;
font-family: var(--ui-font)
}#document-header h1 {
margin: 0;
font-size: 40px;
line-height: 46px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--reading-text-title);
font-family: var(--reading-editable-font-family);
font-feature-settings: "onum" 1;
font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
text-rendering: optimizeLegibility;
text-wrap: balance;
}@media (max-width: 768px) {#document-header {
margin-bottom: -6px
}
#document-header h1 {
font-size: 32px;
line-height: 36.8px;
letter-spacing: -0.015em;
}
}#document-header .header-top-row {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: var(--spacer-5);
}#document-header .header-source-container {
flex: 1;
}#document-header .document-header-domain {
display: flex;
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}#document-header .document-header-domain span {
color: var(--text-secondary);
}#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
background-size: cover;
height: 16px;
width: 16px;
margin-right: 12px;
fill: var(--icon-secondary);
}#document-header hr {
border: none;
border-top-width: 1px;
border-top-style: solid;
border-color: var(--border-secondary-alpha);
margin: 0;
margin-top: 20px
}@media (max-width: 768px) {#document-header hr {
margin-top: 16px
}
}#document-header .document-header-metadata-row {
word-break: break-word;
overflow: hidden
}#document-header .document-header-metadata-row span {
font-weight: 400;
font-size: 14px;
}@media (max-width: 768px) {
#document-header .document-header-metadata-row span {
font-size: 13px;
}
}#document-header .document-header-metadata-row .document-header-author-content {
white-space: nowrap;
margin-right: 8px;
color: var(--text-secondary);
/* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right
57 = 17px true size of text + 20px * 2 for 20px margin above and below
if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
when we should use margins, but sadly we cannot pull that off because you cannot create margins between
two lines of text in one span, thats the job of line height
*/
line-height: 57px
}@media (max-width: 768px) {#document-header .document-header-metadata-row .document-header-author-content {
/* 48 = 16px + 16 * 2 for margins */
line-height: 48px
}
}#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}#document-header .document-header-metadata-row .document-header-published-date {
float: right;
white-space: nowrap;
color: var(--text-secondary);
/* See above as to why this is 57px */
line-height: 57px
}@media (max-width: 768px) {#document-header .document-header-metadata-row .document-header-published-date {
/* 48 = 16px + 16 * 2 for margins */
line-height: 48px
}
}#document-header .document-header-metadata-row .document-header-separator {
display: inline-flex;
background: var(--border-primary);
width: 4px;
height: 4px;
min-width: 4px;
min-height: 4px;
border-radius: 100%;
margin: 0 6px;
margin-bottom: 3px;
}#document-header .document-header-tags {
display: inline-flex;
flex-wrap: wrap
}#document-header .document-header-tags a {
margin-right: 4px;
margin-bottom: 4px;
}@media (max-width: 768px) {#document-header .document-header-tags {
width: 100%
}
}.document-content {
box-sizing: border-box;
font-size: var(--reading-p-font-size);
color: var(--reading-text-primary);
font-family: var(--reading-font-body);
line-height: var(--reading-base-line-height);
font-weight: 400;
padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
text-rendering: optimizeLegibility;
word-wrap: break-word;
font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
can't be the exact same - Safari bug */
font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1
}@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {.document-content {
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual
}
}.document-content {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
/* full justification
text-align: justify; */
/* hyphenation */
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%
}.document-content ::selection {
background-color: var(--text-selection-background-color) !important;
}.document-content.document-text-content--auto-highlighting-enabled ::selection {
background-color: var(--highlight-background-color--normal) !important;
color: var(--highlight-text-color) !important;
}.document-content.document-text-content--auto-highlighting-enabled pre ::selection {
background-color: var(--highlight-background-color--normal) !important;
color: var(--highlight-text-pre-color) !important;
}.document-content p {
font-family: var(--reading-font-body);
font-size: var(--reading-p-font-size);
margin-bottom: var(--reading-p-margin);
margin-top: var(--reading-p-margin);
line-height: var(--reading-p-line-height);
color: var(--reading-text-primary)
}.document-content p.rw-hide {
display: none;
}.document-content h1 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h1-font-size);
margin-top: calc(var(--reading-base-margin) * 3);
margin-bottom: var(--reading-base-margin);
line-height: var(--reading-h1-line-height);
letter-spacing: -0.019em;
font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top: 96px;
}.document-content h2 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h2-font-size);
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: var(--reading-base-margin);
line-height: var(--reading-h2-line-height);
letter-spacing: -0.011em;
font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top:96px;
}.document-content h3 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h3-font-size);
margin-top: calc(var(--reading-base-margin) * 1.5);
margin-bottom: calc(var(--reading-base-margin) * .5);
line-height: var(--reading-h3-line-height);
letter-spacing: -0.011em;
font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top:96px;
}.document-content h4,
.document-content h5,
.document-content h6 {
font-family: var(--reading-font-body);
font-weight: 600;
font-size: var(--reading-p-font-size);
margin-top: var(--reading-p-margin);
margin-bottom: calc(var(--reading-p-margin) * 0.5);
line-height: var(--reading-p-line-height);
color: var(--reading-text-title);
scroll-margin-top:96px;
}.document-content h2 + * {
margin-top: 0;
}.document-content h3 + * {
margin-top: 0;
}.document-content h4 + * {
margin-top: 0;
}.document-content h1 code,
.document-content h2 code,
.document-content h3 code,
.document-content h4 code,
.document-content h5 code,
.document-content h6 code {
font-size: .9em;
}.document-content h4 code {
font-size: .9em;
font-weight: 600;
}.document-content em, .document-content i {
font-style: italic;
}.document-content strong, .document-content b {
font-weight: 600;
}.document-content a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link) / 50%);
color: rgb(var(--reading-text-link));
}.document-content a:has(+ .rw-highlight) {
text-decoration: none !important;
}.document-content a .rw-highlight {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
color: var(--reading-text-primary-link-highlight) !important;
}.document-content a .rw-highlight:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
color: var(--reading-text-primary-link-highlight) !important;
}.document-content hr {
border-color: var(--reading-border-secondary);
border-top-width: 1px;
border-top-style: solid;
margin-top: calc(var(--reading-base-margin) * 3);
margin-bottom: calc(var(--reading-base-margin) * 3);
border-bottom: none;
}.document-content hr + * {
margin-top: 0;
}.document-content > :last-child {
margin-bottom: 0;
}.document-content sub, .document-content sup {
line-height: 0;
}.document-content {
/* -- Lists --*/
}.document-content ol {
font-family: var(--reading-font-body);
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
font-size: var(--reading-base-font-size);
list-style-type: decimal
}.document-content ol li {
margin-top: .5rem;
margin-bottom: .5rem;
font-size: var(--reading-base-font-size);
}.document-content ol > li {
margin-left: calc(var(--reading-base-margin) * 2);
padding-left: .5rem;
}.document-content ol > li p {
margin-top: calc(var(--reading-base-margin) / 4);
margin-bottom: calc(var(--reading-base-margin) / 4);
}.document-content > ol > li > *:first-child {
margin-top: calc(var(--reading-base-margin));
}.document-content > ol > li > *:last-child {
margin-bottom: calc(var(--reading-base-margin));
}.document-content ul {
font-family: var(--reading-font-body);
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
font-size: var(--reading-base-font-size);
list-style-type: disc
}.document-content ul li {
margin-top: calc(var(--reading-base-margin) / 2);
margin-bottom: calc(var(--reading-base-margin) / 2);
font-size: var(--reading-base-font-size);
}.document-content ul > li {
margin-left: calc(var(--reading-base-margin) * 2);
padding-left: .5rem;
}.document-content ul > li p {
margin-top: calc(var(--reading-base-margin) / 4);
margin-bottom: calc(var(--reading-base-margin) / 4);
}.document-content > ul > li > *:first-child {
margin-top: calc(var(--reading-base-margin) / 2);
}.document-content > ul > li > *:last-child {
margin-bottom: calc(var(--reading-base-margin));
}.document-content ul ul,
.document-content ul ol,
.document-content ol ul,
.document-content ol ol {
margin-top: .5em;
margin-bottom: .5em;
}.document-content {
/* description list */
}.document-content dt {
margin-top: var(--reading-p-margin);
}.document-content {
/* Tables */
}.document-content table {
font-family: var(--reading-font-caption);
width: 100%;
table-layout: auto;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: var(--reading-table-font-size);
line-height: var(--reading-table-line-height);
font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
}.document-content table caption {
margin-top: var(--reading-base-margin);
margin-bottom: calc(var(--reading-base-margin) * 1em);
}.document-content thead {
color: var(--reading-text-primary);
font-weight: 600;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--reading-border-secondary);
}.document-content thead th {
vertical-align: bottom;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}.document-content tbody tr {
border-bottom-width: 1px;
border-style: solid;
border-bottom-color: var(--reading-border-secondary);
}.document-content tbody tr:last-child {
border-bottom-width: 0;
}.document-content tbody td {
vertical-align: top;
padding-top: 0.75em;
padding-right: 0.5em;
padding-bottom: 0.75em;
padding-left: 0.5em;
}.document-content tfoot {
color: var(--reading-text-primary);
font-weight: 600;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--reading-border-secondary);
}.document-content tfoot th {
vertical-align: top;
padding-right: 0.5em;
padding-top: 0.5em;
padding-left: 0.5em;
}.document-content thead th:first-child {
padding-left: 0;
}.document-content tfoot th:first-child {
padding-left: 0;
}.document-content tbody td:first-child {
padding-left: 0;
}.document-content tbody td:last-child {
padding-right: 0;
}.document-content {
/* Fix for newsletters that use tables for layout */
}.document-content table table,
.document-content table table tr,
.document-content table table td,
.document-content table table figure {
margin: 0;
padding: 0;
}.document-content table table,
.document-content table table tr,
.document-content table table td {
border: none;
}.document-content table table {
font-family: var(--reading-font-body);
font-size: var(--reading-p-font-size);
}.document-content {
/* Figure and Img */
}.document-content img:not(p img, li img, img.allow-image-styles) {
margin: auto;
margin-top: 1.875rem;
margin-bottom: 1.875rem;
border-radius: .25rem;
display: block; /* Allows them to be highlighted independently. This is undone for nested images */
max-width: 100% !important;
}.document-content video {
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100% !important;
}.document-content figure {
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: calc(var(--reading-base-margin) * 2);
font-size: var(--reading-caption-font-size);
font-family: var(--reading-font-caption);
line-height: 1.33336;
color: var(--reading-text-secondary);
display: block;
}.document-content svg:empty {
display: none;
}.document-content figure figcaption {
color: var(--reading-text-secondary);
font-family: var(--reading-font-caption);
font-size: var(--reading-caption-font-size);
line-height: 1.5;
margin-top: calc(var(--reading-base-margin) / 2);
}.document-content figure:not(li figure) img + figcaption {
margin-top: -16px;
}.document-content figure > * {
margin-top: 0;
margin-bottom: 0;
}.document-content {
/* Code blocks */
}.document-content code {
color: var(--reading-text-code);
font-size: .8em;
font-family: var(--reading-font-monospace);
word-wrap: break-word;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-color: var(--reading-surface-tertiary);
border-radius: .25rem;
line-height: 1.1em;
border: 1px solid var(--reading-border-secondary);
padding: 0 .2rem;
}.document-content a code {
color: var(--reading-text-link);
}.document-content pre, .document-content pre p {
color: var(--reading-text-primary-inverse);
background-color: var(--reading-surface-primary-inverse);
font-family: var(--reading-font-monospace);
overflow-x: auto;
font-size: calc(var(--reading-editable-font-size) * .8px);
line-height: var(--reading-base-line-height);
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: calc(var(--reading-base-margin) * 2);
border-radius: .25rem;
padding-top: var(--reading-base-margin);
padding-right: var(--reading-base-margin);
padding-bottom: var(--reading-base-margin);
padding-left: var(--reading-base-margin);
white-space: pre-wrap;
}.document-content pre code, .document-content pre code p, .document-content pre p {
background-color: transparent;
font-family: var(--reading-font-monospace);
border-width: 0;
border-radius: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
font-weight: 400;
font-size: calc(var(--reading-editable-font-size) * .8px);
color: inherit;
line-height: inherit;
min-width: 100px;
margin: 0
}.document-content pre code a, .document-content pre code p a, .document-content pre p a {
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.2);
color: var(--blue-70);
}.document-content pre code a:hover, .document-content pre code p a:hover, .document-content pre p a:hover {
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.5);
color: var(--blue-80);
}.document-content pre code p, .document-content pre code p p, .document-content pre p p {
display: inline;
/*
We sometimes end up with s instead of our code tags.
Prevent them from breaking everything.
*/
}.document-content {
/* Blockquotes */
}.document-content blockquote {
font-style: italic;
font-size: var(--reading-p-font-size);
color: var(--reading-text-blockquote);
margin: 0;
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
hanging-punctuation: first;
padding: 0 var(--reading-base-margin);
}.document-content {
/* Make sure nested images are not block */
}.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
display: initial;
max-width: 100%!important;
}.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
margin-top: 200px;
padding-top: 0;
display: block;
break-before: column
}.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
text-decoration: none;
}.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
content: "***";
position: relative;
width: 100%;
display: block;
top: -100px;
text-align: center;
font-size: 48px;
letter-spacing: 1em;
font-weight: 200;
color: var(--text-tertiary);
}.document-content {
/* highlights */
/* This code is repeated in extension/source/injection/index.css */
}.document-content .rw-image-highlight {
border-radius: 2px;
outline: 12px solid var(--highlight-image-background-color--normal);
}.document-content .rw-image-highlight.rw-image-highlight--active {
outline-color: var(--highlight-image-background-color--active);
}.document-content pre .rw-highlight {
color: var(--highlight-text-pre-color) !important;
}/* end of ID wrapper *//* PDF Specific Class code */#readwise-reader-root .pageContainer {
box-shadow: var(--shadow-100);
position: relative
}#readwise-reader-root .pageContainer canvas {
}#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
position: absolute;
opacity: 0.2;
transition: opacity 0.3s ease !important;
background: none !important;
z-index: 100
}#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
position: absolute;
right: -22px;
top: -10px;
}#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
opacity: 1;
}.document-content .twitter-thread-delimiter {
width: 40px;
border-top: 2px solid var(--border-secondary);
margin: 20px 0px;
}.rw-thread-heading {
display: none;
}.document-content .rw-outer-content {
border: dashed 2px var(--border-secondary-alpha);
border-radius: 8px;
padding: 16px;
font-size: var(--font-size-base);
color: var(--reading-text-secondary)
}.document-content .rw-outer-content a {
text-decoration: none;
color: var(--reading-text-primary);
margin-left: 16px;
}.document-content .rw-digest-thread-wrapper {
margin: 36px auto 32px;
font-style: initial;
max-width: 550px
}.document-content .rw-digest-thread-wrapper > h6 {
font-size: 16px;
font-weight: 600;
font-family: var(--ui-font) !important;
}.document-content .rw-digest-thread-wrapper > span:last-of-type {
color: var(--text-tertiary);
font-weight: 400;
font-size: 12px;
font-family: var(--ui-font) !important;
display: block;
margin-top: -8px;
}.document-content .rw-embedded-tweet {
border: 1px solid var(--border-secondary);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
font-family: var(--ui-font) !important;
max-width: 550px;
margin: var(--reading-base-margin) auto;
font-style: initial
}.document-content .rw-embedded-tweet > span {
font-family: var(--ui-font) !important;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
line-height: 16px
}.document-content .rw-embedded-tweet > span > a {
display: flex;
color: var(--text-secondary);
gap: 4px;
line-height: 16px;
text-decoration: none;
margin-bottom: 8px;
width: -moz-fit-content;
width: fit-content;
}.document-content .rw-embedded-tweet header {
display: flex;
gap: 8px
}.document-content .rw-embedded-tweet header img {
aspect-ratio: 1 / 1;
min-height: 48px;
max-height: 48px!important;
width: 48px;
height: auto;
margin: unset;
border-radius: 9999px;
}.document-content .rw-embedded-tweet header a {
text-decoration: none;
font-family: var(--ui-font) !important;
}.document-content .rw-embedded-tweet header div {
font-family: var(--ui-font) !important;
}.document-content .rw-embedded-tweet header div:nth-child(2) {
font-size: 14px;
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap
}.document-content .rw-embedded-tweet header div:nth-child(2) span:first-child {
font-weight: 600;
line-height: 18px;
padding-top: 6px
}.document-content .rw-embedded-tweet header div:nth-child(2) span:first-child a {
color: var(--reading-text-primary);
}.document-content .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
line-height: 18px;
color: var(--text-secondary)
}.document-content .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
color: var(--text-secondary)
}.document-content .rw-embedded-tweet header svg * {
fill: var(--icon-tertiary);
}.document-content .rw-embedded-tweet main > :first-child {
margin-top: 18px;
}.document-content .rw-embedded-tweet main > span:first-of-type {
color: var(--text-secondary);
font-weight: 400;
font-size: 12px;
font-family: var(--ui-font) !important;
display: block;
margin-top: 8px;
margin-bottom: -6px
}.document-content .rw-embedded-tweet main > span:first-of-type a {
color: var(--text-interactive);
text-decoration: none;
}.document-content .rw-embedded-tweet main p {
line-height: var(--reading-editable-line-height);
font-family: var(--ui-font) !important;
margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
letter-spacing: -.01em;
}.document-content .rw-embedded-tweet main video {
border-radius: 4px;
}.document-content .rw-embedded-tweet footer {
color: var(--text-secondary);
font-weight: 400;
font-size: 12px;
line-height: 20px;
margin-top: -4px
}.document-content .rw-embedded-tweet footer a {
font-family: var(--ui-font) !important;
text-decoration: none;
color: var(--text-secondary);
}.document-content .rw-ai {
background-color: #CBC3E3;
padding: 1rem;
border-radius: 1rem;
border: 1px solid #A39EBA;
}.document-content .rw-ai-highlighted {
font-weight: bold;
}.document-content .rw-ai-explainer {
background-color: #CBC3E3;
}.theme--dark .document-content .rw-ai,
.theme--dark .document-content .rw-ai-explainer {
color: var(--text-inverse);
}.document-content.is-youtube-video {
padding-top: 120px;
}/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */.document-content span[data-rw-start] {
margin-right: .25rem;
}.document-content span[data-rw-transcript-version] {
margin-right: 0;
}.document-content .rw-email-parsed {
display: none;
}/* Pagination */.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
margin-top: 0;
padding-top: 0;
display: block;
break-before: column
}.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
text-decoration: none;
}.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
break-before: auto;
}.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
display: none;
}.document-content--original-email {
background: white !important;
color: initial
}.document-content--original-email img {
background: initial;
}.document-content--original-email rw-highlight {
color: initial !important;
}/*
!important is added to all rules in this file when running in the extension.
*/html {
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
--highlight-background-color--active: hsl(50deg 100% 50% / 20%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--js_highlight-normal: #fcf6bf; /* needs to be hex */
--highlight-background-color--alternative: #CDCDFE; /* alternative colours always are opague to be safe */
--highlight-background-color--alternative--active: #b1b7fe;
--highlight-text-color: #000;
--highlight-text-color--alternative: #000;
--highlight-text-color--active: #000;
--highlight-icon-color: rgba(0, 0, 0, 0.60);
}.theme--dark {
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
--highlight-background-color--active: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--highlight-text-color: var(--white);
--highlight-text-color--active: var(--white);
--highlight-icon-color: rgba(255, 255, 255, 0.60);
}/* Unset the default text fragment highlighting */::target-text {
color: unset;
background: unset;
}readwise-tooltip-container {
position: fixed;
inset: auto;
z-index: 2147483647;
isolation: isolate;
}/*
s are text highlights. They also have `.rw-highlight` added.
.rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
.rw-highlight--* classes are added to both.
*/rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
cursor: pointer;
}.isDev rw-highlight,
.isDev .rw-image-highlight {
outline: 1px solid red
}.isDev rw-highlight[data-highlight-id], .isDev .rw-image-highlight[data-highlight-id] {
outline: none;
}rw-highlight, .rw-pseudo-highlight{
background-image: linear-gradient(
0deg,
var(--highlight-background-color-underline) 0%,
var(--highlight-background-color-underline) 2px,
var(--highlight-background-color--normal) 2px,
var(--highlight-background-color--normal) 100%
);
background-repeat: no-repeat;
background-size: 100% 90%;
background-position: 0 75%;
color: var(--highlight-text-color);
}a rw-highlight, .rw-pseudo-highlight a {
text-decoration: underline;
}.rw-image-highlight {
border-radius: 2px;
outline: 12px solid var(--highlight-background-color--normal);
}rw-highlight.rw-highlight--active {
background-image: linear-gradient(
0deg,
var(--highlight-background-color-underline) 0%,
var(--highlight-background-color-underline) 2px,
var(--highlight-background-color--active) 2px,
var(--highlight-background-color--active) 100%
);
color: var(--highlight-text-color--active);
}.rw-image-highlight.rw-image-highlight--active {
outline-color: var(--highlight-background-color--active);
}rw-highlight.rw-highlight--alternative-color {
background: var(--highlight-background-color--alternative);
}.rw-image-highlight.rw-highlight--alternative-color {
outline-color: var(--highlight-background-color--alternative);
}rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
background: var(--highlight-background-color--alternative--active);
}.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
outline-color: var(--highlight-background-color--alternative--active);
}rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
fill: var(--highlight-text-color);
}rw-highlight .rw-highlight-icon-wrapper {
display: none;
}rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
display: inline-block;
}rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
padding-right: 0.2em;
}rw-highlight .rw-highlight-icon-wrapper svg {
position: relative;
top: 1px;
display: none;
}rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
margin-left: 0.4em
}rw-highlight .rw-highlight-icon-wrapper svg:first-child, #document-text-content rw-highlight .rw-highlight-icon-wrapper svg:first-child {
margin-left: 0.2em;
}rw-highlight .rw-highlight-icon-wrapper svg path {
fill: var(--highlight-icon-color);
}rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
display: inline;
}rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
display: inline;
}.rw-mobile-web-view img.rw-image-highlight {
outline: 0px !important;
box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2);
}.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
outline: 0px !important;
box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5);
}:root{ /* documentTextContent.css overrides */
--reading-font-body: "Source Serif 4", Georgia, Serif;
--reading-font-title: "Source Serif 4", Georgia, Serif;
--reading-editable-font-size: 18;
--reading-editable-line-height: 27;
--mono-font: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
--reading-font-monospace: var(--mono-font);
--reading-font-caption: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--reading-table-line-height: 1.4;
}@media(min-width: 672px) {
:root {
--reading-editable-font-size: 20;
--reading-editable-line-height: 30;
}
}body {
background: var(--background-primary);
padding: 0;
margin: 0;
font-family: var(--ui-font);
}/* We added this after finding some clashes between this and the main app's CSS (e.g. https://linear.app/readwise/issue/RW-36798/bug-header-and-content-should-be-aligned-on-shared-links) */#document-share-app p {
margin: 0;
}#document-share-app #document-text-content {
font-family: var(--reading-font-body);
}#document-share-app .hideAccessibly {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}#document-share-app #document-text-content,
#document-share-app .pageHeader {
padding-left: 16px;
padding-right: 16px
/* 700 (content max width) +16*2 */
}@media(min-width: 672px) {#document-share-app #document-text-content,
#document-share-app .pageHeader {
padding-left: 0;
padding-right: 0
}
}#document-share-app #document-text-content,
#document-share-app .originalDocumentLink,
#document-share-app .pageHeader {
max-width: 640px;
-webkit-font-smoothing: antialiased
/* 700 (content max width) +16*2 */
}@media(min-width: 672px) {#document-share-app #document-text-content,
#document-share-app .originalDocumentLink,
#document-share-app .pageHeader {
margin-left: auto;
margin-right: auto
}
}#document-share-app .originalDocumentAncestor {
position: sticky;
inset: 0;
bottom: auto;
background: var(--background-primary);
border-bottom: 1px solid var(--border-secondary-alpha);
z-index: 1000
}#document-share-app .originalDocumentAncestor:has(.originalDocumentLink:hover) {
background: var(--background-tertiary);
}#document-share-app .originalDocumentLink {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 16px;
font-size: 11px;
line-height: 16px;
text-decoration: none;
color: var(--text-secondary);
transition: 0.1s background-color;
}#document-share-app .originalDocumentFavicon {
height: 16px;
width: 16px;
}#document-share-app .originalDocumentDomain {
flex: 1;
display: flex;
flex-direction: row;
gap: 12px;
text-transform: uppercase;
font-weight: var(--font-weight-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}#document-share-app .originalDocumentButton {
display: flex;
align-items: center;
background: var(--background-interactive);
padding: 2px 10px;
border-radius: 48px;
font-weight: 700;
font-size: var(--f10);
line-height: 20px;
color: var(--text-inverse);
}#document-share-app .originalDocumentButtonExtraText {
display: none;
margin-left: 0.3em
/* TODO */
}@media(min-width: 500px) {#document-share-app .originalDocumentButtonExtraText {
display: inline
}
}#document-share-app .originalDocumentButtonIcon {
margin-left: 4px;
}#document-share-app .title {
font-family: var(--reading-font-title);
margin: 0;
padding-bottom: 12px;
font-weight: 700;
font-size: 2rem;
line-height: 115%;
letter-spacing: -0.015em;
color: var(--text-primary)
}@media(min-width: 672px) {#document-share-app .title {
font-size: 2.5rem;
padding-bottom: 16px
}
}#document-share-app .pageHeader {
-webkit-font-smoothing: antialiased;
margin-top: 36px;
margin-bottom: 32px
}@media(min-width: 672px) {#document-share-app .pageHeader {
margin-top: 72px;
margin-bottom: 40px
}
}#document-share-app .pageHeader hr {
border: 0;
border-top: 1px solid var(--border-secondary-alpha);
margin: 8px 0;
}#document-share-app .pageHeaderMeta {
display: flex;
flex-direction: row;
margin-top: 4px;
font-size: .8125rem;
color: var(--text-secondary)
}@media(min-width: 672px) {#document-share-app .pageHeaderMeta {
font-size: .875rem
}
}#document-share-app .pageHeaderMeta,
#document-share-app .timeToRead {
gap: 6px;
}#document-share-app .pageHeaderSpacer {
flex: 1;
}#document-share-app .annotatedBy {
margin-top: 0;
font-size: 13px;
color: var(--text-secondary)
}@media(min-width: 672px) {#document-share-app .annotatedBy {
font-size: .875rem
}
}#document-share-app .notesContainer {
margin-top: 32px;
margin-bottom: -16px;
padding: 12px 16px;
border: 1px solid var(--border-secondary);
border-radius: 8px;
}#document-share-app .notesContainer svg {
fill: var(--icon-primary);
min-width: 16px;
min-height: 16px;
top: 3px;
position: relative;
}#document-share-app .notesContainer .saverName {
font-weight: 600;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
color: var(--text-primary);
}#document-share-app .notesContainer p {
color: var(--text-primary);
font-weight: 400;
font-size: 14px;
line-height: 20px;
}#document-share-app .endHr {
max-width: 700px;
margin-top: 40px;
margin-bottom: 120px;
border: none;
border-top: 1px solid var(--border-secondary-alpha);
}._button_15y81_1 {
margin: 0;
border: none;
cursor: pointer;
border-radius: 48px;
font-family: var(--ui-font);
font-weight: var(--font-weight-medium)
}
._button_15y81_1[disabled] {
cursor: default;
pointer-events: none;
color: var(--text-disabled);
background: var(--background-button-secondary-disabled);
}
._button_15y81_1[disabled]:hover {
background: var(--background-button-secondary-disabled);
}
._buttonDefault_15y81_21,
._buttonPrimary_15y81_22,
._buttonSecondary_15y81_23,
._buttonUnstyled_15y81_24 {
margin: 0;
border: none;
cursor: pointer;
font-weight: var(--font-weight-medium)
}
._buttonDefault_15y81_21[disabled], ._buttonPrimary_15y81_22[disabled], ._buttonSecondary_15y81_23[disabled], ._buttonUnstyled_15y81_24[disabled] {
cursor: default;
pointer-events: none;
}
._buttonDefault_15y81_21:focus-visible, ._buttonPrimary_15y81_22:focus-visible, ._buttonSecondary_15y81_23:focus-visible, ._buttonUnstyled_15y81_24:focus-visible {
box-shadow: 0 0 0 2px var(--focus-ring-color);
}
._buttonUnstyled_15y81_24 {
padding: 0;
margin: 0;
background: none;
font-weight: normal;
border-radius: 0
}
._buttonUnstyled_15y81_24[disabled] {
background: none;
}
._buttonDefault_15y81_21,
._buttonPrimary_15y81_22,
._buttonSecondary_15y81_23 {
background: var(--btn-secondary)
}
._buttonDefault_15y81_21[disabled], ._buttonPrimary_15y81_22[disabled], ._buttonSecondary_15y81_23[disabled] {
color: var(--text-disabled);
}
._buttonDefault_15y81_21 {
display: flex;
justify-content: center;
line-height: 20px;
align-items: center;
padding: 0.375rem .75rem;
font-size: var(--font-size-base);
transition: background-color 0.2s ease-in-out;
color: var(--default-button-text-color)
}
._buttonDefault_15y81_21 svg {
fill: currentColor
}
._buttonDefault_15y81_21 svg * {
fill: currentColor;
}
._buttonDefault_15y81_21._activeButton_15y81_80,
._buttonDefault_15y81_21:active {
background: var(--default-button-active-background);
}
._buttonDefault_15y81_21:not(:active):hover {
background: var(--default-button-hover-background);
}
._buttonDefault_15y81_21,
._buttonDefault_15y81_21[disabled]:hover {
background: var(--default-button-background);
}
._buttonPrimary_15y81_22 {
background: var(--primary-button-background);
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
color: var(--text-interactive)
}
._buttonPrimary_15y81_22,
._buttonPrimary_15y81_22[disabled]:hover {
background: var(--btn-secondary);
}
._buttonSecondary_15y81_23 {
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
color: var(--text-primary)
}
._buttonSecondary_15y81_23[disabled] svg {
color: var(--icon-disabled)
}
._buttonSecondary_15y81_23 svg {
color: var(--icon-secondary)
}
._buttonSecondary_15y81_23:not(:active):hover {
background: var(--u-alpha-300);
}
._buttonSecondary_15y81_23[disabled]:hover {
background: var(--btn-secondary);
}
._buttonBlue_15y81_134 {
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
background: var(--background-interactive);
color: var(--text-inverse);
font-weight: 500
}
._buttonBlue_15y81_134[disabled] svg {
color: var(--icon-disabled)
}
._buttonBlue_15y81_134 svg {
color: var(--icon-inverse)
}
._buttonBlue_15y81_134:active {
background: var(--background-button-blue-active);
}
._buttonBlue_15y81_134:not(:active):hover {
background: var(--background-button-blue-hover);
}
._buttonNeutral_15y81_163 {
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
background: var(--background-interactive);
color: var(--text-inverse);
font-weight: 500
}
._buttonNeutral_15y81_163[disabled] svg {
color: var(--icon-disabled)
}
._buttonNeutral_15y81_163 svg {
color: var(--icon-inverse)
}
._buttonNeutral_15y81_163:active {
background: var(--background-button-blue-active);
}
._buttonNeutral_15y81_163:not(:active):hover {
background: var(--background-button-blue-hover);
}
._buttonDanger_15y81_191 {
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
background: var(--background-button-caution);
color: var(--text-error);
font-weight: 500;
text-decoration: none
}
._buttonDanger_15y81_191[disabled] svg {
color: var(--icon-disabled)
}
._buttonDanger_15y81_191 svg {
color: var(--icon-inverse)
}
._buttonDanger_15y81_191:active {
background: var(--background-button-caution);
}
._buttonDanger_15y81_191:not(:active):hover {
background: var(--background-button-caution);
}
._spinner_3mzut_1 {
display: inline-block;
position: relative;
width: 80px;
height: 80px
}
._spinner_3mzut_1 div {
box-sizing: border-box;
display: block;
position: absolute;
width: 55px;
height: 55px;
margin: 8px;
border: 4px solid var(--text-secondary);
border-radius: 50%;
animation: _lds-ring_3mzut_1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--text-secondary) transparent transparent transparent
}
._spinner_3mzut_1 div:nth-child(1) {
animation-delay: -0.45s;
}
._spinner_3mzut_1 div:nth-child(2) {
animation-delay: -0.3s;
}
._spinner_3mzut_1 div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes _lds-ring_3mzut_1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
._dialogWrapper_n47il_1 {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: var(--modal-z-index);
background-color: var(--background-backdrop);
pointer-events: all;
}
._dialogBox_n47il_15 {
width: 385px;
background-color: var(--background-elevated);
padding: var(--spacer-7) var(--spacer-6) var(--spacer-6) var(--spacer-6);
margin: 0;
box-shadow: var(--shadow-400);
border-radius: var(--spacer-3);
position: absolute;
top: 25%;
z-index: 20;
}
._title_n47il_27 {
font-family: var(--ui-font);
font-style: normal;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: var(--spacer-3);
}
._text_n47il_36 {
}
._subtitle_n47il_39 {
font-family: var(--ui-font);
font-style: normal;
margin-top: var(--spacer-3);
font-weight: var(--font-weight-normal);
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: 1.25rem;
}
._buttons_n47il_49 {
float: right;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacer-3);
margin-top: var(--spacer-6);
}
._cancelButton_n47il_58 {
background: none;
}
._buttonText_n47il_62 {
margin-left: auto;
margin-right: auto;
font-family: var(--ui-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
._redButton_n47il_70 {
color: var(--text-error);
background: var(--background-button-caution);
}
._darkRedButton_n47il_75 {
background: var(--red-50);
color: var(--neutral-100);
}
._blueButton_n47il_80 {
color: var(--text-interactive);
background: var(--background-button-primary);
}
._inputWrapper_n47il_85 {
display: flex;
flex-direction: column;
margin-top: 16px
}
._inputWrapper_n47il_85 p {
margin: 0;
font-weight: 500;
font-size: 12px;
line-height: 16px;
color: var(--text-secondary);
}
._inputWrapper_n47il_85 input {
margin-top: 7px;
height: 32px;
width: 100%;
padding: 2px 8px;
color: var(--inbox-header-active-tab-text-color);
font-size: 14px;
background: var(--background-color);
font-family: var(--ui-font);
outline: none;
box-shadow: 0 0 0 1px var(--border-secondary);
border-radius: 4px;
font-style: normal;
font-weight: 400;
line-height: 20px;
border: none
}
._inputWrapper_n47il_85 input:focus {
box-shadow: 0 0 0 2px var(--border-focus);
}
/*
!important is added to all rules in this file when running in the extension.
*/
html {
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%) !important;
--highlight-background-color--active: hsl(50deg 100% 50% / 20%) !important;
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;
--js_highlight-normal: #fcf6bf !important; /* needs to be hex */
--highlight-background-color--alternative: #CDCDFE !important; /* alternative colours always are opague to be safe */
--highlight-background-color--alternative--active: #b1b7fe !important;
--highlight-text-color: #000 !important;
--highlight-text-color--alternative: #000 !important;
--highlight-text-color--active: #000 !important;
--highlight-icon-color: rgba(0, 0, 0, 0.60) !important;
}
.theme--dark {
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important;
--highlight-background-color-underline: hsl(50deg 100% 50% / 80%) !important;
--highlight-background-color--active: hsl(50deg 100% 50% / 30%) !important;
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%) !important;
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%) !important;
--highlight-text-color: var(--white) !important;
--highlight-text-color--active: var(--white) !important;
--highlight-icon-color: rgba(255, 255, 255, 0.60) !important;
}
/* Unset the default text fragment highlighting */
::target-text {
color: unset !important;
background: unset !important;
}
readwise-tooltip-container {
position: fixed !important;
inset: auto !important;
z-index: 2147483647 !important;
isolation: isolate !important;
}
/*
s are text highlights. They also have `.rw-highlight` added.
.rw-image-highlight is added to image highlights. They do not have `.rw-highlight`.
.rw-highlight--* classes are added to both.
*/
rw-highlight,
.rw-image-highlight,
.rw-pseudo-highlight {
cursor: pointer !important;
}
.isDev rw-highlight,
.isDev .rw-image-highlight {
outline: 1px solid red !important
}
.isDev rw-highlight[data-highlight-id], .isDev .rw-image-highlight[data-highlight-id] {
outline: none !important;
}
rw-highlight, .rw-pseudo-highlight{
background-image: linear-gradient(
0deg,
var(--highlight-background-color-underline) 0%,
var(--highlight-background-color-underline) 2px,
var(--highlight-background-color--normal) 2px,
var(--highlight-background-color--normal) 100%
) !important;
background-repeat: no-repeat !important;
background-size: 100% 90% !important;
background-position: 0 75% !important;
color: var(--highlight-text-color) !important;
}
a rw-highlight, .rw-pseudo-highlight a {
text-decoration: underline !important;
}
.rw-image-highlight {
border-radius: 2px !important;
outline: 12px solid var(--highlight-background-color--normal) !important;
}
rw-highlight.rw-highlight--active {
background-image: linear-gradient(
0deg,
var(--highlight-background-color-underline) 0%,
var(--highlight-background-color-underline) 2px,
var(--highlight-background-color--active) 2px,
var(--highlight-background-color--active) 100%
) !important;
color: var(--highlight-text-color--active) !important;
}
.rw-image-highlight.rw-image-highlight--active {
outline-color: var(--highlight-background-color--active) !important;
}
rw-highlight.rw-highlight--alternative-color {
background: var(--highlight-background-color--alternative) !important;
}
.rw-image-highlight.rw-highlight--alternative-color {
outline-color: var(--highlight-background-color--alternative) !important;
}
rw-highlight.rw-highlight--alternative-color.rw-highlight--active {
background: var(--highlight-background-color--alternative--active) !important;
}
.rw-image-highlight.rw-highlight--alternative-color.rw-image-highlight--active {
outline-color: var(--highlight-background-color--alternative--active) !important;
}
rw-highlight.rw-highlight--alternative-color .rw-highlight-icon-wrapper svg path {
fill: var(--highlight-text-color) !important;
}
rw-highlight .rw-highlight-icon-wrapper {
display: none !important;
}
rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
display: inline-block !important;
}
rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight.rw-highlight--has-note .rw-highlight-icon-wrapper,
#document-text-content rw-highlight.rw-highlight--has-tag .rw-highlight-icon-wrapper {
padding-right: 0.2em !important;
}
rw-highlight .rw-highlight-icon-wrapper svg {
position: relative !important;
top: 1px !important;
display: none !important;
}
rw-highlight .rw-highlight-icon-wrapper svg,
/* Unfortunately we need some extra specifivify to override web app styles */
#document-text-content rw-highlight .rw-highlight-icon-wrapper svg {
margin-left: 0.4em !important
}
rw-highlight .rw-highlight-icon-wrapper svg:first-child, #document-text-content rw-highlight .rw-highlight-icon-wrapper svg:first-child {
margin-left: 0.2em !important;
}
rw-highlight .rw-highlight-icon-wrapper svg path {
fill: var(--highlight-icon-color) !important;
}
rw-highlight.rw-highlight--has-note .rw-highlight-note-icon {
display: inline !important;
}
rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
display: inline !important;
}
.rw-mobile-web-view img.rw-image-highlight {
outline: 0px !important;
box-shadow: 0px 0px 0px 4px rgba(255, 213, 0, 0.2) !important;
}
.rw-mobile-web-view img.rw-image-highlight.rw-image-highlight--active {
outline: 0px !important;
box-shadow: 0px 0px 0px 6px rgba(255, 213, 0, 0.5) !important;
}
/*
:root =
:host > * = the root of the extension shadow DOM contents
*/
/* SPACING */
:host > *,
:root {
--s1: 10px;
--s2: 20px;
--s3: 30px;
--s4: 40px;
--s5: 50px;
--spacer-0: 0;
--spacer-1: .125rem;/* 2px */
--spacer-2: .25rem; /* 4px */
--spacer-3: .5rem; /* 8px */
--spacer-4: .75rem; /* 12px */
--spacer-5: 1rem; /* 16px */
--spacer-6: 1.25rem;/* 20px */
--spacer-7: 1.5rem; /* 24px */
--spacer-8: 2rem; /* 32px */
--spacer-9: 2.5rem; /* 40px */
--spacer-10: 3rem; /* 48px */
--min-left-pad: 32px;
}
/* FONTS */
:host > *,
:root {
/* font weights */
--font-weight-lighter: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-size-xs: 0.6875rem; /* 11px */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 0.875rem; /* 14px */ /* --f9 */
--font-size-lg: 1rem; /* 16px */
--font-size-xl: 1.25rem; /* 20px */
--line-height-xs: 1rem; /* 16px */
--line-height-sm: 1.125rem; /* 18px */
--line-height-base: 1.25rem; /* 20px */
--line-height-lg: 1.5rem; /* 24px */
--line-height-xl: 1.5625rem; /* 25px */
--f2: 3.25rem;/* Deprecated */
--f3: 1.8rem;/* Deprecated */
--f4: 1.38rem;/* Deprecated */
--f5: 1.35rem;/* Deprecated */
--f6: var(--font-size-2xl); /* Deprecated */
--f7: var(--font-size-xl); /* Deprecated */
--f8: var(--font-size-lg); /* Deprecated */
--f9: var(--font-size-base); /* Deprecated */
--f10: var(--font-size-sm); /* Deprecated */
--f11: var(--font-size-xs); /* Deprecated */
/* letter-spacing that works with the above sizes */
--ls-6: -0.017em;
--ls-7: -0.014em;
--ls-8: -0.011em;
--ls-9: -0.006em;
--ls-10: 0em;
--ls-11: 0.005em;
--ui-font: "Inter VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--mono-font: "Roboto Mono VF", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--content-line-height: 1.6;
}
/* base COLORS (not themed) */
:host > *,
:root {
/*
Base neutral styles.
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4ByMArgC4BOEANjiADQgAW5Mj8A2qJLAnAUa9ZiADGAezqTqXbiADEAM1VqxKgBzKAnMogblABmUBGZQCYNMIzADMMAGwa0ptAFY0OjeNPiA7OJwLIoARqahOuJWIRAWEOKh-ho67noQBiGamjoWURqBmu7aGo4w-tl2paaOAckh7gAs7sqOoRqNRXYtGg6d7lUhdsPijc4hFpp2pnbtIeYW-hbKGqbufhaDSqZGNW4aRr6mpvVKRucXIAC6AL5XLJSSYJwICjtGYjqnqZ8fLEViTR-ED%2BdxifzAxxgliOYHuaEgdzA5piRrA7piOzAiwIizAtZiHZiIynIwI87XG5AA
*/
/* Readwise - Neutrals color palette */
/* neutral */
--neutral-100: #ffffff;
--neutral-97: #f8f9fa;
--neutral-95: #f0f1f2;
--neutral-90: #e0e3e6;
--neutral-85: #d1d5d9;
--neutral-80: #c1c7ce;
--neutral-75: #b1b9c2;
--neutral-70: #a2acb7;
--neutral-65: #959faa;
--neutral-60: #88929c;
--neutral-55: #7c858f;
--neutral-50: #6e7883;
--neutral-45: #616c77;
--neutral-40: #545f6b;
--neutral-35: #48535f;
--neutral-30: #3e4853;
--neutral-25: #333c46;
--neutral-20: #28313b;
--neutral-15: #1f272f;
--neutral-10: #151c23;
--neutral-07: #10161d;
--neutral-05: #0c1117;
--neutral-00: #000000;
/* Readwise - Color color palette
https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIBKMIBMDuBLAzjABALT4DCA9gDZkBOIANCABYCuMOCA2qJLAiNTDT0QAY0o128DiADEAMwUA2OQGZh8gJxoRaAEzq5GgEYqIahvICsADg0B2IwcWWRl-RbTWALAAZT6iDsVaxV3WTsQgEZdCHUvPTcfdV0jSMVokABdAF86bmg4RBoIMABzOAYxKmpJaXkRQ0EDCBgfCDlmow1FJIs5CGsjXUt1VEVdSJGLETsvGEiK2Q0IL3SRdSCVSx91iy8hjR8hC10RSLsfSKzc-N5EAE8YCioMYSqJTll%2B-vmDFRgIlc%2BnZtJEOhZ5kY5Dt1GctJFrAEvBEfIsZLZLL4gbJFCY0JFzLJkSkjslrJFDlccnlwAU%2BKUBDAwG9xDVPjIYDA5GhObCvKoRGF0dyRNY0eMjGhFISZF5TCJkeoVAiQlNZFs7ATFMkYJjdGjdCpgob1JMJpEvNcaTxCiAAC6oCgs6q1WRcuRQ46yM6cuSWix2EFi-2yaJnPTqHxtXEhmRR6yKDRCrVyOwaU3WSxbWIWI4qaWOXM%2BXQl7XU262owUVjOj5SL66b7g71yAHcgLWEQiLkbXH6r0yNxJuTYmS6NB2Sy600QSwaUXJTHBZtjuU%2BSzaiwIyKCxzl2l3EBYMBoLClMi1tn1%2BTWVOt0ZzHxyRHTXGttEQEQQVGbpaWEEwC%2BsjWOuGgwLGiYqHIIi-rKMBbGKSrjK4dimvM0pljcB62gADsw1A4RQizvFedTcnIyi7A2aBQkK4FGHYqDqFKGj-L03qKIogjphYRhLmg7HoiIKhfkKnEqMiMpeNEKxAaukQQLoqE5JkDB2mQYBsJ89jCIcwggcIFzCD0wjbMIvjCCo7G6OxkRJDkQA
*/
/* red */
--red-97: #fff6f3;
--red-90: #f9dcd2;
--red-80: #f9b3a3;
--red-70: #f5897b;
--red-60: #f65c52;
--red-50: #d8403a;
--red-40: #a73832;
--red-30: #78312a;
--red-20: #4d2520;
--red-10: #2b1612;
/* orange */
--orange-97: #fcf9ed;
--orange-90: #fae0af;
--orange-80: #fab960;
--orange-70: #fa8b25;
--orange-60: #ea6215;
--orange-50: #c74e1e;
--orange-40: #9a461c;
--orange-30: #73350c;
--orange-20: #4b290d;
--orange-10: #2c1701;
/* yellow */
--yellow-97: #fafae1;
--yellow-90: #f3e781;
--yellow-80: #f7dc1f;
--yellow-70: #e1bf0c;
--yellow-60: #c19d18;
--yellow-50: #a4780e;
--yellow-40: #895401;
--yellow-30: #6b3d13;
--yellow-20: #472b0d;
--yellow-10: #281901;
/* green */
--green-97: #eefdee;
--green-90: #c4f3c2;
--green-80: #8fdc8e;
--green-70: #62bd63;
--green-60: #43ac47;
--green-50: #318835;
--green-40: #357136;
--green-30: #2e542e;
--green-20: #233823;
--green-10: #152114;
/* teal */
--teal-97: #effbfd;
--teal-90: #c1eef4;
--teal-80: #77d8e4;
--teal-70: #12c1d2;
--teal-60: #00a6b4;
--teal-50: #008692;
--teal-40: #136f79;
--teal-30: #18535a;
--teal-20: #0d363b;
--teal-10: #002226;
/* blue */
--blue-97: #f2faff;
--blue-90: #cfe7fd;
--blue-80: #a8ccef;
--blue-70: #76b2ed;
--blue-60: #5292f1;
--blue-50: #2d75e5;
--blue-40: #1a59c8;
--blue-30: #25438f;
--blue-20: #243056;
--blue-10: #181c2b;
/* indigo */
--indigo-97: #f8f7fe;
--indigo-90: #e4e0f8;
--indigo-80: #c6bfee;
--indigo-70: #aca0e6;
--indigo-60: #957de8;
--indigo-50: #8059e4;
--indigo-40: #693fc6;
--indigo-30: #4e358e;
--indigo-20: #362c57;
--indigo-10: #1e1636;
/* purple */
--purple-97: #fdf6fc;
--purple-90: #f2dbf2;
--purple-80: #e4b7ea;
--purple-70: #d693e0;
--purple-60: #c66ed9;
--purple-50: #b543d0;
--purple-40: #8c3ca2;
--purple-30: #663473;
--purple-20: #412a48;
--purple-10: #241a27;
/* These will eventually be deprecated. For now they have been remapped to the base styles above. Use functional names like "text-primary" or the root names above */
--black: var(--neutral-00);
--white: var(--neutral-100);
/* New base styles for these colours will come */
--svg-filter-grey: invert(26%) sepia(19%) saturate(0%) hue-rotate(266deg) brightness(106%) contrast(94%);
--svg-filter-inbox: invert(76%) sepia(9%) saturate(153%) hue-rotate(169deg) brightness(95%) contrast(90%);
--svg-filter-black: invert(0%) sepia(4%) saturate(0%) hue-rotate(309deg) brightness(93%) contrast(107%);
--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(105%) contrast(101%);
--svg-filter-blue: invert(79%) sepia(56%) saturate(7329%) hue-rotate(191deg) brightness(102%) contrast(94%);
}
/* default THEME colors */
:host > *,
:root {
/* FOUNDATIONS */
/* Naming syntax
We use the following order when naming css properties. The "default" text can be omitted.
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
background default default default default default
text button error selected primary hover
icon galleryList success secondary active
border toolbar info
Button example:
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
background button default default secondary hover
background-button-secondary-hover
PROPERTY uiELEMENT ROLE SELECTED PROMINENCE INTERACTION
text button default default primary active
text-button-primary-active
/*
/* Utility alpha classes */
--u-alpha-100: rgba(40,49,59,0.03);
--u-alpha-200: rgba(40,49,59,0.06);
--u-alpha-300: rgba(40,49,59,0.09);
--u-alpha-400: rgba(40,49,59,0.12);
--u-alpha-500: rgba(40,49,59,0.15);
--u-alpha-blue-100: rgba(26,89,200,0.03);
--u-alpha-blue-200: rgba(26,89,200,0.06);
--u-alpha-blue-300: rgba(26,89,200,0.09);
--u-alpha-blue-400: rgba(26,89,200,0.12);
--u-alpha-blue-500: rgba(26,89,200,0.15);
--u-alpha-red-100: rgba(216,64,58,0.03);
--u-alpha-red-200: rgba(216,64,58,0.06);
--u-alpha-red-300: rgba(216,64,58,0.09);
--u-alpha-red-400: rgba(216,64,58,0.12);
--u-alpha-red-400: rgba(216,64,58,0.15);
--focus-ring-color: var(--blue-60);
/* Text */
--text-primary: var(--neutral-20);
--text-secondary: var(--neutral-45);
--text-tertiary: var(--neutral-60);
--text-placeholder: var(--neutral-65);
--text-disabled: var(--neutral-75);
--text-inverse: var(--neutral-90); /* for use on dark backgrounds while in light mode */
--text-interactive: var(--blue-50);
--text-backlink: var(--indigo-40);
--text-error: var(--red-50);
--text-success: var(--green-50);
/* Icons */
--icon-primary: var(--neutral-25);
--icon-secondary: var(--neutral-45);
--icon-tertiary: var(--neutral-60);
--icon-disabled: var(--neutral-75);
--icon-interactive: var(--blue-50);
--icon-danger: var(--red-50);
--icon-success: var(--green-50);
--icon-inverse: var(--neutral-97);
--icon-faint: var(--neutral-90);
/* Extension bar */
--extension-bar-background-color: var(--neutral-97);
/* Highlights */
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
--highlight-background-color--active: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--highlight-text-color: var(--black);
--highlight-text-color--active: var(--black);
--highlight-text-pre-color: var(--white);
--highlight-text-pre-color--active: var(--white);
/* Text Selection */
--selection-color: rgba(0, 114, 255, 0.3);
/* Borders */
--border-primary: var(--neutral-80);
--border-secondary: var(--neutral-90);
--border-secondary-alpha: var(--u-alpha-400);
--border-tertiary-alpha: var(--u-alpha-200);
--border-focus: var(--blue-60);
--border-error: var(--red-60);
/* Backgrounds */
--background-primary: var(--neutral-100);
--background-secondary: var(--neutral-90);
--background-tertiary: var(--neutral-95);
--background-inverse: var(--neutral-10);
--background-canvas: var(--neutral-97);
--background-elevated: var(--neutral-100);
--background-backdrop: var(--u-alpha-300);
--background-dragging: rgba(f, f, f, 0.7);
--background-interactive: var(--blue-50);
--background-error: var(--red-97);
--background-bulk-actions-header: var(--blue-90);
/* Shadows */
--shadow-100: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1px 4px rgba(60, 64, 67, 0.1);
--shadow-200: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 1.5px 4px rgba(60, 64, 67, 0.1), 0px 3px 10px rgba(60, 64, 67, 0.2);
--shadow-300: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 3px 5px rgba(60, 64, 67, 0.1), 0px 6px 24px rgba(60, 64, 67, 0.2);
--shadow-400: 0px 0px 0px 1px rgba(60, 64, 67, 0.05), 0px 5px 12px rgba(60, 64, 67, 0.1), 0px 12px 32px rgba(60, 64, 67, 0.2), 0px 20px 96px rgba(60, 64, 67, 0.1);
/* COMPONENTS */
/* Progress bar */
--reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
--reading-progress-background: var(--neutral-90);
--reading-progress-max-background: var(--neutral-75);
--reading-progress-point: var(--neutral-40);
/* Buttons */
/* primary - deprecated */
--primary-button-background: var(--u-alpha-blue-200); /* deprecated */
--primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
--primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
--primary-button-color: var(--text-primary); /* deprecated */
/* primary */
--background-button-primary: var(--u-alpha-blue-200);
--background-button-primary-hover: var(--u-alpha-blue-300);
--background-button-primary-active: var(--u-alpha-blue-400);
--text-button-primary: var(--text-primary);
--text-button-primary-disabled: var(--text-disabled);
/* secondary */
--background-button-secondary: var(--u-alpha-200);
--background-button-secondary-hover: var(--u-alpha-300);
--background-button-secondary-active: var(--u-alpha-400);
--background-button-secondary-disabled: var(--u-alpha-200);
--text-button-secondary: var(--text-primary);
--text-button-secondary-disabled: var(--text-disabled);
--btn-secondary: rgba(235, 237, 238, 0.65); /* used for blur buttons? */
/* blue */
--background-button-blue: var(--blue-50);
--background-button-blue-hover: var(--blue-40);
--background-button-blue-active: var(--blue-30);
--background-button-blue-disabled: var(--u-alpha-200);
--text-button-blue: var(--white);
--text-button-blue-disabled: var(--text-disabled);
/* caution */
--background-button-caution: var(--u-alpha-red-200);
/* Document card */
--document-card-width: 208px;
--document-card-border: var(--border-secondary-alpha);
--document-card-border-divider: var(--white);
--document-card-focus-border-color: var(--focus-ring-color);
--document-card-border-radius: 8px;
--document-card-background: #fff;
--document-card-background--hover: var(--document-card-background);
--document-card-book-image-container-background: var(--background-canvas);
--document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.03), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.2), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.0715329), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.0484671);
--document-card-hover-box-shadow: 0px 0px 0px 1px rgba(60, 64, 67, 0.00), 0px 1.5px 4px rgba(60, 64, 67, 0.03), 0px 3px 10px rgba(60, 64, 67, 0.1);
/* Link card */
--link-card-background: var(--document-card-background);
--link-card-border-radius: var(--document-card-border-radius);
--link-card-border: var(--border-secondary-alpha);
--link-card-border--hover: var(--border-primary);
/* Donut progress indicator */
--donut-progress-indicator-center-color: var(--document-card-background);
/* Sidebar */
--sidebar-background: var(--background-canvas);
--empty-sidebar-background: var(--blue-97);
--sidebar-button-icon-color: var(--icon-secondary);
--sidebar-inbox-nav-background: #fff;
--hide-sidebar-button-background: var(--neutral-95);
--thumbnail-loading-background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) #ededed;
--sidebar-logo-color: #000;
/* Image placeholders */
--image-placeholder-color: var(--neutral-97);
--image-placeholder-shadow-color: var(--neutral-85);
/* Main background surfaces */
--background-color: var(--background-primary);
--content-background-color: var(--background-primary);
--code-background-color: var(--background-tertiary);
/* Popovers */
--edit-tags-form-focused-option-background: rgba(43, 46, 55, 0.04);
--main-highlighter-popover-delete-highlight-action-background: var(--yellow-90);
--main-highlighter-popover-delete-highlight-icon-color: var(--yellow-40);
--main-highlighter-popover-action-hover-background: var(--u-alpha-100);
--highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);
/* Sort menu */
--sort-menu-background: #fff;
/* Tag */
--tag-background: var(--u-alpha-200);
/* Misc */
--content-secondary-color: var(--text-secondary);
--focus-indicator-color: var(--blue-70);
--section-border-color: var(--border-secondary-alpha);
--app-side-drop-shadow-width: 18px;
/* Appearance panel */
--appearance-panel-background: var(--background-elevated);
--appearance-panel-item-hover-background: var(--u-alpha-100);
/* Command palette */
--cmd-palette-background: var(--neutral-97);
--cmd-palette-cmd-container: var(--neutral-97);
--cmd-palette-section-title: var(--neutral-97);
--cmd-palette-row-hover: var(--u-alpha-100);
--cmd-palette-drop-shadow: var(--shadow-400);
--cmd-palette-scrollbar: var(--neutral-80);
--cmd-palette-key-background: var(--u-alpha-200);
--cmd-palette-row-border: var(--blue-50);
--cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.04) inset;
--cmd-palette-context-item-background: var(--background-tertiary);
--cmd-palette-context-item-border: var(--border-secondary);
--cmd-palette-label-color: var(--text-secondary);
--cmd-palette-close-icon-color: var(--icon-secondary);
/* Quoteshot modal */
--quoteshot-modal-backdrop: rgba(40, 49, 59, 0.59);
--quoteshot-modal-background: var(--neutral-00);
--quoteshot-modal-settings-background: var(--neutral-10);
--quoteshot-interactive-border: var(--blue-60);
--quoteshot-ratio-border-inactive: var(--neutral-70);
--quoteshot-ratio-border-active: var(--neutral-95);
--quoteshot-save-button-text: var(--neutral-90);
--quoteshot-save-button-background: rgba(92, 105, 119, 0.26);
--quoteshot-share-button-text: var(--neutral-00);
--quoteshot-share-button-background: var(--blue-70);
--quoteshot-share-dropdown-background: var(--neutral-20);
--quoteshot-share-dropdown-hover: rgba(110,120,131,0.10);
--quoteshot-share-dropdown-text: var(--neutral-90);
--modal-z-index: 9999;
/* PDF Search Bar */
--document-search-input-background: var(--neutral-100);
/* Inbox */
--inbox-sidebar-background: var(--background-canvas);
--inbox-icon-color: var(--icon-secondary);
--inbox-icon-color-disabled: var(--icon-disabled);
--inbox-icon-color-active: var(--icon-primary);
--inbox-zero-background-image-filter: opacity(80%) contrast(100%) saturate(80%) sepia(0.1) brightness(65%) drop-shadow(1px 1px 1px black);
--inbox-zero-foreground-image-filter:
contrast(84%)
brightness(80%)
drop-shadow(0 0 1px rgba(0,0,0,0))
opacity(100%)
saturate(25%);
--inbox-zero-header-items-filter:
contrast(70%)
brightness(400%)
hue-rotate(0)
drop-shadow(0 0 2px rgba(0,0,0,1))
opacity(90%)
saturate(30%);
--inbox-zero-sidebar-items-filter:
contrast(98%)
brightness(500%)
hue-rotate(0)
drop-shadow(0px 0px 5px rgba(0,0,0,1))
opacity(100%)
saturate(300%);
--nav-item-filter: var(--svg-filter-inbox);
--nav-item-active-filter: var(--svg-filter-black);
--document-list-box-shadow: inset 0 53px 6px -54px var(--neutral-65);
--inbox-container-drop-shadow: 0px 8px 20px rgb(0 0 0 / 8%), 0px -1px 2px rgb(0 0 0 / 8%);
--import-link-color: var(--blue-50);
--tag-color: var(--u-alpha-200);
--tag-text-color: var(--text-secondary);
--scrollbar-color: var(--neutral-90);
--scrollbar-color-hover: var(--neutral-80);
--separator-color: rgba(0, 0, 0, 0.1);
--status-dot--unopened-color: var(--text-interactive);
--toast-background: #151C23;
--toast-background--error: var(--red-20);
--toast-background--info: var(--toast-background);
--toast-background--success: var(--toast-background);
--toast-background--warning: var(--toast-background);
--toast-border-radius: 6px;
--toast-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
--toast-max-width: calc(var(--s1)*40);
--toast-min-height: calc(var(--s1)*4.4);
--toast-font-size: var(--font-size-base);
--toast-gap: var(--s1);
--toast-icon-height: var(--s2);
--toast-icon-circle-fill: var(--icon-inverse);
--toast-icon-circle-fill--error: var(--toast-icon-circle-fill);
--toast-progress-bar-color: var(--neutral-70);
--toast-progress-bar-color--error: var(--red-50);
--toast-progress-bar-color--info: var(--blue-60);
--toast-progress-bar-color--success: var(--green-60);
--toast-progress-bar-color--warning: var(--orange-70);
--toast-text-color: var(--white);
--toast-text-color-error: var(--toast-text-color);
--toast-button-color: var(--white);
--toast-button-color--error: var(--white);
--toast-button-color--info: var(--white);
--toast-button-color--success: var(--white);
--toast-button-color--warning: var(--white);
--tooltip-background--default: #3E4046;
--tooltip-background--error: var(--red-10);
--tooltip-background--info: var(--blue-10);
--tooltip-background--success: #021100;
--tooltip-background--warning: #4c2b00;
--tooltip-color--default: var(--text-inverse);
--tooltip-shortcut-background: var(--neutral-40);
--tooltip-shortcut-color:var(--text-inverse);
--document-list-focus-color: var(--u-alpha-100);
--primary-icon-filter: var(--svg-filter-black);
--action-button-border-color: var(--neutral-85);
--action-button-background: var(--neutral-97);
--action-button-shadow: var(--neutral-85);
--action-button-svg-color: var(--svg-filter-grey);
/* Metadata */
--summary-text: var(--text-primary);
--metadata-title: var(--text-secondary);
--metadata-value: var(--text-primary);
--metadata-input-background: var(--white);
--metadata-input-focus-background: var(--white);
--metadata-footer-button-background: rgba(255, 255, 255, 0.25);
--metadata-footer-color: var(--white);
--notebook-highlight-color: #344255;
--default-button-text-color: var(--text-primary);
--default-button-background: var(--u-alpha-200);
--default-button-hover-background: var(--u-alpha-300);
--default-button-active-background: var(--u-alpha-400);
--default-blurred-button-background: rgba(235, 237, 238, 0.7);
--default-blurred-button: 20px;
--inbox-header-tab-text-color: var(--text-tertiary);
--inbox-header-active-tab-text-color: var(--text-primary);
--inbox-header-search-icon: var(--icon-primary);
--inbox-header-tab-count-background: var(--u-alpha-200);
--inbox-header-tab-count-text-color: var(--text-secondary);
--inbox-header-tab-active-count-text-color: var(--text-secondary);
--document-list-title-color: var(--text-primary);
--document-list-item-tertiary-text-color: var(--text-secondary);
--document-list-doc-icon-color: var(--icon-tertiary);
--document-list-info-color: var(--text-secondary);
--document-list-action-button-color: var(--icon-primary);
--table-of-contents-item-color: var(--text-secondary);
--table-of-contents-bar-color: var(--border-secondary);
--table-of-contents-bar-active-color: #B5C3FB;
--search-input-background: var(--u-alpha-200);
--placeholder-fill-color: #A1AAC4;
--placeholder-bg-1: url("/assets/placeholder-bg-light-1.7ea5e3de.png");
--placeholder-bg-2: url("/assets/placeholder-bg-light-2.2d35b895.png");
--placeholder-bg-3: url("/assets/placeholder-bg-light-3.930a7a17.png");
--placeholder-bg-4: url("/assets/placeholder-bg-light-4.f53e8fcb.png");
--empty-feed-image: url("/assets/empty-state-feed-light.3b1ccfe5.png");
/* Document share */
--document-share-width-popovers-float-at: 700px;
/* Radio group */
--radio-group-indicator-width: 20px;
--radio-group-indicator-background-color: var(--surface-primary);
--radio-group-indicator-border-color: var(--neutral-60);
--radio-group-indicator-active-color: var(--background-interactive);
--radio-group-indicator-hover-color: var(--neutral-97);
/* Badge */
--badge-background-color: var(--green-90);
--badge-text-color: var(--green-30);
/* TTS / audio player */
--tts-trigger-button-color: var(--text-secondary);
--tts-trigger-border-color: var(--u-alpha-300);
--tts-player-background: var(--white);
--tts-player-box-shadow:
0px 3px 10px 0px rgba(60, 64, 67, 0.2),
0px 1.5px 4px 0px rgba(60, 64, 67, 0.1),
0px 0px 0px 1px rgba(60, 64, 67, 0.05);
--tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);
/* Slider */
--slider-track-background: var(--neutral-80);
--slider-range-background: var(--neutral-50);
--slider-hover-range-background-color: var(--blue-50);
--slider-range-border-right-color: var(--white);
--slider-thumb-background: var(--white);
--slider-thumb-box-shadow:
0px 1px 4px 0px rgba(60, 64, 67, 0.4),
0px 0px 0px 1px rgba(0, 0, 0, 0.08);
/* These text variables will eventually be deprecated */
--text: var(--text-primary);
--text-grey: var(--text-secondary);
--text-grey-medium: var(--text-secondary);
--text-grey-lightish: var(--neutral-70);
--text-grey-lighter: var(--neutral-80);
--text-grey-dark: var(--text-primary);
--text-grey-darker: var(--text-primary);
--box-shadow-color: rgba(0, 0, 0, 0.15);
--file-dropzone-background: rgba(0, 0, 0, 0.7);
--file-dropzone-color: var(--white);
--transcript-teleprompt-background: rgba(89,142,244, .3);
--transcript-teleprompt-color: black
}
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
:host > *,
:root {
--default-blurred-button-background: #F2F3F4;
--default-blurred-button: 0px
}
}
:host > *,
:root {
--onboarding-background-image: url("/onboarding/onboarding-background.webp");
--onboarding-container-box-shadow: 0px 9px 67px rgba(19, 13, 40, 0.0199343), 0px 3.75998px 27.991px rgba(19, 13, 40, 0.0289288), 0px 2.01027px 14.9653px rgba(19, 13, 40, 0.0364916), 0px 1.12694px 8.38944px rgba(19, 13, 40, 0.0438708), 0px 0.598509px 4.45557px rgba(19, 13, 40, 0.052216), 0px 0.249053px 1.85406px rgba(19, 13, 40, 0.07);
--onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01.webp");
--onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02.webp");
--onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03.webp");
--onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04.webp");
--checkbox-icon-color: var(--icon-inverse)
}
:host > * .high-contrast, :root .high-contrast {
--highlight-background-color--normal: hsl(50deg 96.24% 67.14%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 100%);
--highlight-background-color--active: hsl(50, 100%, 50%);
--highlight-image-background-color--normal: hsl(50, 100%, 50%);
--highlight-image-background-color--active: hsl(50, 100%, 50%);
--selection-color: rgb(74, 153, 255);
}
.theme--dark {
/* FOUNDATIONS */
/* Utility alpha classes */
--u-alpha-100: rgba(110,120,131,0.10); /* neutral-50 equivalent */
--u-alpha-200: rgba(110,120,131,0.15);
--u-alpha-300: rgba(110,120,131,0.20);
--u-alpha-400: rgba(110,120,131,0.25);
--u-alpha-500: rgba(110,120,131,0.30);
--u-alpha-blue-100: rgba(45,117,229,0.10); /* blue-50 equivalent */
--u-alpha-blue-200: rgba(45,117,229,0.15);
--u-alpha-blue-300: rgba(45,117,229,0.20);
--u-alpha-blue-400: rgba(45,117,229,0.25);
--u-alpha-blue-500: rgba(45,117,229,0.30);
--u-alpha-red-100: rgba(216,64,58,0.10); /* red-50 equivalent */
--u-alpha-red-200: rgba(216,64,58,0.15);
--u-alpha-red-300: rgba(216,64,58,0.20);
--u-alpha-red-400: rgba(216,64,58,0.25);
--u-alpha-red-500: rgba(216,64,58,0.30);
/* Text */
--text-primary: var(--neutral-90);
--text-secondary: var(--neutral-65);
--text-tertiary: var(--neutral-50);
--text-placeholder: var(--neutral-45);
--text-disabled: var(--neutral-40);
--text-inverse: var(--neutral-20); /* for use on dark backgrounds while in light mode */
--text-interactive: var(--blue-70);
--text-backlink: var(--indigo-70);
--text-error: var(--red-60);
--text-success: var(--green-60);
/* Icons */
--icon-primary: var(--neutral-80);
--icon-secondary: var(--neutral-70);
--icon-tertiary: var(--neutral-45);
--icon-placeholder: var(--neutral-45);
--icon-disabled: var(--neutral-40);
--icon-interactive: var(--blue-70);
--icon-danger: var(--red-60);
--icon-success: var(--green-60);
--icon-inverse: var(--neutral-20);
--icon-faint: var(--neutral-30);
/* Highlights */
--highlight-background-color--normal: hsl(50deg 100% 50% / 15%);
--highlight-background-color-underline: hsl(50deg 100% 50% / 80%);
--highlight-background-color--active: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--normal: hsl(50deg 100% 50% / 30%);
--highlight-image-background-color--active: hsl(50deg 100% 50% / 50%);
--highlight-text-color: var(--white);
--highlight-text-color--active: var(--white);
--highlight-text-pre-color: var(--white);
--highlight-text-pre-color--active: var(--white);
/* Borders */
--border-primary: var(--neutral-65);
--border-secondary: var(--neutral-20);
--border-secondary-alpha: var(--u-alpha-400);
--border-tertiary-alpha: var(--u-alpha-200);
--border-focus: var(--blue-60);
--border-error: var(--red-40);
/* Backgrounds */
--background-primary: var(--neutral-10);
--background-secondary: var(--neutral-15);
--background-tertiary: var(--neutral-20);
--background-inverse: var(--neutral-90);
--background-canvas: var(--neutral-07);
--background-elevated: var(--neutral-20);
--background-backdrop: rgba(0,0,0,0.4);
--background-dragging: rgba(40, 49, 59, 0.7);
--background-interactive: var(--blue-70);
--background-error: var(--red-10);
--background-bulk-actions-header: var(--blue-30);
/* Shadows */
--shadow-100: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.1);
--shadow-200: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1.5px 4px rgba(0, 0, 0, 0.1), 0px 3px 10px rgba(0, 0, 0, 0.2);
--shadow-300: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 5px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.25);
--shadow-400: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 5px 12px rgba(0, 0, 0, 0.1), 0px 12px 32px rgba(0, 0, 0, 0.2), 0px 20px 96px rgba(0, 0, 0, 0.4);
/* COMPONENTS */
/* Progress bar */
--reading-progress-gradient: linear-gradient(108.44deg, #43CBFF 24.85%, #9708CC 74.99%);
--reading-progress-background: var(--neutral-20);
--reading-progress-max-background: var(--neutral-35);
--reading-progress-point: var(--neutral-90);
/* Buttons */
/* primary - deprecated */
--primary-button-background: var(--u-alpha-blue-200); /* deprecated */
--primary-button-hover-background: var(--u-alpha-blue-300); /* deprecated */
--primary-button-active-background: var(--u-alpha-blue-400); /* deprecated */
--primary-button-color: var(--text-primary); /* deprecated */
/* primary */
--background-button-primary: var(--u-alpha-blue-200);
--background-button-primary-hover: var(--u-alpha-blue-300);
--background-button-primary-active: var(--u-alpha-blue-400);
--text-button-primary: var(--text-primary);
--text-button-primary-disabled: var(--text-disabled);
/* secondary */
--background-button-secondary: var(--u-alpha-200);
--background-button-secondary-hover: var(--u-alpha-300);
--background-button-secondary-active: var(--u-alpha-400);
--text-button-secondary: var(--text-primary);
--text-button-secondary-disabled: var(--text-disabled);
--btn-secondary: rgba(62, 72, 83, 0.7); /* used for blur buttons? */
/* blue button */
--background-button-blue: var(--blue-60);
--background-button-blue-hover: var(--blue-70);
--background-button-blue-active: var(--blue-80);
--background-button-blue-disabled: var(--u-alpha-200);
--text-button-blue: var(--black);
--text-button-blue-disabled: var(--text-disabled);
/* caution */
--background-button-caution: var(--u-alpha-red-200);
/* Document card */
--document-card-border: rgba(0,0,0,0);
--document-card-border-divider: rgba(0,0,0,.2);
--document-card-height: var(--background-elevated);
--document-card-background: var(--neutral-15);
--document-card-background--hover: var(--neutral-20);
--document-card-book-image-container-background: var(--background-secondary);
--document-card-book-image-box-shadow: 0px 0px 0px 1.11765px rgba(0, 0, 0, 0.43), 0px 16.7647px 21.2353px -14.5294px rgba(0, 0, 0, 0.5), 0px 4.2439px 20.3859px rgba(0, 0, 0, 0.3715), 0px 1.26352px 1.41217px rgba(0, 0, 0, 0.3485), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
--document-card-hover-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.00), 0px 1.5px 4px rgba(0, 0, 0, 0.03), 0px 2px 8px rgba(0, 0, 0, .3);
/* Link card */
--link-card-border--hover: var(--neutral-40);
/* Donut progress indicator */
--donut-progress-indicator-center-color: var(--document-card-background);
/* Sidebar */
--sidebar-background: var(--background-canvas);
--empty-sidebar-background: var(--neutral-07);
--hide-sidebar-button-background: #445064;
--sidebar-button-icon-color: var(--inbox-icon-color);
--sidebar-inbox-nav-background: var(--neutral-20);
--thumbnail-loading-background: linear-gradient( 100deg, rgba(62, 72, 83, 0) 40%, rgba(62, 72, 83, .5) 50%, rgba(62, 72, 83, 0) 60% ) var(--u-alpha-200);
--sidebar-logo-color: #fff;
/* Image placeholders */
--image-placeholder-color: var(--neutral-80);
--image-placeholder-shadow-color: var(--black);
/* Main background surfaces */
--background-color: var(--background-primary);
--content-background-color: var(--background-primary);
--code-background-color: var(--neutral-25);
/* Popovers */
--edit-tags-form-focused-option-background: var(--neutral-25);
--main-highlighter-popover-action-hover-background: var(--u-alpha-100);
--main-highlighter-popover-delete-highlight-action-background: var(--yellow-30);
--main-highlighter-popover-delete-highlight-icon-color: var(--yellow-70);
--highlighter-sub-popover-list-item-focused-background: var(--u-alpha-100);
/* Sort menu */
--sort-menu-background: var(--background-elevated);
/* Misc */
--content-secondary-color: var(--text-secondary);
--focus-indicator-color: var(--blue-50);
--section-border-color: var(--border-secondary-alpha);
--app-side-drop-shadow: rgba(40, 40, 40, 0.75);
/* Appearance panel */
--appearance-panel-background: var(--background-elevated);
--appearance-panel-item-hover-background: var(--u-alpha-100);
/* Command palette */
--cmd-palette-background: var(--neutral-15);
--cmd-palette-cmd-container: var(--neutral-15);
--cmd-palette-section-title: var(--neutral-15);
--cmd-palette-row-hover: var(--u-alpha-100);
--cmd-palette-drop-shadow: var(--shadow-400);
--cmd-palette-scrollbar: var(--neutral-40);
--cmd-palette-key-background: var(--u-alpha-200);
--cmd-palette-input-container-shadow: 1px -11px 11px -12px rgba(0,0,0,0.16) inset;
--cmd-palette-context-item-background:var(--background-primary);
--cmd-palette-context-item-border: var(--border-secondary);
--cmd-palette-label-color: var(--text-secondary);
--cmd-palette-close-icon-color: #B6B9BF;
/* Inbox */
--inbox-sidebar-background: #12171C;
--inbox-icon-color: var(--icon-secondary);
--inbox-icon-color-disabled: var(--icon-disabled);
--inbox-icon-color-active: var(--icon-primary);
--inbox-zero-background-image-filter: opacity(30%) saturate(0%);
--inbox-zero-foreground-image-filter:
brightness(300%)
opacity(50%)
contrast(30%)
saturate(100%);
--inbox-zero-header-items-filter:
contrast(70%)
brightness(200%)
hue-rotate(0)
drop-shadow(0 0 2px rgba(0,0,0,1))
opacity(70%)
saturate(30%);
--inbox-zero-sidebar-items-filter:
contrast(98%)
brightness(500%)
hue-rotate(0)
drop-shadow(0px 0px 5px rgba(0,0,0,1))
opacity(100%)
saturate(300%);
--nav-item-filter: var(--svg-filter-inbox);
--nav-item-active-filter: var(--svg-filter-white);
--document-list-box-shadow: inset -2px 53px 16px -54px var(--black);
--inbox-container-drop-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08), 0px -1px 2px rgba(0, 0, 0, 0.08);
--import-link-color: var(--blue-50);
--tag-color: var(--u-alpha-200);
--tag-text-color: var(--text-secondary);
--scrollbar-color:var(--neutral-40);
--scrollbar-color-hover: var(--neutral-50);
--separator-color: rgba(255, 255, 255, 0.1);
--toast-background: var(--white);
--toast-background--error: var(--red-90);
--toast-background--info: var(--toast-background);
--toast-background--success: var(--toast-background);
--toast-background--warning: var(--toast-background);
--toast-button-color: var(--text-inverse);
--toast-button-color--error: var(--text-error);
--toast-button-color--info: var(--toast-button-color);
--toast-button-color--success: var(--toast-button-color);
--toast-button-color--warning: var(--toast-button-color);
--toast-box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1), 0 2px 5px 0 rgba(255, 255, 255, 0.05);
--toast-icon-circle-fill--error: var(--icon-danger);
--toast-text-color: var(--text-inverse);
--toast-text-color--error: var(--red-20);
--tooltip-background--default: var(--white);
--tooltip-color--default: #202226;
--tooltip-shortcut-background: #ECECED;
--tooltip-shortcut-color: rgba(32, 34, 38, 0.64);
--document-list-focus-color: var(--u-alpha-100);
--primary-icon-filter: var(--svg-filter-white);
--action-button-border-color: var(--neutral-15);
--action-button-background: var(--neutral-10);
--action-button-shadow: var(--black);
--action-button-svg-color: var(--svg-filter-white);
/* PDF Search Bar */
--document-search-input-background: var(--neutral-00);
/* Metadata */
--summary-text: var(--text-primary);
--metadata-title: var(--text-secondary);
--metadata-value: var(--text-primary);
--metadata-input-background: var(--background-secondary);
--metadata-input-focus-background: var(--background-primary);
--metadata-footer-button-background: rgba(43, 46, 55, 0.05);
--metadata-footer-color: var(--background-canvas);
--notebook-highlight-color: var(--black);
--default-button-text-color: var(--text-primary);
--default-button-background: var(--u-alpha-200);
--default-button-hover-background: var(--u-alpha-300);
--default-button-active-background: var(--u-alpha-400);
--default-blurred-button-background: rgba(62, 72, 83, 0.7);
--default-blurred-button: 20px;
--inbox-header-tab-text-color: var(--text-grey-medium);
--inbox-header-active-tab-text-color: var(--text-primary);
--inbox-header-search-icon: var(--white);
--inbox-header-tab-count-background: var(--u-alpha-200);
--inbox-header-tab-count-text-color: var(--text-grey-lighter);
--inbox-header-tab-active-count-text-color: var(--text-grey-darker);
--document-list-title-color: var(--text-primary);
--document-list-item-tertiary-text-color: var(--text-secondary);
--document-list-doc-icon-color: var(--icon-secondary);
--document-list-info-color: var(--text-secondary);
--document-list-action-button-color: rgba(255, 255, 255, 0.8);
--table-of-contents-item-color: var(--text-secondary);
--table-of-contents-bar-color: #464851;
--table-of-contents-bar-active-color: #4E94FD;
--search-input-background: var(--u-alpha-200);
--transcript-teleprompt-background: rgba(89,142,244, .4);
--transcript-teleprompt-color: white;
--placeholder-fill-color: #7F8494;
--placeholder-bg-1: url("/assets/placeholder-bg-dark-1.6e58967f.png");
--placeholder-bg-2: url("/assets/placeholder-bg-dark-2.9f7c66c5.png");
--placeholder-bg-3: url("/assets/placeholder-bg-dark-3.3fb3a36d.png");
--placeholder-bg-4: url("/assets/placeholder-bg-dark-4.1b679a5e.png");
--empty-feed-image: url("/assets/empty-state-feed-dark.14291346.png");
/* Radio group */
--radio-group-indicator-hover-color: var(--neutral-20);
/* Badge */
--badge-background-color: var(--green-30);
--badge-text-color: var(--green-90);
/* TTS / audio player */
--tts-trigger-button-color: var(--neutral-70);
--tts-trigger-border-color: var(--u-alpha-300);
--tts-player-background: var(--neutral-10);
--tts-player-box-shadow:
0px 3px 10px 0px rgba(0, 0, 0, 0.3),
0px 1.5px 4px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px 1px rgba(0, 0, 0, 0.15);
--tts-player-timeline-hover-range-background-color: var(--reading-progress-gradient);
/* Slider */
--slider-track-background: var(--neutral-30);
--slider-range-background: var(--neutral-50);
--slider-hover-range-background-color: var(--blue-50);
--slider-range-border-right-color: var(--neutral-10);
--slider-thumb-background: var(--white);
--slider-thumb-box-shadow:
0px 1px 4px 0px rgba(60, 64, 67, 0.4),
0px 0px 0px 1px rgba(0, 0, 0, 0.08);
/* These text variables will eventually be deprecated */
--text: var(--text-primary);
--text-grey-lighter: var(--neutral-80);
--text-grey: var(--text-secondary);
--text-grey-medium: var(--text-secondary);
--text-grey-lightish: var(--neutral-70);
--text-grey-lighter: var(--neutral-80);
--text-grey-dark: var(--text-primary);
--text-grey-darker: var(--text-primary);
}
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
.theme--dark {
--default-blurred-button-background: #2B323A;
--default-blurred-button: 0px;
}
}
.theme--dark {
--onboarding-background-image: url("/onboarding/onboarding-background-dark.webp");
--onboarding-container-box-shadow: 0px 9px 67px rgb(19 13 40 / 20%), 0px 3.75998px 27.991px rgb(19 13 40 / 12%), 0px 2.01027px 14.9653px rgb(19 13 40 / 4%), 0px 1.12694px 8.38944px rgb(9 6 18 / 19%), 0px 0.598509px 4.45557px rgb(7 7 7 / 40%), 0px 0.249053px 1.85406px rgb(6 4 12 / 18%);
--onboarding-background-panel-bg-1: url("/onboarding/Onboarding_01-dark.webp");
--onboarding-background-panel-bg-2: url("/onboarding/Onboarding_02-dark.webp");
--onboarding-background-panel-bg-3: url("/onboarding/Onboarding_03-dark.webp");
--onboarding-background-panel-bg-4: url("/onboarding/Onboarding_04-dark.webp");
--checkbox-icon-color: var(--neutral-00);
}
/* Component variables (NO COLORS) */
:host > *,
:root {
--animation-duration--imply-interactivity: 0;
--animation-duration--move: 0;
--animation-duration--reveal: 0;
--content-gutter: var(--s3);
--reading-editable-line-length: 648px;
--document-list-item-height: calc(var(--f1) * 11.3);
--document-list-item-height_js: 113px; /* JS can't parse the above easily */
--document-list-item-horizontal-padding: calc(var(--s1) * 1.7);
--document-list-image-height: 62px;
--document-list-image-width: 62px;
--document-list-padding-top: 8px;
--focus-indicator-width: 3px;
--inbox-header-height: 65px;
--inbox-header-height_js: 65px; /* JS can't parse the above easily */
--inbox-sidebar-width: 240px;
--person-card-image-size: 40px;
--sidebar-padding-vertical: 0.5rem;
--sidebar-nav-height: 64px;
--sidebar-padding-horizontal: 24px;
--sidebar-padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal);
--popover-max-width: 305px;
--popover-background: var(--background-elevated);
--popover-z-index: 100;
--popover-focused-z-index: 101;
--sidebars-max-width: 296px;
--progress-bar-large-height: 3px;
--table-of-contents-font-size: 0.875rem;
--table-of-contents-bar-margin-right: 16px;
--table-of-contents-bar-height: 4px;
--table-of-contents-max-bar-width: 32px;
--table-of-contents-width-diff: 8px;
--scrollbar-border-radius: 12px;
--scrollbar-thickness: 14px;
--status-dot-size: 6px;
--appearance-panel-width: 292px;
--feed-icon-in-palette: 16px;
--action-button-border-radius: 31px
}
@media (prefers-reduced-motion: no-preference) {
:host > *,
:root {
--animation-duration--imply-interactivity: 0.15s;
--animation-duration--move: 0.25s;
--animation-duration--reveal: 0.15s
}
}
:host > *,
:root {
--theme-transition-time: 0s;
--panels-transition-time: 0.2s;
--tts-player-height: 96px;
--js__tts-player-current-height: 0; /* Updated by JS */
--safe100vh: calc(100vh - var(--js__tts-player-current-height));
--safeBottom0: calc(0px + var(--js__tts-player-current-height))
}
:host > * .high-contrast, :root .high-contrast {
}
/* Reset html elements. */
.document-content div, .document-content span, .document-content applet, .document-content object, .document-content iframe, .document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6, .document-content p, .document-content blockquote, .document-content pre, .document-content a, .document-content abbr, .document-content acronym, .document-content address, .document-content big, .document-content cite, .document-content code, .document-content del, .document-content dfn, .document-content em, .document-content img, .document-content ins, .document-content kbd, .document-content q, .document-content s, .document-content samp, .document-content small, .document-content strike, .document-content strong, .document-content tt, .document-content var, .document-content b, .document-content u, .document-content i, .document-content center, .document-content dl, .document-content dt, .document-content dd, .document-content ol, .document-content ul, .document-content li, .document-content fieldset, .document-content form, .document-content label, .document-content legend, .document-content table, .document-content caption, .document-content tbody, .document-content tfoot, .document-content thead, .document-content tr, .document-content th, .document-content td, .document-content article, .document-content aside, .document-content canvas, .document-content details, .document-content embed, .document-content figure, .document-content figcaption, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content output, .document-content ruby, .document-content section, .document-content summary, .document-content time, .document-content mark, .document-content audio, .document-content video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.document-content {
/* HTML5 display-role reset for older browsers */
}
.document-content article, .document-content aside, .document-content details, .document-content figcaption, .document-content figure, .document-content footer, .document-content header, .document-content hgroup, .document-content menu, .document-content nav, .document-content section {
display: block;
}
.document-content ol, .document-content ul {
list-style: none;
}
.document-content blockquote, .document-content q {
quotes: none;
}
.document-content blockquote:before, .document-content blockquote:after, .document-content q:before, .document-content q:after {
content: '';
content: none;
}
.document-content table {
border-collapse: collapse;
border-spacing: 0;
}
.document-content span[data-rw-start] {
cursor: pointer;
transition: color 0.2s ease-in-out, background 0.2s ease-in-out
}
.document-content span[data-rw-start]:hover {
border-radius: 4px;
background: var(--u-alpha-400);
color: var(--transcript-teleprompt-color);
}
.document-content span[data-rw-start]:has(.rw-highlight:hover) {
background: none;
color: inherit;
}
@media (max-width: 768px) {
.document-content span[data-rw-start].touchstart {
border-radius: 4px;
background: var(--u-alpha-400) !important;
color: var(--transcript-teleprompt-color) !important;
}
.document-content span[data-rw-start]:hover {
background: none;
color: inherit;
}
}
/* End of Reset */
:root #document-header {
--reading-text-title: #0C1117;
}
.theme--dark #document-header {
--reading-text-title: #F0F1F2;
}
.theme--dark .document-content img, .theme--dark .document-content figure img {
opacity: .7;
transition: opacity 500ms;
}
:root .document-content { /* Light theme */
/* Reading colours */
--reading-text-title: var(--black);
--reading-text-primary: var(--text-primary);
--reading-text-secondary: var(--text-secondary);
--reading-text-primary-inverse: var(--text-inverse);
--reading-text-link: 13 30 142;
--reading-text-link-highlight: 0 0 0;
--reading-text-primary-link-highlight: var(--black);
--reading-text-code: var(--red-40);
/* Surface colors */
--reading-surface-primary-inverse: #1E272F;
--reading-surface-tertiary: rgba(92, 105, 119, 0.06);
--reading-surface-code: #333C46;
/* Border colors */
--reading-border-secondary: rgba(40, 49, 59, 0.12);
--text-selection-background-color: rgba(70, 147, 254, 0.18);
}
.theme--dark .document-content { /* Dark theme */
--reading-text-title: var(--white);
--reading-text-primary: var(--neutral-80);
--reading-text-secondary: var(--text-secondary);
--reading-text-primary-inverse: var(--text-primary);
--reading-text-link: 174 200 241;
--reading-text-link-highlight: 255 255 255;
--reading-text-primary-link-highlight: var(--neutral-100);
--reading-text-code: var(--orange-80);
/* Surface colors */
--reading-surface-primary-inverse: #10161D;
--reading-surface-tertiary: rgba(92, 105, 119, 0.15);
--reading-surface-code: #E2E8F0;
/* Border colors */
--reading-border-secondary: rgba(92, 105, 119, 0.3);
}
.theme--sepia .document-content {
--reading-text-title: #3C2D23;
--reading-text-primary: #3C2D23;
--reading-text-secondary: #7A6755;
}
:root {
--reading-editable-font-size: 20;
--reading-editable-line-height: 1.6; /* should land on 4px increments. 20, 24, 28, 32, 36 */
--reading-editable-font-family: "Source Serif VF", Georgia, Serif;
/* auto generate */
--reading-scale: 1.2;
--reading-root-size: 16; /* This is to replicate the browser base size for math purposes */
--reading-base-fs: calc(var(--reading-editable-font-size) / var(--reading-root-size)); /* fs is unitless and is only used for calculations*/
--reading-base-font-size: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
--reading-base-line-height: var(--reading-editable-line-height);
--reading-base-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
/* Caption = table divided by scale */
--reading-caption-fs: calc(var(--reading-table-fs) / var(--reading-scale) / var(--reading-scale));
--reading-caption-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
--reading-caption-line-height: var(--reading-editable-line-height);
--reading-caption-margin: calc(var(--reading-editable-line-height) / calc(var(--reading-root-size) * var(--reading-p-fs)) * 1em);
/* Table = base size divided by scale */
--reading-table-fs: calc(var(--reading-base-fs) / var(--reading-scale) );
--reading-table-font-size: clamp(12px, calc( (var(--reading-editable-font-size) * .8) * 1px ), 18px);
--reading-table-line-height: var(--reading-editable-line-height);
--reading-table-margin: calc(var(--reading-editable-font-size)*.75);
/* P = base size */
--reading-p-fs: calc(var(--reading-base-fs));
--reading-p-font-size: calc(var(--reading-base-fs) * 1rem);
--reading-p-line-height: var(--reading-editable-line-height);
--reading-p-margin: calc(var(--reading-editable-font-size) / var(--reading-root-size) * 1rem);
--reading-p-margin-v: calc( var(--reading-editable-font-size) / var(--reading-root-size) * calc(var(--reading-editable-line-height) - 0.5) *1rem );
/* H3 = base size x scale */
--reading-h3-fs: var(--reading-p-fs);
--reading-h3-font-size: calc(var(--reading-p-fs) * 1rem);
--reading-h3-line-height: var(--reading-editable-line-height);
--reading-h3-margin: calc(var(--reading-h3-line-height) * 1em);
/* H2 = H3 size x scale */
--reading-h2-fs: calc(var(--reading-h3-fs) * var(--reading-scale));
--reading-h2-font-size: calc(var(--reading-h3-fs) * var(--reading-scale) * 1rem);
--reading-h2-line-height: calc(var(--reading-h3-line-height) * .925);
/* H1 = H2 size x scale */
--reading-h1-fs: calc(var(--reading-h2-fs) * var(--reading-scale));
--reading-h1-font-size: calc(var(--reading-h2-fs) * var(--reading-scale) * 1rem);
--reading-h1-line-height: calc(var(--reading-h2-line-height) * .925);
--reading-h1-margin: calc(var(--reading-h1-line-height) * 1em);
/* Typefaces */
--reading-font-body: var(--reading-editable-font-family);
--reading-font-title: var(--reading-editable-font-family);
--reading-font-caption: "Inter VF", sans-serif;
--reading-font-monospace: "Roboto Mono VF","SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
#document-header {
margin-bottom: 0;
user-select: none;
-webkit-user-select: none;
font-family: var(--ui-font)
}
#document-header h1 {
margin: 0;
font-size: 40px;
line-height: 46px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--reading-text-title);
font-family: var(--reading-editable-font-family);
font-feature-settings: "onum" 1;
font-variation-settings: "opsz" 41; /* optical size needs to be set close to font-size but it can't be the exact same - Safari bug */
text-rendering: optimizeLegibility;
text-wrap: balance;
}
@media (max-width: 768px) {
#document-header {
margin-bottom: -6px
}
#document-header h1 {
font-size: 32px;
line-height: 36.8px;
letter-spacing: -0.015em;
}
}
#document-header .header-top-row {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: var(--spacer-5);
}
#document-header .header-source-container {
flex: 1;
}
#document-header .document-header-domain {
display: flex;
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
#document-header .document-header-domain span {
color: var(--text-secondary);
}
#document-header .document-header-domain .document-header-domain-favicon, #document-header .document-header-domain svg {
background-size: cover;
height: 16px;
width: 16px;
margin-right: 12px;
fill: var(--icon-secondary);
}
#document-header hr {
border: none;
border-top-width: 1px;
border-top-style: solid;
border-color: var(--border-secondary-alpha);
margin: 0;
margin-top: 20px
}
@media (max-width: 768px) {
#document-header hr {
margin-top: 16px
}
}
#document-header .document-header-metadata-row {
word-break: break-word;
overflow: hidden
}
#document-header .document-header-metadata-row span {
font-weight: 400;
font-size: 14px;
}
@media (max-width: 768px) {
#document-header .document-header-metadata-row span {
font-size: 13px;
}
}
#document-header .document-header-metadata-row .document-header-author-content {
white-space: nowrap;
margin-right: 8px;
color: var(--text-secondary);
/* The true value for line-height should be 20px, but because we want the tags to flow with the author text,
the tags and author are effectively in one long span that flows properly around the date span which is fixed to the right
57 = 17px true size of text + 20px * 2 for 20px margin above and below
if I am correct, the 20px line-height makes no effect anymore, effectively we are using line-height
when we should use margins, but sadly we cannot pull that off because you cannot create margins between
two lines of text in one span, thats the job of line height
*/
line-height: 57px
}
@media (max-width: 768px) {
#document-header .document-header-metadata-row .document-header-author-content {
/* 48 = 16px + 16 * 2 for margins */
line-height: 48px
}
}
#document-header .document-header-metadata-row .document-header-author-content .document-header-author-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#document-header .document-header-metadata-row .document-header-published-date {
float: right;
white-space: nowrap;
color: var(--text-secondary);
/* See above as to why this is 57px */
line-height: 57px
}
@media (max-width: 768px) {
#document-header .document-header-metadata-row .document-header-published-date {
/* 48 = 16px + 16 * 2 for margins */
line-height: 48px
}
}
#document-header .document-header-metadata-row .document-header-separator {
display: inline-flex;
background: var(--border-primary);
width: 4px;
height: 4px;
min-width: 4px;
min-height: 4px;
border-radius: 100%;
margin: 0 6px;
margin-bottom: 3px;
}
#document-header .document-header-tags {
display: inline-flex;
flex-wrap: wrap
}
#document-header .document-header-tags a {
margin-right: 4px;
margin-bottom: 4px;
}
@media (max-width: 768px) {
#document-header .document-header-tags {
width: 100%
}
}
.document-content {
box-sizing: border-box;
font-size: var(--reading-p-font-size);
color: var(--reading-text-primary);
font-family: var(--reading-font-body);
line-height: var(--reading-base-line-height);
font-weight: 400;
padding: 0 var(--content-gutter) 0; /* needs to be adjusted */
text-rendering: optimizeLegibility;
word-wrap: break-word;
font-variation-settings: "opsz" calc(var(--reading-editable-font-size) + 1); /* optical size needs to be set close to font-size but it
can't be the exact same - Safari bug */
font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1
}
@supports (font-kerning: normal) and (font-variant ligatures: common-ligatures contextual) {
.document-content {
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual
}
}
.document-content {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
/* full justification
text-align: justify; */
/* hyphenation */
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%
}
.document-content ::selection {
background-color: var(--text-selection-background-color) !important;
}
.document-content.document-text-content--auto-highlighting-enabled ::selection {
background-color: var(--highlight-background-color--normal) !important;
color: var(--highlight-text-color) !important;
}
.document-content.document-text-content--auto-highlighting-enabled pre ::selection {
background-color: var(--highlight-background-color--normal) !important;
color: var(--highlight-text-pre-color) !important;
}
.document-content p {
font-family: var(--reading-font-body);
font-size: var(--reading-p-font-size);
margin-bottom: var(--reading-p-margin);
margin-top: var(--reading-p-margin);
line-height: var(--reading-p-line-height);
color: var(--reading-text-primary)
}
.document-content p.rw-hide {
display: none;
}
.document-content h1 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h1-font-size);
margin-top: calc(var(--reading-base-margin) * 3);
margin-bottom: var(--reading-base-margin);
line-height: var(--reading-h1-line-height);
letter-spacing: -0.019em;
font-variation-settings: "opsz" calc(var(--reading-h1-fs) * 16 + 1 );
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top: 96px;
}
.document-content h2 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h2-font-size);
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: var(--reading-base-margin);
line-height: var(--reading-h2-line-height);
letter-spacing: -0.011em;
font-variation-settings: "opsz" calc(var(--reading-h2-fs) * 16 + 1);
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top:96px;
}
.document-content h3 {
font-family: var(--reading-font-title);
font-weight: 600;
font-size: var(--reading-h3-font-size);
margin-top: calc(var(--reading-base-margin) * 1.5);
margin-bottom: calc(var(--reading-base-margin) * .5);
line-height: var(--reading-h3-line-height);
letter-spacing: -0.011em;
font-variation-settings: "opsz" calc(var(--reading-h3-fs) * 16 + 1);
color: var(--reading-text-title);
text-wrap: balance;
-webkit-hyphens: none;
hyphens: none;
scroll-margin-top:96px;
}
.document-content h4,
.document-content h5,
.document-content h6 {
font-family: var(--reading-font-body);
font-weight: 600;
font-size: var(--reading-p-font-size);
margin-top: var(--reading-p-margin);
margin-bottom: calc(var(--reading-p-margin) * 0.5);
line-height: var(--reading-p-line-height);
color: var(--reading-text-title);
scroll-margin-top:96px;
}
.document-content h2 + * {
margin-top: 0;
}
.document-content h3 + * {
margin-top: 0;
}
.document-content h4 + * {
margin-top: 0;
}
.document-content h1 code,
.document-content h2 code,
.document-content h3 code,
.document-content h4 code,
.document-content h5 code,
.document-content h6 code {
font-size: .9em;
}
.document-content h4 code {
font-size: .9em;
font-weight: 600;
}
.document-content em, .document-content i {
font-style: italic;
}
.document-content strong, .document-content b {
font-weight: 600;
}
.document-content a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link) / 50%);
color: rgb(var(--reading-text-link));
}
.document-content a:has(+ .rw-highlight) {
text-decoration: none !important;
}
.document-content a .rw-highlight {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link-highlight) / 50%);
color: var(--reading-text-primary-link-highlight) !important;
}
.document-content a .rw-highlight:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(var(--reading-text-link-highlight) / 100%);
color: var(--reading-text-primary-link-highlight) !important;
}
.document-content hr {
border-color: var(--reading-border-secondary);
border-top-width: 1px;
border-top-style: solid;
margin-top: calc(var(--reading-base-margin) * 3);
margin-bottom: calc(var(--reading-base-margin) * 3);
border-bottom: none;
}
.document-content hr + * {
margin-top: 0;
}
.document-content > :last-child {
margin-bottom: 0;
}
.document-content sub, .document-content sup {
line-height: 0;
}
.document-content {
/* -- Lists --*/
}
.document-content ol {
font-family: var(--reading-font-body);
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
font-size: var(--reading-base-font-size);
list-style-type: decimal
}
.document-content ol li {
margin-top: .5rem;
margin-bottom: .5rem;
font-size: var(--reading-base-font-size);
}
.document-content ol > li {
margin-left: calc(var(--reading-base-margin) * 2);
padding-left: .5rem;
}
.document-content ol > li p {
margin-top: calc(var(--reading-base-margin) / 4);
margin-bottom: calc(var(--reading-base-margin) / 4);
}
.document-content > ol > li > *:first-child {
margin-top: calc(var(--reading-base-margin));
}
.document-content > ol > li > *:last-child {
margin-bottom: calc(var(--reading-base-margin));
}
.document-content ul {
font-family: var(--reading-font-body);
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
font-size: var(--reading-base-font-size);
list-style-type: disc
}
.document-content ul li {
margin-top: calc(var(--reading-base-margin) / 2);
margin-bottom: calc(var(--reading-base-margin) / 2);
font-size: var(--reading-base-font-size);
}
.document-content ul > li {
margin-left: calc(var(--reading-base-margin) * 2);
padding-left: .5rem;
}
.document-content ul > li p {
margin-top: calc(var(--reading-base-margin) / 4);
margin-bottom: calc(var(--reading-base-margin) / 4);
}
.document-content > ul > li > *:first-child {
margin-top: calc(var(--reading-base-margin) / 2);
}
.document-content > ul > li > *:last-child {
margin-bottom: calc(var(--reading-base-margin));
}
.document-content ul ul,
.document-content ul ol,
.document-content ol ul,
.document-content ol ol {
margin-top: .5em;
margin-bottom: .5em;
}
.document-content {
/* description list */
}
.document-content dt {
margin-top: var(--reading-p-margin);
}
.document-content {
/* Tables */
}
.document-content table {
font-family: var(--reading-font-caption);
width: 100%;
table-layout: auto;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: var(--reading-table-font-size);
line-height: var(--reading-table-line-height);
font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 0; /* changes back to lining figures */
}
.document-content table caption {
margin-top: var(--reading-base-margin);
margin-bottom: calc(var(--reading-base-margin) * 1em);
}
.document-content thead {
color: var(--reading-text-primary);
font-weight: 600;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--reading-border-secondary);
}
.document-content thead th {
vertical-align: bottom;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}
.document-content tbody tr {
border-bottom-width: 1px;
border-style: solid;
border-bottom-color: var(--reading-border-secondary);
}
.document-content tbody tr:last-child {
border-bottom-width: 0;
}
.document-content tbody td {
vertical-align: top;
padding-top: 0.75em;
padding-right: 0.5em;
padding-bottom: 0.75em;
padding-left: 0.5em;
}
.document-content tfoot {
color: var(--reading-text-primary);
font-weight: 600;
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--reading-border-secondary);
}
.document-content tfoot th {
vertical-align: top;
padding-right: 0.5em;
padding-top: 0.5em;
padding-left: 0.5em;
}
.document-content thead th:first-child {
padding-left: 0;
}
.document-content tfoot th:first-child {
padding-left: 0;
}
.document-content tbody td:first-child {
padding-left: 0;
}
.document-content tbody td:last-child {
padding-right: 0;
}
.document-content {
/* Fix for newsletters that use tables for layout */
}
.document-content table table,
.document-content table table tr,
.document-content table table td,
.document-content table table figure {
margin: 0;
padding: 0;
}
.document-content table table,
.document-content table table tr,
.document-content table table td {
border: none;
}
.document-content table table {
font-family: var(--reading-font-body);
font-size: var(--reading-p-font-size);
}
.document-content {
/* Figure and Img */
}
.document-content img:not(p img, li img, img.allow-image-styles) {
margin: auto;
margin-top: 1.875rem;
margin-bottom: 1.875rem;
border-radius: .25rem;
display: block; /* Allows them to be highlighted independently. This is undone for nested images */
max-width: 100% !important;
}
.document-content video {
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100% !important;
}
.document-content figure {
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: calc(var(--reading-base-margin) * 2);
font-size: var(--reading-caption-font-size);
font-family: var(--reading-font-caption);
line-height: 1.33336;
color: var(--reading-text-secondary);
display: block;
}
.document-content svg:empty {
display: none;
}
.document-content figure figcaption {
color: var(--reading-text-secondary);
font-family: var(--reading-font-caption);
font-size: var(--reading-caption-font-size);
line-height: 1.5;
margin-top: calc(var(--reading-base-margin) / 2);
}
.document-content figure:not(li figure) img + figcaption {
margin-top: -16px;
}
.document-content figure > * {
margin-top: 0;
margin-bottom: 0;
}
.document-content {
/* Code blocks */
}
.document-content code {
color: var(--reading-text-code);
font-size: .8em;
font-family: var(--reading-font-monospace);
word-wrap: break-word;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-color: var(--reading-surface-tertiary);
border-radius: .25rem;
line-height: 1.1em;
border: 1px solid var(--reading-border-secondary);
padding: 0 .2rem;
}
.document-content a code {
color: var(--reading-text-link);
}
.document-content pre, .document-content pre p {
color: var(--reading-text-primary-inverse);
background-color: var(--reading-surface-primary-inverse);
font-family: var(--reading-font-monospace);
overflow-x: auto;
font-size: calc(var(--reading-editable-font-size) * .8px);
line-height: var(--reading-base-line-height);
margin-top: calc(var(--reading-base-margin) * 2);
margin-bottom: calc(var(--reading-base-margin) * 2);
border-radius: .25rem;
padding-top: var(--reading-base-margin);
padding-right: var(--reading-base-margin);
padding-bottom: var(--reading-base-margin);
padding-left: var(--reading-base-margin);
white-space: pre-wrap;
}
.document-content pre code, .document-content pre code p, .document-content pre p {
background-color: transparent;
font-family: var(--reading-font-monospace);
border-width: 0;
border-radius: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
font-weight: 400;
font-size: calc(var(--reading-editable-font-size) * .8px);
color: inherit;
line-height: inherit;
min-width: 100px;
margin: 0
}
.document-content pre code a, .document-content pre code p a, .document-content pre p a {
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.2);
color: var(--blue-70);
}
.document-content pre code a:hover, .document-content pre code p a:hover, .document-content pre p a:hover {
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.5);
color: var(--blue-80);
}
.document-content pre code p, .document-content pre code p p, .document-content pre p p {
display: inline;
/*
We sometimes end up with s instead of our code tags.
Prevent them from breaking everything.
*/
}
.document-content {
/* Blockquotes */
}
.document-content blockquote {
font-style: italic;
font-size: var(--reading-p-font-size);
color: var(--reading-text-blockquote);
margin: 0;
margin-top: var(--reading-base-margin);
margin-bottom: var(--reading-base-margin);
hanging-punctuation: first;
padding: 0 var(--reading-base-margin);
}
.document-content {
/* Make sure nested images are not block */
}
.document-content blockquote img, .document-content figure img, .document-content ol img, .document-content p img, .document-content table img, .document-content ul img {
display: initial;
max-width: 100%!important;
}
.document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
margin-top: 200px;
padding-top: 0;
display: block;
break-before: column
}
.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
text-decoration: none;
}
.document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
content: "***";
position: relative;
width: 100%;
display: block;
top: -100px;
text-align: center;
font-size: 48px;
letter-spacing: 1em;
font-weight: 200;
color: var(--text-tertiary);
}
.document-content {
/* highlights */
/* This code is repeated in extension/source/injection/index.css */
}
.document-content .rw-image-highlight {
border-radius: 2px;
outline: 12px solid var(--highlight-image-background-color--normal);
}
.document-content .rw-image-highlight.rw-image-highlight--active {
outline-color: var(--highlight-image-background-color--active);
}
.document-content pre .rw-highlight {
color: var(--highlight-text-pre-color) !important;
}
/* end of ID wrapper */
/* PDF Specific Class code */
#readwise-reader-root .pageContainer {
box-shadow: var(--shadow-100);
position: relative
}
#readwise-reader-root .pageContainer canvas {
}
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight {
position: absolute;
opacity: 0.2;
transition: opacity 0.3s ease !important;
background: none !important;
z-index: 100
}
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight .rw-highlight-icon-wrapper {
position: absolute;
right: -22px;
top: -10px;
}
#readwise-reader-root .pageContainer .annot-wrapper.rw-highlight:hover {
opacity: 1;
}
.document-content .twitter-thread-delimiter {
width: 40px;
border-top: 2px solid var(--border-secondary);
margin: 20px 0px;
}
.rw-thread-heading {
display: none;
}
.document-content .rw-outer-content {
border: dashed 2px var(--border-secondary-alpha);
border-radius: 8px;
padding: 16px;
font-size: var(--font-size-base);
color: var(--reading-text-secondary)
}
.document-content .rw-outer-content a {
text-decoration: none;
color: var(--reading-text-primary);
margin-left: 16px;
}
.document-content .rw-digest-thread-wrapper {
margin: 36px auto 32px;
font-style: initial;
max-width: 550px
}
.document-content .rw-digest-thread-wrapper > h6 {
font-size: 16px;
font-weight: 600;
font-family: var(--ui-font) !important;
}
.document-content .rw-digest-thread-wrapper > span:last-of-type {
color: var(--text-tertiary);
font-weight: 400;
font-size: 12px;
font-family: var(--ui-font) !important;
display: block;
margin-top: -8px;
}
.document-content .rw-embedded-tweet {
border: 1px solid var(--border-secondary);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
font-family: var(--ui-font) !important;
max-width: 550px;
margin: var(--reading-base-margin) auto;
font-style: initial
}
.document-content .rw-embedded-tweet > span {
font-family: var(--ui-font) !important;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
line-height: 16px
}
.document-content .rw-embedded-tweet > span > a {
display: flex;
color: var(--text-secondary);
gap: 4px;
line-height: 16px;
text-decoration: none;
margin-bottom: 8px;
width: -moz-fit-content;
width: fit-content;
}
.document-content .rw-embedded-tweet header {
display: flex;
gap: 8px
}
.document-content .rw-embedded-tweet header img {
aspect-ratio: 1 / 1;
min-height: 48px;
max-height: 48px!important;
width: 48px;
height: auto;
margin: unset;
border-radius: 9999px;
}
.document-content .rw-embedded-tweet header a {
text-decoration: none;
font-family: var(--ui-font) !important;
}
.document-content .rw-embedded-tweet header div {
font-family: var(--ui-font) !important;
}
.document-content .rw-embedded-tweet header div:nth-child(2) {
font-size: 14px;
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap
}
.document-content .rw-embedded-tweet header div:nth-child(2) span:first-child {
font-weight: 600;
line-height: 18px;
padding-top: 6px
}
.document-content .rw-embedded-tweet header div:nth-child(2) span:first-child a {
color: var(--reading-text-primary);
}
.document-content .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) {
line-height: 18px;
color: var(--text-secondary)
}
.document-content .rw-embedded-tweet header div:nth-child(2) span:nth-child(2) a {
color: var(--text-secondary)
}
.document-content .rw-embedded-tweet header svg * {
fill: var(--icon-tertiary);
}
.document-content .rw-embedded-tweet main > :first-child {
margin-top: 18px;
}
.document-content .rw-embedded-tweet main > span:first-of-type {
color: var(--text-secondary);
font-weight: 400;
font-size: 12px;
font-family: var(--ui-font) !important;
display: block;
margin-top: 8px;
margin-bottom: -6px
}
.document-content .rw-embedded-tweet main > span:first-of-type a {
color: var(--text-interactive);
text-decoration: none;
}
.document-content .rw-embedded-tweet main p {
line-height: var(--reading-editable-line-height);
font-family: var(--ui-font) !important;
margin-top: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
margin-bottom: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
font-size: clamp(14px, calc( (var(--reading-editable-font-size) * .9) * 1px ), 80px);
letter-spacing: -.01em;
}
.document-content .rw-embedded-tweet main video {
border-radius: 4px;
}
.document-content .rw-embedded-tweet footer {
color: var(--text-secondary);
font-weight: 400;
font-size: 12px;
line-height: 20px;
margin-top: -4px
}
.document-content .rw-embedded-tweet footer a {
font-family: var(--ui-font) !important;
text-decoration: none;
color: var(--text-secondary);
}
.document-content .rw-ai {
background-color: #CBC3E3;
padding: 1rem;
border-radius: 1rem;
border: 1px solid #A39EBA;
}
.document-content .rw-ai-highlighted {
font-weight: bold;
}
.document-content .rw-ai-explainer {
background-color: #CBC3E3;
}
.theme--dark .document-content .rw-ai,
.theme--dark .document-content .rw-ai-explainer {
color: var(--text-inverse);
}
.document-content.is-youtube-video {
padding-top: 120px;
}
/* https://linear.app/readwise/issue/RW-26751/bug-youtube-transcripts-sometimes-send-missing-spaces-to-readwise-10
The YouTube parser originally didn't add spaces to the end of each transcript, so we were using margin-right.
After fixing the parser, we removed the margin-right but we still need to add it for old videos. */
.document-content span[data-rw-start] {
margin-right: .25rem;
}
.document-content span[data-rw-transcript-version] {
margin-right: 0;
}
.document-content .rw-email-parsed {
display: none;
}
/* Pagination */
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc] {
margin-top: 0;
padding-top: 0;
display: block;
break-before: column
}
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:not([href]) {
text-decoration: none;
}
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:first-child {
break-before: auto;
}
.pagination-body .document-content:not(.epub-original-styles) *[data-rw-epub-toc]:before {
display: none;
}
.document-content--original-email {
background: white !important;
color: initial
}
.document-content--original-email img {
background: initial;
}
.document-content--original-email rw-highlight {
color: initial !important;
}
._paletteWrapper_1siuw_2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 9999;
background-color: var(--background-backdrop);
}
._palette_1siuw_2 {
border-radius: .5rem;
background: var(--cmd-palette-background);
transition: background-color var(--theme-transition-time) ease-in-out;
box-shadow: var(--cmd-palette-drop-shadow);
max-height: 100%;
overflow: hidden;
position: relative;
width: 680px;
top: calc(34% - 200px);
scrollbar-color: var(--cmd-palette-scrollbar) transparent
}
._palette_1siuw_2 ::-webkit-scrollbar-thumb {
border-radius: .625rem;
background-color: var(--cmd-palette-scrollbar);
}
._paletteActionRow_1siuw_33 {
color: var(--text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
border-radius: 0 .25rem .25rem 0;
border-left: .125rem solid var(--cmd-palette-cmd-container);
align-items: center;
font-size: .875rem;
line-height: 1.25rem;
padding-left: .75rem
}
._paletteActionRow_1siuw_33 span {
padding: .75rem 1rem;
padding-left: 0;
max-width: 80%;
}
._paletteActionRow_1siuw_33._focused_1siuw_52 {
background-color: var(--cmd-palette-row-hover);
border-left: .125rem solid var(--icon-interactive);
padding-left: .625rem
}
._paletteActionRow_1siuw_33._focused_1siuw_52 span:first-child {
padding-left: .125rem;
}
._paletteActionRow_1siuw_33._notClickable_1siuw_62 {
cursor: default;
}
._paletteActionRow_1siuw_33 ._actionKey_1siuw_66 {
background-color: var(--cmd-palette-key-background);
display: flex;
font-size: var(--font-size-sm);
align-items: center;
border-radius: .25rem;
min-width: 1.25rem;
padding: .125rem 0.3125rem;
margin-right: 0.5rem;
justify-content: center;
}
._paletteActionRow_1siuw_33 ._actionIcon_1siuw_78 {
display: flex;
font-size: var(--font-size-sm);
align-items: center;
min-width: 1.25rem;
padding: .125rem 0.3125rem;
margin-right: 0.5rem;
justify-content: center;
}
._commandsContainer_1siuw_89 {
overflow-y: auto;
max-height: 300px;
position: relative;
background: var(--cmd-palette-cmd-container);
padding: 1rem;
padding-left: .75rem;
padding-right: .75rem;
border-radius: 0 0 .5rem .5rem
}
._commandsContainer_1siuw_89._withTitle_1siuw_99 {
padding-top: 0;
}
._inputContainer_1siuw_104 {
padding: 0.8125rem 1.5rem;
background: var(--background-elevated);
display: flex;
justify-content: center;
align-items: center
}
._inputContainer_1siuw_104 ._paletteInput_1siuw_111 {
font-size: 1rem;
color: var(--text);
background: transparent;
border: 0;
width: 100%;
height: 1.875rem;
font-family: inherit
}
._inputContainer_1siuw_104 ._paletteInput_1siuw_111:focus {
outline: none;
}
._inputContainer_1siuw_104 ._paletteInput_1siuw_111::placeholder {
color: var(--text-placeholder);
}
._inputContainer_1siuw_104 ._paletteInputTextArea_1siuw_128 {
font-size: var(--f6);
min-height: 200px;
}
._inputContainer_1siuw_104 ._paletteInputTextAreaWithRecordButton_1siuw_133 {
margin-top: 30px;
}
._inputContainer_1siuw_104 ._clearWrapper_1siuw_137 {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-right: .75rem
}
._inputContainer_1siuw_104 ._clearWrapper_1siuw_137 ._clearInput_1siuw_144 {
cursor: pointer;
font-size: .875rem;
color: var(--text-secondary);
position: relative;
bottom: 1px;
padding-right: .75rem;
border-right: 1px solid var(--border-primary);
}
._inputContainer_1siuw_104 ._closeIcon_1siuw_155 {
cursor: pointer;
width: 1.5rem;
min-width: 1.5rem;
height: 1.5rem;
min-height: 1.5rem;
color: var(--icon-secondary);
}
._title_1siuw_165 {
color: var(--text);
font-size: var(--f5);
padding-left: var(--s3);
font-weight: var(--font-weight-lighter);
padding-bottom: var(--s1);
border-bottom: 1px solid var(--grey-dark);
}
._customComponentContainer_1siuw_174 {
padding: var(--s1) 1.5rem;
margin-bottom: var(--s1);
margin-top: var(--s1)
}
._customComponentContainer_1siuw_174 .tagItem { /* adds spacing between tags */
margin-right: .25rem;
}
._shortcutsPalette_1siuw_183 {
width: 400px;
max-height: 80%;
overflow-y: scroll;
top: 8%
}
._shortcutsPalette_1siuw_183 ._commandsContainer_1siuw_89 {
max-height: 100%;
}
._contextContainer_1siuw_194 {
display: flex;
align-items: center;
padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
._contextItem_1siuw_202 {
padding: .25rem .75rem;
color: var(--text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
background: var(--cmd-palette-context-item-background);
border: 1px solid var(--cmd-palette-context-item-border);
border-radius: 4.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
margin-right: .5rem;
}
._sectionTitle_1siuw_217 {
font-size: .875rem;
font-weight: 500;
color: var(--text-primary);
margin: 0;
padding: 8px 1.525rem;
background: var(--cmd-palette-section-title);
z-index: 1;
position: inherit;
box-shadow: var(--shadow-100);
}
._paletteLabel_1siuw_229 {
color: var(--text-secondary);
margin-bottom: .5rem;
margin-top: .75rem;
font-weight: 400;
font-size: 0.75rem;
padding-left: .75rem;
}
._truncatePaletteItem_1siuw_238 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
._recordButton_1siuw_244 {
position: absolute;
top: 8px;
right: 8px;
}
._checkbox_d6f52_1 {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid var(--border-primary);
background: transparent;
transition: background 80ms ease-in, border 80ms ease-in;
cursor: pointer
}
._checkbox_d6f52_1:focus {
outline: none;
}
._checkboxChecked_d6f52_18 {
border: 1px solid var(--background-interactive);
background: var(--background-interactive)
}
._checkboxChecked_d6f52_18 span {
display: flex;
justify-content: center;
align-items: center;
}
._checkboxChecked_d6f52_18 svg {
width: 16px;
height: 16px;
position: relative
}
._checkboxChecked_d6f52_18 svg._isMinusIcon_d6f52_33 {
width: 10px;
height: 2px;
display: flex;
justify-content: center;
align-items: center;
top: 0;
}
._checkboxChecked_d6f52_18 svg * {
fill: var(--checkbox-icon-color);
}
._checkboxContainer_d6f52_48 {
display: block;
position: relative;
cursor: pointer;
width: 100%;
height: 100%;
-webkit-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
._checkboxContainer_d6f52_48 input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
._checkmark_d6f52_70 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid var(--border-primary);
background: transparent;
}
/* Create the checkmark/indicator (hidden when not checked) */
._checkmark_d6f52_70 svg {
display: none;
}
/* When the checkbox is checked, add a blue background */
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 {
border: 1px solid var(--background-interactive);
background: var(--background-interactive)
}
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg {
display: flex;
position: relative;
left: -1px;
top: -1px
}
._checkboxContainer_d6f52_48 input:checked ~ ._checkmark_d6f52_70 svg * {
fill: var(--checkbox-icon-color);
}
.button._actionButton_jtidl_1 {
background: none;
outline: none;
border: none;
cursor: pointer;
width: 32px;
height: 32px;
transition: background 150ms ease-in, box-shadow 150ms ease;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: content-box;
padding: 0
}
.button._actionButton_jtidl_1 svg {
height: 20px;
min-height: 20px;
width: 20px;
min-width: 20px;
color: var(--icon-secondary);
fill: var(--icon-secondary);
}
.button._actionButton_jtidl_1._isActive_jtidl_25:not(._isDisabled_jtidl_25) svg,
.button._actionButton_jtidl_1._isActive_jtidl_25:not(._isDisabled_jtidl_25) svg * {
color: var(--icon-primary);
fill: var(--icon-primary);
}
.button._actionButton_jtidl_1._isDisabled_jtidl_25 {
cursor: default
}
.button._actionButton_jtidl_1._isDisabled_jtidl_25 svg,
.button._actionButton_jtidl_1._isDisabled_jtidl_25 svg * {
color: var(--icon-disabled);
fill: var(--icon-disabled);
}
.button._actionButton_jtidl_1:hover:not(._isDisabled_jtidl_25) {
background: var(--u-alpha-200)
}
.button._actionButton_jtidl_1:hover:not(._isDisabled_jtidl_25) svg,
.button._actionButton_jtidl_1:hover:not(._isDisabled_jtidl_25) svg * {
color: var(--icon-primary);
fill: var(--icon-primary);
}
._documentLocationActionButton_jtidl_52 {
border-radius: 0
}
._documentLocationActionButton_jtidl_52:first-child {
border-radius: var(--action-button-border-radius) 0 0 var(--action-button-border-radius);
padding-left: var(--spacer-2);
}
._documentLocationActionButton_jtidl_52:last-child {
border-radius: 0 var(--action-button-border-radius) var(--action-button-border-radius) 0;
padding-right: var(--spacer-2);
}
._pdfActionButtonsContainer_jtidl_66 {
display: flex;
position: fixed;
top: 0.875rem;
padding: 0.3em 0;
left: 0;
right: 0;
margin: auto;
width: max-content;
flex-direction: column;
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
z-index: 100
}
._pdfActionButtonsContainer_jtidl_66:hover {
opacity: 1;
}
._pdfActionButtons_jtidl_66 {
background: var(--default-blurred-button-background);
-webkit-backdrop-filter: blur(var(--default-blurred-button));
backdrop-filter: blur(var(--default-blurred-button));
border-radius: 31px;
justify-content: center;
display: flex;
align-items: center
}
._pdfActionButtons_jtidl_66 svg {
fill: var(--icon-secondary);
}
._pdfActionButtons_jtidl_66 ._actionButton_jtidl_1 {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
}
.tippy-content:has(._shortcut_1yawj_1) {
padding-right: 5px;
}
.tippy-content:has(._onlyShortcut_1yawj_5) {
padding: 0;
._shortcut_1yawj_1 {
margin-left: 0;
border-radius: 4px;
background: var(--background-inverse);
}
}
._tooltip_1yawj_15 {
display: flex;
flex-direction: row;
align-items: center;
font-family: var(--ui-font);
white-space: nowrap
}
._tooltip_1yawj_15 svg{
opacity: .5;
scale: .8333;
margin: 0 -2px;
}
._shortcut_1yawj_1 {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
background: var(--tooltip-shortcut-background);
color: var(--tooltip-shortcut-color);
border-radius: 2px;
padding: 2px 5px;
margin-left: 8px
}
._shortcut_1yawj_1 svg {
margin-right: 6px;
}
._triggerButton_67pzu_1 {
background-color: var(--background-elevated);
padding: 0;
border: 0;
border-radius: 100%;
box-shadow: var(--shadow-100);
outline: none
}
._triggerButton_67pzu_1 svg * {
fill: var(--icon-secondary);
}
._scrollableOptions_67pzu_14 {
max-height: 300px;
overflow-y: auto;
/* avoid separator margin */
margin-top: -4px;
margin-bottom: -4px
}
._scrollableOptions_67pzu_14 ._item_67pzu_21:first-child {
border-radius: 0;
}
._scrollableOptions_67pzu_14 ._item_67pzu_21:last-child {
border-radius: 0;
}
._isActive_67pzu_30 {
background: var(--u-alpha-200)
}
._isActive_67pzu_30 svg * {
fill: var(--icon-primary);
}
._content_67pzu_38 {
border-radius: 8px;
background-color: var(--background-elevated);
box-shadow: var(--shadow-200);
width: 278px;
padding: 4px 0;
z-index: 3;
}
._enablePointerEvents_67pzu_47 {
pointer-events: auto !important;
}
._item_67pzu_21 {
height: 32px;
display: flex;
align-items: center;
padding: 0 16px;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
transition: background 80ms ease-in;
cursor: pointer
}
._item_67pzu_21 label {
cursor: pointer;
}
._item_67pzu_21._isDisabled_67pzu_66 {
cursor: default;
pointer-events: none
}
._item_67pzu_21._isDisabled_67pzu_66 ._shortcut_67pzu_70 {
color: var(--text-disabled);
}
._item_67pzu_21._isCreate_67pzu_75 {
color: var(--text-interactive);
font-weight: 500
}
._item_67pzu_21._isCreate_67pzu_75 svg {
margin-right: 8px;
fill: var(--icon-interactive);
}
._item_67pzu_21 ._isDanger_67pzu_85 {
color: var(--text-error);
}
._item_67pzu_21 ._isDisabled_67pzu_66 {
color: var(--text-disabled)
}
._item_67pzu_21 ._isDisabled_67pzu_66 svg * {
fill: var(--text-disabled);
}
._item_67pzu_21 ._ghostreaderPrompt_67pzu_97 {
margin-left: auto;
padding-left: 20px;
color: var(--text-tertiary);
font-size: var(--font-size-sm);
}
._item_67pzu_21 ._optionContent_67pzu_104 {
flex: 1;
display: flex;
align-items: center;
flex-direction: row
}
._item_67pzu_21 ._optionContent_67pzu_104 small {
display: inline-block;
padding: var(--spacer-1) 0;
}
._item_67pzu_21 ._optionContent_67pzu_104 svg {
margin-right: 8px
}
._item_67pzu_21 ._optionContent_67pzu_104 svg * {
color: var(--icon-secondary) !important;
}
._item_67pzu_21:hover,
._item_67pzu_21:focus-visible {
background: var(--u-alpha-100);
}
._item_67pzu_21:first-child {
border-radius: 8px 8px 0 0;
}
._item_67pzu_21:last-child {
border-radius: 0 0 8px 8px;
}
._item_67pzu_21 ._checkbox_67pzu_137 {
margin-right: 10px;
}
._checkIcon_67pzu_142 {
margin-right: 4px;
margin-left: -20px
}
._checkIcon_67pzu_142 * {
fill: var(--icon-primary);
}
._title_67pzu_151 {
color: var(--text-secondary);
font-weight: 500;
font-size: 12px;
height: 32px;
display: flex;
align-items: center;
padding: 0 16px;
}
._separator_67pzu_161 {
height: 1px;
margin: 4px 0;
background-color: var(--u-alpha-400);
}
._contentWithChecks_67pzu_167 ._item_67pzu_21,
._contentWithChecks_67pzu_167 ._title_67pzu_151 {
padding: 0 26px;
}
._editTagsPopover_67pzu_172 {
/* To match the dropdown width: */
max-width: 278px !important;
width: 278px !important;
}
._triggerElement_67pzu_178 {
background: var(--btn-secondary) !important
}
._triggerElement_67pzu_178 svg * {
fill: var(--icon-secondary) !important;
}
._dropdownContent_67pzu_186 {
width: 410px;
}
._itemDescription_67pzu_190 {
height: 48px !important;
font-size: 14px !important
}
._itemDescription_67pzu_190 ._optionContent_67pzu_104 {
flex-direction: column;
align-items: start;
}
._itemDescription_67pzu_190._isDisabled_67pzu_66 ._optionContent_67pzu_104 {
color: var(--text-disabled)
}
._itemDescription_67pzu_190._isDisabled_67pzu_66 ._optionContent_67pzu_104 small {
color: var(--text-disabled);
}
._itemDescription_67pzu_190 ._checkIcon_67pzu_142 {
margin-top: -17px;
}
._itemDescription_67pzu_190 ._optionContent_67pzu_104 {
color: var(--text-primary)
}
._itemDescription_67pzu_190 ._optionContent_67pzu_104 small {
color: var(--text-secondary);
}
._button_1076y_1,
._button_1076y_1 button,
._button_1076y_1 .contentWrapper {
height: 24px;
width: 24px;
}
._content_1076y_4 {
max-width: 230px;
}
._deleteOption_1076y_14 {
color: var(--text-error);
}
._savedAtOption_1076y_18 {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 16px;
cursor: default
}
._savedAtOption_1076y_18:hover,
._savedAtOption_1076y_18[data-highlighted] {
background: none;
}
/* Needs some extra specifivity */
._root_quz1d_2[class] {
color: var(--icon-secondary);
border-radius: 28px;
}
._actions_quz1d_7 {
display: flex;
}
._action_quz1d_7 {
margin: 2px;
}
._actionButton_quz1d_15 {
display: flex;
align-content: center;
padding: 6px;
border-radius: 28px;
color: inherit;
outline: none
}
._actionButton_quz1d_15:focus:not(:active) {
outline: none;
/* The outline was square in Safari */
box-shadow: 0 0 0 1px var(--border-focus);
}
._actionButton_quz1d_15 {
/* Duplicated because this selector breaks in Safari so it doesn't run */
}
._actionButton_quz1d_15:focus-visible:not(:active) {
outline: none;
/* The outline was square in Safari */
box-shadow: 0 0 0 1px var(--border-focus);
}
._actionButton_quz1d_15:hover {
background: var(--main-highlighter-popover-action-hover-background);
}
._actionIcon_quz1d_41 {
height: 20px
}
._actionIcon_quz1d_41 path {
fill: currentColor;
}
._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15 {
color: var(--main-highlighter-popover-delete-highlight-icon-color);
background: var(--main-highlighter-popover-delete-highlight-action-background)
}
._deleteHighlightAction_quz1d_49 ._actionButton_quz1d_15:hover {
opacity: 0.9;
}
._actionsHasNote_quz1d_60 ._noteAction_quz1d_60,
._actionsHasTag_quz1d_61 ._tagAction_quz1d_61 {
position: relative
}
._actionsHasNote_quz1d_60 ._noteAction_quz1d_60::after, ._actionsHasTag_quz1d_61 ._tagAction_quz1d_61::after {
position: absolute;
bottom: 1px;
left: 50%;
transform: translate(-50%, 0);
content: '∙';
font-size: 30px;
line-height: 0;
pointer-events: none;
}
._subPopover_quz1d_76 {
border-radius: 8px;
font-family: var(--ui-font);
padding: 4px 0;
}
._subPopoverListItem_quz1d_83:not(._subPopoverListItemDisabled_quz1d_83):hover {
background: var(--highlighter-sub-popover-list-item-focused-background);
}
._subPopoverListItem_quz1d_83 + ._subPopoverAutoHighlightListItem_quz1d_87 {
border-top: 1px solid var(--border-secondary-alpha);
margin-top: 4px;
}
._subPopoverButton_quz1d_92 {
gap: 8px;
padding: 6px 16px;
color: var(--text);
display: flex;
align-items: baseline;
white-space: nowrap;
border-left: 1px solid transparent
}
._subPopoverButton_quz1d_92:focus-visible {
outline: none;
border-color: var(--focus-indicator-color);
}
._subPopoverButtonPreContent_quz1d_107 {
display: none;
}
._rootAutoHighlightingEnabled_quz1d_111:not(._rootAutoHighlightingAlwaysEnabled_quz1d_111) ._subPopoverButtonPreContent_quz1d_107 {
display: block;
width: 14px;
}
._subPopoverAutoHighlightListItemEnabled_quz1d_116 ._subPopoverButtonPreContent_quz1d_107 {
color: red;
}
._subPopoverButtonPrimaryContent_quz1d_120 {
flex: 1;
text-align: left;
font-size: 14px;
font-weight: var(--font-weight-normal);
line-height: 20px;
display: flex;
flex-direction: column;
width: 168px;
}
._subPopoverButtonPrimaryContentDescription_quz1d_131 {
margin-top: 6px;
font-size: 12px;
color: var(--text-secondary);
white-space: initial;
}
._subPopoverKeyboardShortcut_quz1d_138 {
color: var(--text-tertiary);
text-align: right;
font-size: var(--font-size-sm);
display: inline-block;
width: 48px;
}
._subPopoverListItemDisabled_quz1d_83 ._subPopoverKeyboardShortcut_quz1d_138 {
color: var(--text-disabled);
}
._shortcut_quz1d_150 {
color: var(--text);
background: var(--u-alpha-200);
padding: 0 3px;
}
._checkmarkIcon_quz1d_156 {
color: var(--icon-interactive);
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}._root_6jnjf_1 {
box-shadow: var(--shadow-200);
background: var(--popover-background);
color: var(--text-primary);
border-radius: 8px;
max-width: var(--popover-max-width);
overflow: hidden;
z-index: var(--popover-z-index)
}
._root_6jnjf_1:is(.is-youtube-video ~ *) {
z-index: 0 !important;
}
._root_6jnjf_1:focus-within {
z-index: var(--popover-focused-z-index);
}
._rootWithOverflowAllowed_6jnjf_19 {
overflow: visible;
}
._rootHidden_6jnjf_23 {
display: none;
}
._root_w4rn6_1 {
border-radius: 8px;
overflow: hidden;
transition: 0.1s box-shadow;
}
._fieldWrapper_w4rn6_8,
._field_w4rn6_8 {
background: none;
min-height: 60px;
max-width: 248px;
}
._buttonsContainer_w4rn6_15 {
padding: 8px;
display: flex;
justify-content: flex-end;
overflow: hidden;
border-top: 1px solid var(--border-tertiary);
max-height: 48px;
transition: 0.1s max-height, 0.1s padding-bottom, 0.1s padding-top
}
._buttonsContainer_w4rn6_15 button:first-of-type {
background: none;
}
._buttonsContainer_w4rn6_15 button:focus-visible {
outline-offset: -1px;
}
._buttonsContainer_w4rn6_15 button + button {
margin-left: 4px;
}
._root_w4rn6_1._rootShownInMargin_w4rn6_39 {
border: none;
box-shadow: none;
width: auto
}
._root_w4rn6_1._rootShownInMargin_w4rn6_39:not(._rootInReadOnlyMode_w4rn6_44) {
background: var(--popover-background);
box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
}
._rootShownInMargin_w4rn6_39:not(._rootInReadOnlyMode_w4rn6_44)._rootWhenFollowingFormIsActive_w4rn6_52 {
margin-bottom: 4px;
opacity: 0.5;
}
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 {
border: none;
box-shadow: none
}
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._buttonsContainer_w4rn6_15 {
padding: 0;
max-height: 0;
opacity: 0;
}
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8,
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
min-height: 0;
width: auto;
}
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._fieldWrapper_w4rn6_8::after,
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
padding-bottom: 0;
}
._rootShownInMargin_w4rn6_39._rootInReadOnlyMode_w4rn6_44 ._field_w4rn6_8 {
color: var(--text-primary);
}
._wrapper_vhvsl_1 {
/*
`.grow-wrap`, etc. taken from
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ and modified
*/
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
display: grid;
width: 305px;
max-width: 100%
}
._wrapper_vhvsl_1::after {
/* Note the weird space! Needed to preventy jumpy behavior */
content: attr(data-replicated-value) " ";
/* This is how textarea text behaves */
white-space: pre-wrap;
/* Hidden from view, clicks, and screen readers */
visibility: hidden;
}
._wrapper_vhvsl_1 > textarea {
border: 0;
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
resize: none;
/* Firefox shows scrollbar on growth, you can hide like this. */
overflow: hidden
}
._wrapper_vhvsl_1 > textarea:focus {
/* TODO */
outline: 0;
}
._wrapper_vhvsl_1 > textarea::placeholder {
color: var(--text-placeholder);
}
._wrapper_vhvsl_1 > textarea,
._wrapper_vhvsl_1::after {
/* Identical styling required!! */
font: inherit;
font-family: var(--ui-font);
overflow-y: scroll;
padding: 12px 16px;
font-size: 14px;
line-height: 20px;
color: var(--text-primary);
/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
}._selectRoot_q3h11_1 {
font-family: var(--ui-font);
width: 100%;
max-width: 100%;
border-radius: 8px;
overflow: hidden
}
._selectRoot_q3h11_1 > span {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
._selectRoot_q3h11_1 .select__control {
background: none;
border: 0;
border-bottom: 1px solid var(--border-secondary-alpha);
border-radius: 0;
box-shadow: none
}
._selectRoot_q3h11_1 .select__control:focus {
border: 0;
border-bottom: 1px solid var(--border-secondary-alpha);
box-shadow: none;
}
._selectRoot_q3h11_1 .select__control:hover,
._selectRoot_q3h11_1 .select__control.select__control--is-focused:hover {
border-color: var(--border-secondary-alpha);
box-shadow: none;
}
._selectRoot_q3h11_1 .select__input::placeholder,
._selectRoot_q3h11_1 .select__placeholder {
font-size: 14px;
font-family: inherit;
color: var(--text-placeholder);
}
._selectRoot_q3h11_1 .select__placeholder {
grid-area: 1 / 1 / 2 / 3;
}
._selectRoot_q3h11_1 .select__value-container {
display: grid;
padding: 12px;
font-size: 14px;
}
._selectRoot_q3h11_1 .select__input-container {
flex: 1;
display: flex;
color: var(--text-primary);
cursor: text;
grid-area: 1 / 1 / 2 / 3;
font-size: 14px;
}
._selectRoot_q3h11_1 .select__value-container--has-value {
display: flex;
flex: 1 1 0%;
flex-wrap: wrap;
padding: 8px 12px;
}
._selectRoot_q3h11_1 .select__input {
font-size: 14px;
}
._selectRoot_q3h11_1 .select__menu {
background: var(--popover-background);
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 4px 0;
position: static;
}
._selectRoot_q3h11_1 .select__menu-list {
max-height: 400px;
overflow-y: scroll;
}
._selectedTag_q3h11_89 {
margin: 4px 6px 4px 0;
}
._option_q3h11_93 {
cursor: pointer;
font-size: 12px;
}
._optionInner_q3h11_98 {
padding: 4px 12px
}
._optionInner_q3h11_98 * {
cursor: pointer;
}
._optionFocused_q3h11_106 ._optionInner_q3h11_98 {
background: var(--edit-tags-form-focused-option-background);
}
/*
This is an option like any other in the list but we want to make it look
like it's in a separate section below the list
*/
._optionNew_q3h11_116 {
border-top: 1px solid var(--border-secondary);
margin-top: 8px
}
._optionNew_q3h11_116 ._optionInner_q3h11_98 {
margin-top: 8px;
}
._optionNew_q3h11_116 {
/*
If it's the only item in the list, collapse
*/
}
._optionNew_q3h11_116._option_q3h11_93:first-child {
border-top: 0;
margin-top: 0
}
._optionNew_q3h11_116._option_q3h11_93:first-child ._optionInner_q3h11_98 {
margin-top: 0;
}
._optionPrefix_q3h11_137 {
color: var(--text-secondary);
margin-right: 0.5em;
}
._selectRootShownInMargin_q3h11_142:not(._selectRootInReadOnlyMode_q3h11_143) {
background: var(--popover-background);
box-shadow: -0.0687094px 1.99882px 10px rgba(25, 26, 28, 0.1), -0.0264658px 0.769916px 3.18519px rgba(25, 26, 28, 0.0607407), -0.00559855px 0.162867px 0.814815px rgba(25, 26, 28, 0.0392593);
}
._selectRootInReadOnlyMode_q3h11_143 {
width: auto
}
._selectRootInReadOnlyMode_q3h11_143 .select__control {
border-bottom: 0;
box-shadow: none;
cursor: pointer
}
._selectRootInReadOnlyMode_q3h11_143 .select__control:hover {
border-bottom: 0;
}
._selectRootInReadOnlyMode_q3h11_143 .select__control.select__input-container {
display: none;
}
._selectRootInReadOnlyMode_q3h11_143 .select__control button {
pointer-events: none;
padding-right: 6px
}
._selectRootInReadOnlyMode_q3h11_143 .select__control button span[aria-hidden="true"] {
display: none;
}
._selectRootInReadOnlyMode_q3h11_143 .select__menu {
display: none;
}._root_1lg1m_1 {
background: var(--tag-background);
color: var(--text-primary);
border-radius: 4px;
padding: 0 6px;
font-size: 13px;
font-weight: var(--font-weight-medium);
line-height: 20px;
text-align: center;
white-space: nowrap;
cursor: default;
height: 20px;
display: inline-flex;
}
._rootHasHoverStyle_1lg1m_16 {
cursor: pointer;
transition: opacity 200ms linear
}
._rootHasHoverStyle_1lg1m_16:hover {
opacity: 0.8;
}
._hasActionButton_1lg1m_25 {
padding-right: 0;
}
._icon_1lg1m_29 svg * {
fill: var(--icon-secondary);
}
._root_1p15o_1._rootShownInMargin_1p15o_1 {
background: none;
border: none;
box-shadow: none;
overflow: visible;
background-color: var(--background-primary) !important;
}
._root_1p15o_1._rootIsReadOnly_1p15o_9 {
background: var(--background-elevated)
}
._root_1p15o_1._rootIsReadOnly_1p15o_9:not(._rootIsNotFixedToScreenEdge_1p15o_12) {
position: fixed;
inset: 0;
top: auto;
max-width: none;
border-radius: 0;
padding-bottom: 32px;
}
._root_1p15o_1._rootIsReadOnly_1p15o_9._rootShownInMargin_1p15o_1::after {
content: ' ';
position: absolute;
inset: 0;
right: auto;
width: 1px;
border-left: 1px solid var(--border-secondary-alpha);
}
._readOnlyNote_1p15o_33 {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--text-primary);
}
._rootShownInMargin_1p15o_1 ._readOnlyNote_1p15o_33 {
padding-top: 0;
padding-bottom: 0;
}
._readOnlyHeader_1p15o_46 {
display: flex;
flex-direction: row;
gap: 12px;
}
._readOnlyAuthor_1p15o_52 {
flex: 1;
margin: 0;
padding: 0;
font-size: var(--font-size-sm);
line-height: 150%;
letter-spacing: 0.06em;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._readOnlyCloseButton_1p15o_68 {
color: var(--icon-secondary)
}
._readOnlyCloseButton_1p15o_68:focus-visible {
outline: none;
}
._rootIsNotFixedToScreenEdge_1p15o_12._rootShownInMargin_1p15o_1 ._readOnlyCloseButton_1p15o_68 {
display: none;
}
._readOnlyNoteContents_1p15o_80 {
font-size: 15px;
line-height: 150%;
overflow-y: auto;
max-height: 33vh;
}
._root_104qh_1 {
max-width: 305px;
width: 305px;
}
._rootInReadOnlyMode_104qh_6 {
border: none;
box-shadow: none;
width: auto;
}._popoverBackdrop_kbwmy_1 {
position: fixed;
inset: 0;
background: var(--background-backdrop)
}
@media(min-width: 700px) {
._popoverBackdrop_kbwmy_1 { /* --document-share-width-popovers-float-at */
display: none
}
}
@media(min-width: 1900px) {
rw-highlight { /* When popovers are shown in margin */
cursor: default
}
}
rw-highlight:not(.rw-highlight--has-note) {
cursor: default;
}
rw-highlight.rw-highlight--has-tag .rw-highlight-tag-icon {
display: none;
}