Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
| @font-face { | |
| font-family: 'Avenir Next'; | |
| src: url(public/fonts/b5ed933057eaf1919dd79d81248cdbce.otf); | |
| font-weight: normal; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| font-style: normal; | |
| font-weight: 200; | |
| font-display: swap; | |
| src: url(public/fonts/9c975ca07fb46a3c901c99d44bd87e96.woff2) format('woff2'); | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| font-style: normal; | |
| font-weight: 300; | |
| font-display: swap; | |
| src: url(public/fonts/5f9d6b274506c531a7a4f3576b9028f5.woff2) format('woff2'); | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url(public/fonts/77812e2fead777db0dc806b1eaabc7fd.woff2); | |
| font-weight: 400; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| font-weight: 400; | |
| src: url(public/fonts/449b5a389ef8e2a922fe903429f9bce3.woff2); | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url(public/fonts/3d011804596fb2ccde4af51830a9a7d5.woff2); | |
| font-weight: 600; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url(public/fonts/3f65bd10dd37478e619a59dfd8014224.woff2); | |
| font-weight: 800; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url(public/fonts/0d568aaced11b81c3da287915625bb4a.woff2); | |
| font-weight: 800; | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Source Code Pro'; | |
| src: url(public/fonts/b484b32fcec981a533e3b9694953103b.ttf); | |
| font-weight: normal; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Source Code Pro'; | |
| src: url(public/fonts/c088801620ae4d69924da74e879170a9.ttf); | |
| font-weight: normal; | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Source Code Pro'; | |
| src: url(public/fonts/03c11f6b0c0f707075d6483a78824c60.ttf); | |
| font-weight: bold; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Source Code Pro'; | |
| src: url(public/fonts/c8066b7adaa839e5f0590da2d34723be.ttf); | |
| font-weight: bold; | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Flow Circular'; | |
| src: url(public/fonts/edbfed209497891b155c08340fc3e69f.woff); | |
| font-display: swap; | |
| } | |
| .theme-dark { | |
| --background-primary: #202020; | |
| --background-primary-alt: #1a1a1a; | |
| --background-secondary: #161616; | |
| --background-secondary-alt: #080808; | |
| --background-accent: #000; | |
| --background-modifier-border: #333; | |
| --background-modifier-form-field: rgba(0, 0, 0, 0.3); | |
| --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); | |
| --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); | |
| --background-modifier-success: #197300; | |
| --background-modifier-error: #3d0000; | |
| --background-modifier-error-rgb: 61, 0, 0; | |
| --background-modifier-error-hover: #470000; | |
| --background-modifier-cover: rgba(0, 0, 0, 0.6); | |
| --text-accent: #705dcf; | |
| --text-accent-hover: #7a6ae6; | |
| --text-normal: #dcddde; | |
| --text-muted: #888; | |
| --text-faint: #555; | |
| --text-error: #ff3333; | |
| --text-error-hover: #990000; | |
| --text-highlight-bg: rgba(255, 255, 0, 0.4); | |
| --text-selection: rgba(0, 122, 255, 0.2); | |
| --text-on-accent: #dcddde; | |
| --interactive-normal: #2a2a2a; | |
| --interactive-hover: #303030; | |
| --interactive-accent: #483699; | |
| --interactive-accent-rgb: 72, 54, 153; | |
| --interactive-accent-hover: #4d3ca6; | |
| --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); | |
| --scrollbar-bg: rgba(255, 255, 255, 0.05); | |
| --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); | |
| } | |
| .theme-light { | |
| --background-primary: #ffffff; | |
| --background-primary-alt: #f5f6f8; | |
| --background-secondary: #f2f3f5; | |
| --background-secondary-alt: #e3e5e8; | |
| --background-accent: #fff; | |
| --background-modifier-border: #ddd; | |
| --background-modifier-form-field: #fff; | |
| --background-modifier-form-field-highlighted: #fff; | |
| --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); | |
| --background-modifier-success: #A4E7C3; | |
| --background-modifier-error: #e68787; | |
| --background-modifier-error-rgb: 230, 135, 135; | |
| --background-modifier-error-hover: #FF9494; | |
| --background-modifier-cover: rgba(0, 0, 0, 0.8); | |
| --text-accent: #705dcf; | |
| --text-accent-hover: #7a6ae6; | |
| --text-normal: #2e3338; | |
| --text-muted: #888888; | |
| --text-faint: #999999; | |
| --text-error: #800000; | |
| --text-error-hover: #990000; | |
| --text-highlight-bg: rgba(255, 255, 0, 0.4); | |
| --text-selection: rgba(0, 122, 255, 0.15); | |
| --text-on-accent: #f2f2f2; | |
| --interactive-normal: #f2f3f5; | |
| --interactive-hover: #e9e9e9; | |
| --interactive-accent: #7b6cd9; | |
| --interactive-accent-rgb: 123, 108, 217; | |
| --interactive-accent-hover: #8273e6; | |
| --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2); | |
| --scrollbar-bg: rgba(0, 0, 0, 0.05); | |
| --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); | |
| } | |
| .page-container { | |
| width: 50vw; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 50px 0; | |
| background-color: var(--background-primary); | |
| } | |
| .page-title { | |
| font-weight: 800; | |
| font-size: 46px; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-weight: 800; | |
| } | |
| a { | |
| color: var(--text-accent); | |
| outline: none; | |
| } | |
| a:hover { | |
| color: var(--text-accent-hover); | |
| } | |
| audio { | |
| outline: none; | |
| } | |
| [contenteditable] { | |
| outline: none; | |
| } | |
| button { | |
| color: var(--text-normal); | |
| background-color: var(--interactive-normal); | |
| border-radius: 4px; | |
| border: none; | |
| padding: 10px 30px; | |
| cursor: pointer; | |
| margin-right: 12px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 17px; | |
| outline: none; | |
| user-select: none; | |
| } | |
| button:hover { | |
| background-color: var(--interactive-hover); | |
| } | |
| button.mod-cta { | |
| background-color: var(--interactive-accent); | |
| color: var(--text-on-accent); | |
| } | |
| button.mod-cta a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| button.mod-cta:hover { | |
| background-color: var(--interactive-accent-hover); | |
| } | |
| button.mod-warning { | |
| background-color: var(--background-modifier-error); | |
| } | |
| button.mod-warning:hover { | |
| background-color: var(--background-modifier-error-hover); | |
| } | |
| .icon-button-group { | |
| display: inline-block; | |
| } | |
| .icon-button { | |
| display: inline-block; | |
| color: var(--interactive-normal); | |
| } | |
| .rich-button { | |
| width: auto; | |
| padding-top: 5px; | |
| } | |
| .rich-button-icon { | |
| position: relative; | |
| top: 6px; | |
| } | |
| .rich-link { | |
| color: var(--text-accent); | |
| position: relative; | |
| padding-left: 30px; | |
| } | |
| .rich-link-icon { | |
| position: absolute; | |
| left: 5px; | |
| top: 3px; | |
| } | |
| .input-label { | |
| display: inline-block; | |
| width: 150px; | |
| text-align: right; | |
| margin-right: 8px; | |
| } | |
| .input-button { | |
| padding: 6px 14px; | |
| margin-left: 14px; | |
| color: var(--text-muted); | |
| font-size: 16px; | |
| position: relative; | |
| top: -1px; | |
| } | |
| .input-button:hover { | |
| color: var(--text-normal); | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="password"] { | |
| background: var(--background-modifier-form-field); | |
| border: 1px solid var(--background-modifier-border); | |
| color: var(--text-normal); | |
| font-family: 'Inter', sans-serif; | |
| padding: 5px 14px; | |
| font-size: 17px; | |
| border-radius: 4px; | |
| outline: none; | |
| height: 40px; | |
| } | |
| input[type="text"]:hover, | |
| input[type="email"]:hover, | |
| input[type="password"]:hover { | |
| background-color: var(--background-modifier-form-field-highlighted); | |
| } | |
| input[type="text"]:active, | |
| input[type="email"]:active, | |
| input[type="password"]:active, | |
| input[type="text"]:focus, | |
| input[type="email"]:focus, | |
| input[type="password"]:focus { | |
| border-color: var(--interactive-accent); | |
| } | |
| .checkbox-container { | |
| background-color: var(--background-secondary-alt); | |
| border-radius: 14px; | |
| display: inline-block; | |
| height: 22px; | |
| position: relative; | |
| top: 4px; | |
| user-select: none; | |
| width: 42px; | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); | |
| transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; | |
| } | |
| .checkbox-container.is-enabled { | |
| background-color: var(--interactive-accent); | |
| } | |
| .checkbox-container.is-enabled:after { | |
| transform: translate3d(19px, 0, 0); | |
| } | |
| .checkbox-container.is-enabled:active:after { | |
| left: -4px; | |
| } | |
| .checkbox-container:before { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| opacity: 0; | |
| } | |
| .checkbox-container:after { | |
| pointer-events: none; | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| background-color: #fff; | |
| width: 15px; | |
| height: 15px; | |
| margin: 3px; | |
| border-radius: 9px; | |
| transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out; | |
| left: 0; | |
| transform: translate3d(3px, 0, 0); | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); | |
| } | |
| .checkbox-container:active:after { | |
| width: 20px; | |
| } | |
| /* class applies to select element itself, not a wrapper element */ | |
| .dropdown { | |
| font-size: 16px; | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text-normal); | |
| line-height: 1.3; | |
| padding: 0.6em 1.9em 0.5em 0.8em; | |
| max-width: 100%; | |
| /* useful when width is set to anything other than 100% */ | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: 1px solid var(--background-modifier-border); | |
| border-radius: 0.5em; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background-color: var(--background-modifier-form-field); | |
| /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. | |
| for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it' s a url.You can also swap in a different svg icon or an external image | |
| reference */ | |
| background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23483699%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); | |
| background-repeat: no-repeat, repeat; | |
| /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ | |
| background-position: right 0.7em top 50%, 0 0; | |
| /* icon size, then gradient */ | |
| background-size: 0.65em auto, 100%; | |
| } | |
| /* Hide arrow icon in IE browsers */ | |
| .dropdown::-ms-expand { | |
| display: none; | |
| } | |
| /* Hover style */ | |
| .dropdown:hover { | |
| background-color: var(--background-modifier-form-field-highlighted); | |
| } | |
| /* Focus style */ | |
| .dropdown:focus { | |
| border-color: var(--interactive-accent); | |
| outline: none; | |
| } | |
| /* Set options to normal weight */ | |
| .dropdown option { | |
| font-weight: normal; | |
| background-color: var(--background-primary); | |
| } | |
| /* Support for rtl text, explicit support for Arabic and Hebrew */ | |
| *[dir="rtl"] .dropdown, | |
| :root:lang(ar) .dropdown, | |
| :root:lang(iw) .dropdown { | |
| background-position: left 0.7em top 50%, 0 0; | |
| padding: 0.6em 0.8em 0.5em 1.4em; | |
| } | |
| kbd { | |
| font-family: var(--font-monospace); | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| background-color: var(--background-secondary); | |
| } | |
| .modal-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: var(--layer-modal); | |
| } | |
| .modal-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--background-modifier-cover); | |
| } | |
| .modal { | |
| background-color: var(--background-secondary); | |
| border-radius: 4px; | |
| border: 1px solid var(--background-secondary-alt); | |
| box-shadow: 0 2px 8px var(--background-modifier-box-shadow); | |
| max-width: 50vw; | |
| padding: 30px 50px; | |
| position: relative; | |
| } | |
| .modal-close-button { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 8px; | |
| right: 15px; | |
| font-size: 30px; | |
| color: var(--text-muted); | |
| } | |
| .modal-close-button:before { | |
| content: '\D7'; | |
| } | |
| .modal-title { | |
| font-size: 30px; | |
| font-weight: 800; | |
| text-align: center; | |
| line-height: 40px; | |
| } | |
| .modal-content { | |
| margin-top: 18px; | |
| } | |
| .modal-button-container { | |
| margin-top: 30px; | |
| text-align: center; | |
| } | |
| .modal-button-container button:not(.mod-cta):not(.mod-warning) { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .modal-checkbox-label { | |
| cursor: pointer; | |
| margin-left: 10px; | |
| user-select: none; | |
| } | |
| .message-container { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .message { | |
| display: inline-block; | |
| padding: 6px 15px 4px 15px; | |
| border-radius: 4px; | |
| } | |
| .message.mod-success { | |
| background-color: var(--background-modifier-success); | |
| } | |
| .message.mod-info { | |
| background-color: var(--background-modifier-info); | |
| } | |
| .message.mod-error { | |
| background-color: var(--background-modifier-error); | |
| } | |
| p.mod-warning { | |
| color: var(--text-error); | |
| } | |
| .horizontal-link-group { | |
| text-align: center; | |
| } | |
| .horizontal-link-group a { | |
| margin: 0 10px; | |
| } | |
| .horizontal-preference-group { | |
| display: flex; | |
| } | |
| .horizontal-preference-group button { | |
| border-radius: 0; | |
| margin: 0 -1px; | |
| } | |
| .horizontal-preference-group button:first-child { | |
| border-top-left-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| .horizontal-preference-group button:last-child { | |
| border-top-right-radius: 6px; | |
| border-bottom-right-radius: 6px; | |
| } | |
| .horizontal-preference-group button.is-selected { | |
| background-color: var(--interactive-accent); | |
| color: var(--text-on-accent); | |
| } | |
| .horizontal-preference-group button.is-selected:hover { | |
| background-color: var(--interactive-accent-hover); | |
| } | |
| .setting { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .setting-text { | |
| flex-grow: 1; | |
| } | |
| .setting-title { | |
| font-size: 20px; | |
| line-height: 32px; | |
| } | |
| .setting-explanation { | |
| color: var(--text-muted); | |
| } | |
| .footer-link-group { | |
| list-style: none; | |
| display: inline-block; | |
| margin: 0 60px 0 0; | |
| padding: 0; | |
| } | |
| .footer-header { | |
| font-size: 22px; | |
| line-height: 30px; | |
| margin-bottom: 10px; | |
| } | |
| .footer-link { | |
| margin: 4px 0; | |
| } | |
| .horizontal-tab-header { | |
| display: flex; | |
| } | |
| .horizontal-tab-nav-item, | |
| .vertical-tab-nav-item { | |
| background-color: var(--background-secondary-alt); | |
| padding: 10px 16px; | |
| cursor: default; | |
| font-size: 16px; | |
| } | |
| .horizontal-tab-nav-item.is-active, | |
| .vertical-tab-nav-item.is-active { | |
| background-color: var(--background-secondary); | |
| } | |
| .horizontal-tab-nav-item:hover, | |
| .vertical-tab-nav-item:hover { | |
| background-color: var(--background-secondary); | |
| } | |
| .horizontal-tab-nav-item { | |
| border-top: 3px solid transparent; | |
| } | |
| .horizontal-tab-nav-item:first-child { | |
| border-top-left-radius: 6px; | |
| } | |
| .horizontal-tab-nav-item:last-child { | |
| border-top-right-radius: 6px; | |
| } | |
| .horizontal-tab-nav-item.is-active { | |
| border-top-color: var(--interactive-accent); | |
| } | |
| .horizontal-tab-content, | |
| .vertical-tab-content { | |
| background-color: var(--background-secondary); | |
| padding: 5px 30px; | |
| } | |
| .vertical-tabs-container { | |
| display: flex; | |
| } | |
| .vertical-tab-header { | |
| display: flex; | |
| flex-direction: column; | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .vertical-tab-nav-item { | |
| border-left: 3px solid transparent; | |
| } | |
| .vertical-tab-nav-item.is-active { | |
| border-left-color: var(--interactive-accent); | |
| } | |
| .prompt { | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 8px; | |
| padding: 10px; | |
| background-color: var(--background-primary); | |
| z-index: 1; | |
| position: absolute; | |
| top: 80px; | |
| width: 600px; | |
| max-width: 80vw; | |
| } | |
| input.prompt-input { | |
| width: 100%; | |
| padding: 9px 20px 8px 20px; | |
| font-size: 18px; | |
| border-radius: 6px; | |
| } | |
| .prompt-results { | |
| list-style: none; | |
| margin: 0; | |
| padding: 10px 0 0 0; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .prompt-result { | |
| padding: 10px 20px; | |
| border-radius: 6px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| } | |
| .prompt-result:hover { | |
| background-color: var(--background-primary); | |
| } | |
| .prompt-result.is-active { | |
| background-color: var(--background-primary-alt); | |
| color: var(--text-normal); | |
| } | |
| .prompt-instructions { | |
| user-select: none; | |
| font-size: 13px; | |
| opacity: 0.7; | |
| padding: 10px 10px 2px 10px; | |
| text-align: center; | |
| } | |
| .prompt-instruction { | |
| display: inline-block; | |
| margin-right: 20px; | |
| } | |
| .prompt-instruction-command { | |
| font-size: 12px; | |
| font-weight: 900; | |
| margin-right: 4px; | |
| } | |
| .popover { | |
| background-color: var(--background-primary); | |
| border: 1px solid var(--background-primary-alt); | |
| box-shadow: 0 2px 8px var(--background-modifier-box-shadow); | |
| border-radius: 6px; | |
| padding: 15px 20px 10px 20px; | |
| position: relative; | |
| } | |
| .popover-title { | |
| font-weight: 800; | |
| } | |
| .popover-content { | |
| margin: 8px 0; | |
| } | |
| .components-container .popover { | |
| width: 300px; | |
| margin-top: 20px; | |
| } | |
| .components-container .popover .popover-content { | |
| font-size: 16px; | |
| } | |
| .components-container .menu { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .menu { | |
| background-color: var(--background-primary); | |
| border-radius: 4px; | |
| border: 1px solid var(--background-modifier-border); | |
| box-shadow: 0 2px 8px var(--background-modifier-box-shadow); | |
| position: absolute; | |
| z-index: var(--layer-menu); | |
| user-select: none; | |
| } | |
| .menu-group { | |
| padding: 4px 0; | |
| border-bottom: 1px solid var(--background-modifier-border); | |
| } | |
| .menu-group:last-child { | |
| border-bottom: none; | |
| } | |
| .menu-item { | |
| padding: 2px 20px 3px 20px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .menu-item.is-disabled { | |
| cursor: default; | |
| color: var(--text-faint); | |
| } | |
| .menu-item:hover { | |
| background-color: var(--background-secondary); | |
| } | |
| .menu-item-icon { | |
| display: inline-block; | |
| width: 32px; | |
| height: 24px; | |
| color: var(--text-muted); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .menu-item-title { | |
| display: inline-block; | |
| } | |
| .changelog-item { | |
| margin: 10px 0; | |
| font-size: 16px; | |
| line-height: 26px; | |
| } | |
| .changelog-item:before { | |
| content: attr(data-label); | |
| width: 50px; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| display: inline-block; | |
| text-align: center; | |
| margin-right: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| line-height: 22px; | |
| } | |
| .changelog-item.mod-success:before { | |
| background-color: var(--background-modifier-success); | |
| } | |
| .changelog-item.mod-highlighted:before { | |
| background-color: var(--interactive-accent); | |
| } | |
| .empty-state-container { | |
| text-align: center; | |
| padding: 30px 50px; | |
| border: 5px dashed var(--interactive-accent); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| max-width: 480px; | |
| max-height: 280px; | |
| margin: 20px; | |
| } | |
| .empty-state-container:hover { | |
| background-color: rgba(var(--interactive-accent-rgb), 0.4); | |
| border: 5px solid rgba(var(--interactive-accent-rgb), 0.4); | |
| } | |
| .empty-state-container:hover .empty-state-label-description { | |
| color: var(--text-normal); | |
| } | |
| .empty-state-label-action { | |
| margin-top: 20px; | |
| font-weight: 800; | |
| font-size: 32px; | |
| } | |
| .empty-state-label-description { | |
| font-size: 17px; | |
| line-height: 24px; | |
| color: var(--text-muted); | |
| margin-top: 20px; | |
| text-align: left; | |
| } | |
| .components-container h3 { | |
| font-weight: 600; | |
| font-size: 30px; | |
| margin: 60px 0 25px 0; | |
| } | |
| .components-container .vertical-tabs-container { | |
| height: 300px; | |
| } | |
| .components-container .checkbox-demo { | |
| margin: 10px 0; | |
| } | |
| .components-container .checkbox-demo label { | |
| display: inline-block; | |
| width: 300px; | |
| } | |
| .components-container .prompt { | |
| position: static; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: var(--scrollbar-thumb-bg); | |
| } | |
| ::-webkit-scrollbar { | |
| background-color: var(--scrollbar-bg); | |
| } | |
| ::-webkit-scrollbar-thumb:active { | |
| background-color: var(--scrollbar-active-thumb-bg); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| -webkit-border-radius: 100px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| -webkit-border-radius: 100px; | |
| } | |
| ::-webkit-scrollbar-thumb:active { | |
| -webkit-border-radius: 100px; | |
| } | |
| ::-webkit-scrollbar-corner { | |
| background: transparent; | |
| } | |
| /* Add this attribute to the element that needs a tooltip */ | |
| .tooltip { | |
| animation: pop-down 200ms forwards ease-in-out; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| border-radius: 6px; | |
| color: #dcddde; | |
| font-size: 14px; | |
| left: 50%; | |
| line-height: 20px; | |
| max-width: 300px; | |
| padding: 5px 14px; | |
| position: absolute; | |
| text-align: center; | |
| transform: translateX(-50%); | |
| white-space: nowrap; | |
| z-index: var(--layer-tooltip); | |
| } | |
| .tooltip.mod-right { | |
| animation: pop-right 200ms forwards ease-in-out; | |
| transform: translateY(-50%); | |
| } | |
| .tooltip.mod-left { | |
| animation: pop-right 200ms forwards ease-in-out; | |
| transform: translateY(-50%); | |
| } | |
| .is-mobile .tooltip { | |
| display: none; | |
| } | |
| .tooltip.mod-error { | |
| width: 200px; | |
| white-space: normal; | |
| background-color: var(--background-modifier-error); | |
| color: var(--text-normal); | |
| } | |
| .tooltip.mod-multiline { | |
| white-space: normal; | |
| } | |
| .tooltip.mod-wide { | |
| max-width: 450px; | |
| width: 400px; | |
| } | |
| /* Triangle hack to make tooltip look like a speech bubble */ | |
| .tooltip .tooltip-arrow { | |
| position: absolute; | |
| top: -5px; | |
| left: 50%; | |
| width: 0; | |
| margin-left: -5px; | |
| border-bottom: 5px solid rgba(0, 0, 0, 0.9); | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| content: " "; | |
| font-size: 0; | |
| line-height: 0; | |
| } | |
| .tooltip.mod-right .tooltip-arrow { | |
| top: calc(50% - 5px); | |
| left: -5px; | |
| border-right: 5px solid rgba(0, 0, 0, 0.9); | |
| border-top: 5px solid transparent; | |
| border-bottom: 5px solid transparent; | |
| } | |
| .tooltip.mod-left .tooltip-arrow { | |
| top: calc(50% - 5px); | |
| left: calc(100% + 5px); | |
| border-left: 5px solid rgba(0, 0, 0, 0.9); | |
| border-top: 5px solid transparent; | |
| border-bottom: 5px solid transparent; | |
| } | |
| .tooltip.mod-error .tooltip-arrow { | |
| border-bottom-color: var(--background-modifier-error); | |
| } | |
| .tooltip.mod-error.mod-right .tooltip-arrow { | |
| border-right-color: var(--background-modifier-error); | |
| border-bottom: 5px solid transparent; | |
| } | |
| .tooltip.mod-error.mod-left .tooltip-arrow { | |
| border-left-color: var(--background-modifier-error); | |
| border-bottom: 5px solid transparent; | |
| } | |
| [aria-label] svg { | |
| pointer-events: none; | |
| } | |
| @keyframes pop-down { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(-50%); | |
| } | |
| 20% { | |
| opacity: 0.7; | |
| transform: translateX(-50%) scale(1.02); | |
| } | |
| 40% { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1.05); | |
| } | |
| 100% { | |
| transform: translateX(-50%); | |
| } | |
| } | |
| @keyframes pop-right { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(-50%); | |
| } | |
| 20% { | |
| opacity: 0.7; | |
| transform: translateY(-50%) scale(1.02); | |
| } | |
| 40% { | |
| opacity: 1; | |
| transform: translateY(-50%) scale(1.05); | |
| } | |
| 100% { | |
| transform: translateY(-50%); | |
| } | |
| } | |
| .suggestion { | |
| position: absolute; | |
| background-color: var(--background-primary); | |
| max-width: 300px; | |
| border-radius: 4px; | |
| border: 1px solid var(--background-modifier-border); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| max-height: 300px; | |
| overflow-y: auto; | |
| z-index: var(--layer-popover); | |
| } | |
| .suggestion-item, | |
| .suggestion-empty { | |
| padding: 8px 20px; | |
| font-size: 16px; | |
| } | |
| .suggestion-empty { | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| .suggestion-item { | |
| cursor: pointer; | |
| } | |
| .suggestion-item.is-selected { | |
| background-color: var(--background-primary-alt); | |
| } | |
| .suggestion-shortcut { | |
| padding: 0 10px; | |
| float: right; | |
| font-size: 12px; | |
| } | |
| .suggestion-shortcut:not(:last-child) { | |
| margin-left: 10px; | |
| } | |
| /* BASICS */ | |
| .CodeMirror { | |
| /* Set height, width, borders, and global font properties here */ | |
| height: 100%; | |
| direction: ltr; | |
| padding: 20px; | |
| } | |
| .markdown-source-view.is-searching .CodeMirror { | |
| padding-bottom: 60px; | |
| } | |
| /* PADDING */ | |
| .CodeMirror-lines { | |
| padding: 4px 0; | |
| /* Vertical padding around content */ | |
| } | |
| .CodeMirror pre.CodeMirror-line, | |
| .CodeMirror pre.CodeMirror-line-like { | |
| padding: 0 4px; | |
| /* Horizontal padding of content */ | |
| } | |
| .CodeMirror-scrollbar-filler, | |
| .CodeMirror-gutter-filler { | |
| background-color: white; | |
| /* The little square between H and V scrollbars */ | |
| } | |
| /* GUTTER */ | |
| .CodeMirror-gutters { | |
| border-right: 1px solid var(--background-modifier-border); | |
| background-color: var(--background-primary); | |
| white-space: nowrap; | |
| } | |
| .CodeMirror-linenumber { | |
| padding: 0 3px 0 5px; | |
| min-width: 20px; | |
| text-align: right; | |
| color: #999; | |
| white-space: nowrap; | |
| } | |
| .CodeMirror-guttermarker { | |
| color: black; | |
| } | |
| .CodeMirror-guttermarker-subtle { | |
| color: var(--text-faint); | |
| } | |
| /* CURSOR */ | |
| .CodeMirror-cursor { | |
| border-left: 1px solid var(--text-normal); | |
| border-right: none; | |
| width: 0; | |
| } | |
| /* Shown when moving in bi-directional text */ | |
| .CodeMirror div.CodeMirror-secondarycursor { | |
| border-left: 1px solid silver; | |
| } | |
| .cm-fat-cursor .CodeMirror-cursor { | |
| width: auto; | |
| border: 0 !important; | |
| background: #7e7; | |
| } | |
| .cm-fat-cursor div.CodeMirror-cursors { | |
| z-index: 1; | |
| } | |
| .cm-fat-cursor-mark { | |
| background-color: rgba(20, 255, 20, 0.5); | |
| -webkit-animation: blink 1.06s steps(1) infinite; | |
| -moz-animation: blink 1.06s steps(1) infinite; | |
| animation: blink 1.06s steps(1) infinite; | |
| } | |
| .cm-animate-fat-cursor { | |
| width: auto; | |
| border: 0; | |
| -webkit-animation: blink 1.06s steps(1) infinite; | |
| -moz-animation: blink 1.06s steps(1) infinite; | |
| animation: blink 1.06s steps(1) infinite; | |
| background-color: #7e7; | |
| } | |
| @-moz-keyframes blink { | |
| 50% { | |
| background-color: transparent; | |
| } | |
| } | |
| @-webkit-keyframes blink { | |
| 50% { | |
| background-color: transparent; | |
| } | |
| } | |
| @keyframes blink { | |
| 50% { | |
| background-color: transparent; | |
| } | |
| } | |
| /* Can style cursor different in overwrite (non-insert) mode */ | |
| .cm-tab { | |
| display: inline-block; | |
| text-decoration: inherit; | |
| } | |
| .CodeMirror-rulers { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: -50px; | |
| bottom: 0; | |
| overflow: hidden; | |
| } | |
| .CodeMirror-ruler { | |
| border-left: 1px solid #ccc; | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| } | |
| /* DEFAULT THEME */ | |
| .cm-s-default .cm-header { | |
| color: blue; | |
| } | |
| .cm-s-default .cm-quote { | |
| color: #090; | |
| } | |
| .cm-negative { | |
| color: #d44; | |
| } | |
| .cm-positive { | |
| color: #292; | |
| } | |
| .cm-header, | |
| .cm-strong { | |
| font-weight: bold; | |
| } | |
| .cm-em { | |
| font-style: italic; | |
| } | |
| .cm-link { | |
| text-decoration: underline; | |
| } | |
| .cm-strikethrough { | |
| text-decoration: line-through; | |
| } | |
| .cm-s-default .cm-keyword { | |
| color: #708; | |
| } | |
| .cm-s-default .cm-atom { | |
| color: #219; | |
| } | |
| .cm-s-default .cm-number { | |
| color: #164; | |
| } | |
| .cm-s-default .cm-def { | |
| color: #00f; | |
| } | |
| .cm-s-default .cm-variable-2 { | |
| color: #05a; | |
| } | |
| .cm-s-default .cm-variable-3, | |
| .cm-s-default .cm-type { | |
| color: #085; | |
| } | |
| .cm-s-default .cm-comment { | |
| color: #a50; | |
| } | |
| .cm-s-default .cm-string { | |
| color: #a11; | |
| } | |
| .cm-s-default .cm-string-2 { | |
| color: #f50; | |
| } | |
| .cm-s-default .cm-meta { | |
| color: #555; | |
| } | |
| .cm-s-default .cm-qualifier { | |
| color: #555; | |
| } | |
| .cm-s-default .cm-builtin { | |
| color: #30a; | |
| } | |
| .cm-s-default .cm-bracket { | |
| color: #997; | |
| } | |
| .cm-s-default .cm-tag { | |
| color: #170; | |
| } | |
| .cm-s-default .cm-attribute { | |
| color: #00c; | |
| } | |
| .cm-s-default .cm-hr { | |
| color: #999; | |
| } | |
| .cm-s-default .cm-link { | |
| color: #00c; | |
| } | |
| .cm-s-default .cm-error { | |
| color: #f00; | |
| } | |
| .cm-invalidchar { | |
| color: #f00; | |
| } | |
| .CodeMirror-composing { | |
| border-bottom: 2px solid; | |
| } | |
| /* Default styles for common addons */ | |
| div.CodeMirror span.CodeMirror-matchingbracket { | |
| color: #0b0; | |
| } | |
| div.CodeMirror span.CodeMirror-nonmatchingbracket { | |
| color: #a22; | |
| } | |
| .CodeMirror-matchingtag { | |
| background: rgba(255, 150, 0, 0.3); | |
| } | |
| .CodeMirror-activeline-background { | |
| background: #e8f2ff; | |
| } | |
| /* STOP */ | |
| /* The rest of this file contains styles related to the mechanics of | |
| the editor. You probably shouldn't touch them. */ | |
| .CodeMirror { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .CodeMirror-scroll { | |
| overflow: scroll !important; | |
| /* Things will break if this is overridden */ | |
| /* 30px is the magic margin used to hide the element's real scrollbars */ | |
| /* See overflow: hidden in .CodeMirror */ | |
| margin-bottom: -30px; | |
| margin-right: -30px; | |
| padding-bottom: 30px; | |
| height: 100%; | |
| outline: none; | |
| /* Prevent dragging from highlighting the element */ | |
| position: relative; | |
| } | |
| .CodeMirror-sizer { | |
| position: relative; | |
| border-right: 30px solid transparent; | |
| } | |
| /* The fake, visible scrollbars. Used to force redraw during scrolling | |
| before actual scrolling happens, thus preventing shaking and | |
| flickering artifacts. */ | |
| .CodeMirror-vscrollbar, | |
| .CodeMirror-hscrollbar, | |
| .CodeMirror-scrollbar-filler, | |
| .CodeMirror-gutter-filler { | |
| position: absolute; | |
| z-index: 6; | |
| display: none; | |
| } | |
| .CodeMirror-vscrollbar { | |
| outline: 0; | |
| right: 0; | |
| top: 0; | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| } | |
| .CodeMirror-hscrollbar { | |
| bottom: 0; | |
| left: 0; | |
| overflow-y: hidden; | |
| overflow-x: scroll; | |
| } | |
| .CodeMirror-scrollbar-filler { | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .CodeMirror-gutter-filler { | |
| left: 0; | |
| bottom: 0; | |
| } | |
| .CodeMirror-gutters { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| min-height: 100%; | |
| z-index: 3; | |
| } | |
| .CodeMirror-gutter { | |
| white-space: normal; | |
| height: 100%; | |
| display: inline-block; | |
| vertical-align: top; | |
| margin-bottom: -30px; | |
| } | |
| .CodeMirror-gutter-wrapper { | |
| position: absolute; | |
| z-index: 4; | |
| background: none !important; | |
| border: none !important; | |
| } | |
| .CodeMirror-gutter-background { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 4; | |
| } | |
| .CodeMirror-gutter-elt { | |
| position: absolute; | |
| cursor: default; | |
| z-index: 4; | |
| } | |
| .CodeMirror-gutter-wrapper ::selection { | |
| background-color: transparent; | |
| } | |
| .CodeMirror-gutter-wrapper ::-moz-selection { | |
| background-color: transparent; | |
| } | |
| .CodeMirror-lines { | |
| cursor: text; | |
| min-height: 1px; | |
| /* prevents collapsing before first draw */ | |
| } | |
| .CodeMirror pre.CodeMirror-line, | |
| .CodeMirror pre.CodeMirror-line-like { | |
| /* Reset some styles that the rest of the page might have set */ | |
| -moz-border-radius: 0; | |
| -webkit-border-radius: 0; | |
| border-radius: 0; | |
| border-width: 0; | |
| background: transparent; | |
| font-family: inherit; | |
| font-size: inherit; | |
| margin: 0; | |
| white-space: pre; | |
| word-wrap: normal; | |
| line-height: inherit; | |
| color: inherit; | |
| z-index: 2; | |
| position: relative; | |
| overflow: visible; | |
| -webkit-tap-highlight-color: transparent; | |
| -webkit-font-variant-ligatures: contextual; | |
| font-variant-ligatures: contextual; | |
| } | |
| .CodeMirror-wrap pre.CodeMirror-line, | |
| .CodeMirror-wrap pre.CodeMirror-line-like { | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| word-break: normal; | |
| } | |
| .CodeMirror-linebackground { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 0; | |
| } | |
| .CodeMirror-linewidget { | |
| position: relative; | |
| z-index: 2; | |
| padding: 0.1px; | |
| /* Force widget margins to stay inside of the container */ | |
| } | |
| .CodeMirror-rtl pre { | |
| direction: rtl; | |
| } | |
| .CodeMirror-code { | |
| outline: none; | |
| } | |
| /* Force content-box sizing for the elements where we expect it */ | |
| .CodeMirror-scroll, | |
| .CodeMirror-sizer, | |
| .CodeMirror-gutter, | |
| .CodeMirror-gutters, | |
| .CodeMirror-linenumber { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| .CodeMirror-measure { | |
| position: absolute; | |
| width: 100%; | |
| height: 0; | |
| overflow: hidden; | |
| visibility: hidden; | |
| } | |
| .CodeMirror-cursor { | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .CodeMirror-measure pre { | |
| position: static; | |
| } | |
| div.CodeMirror-cursors { | |
| visibility: hidden; | |
| position: relative; | |
| z-index: 3; | |
| } | |
| div.CodeMirror-dragcursors { | |
| visibility: visible; | |
| } | |
| .CodeMirror-focused div.CodeMirror-cursors { | |
| visibility: visible; | |
| } | |
| .CodeMirror-selected { | |
| background-color: var(--text-selection); | |
| } | |
| .CodeMirror-focused .CodeMirror-selected { | |
| background-color: var(--text-selection); | |
| } | |
| .CodeMirror-crosshair { | |
| cursor: crosshair; | |
| } | |
| .CodeMirror-line::selection, | |
| .CodeMirror-line > span::selection, | |
| .CodeMirror-line > span > span::selection { | |
| background-color: var(--text-selection); | |
| } | |
| .CodeMirror-line::-moz-selection, | |
| .CodeMirror-line > span::-moz-selection, | |
| .CodeMirror-line > span > span::-moz-selection { | |
| background-color: var(--text-selection); | |
| } | |
| .cm-searching { | |
| background-color: #ffa; | |
| background-color: rgba(255, 255, 0, 0.4); | |
| } | |
| /* Used to force a border model for a node */ | |
| .cm-force-border { | |
| padding-right: 0.1px; | |
| } | |
| @media print { | |
| /* Hide the cursor when printing */ | |
| .CodeMirror div.CodeMirror-cursors { | |
| visibility: hidden; | |
| } | |
| } | |
| /* See issue #2901 */ | |
| .cm-tab-wrap-hack:after { | |
| content: ''; | |
| } | |
| /* Help users use markselection to safely style text background */ | |
| span.CodeMirror-selectedtext { | |
| background: none; | |
| } | |
| .CodeMirror-foldmarker { | |
| color: var(--text-accent); | |
| cursor: pointer; | |
| display: inline-block; | |
| margin-left: 8px; | |
| } | |
| .CodeMirror-foldgutter { | |
| width: 0.7em; | |
| } | |
| .CodeMirror-foldgutter-open, | |
| .CodeMirror-foldgutter-folded { | |
| cursor: pointer; | |
| font-size: 18px; | |
| } | |
| .CodeMirror-foldgutter-open:after { | |
| content: "\25BE"; | |
| } | |
| .CodeMirror-foldgutter-folded:after { | |
| content: "\25B8"; | |
| } | |
| .inline-block { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .hidden-token { | |
| display: inline; | |
| font-size: 1px !important; | |
| letter-spacing: -1ch; | |
| font-family: monospace; | |
| color: transparent; | |
| } | |
| .CodeMirror { | |
| /* adding some CodeMirror-not-implemented styles' default style */ | |
| /* tooltip for addon/hover */ | |
| /* gutter for addon/click */ | |
| /* addon/fold */ | |
| /* addon/table-align */ | |
| /* addon/fold-math */ | |
| /* addon/fold-emoji */ | |
| } | |
| .CodeMirror span.hmd-hidden-token.cm-formatting-em, | |
| .CodeMirror span.hmd-hidden-token.cm-formatting-strong, | |
| .CodeMirror span.hmd-hidden-token.cm-formatting-strikethrough, | |
| .CodeMirror span.hmd-hidden-token.cm-formatting-code, | |
| .CodeMirror span.hmd-hidden-token.cm-formatting-link { | |
| display: inline; | |
| font-size: 1px !important; | |
| letter-spacing: -1ch; | |
| font-family: monospace; | |
| color: transparent; | |
| } | |
| .CodeMirror .cm-inline-code, | |
| .CodeMirror .cm-math { | |
| color: #c7254e; | |
| } | |
| .CodeMirror div.HyperMD-hover > .HyperMD-hover-content { | |
| background-color: #fff; | |
| color: #000; | |
| border: 1px solid #000; | |
| padding: 0.5em; | |
| } | |
| .CodeMirror div.HyperMD-hover > .HyperMD-hover-content p { | |
| margin: 0.2em 0; | |
| } | |
| .CodeMirror .HyperMD-goback { | |
| width: 1px; | |
| } | |
| .CodeMirror div.HyperMD-goback-button { | |
| background-color: #ddd; | |
| color: #333; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .CodeMirror .hmd-link-icon:after { | |
| content: "🔗»"; | |
| color: #009; | |
| text-shadow: 0 0 2px #69F; | |
| } | |
| .CodeMirror pre.HyperMD-table-row { | |
| white-space: pre; | |
| } | |
| .CodeMirror pre.HyperMD-table-row .hmd-table-column, | |
| .CodeMirror pre.HyperMD-table-row .hmd-table-column-content { | |
| display: inline-block; | |
| } | |
| .CodeMirror pre.HyperMD-table-row .hmd-table-column-left { | |
| text-align: left; | |
| } | |
| .CodeMirror pre.HyperMD-table-row .hmd-table-column-center { | |
| text-align: center; | |
| } | |
| .CodeMirror pre.HyperMD-table-row .hmd-table-column-right { | |
| text-align: right; | |
| } | |
| .CodeMirror .hmd-fold-math { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .CodeMirror .hmd-fold-math.hmd-fold-math.math-2 { | |
| width: 100%; | |
| } | |
| .CodeMirror img.hmd-emoji { | |
| height: 1.2em; | |
| vertical-align: middle; | |
| } | |
| .cm-s-obsidian { | |
| -webkit-font-smoothing: antialiased; | |
| line-height: 1.5; | |
| } | |
| .cm-s-obsidian .hmd-fold-html-stub, | |
| .cm-s-obsidian .hmd-fold-code-stub, | |
| .cm-s-obsidian.CodeMirror .HyperMD-hover > .HyperMD-hover-content code, | |
| .cm-s-obsidian .cm-formatting-hashtag, | |
| .cm-s-obsidian .cm-inline-code, | |
| .cm-s-obsidian .HyperMD-codeblock, | |
| .cm-s-obsidian .HyperMD-hr, | |
| .cm-s-obsidian .cm-hmd-frontmatter, | |
| .cm-s-obsidian .cm-hmd-orgmode-markup, | |
| .cm-s-obsidian .cm-formatting-code, | |
| .cm-s-obsidian .cm-math, | |
| .cm-s-obsidian span.hmd-fold-math-placeholder, | |
| .cm-s-obsidian .CodeMirror-linewidget kbd, | |
| .cm-s-obsidian .hmd-fold-html kbd { | |
| font-family: "Source Code Pro", monospace; | |
| } | |
| .cm-s-obsidian .CodeMirror-linewidget table, | |
| .cm-s-obsidian .hmd-fold-html table { | |
| border-collapse: collapse; | |
| } | |
| .cm-s-obsidian .CodeMirror-linewidget table td, | |
| .cm-s-obsidian .CodeMirror-linewidget table th, | |
| .cm-s-obsidian .hmd-fold-html table td, | |
| .cm-s-obsidian .hmd-fold-html table th { | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| } | |
| .cm-s-obsidian .CodeMirror-linewidget kbd, | |
| .cm-s-obsidian .hmd-fold-html kbd { | |
| display: inline-block; | |
| padding: 3px 5px; | |
| font-size: 90%; | |
| line-height: 1em; | |
| background-color: #fafbfc; | |
| border: solid 1px #c6cbd1; | |
| border-bottom-color: #c6cbd1; | |
| border-bottom-color: #959da5; | |
| border-radius: 3px; | |
| box-shadow: inset 0 -1px 0 #959da5; | |
| vertical-align: baseline; | |
| } | |
| .cm-s-obsidian .CodeMirror-linewidget a > img, | |
| .cm-s-obsidian .hmd-fold-html a > img { | |
| border: 0; | |
| } | |
| .cm-s-obsidian .cm-header, | |
| .cm-s-obsidian .cm-strong { | |
| font-weight: 600; | |
| } | |
| .cm-s-obsidian span.cm-quote { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian span.cm-meta { | |
| color: #FF1717; | |
| } | |
| .cm-s-obsidian span.cm-keyword { | |
| line-height: 1em; | |
| font-weight: bold; | |
| color: #7F0055; | |
| } | |
| .cm-s-obsidian span.cm-atom { | |
| color: #219; | |
| } | |
| .cm-s-obsidian span.cm-number { | |
| color: #164; | |
| } | |
| .cm-s-obsidian span.cm-def { | |
| color: #00f; | |
| } | |
| .cm-s-obsidian span.cm-variable { | |
| color: black; | |
| } | |
| .cm-s-obsidian span.cm-variable-2 { | |
| color: #0000C0; | |
| } | |
| .cm-s-obsidian span.cm-variable-3 { | |
| color: #0000C0; | |
| } | |
| .cm-s-obsidian span.cm-property { | |
| color: black; | |
| } | |
| .cm-s-obsidian span.cm-operator { | |
| color: black; | |
| } | |
| .cm-s-obsidian span.cm-comment { | |
| color: var(--text-faint); | |
| } | |
| .cm-s-obsidian span.cm-string { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian span.cm-string-2 { | |
| color: #f50; | |
| } | |
| .cm-s-obsidian span.cm-qualifier { | |
| color: #555; | |
| } | |
| .cm-s-obsidian span.cm-builtin, | |
| .cm-s-obsidian span.cm-hr { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian span.cm-bracket { | |
| color: #cc7; | |
| } | |
| .cm-s-obsidian span.cm-tag { | |
| color: var(--text-accent); | |
| } | |
| .cm-s-obsidian span.cm-attribute { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian span.cm-url { | |
| color: var(--text-muted); | |
| text-decoration: underline; | |
| word-break: break-all; | |
| } | |
| .cm-s-obsidian span.cm-link, | |
| .cm-s-obsidian span.cm-hmd-internal-link { | |
| color: var(--text-accent); | |
| text-decoration: none; | |
| } | |
| .cm-s-obsidian span.cm-formatting-link { | |
| color: var(--text-faint); | |
| } | |
| .cm-s-obsidian span.cm-hmd-internal-link:hover { | |
| text-decoration: underline; | |
| } | |
| .cm-s-obsidian span.cm-error { | |
| color: #f00; | |
| } | |
| .cm-s-obsidian span.cm-math, | |
| .cm-s-obsidian span.hmd-fold-math-placeholder { | |
| font-style: italic; | |
| } | |
| .cm-s-obsidian span.cm-formatting-math { | |
| color: var(--text-accent); | |
| font-weight: inherit; | |
| } | |
| .cm-s-obsidian .CodeMirror-activeline-background { | |
| background: #e8f2ff; | |
| } | |
| .cm-s-obsidian .CodeMirror-matchingbracket { | |
| outline: 1px solid grey; | |
| color: black !important; | |
| } | |
| .cm-s-obsidian .CodeMirror-linenumber { | |
| color: #ccc; | |
| } | |
| .cm-s-obsidian .CodeMirror-gutters { | |
| border-right: 10px solid var(--background-primary); | |
| padding-right: 5px; | |
| } | |
| .cm-s-obsidian .CodeMirror-line { | |
| padding: 0 5px; | |
| } | |
| .cm-s-obsidian .CodeMirror-code { | |
| padding-right: 10px; | |
| } | |
| .cm-s-obsidian span.cm-hmd-toc { | |
| font-size: 24pt; | |
| color: #999; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header { | |
| line-height: 1.5 !important; | |
| font-family: inherit !important; | |
| padding-left: 5px !important; | |
| margin-left: 0 !important; | |
| border-left: 0 !important; | |
| padding-bottom: 0.25em; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header > span > span:first-child { | |
| margin-left: 0 !important; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header.HyperMD-header-1 { | |
| font-weight: 600; | |
| font-size: 24pt; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header.HyperMD-header-2 { | |
| font-weight: 600; | |
| font-size: 18pt; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header.HyperMD-header-3 { | |
| font-size: 14.4pt; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header-line { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian pre.HyperMD-list-line { | |
| padding-top: 0.3em; | |
| min-height: 1.5em; | |
| } | |
| .cm-s-obsidian pre.HyperMD-list-line.HyperMD-list-line-nobullet { | |
| padding-top: initial; | |
| } | |
| .cm-s-obsidian span.cm-formatting-list { | |
| color: var(--text-muted); | |
| } | |
| .cm-s-obsidian span.cm-formatting-task { | |
| white-space: pre; | |
| display: inline-block; | |
| height: 1em; | |
| line-height: 1em; | |
| min-width: 1em; | |
| text-align: center; | |
| color: var(--text-muted); | |
| background-size: 1em; | |
| } | |
| .cm-s-obsidian pre.HyperMD-footnote { | |
| font-size: 10.2pt; | |
| padding-left: 45px; | |
| } | |
| .cm-s-obsidian pre.HyperMD-footnote span.cm-hmd-footnote { | |
| color: #666; | |
| cursor: text; | |
| text-decoration: none; | |
| } | |
| .cm-s-obsidian pre.HyperMD-codeblock { | |
| font-family: var(--font-monospace); | |
| line-height: 1.3; | |
| color: #c7254e; | |
| font-size: 0.85em; | |
| } | |
| .cm-s-obsidian pre.HyperMD-codeblock span.cm-inline-code { | |
| display: inherit; | |
| background-color: inherit; | |
| border: inherit; | |
| padding: inherit; | |
| font-size: inherit; | |
| } | |
| .cm-s-obsidian div.HyperMD-codeblock-bg { | |
| left: 0px; | |
| right: 0px; | |
| background-color: var(--background-primary-alt); | |
| border-left: 1px solid var(--background-secondary); | |
| border-right: 1px solid var(--background-secondary); | |
| } | |
| .cm-s-obsidian div.HyperMD-codeblock-begin-bg { | |
| border-top: 1px solid var(--background-secondary); | |
| border-top-left-radius: 4px; | |
| border-top-right-radius: 4px; | |
| } | |
| .cm-s-obsidian div.HyperMD-codeblock-end-bg { | |
| border-bottom: 1px var(--background-secondary); | |
| border-bottom-left-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .cm-s-obsidian div.HyperMD-codeblock-begin-bg, | |
| .cm-s-obsidian div.HyperMD-codeblock-end-bg { | |
| background-color: var(--background-primary-alt); | |
| } | |
| .cm-s-obsidian.HyperMD-with-alt span.cm-url, | |
| .cm-s-obsidian.HyperMD-with-alt span.cm-link, | |
| .cm-s-obsidian.HyperMD-with-alt .cm-link + .CodeMirror-widget, | |
| .cm-s-obsidian.HyperMD-with-alt span.cm-hashtag, | |
| .cm-s-obsidian.HyperMD-with-ctrl span.cm-url, | |
| .cm-s-obsidian.HyperMD-with-ctrl span.cm-link, | |
| .cm-s-obsidian.HyperMD-with-ctrl .cm-link + .CodeMirror-widget, | |
| .cm-s-obsidian.HyperMD-with-ctrl span.cm-hashtag { | |
| cursor: pointer; | |
| } | |
| .cm-s-obsidian span.hmd-link-icon { | |
| width: 20px; | |
| height: 16px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| opacity: 0.4; | |
| } | |
| .cm-s-obsidian span.hmd-link-icon:hover { | |
| opacity: 1; | |
| } | |
| .cm-s-obsidian span.hmd-link-icon:after { | |
| content: ""; | |
| } | |
| .cm-s-obsidian img.hmd-image { | |
| vertical-align: middle; | |
| width: auto; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .cm-s-obsidian img.hmd-image.hmd-image-loading, | |
| .cm-s-obsidian img.hmd-image.hmd-image-error { | |
| min-width: 24px; | |
| min-height: 24px; | |
| } | |
| .cm-s-obsidian span.cm-math-2 { | |
| font-size: 13.2pt; | |
| } | |
| .cm-s-obsidian span.cm-hmd-escape-backslash { | |
| color: #CAA; | |
| } | |
| .cm-s-obsidian span.cm-hmd-escape-char { | |
| color: #666; | |
| } | |
| .cm-s-obsidian span.cm-footref { | |
| display: inline-block; | |
| font-size: 0.7em; | |
| vertical-align: text-top; | |
| color: var(--text-muted); | |
| margin-top: -0.2em; | |
| } | |
| .cm-s-obsidian span.cm-inline-code { | |
| color: #c7254e; | |
| font-size: 90%; | |
| background-color: var(--background-primary-alt); | |
| vertical-align: baseline; | |
| } | |
| .cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code { | |
| background-color: transparent; | |
| } | |
| .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) { | |
| background-color: var(--background-primary-alt); | |
| vertical-align: baseline; | |
| } | |
| .cm-s-obsidian span.cm-inline-code.hmd-hidden-token { | |
| font-size: 0; | |
| } | |
| .cm-s-obsidian span.cm-hashtag { | |
| color: var(--text-muted); | |
| text-decoration: underline; | |
| } | |
| .cm-s-obsidian span.cm-hashtag.cm-hmd-escape-backslash { | |
| color: #FCC; | |
| } | |
| .cm-s-obsidian .hmd-file-uploading { | |
| outline: 2px dashed #CCC; | |
| outline-offset: -2px; | |
| animation: hmd-file-uploading-ani 1.5s linear infinite; | |
| } | |
| @keyframes hmd-file-uploading-ani { | |
| 0%, | |
| 100% { | |
| opacity: 0.4; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .cm-s-obsidian .hmd-file-uploaded { | |
| outline: 2px solid #6C3; | |
| outline-offset: -2px; | |
| } | |
| .cm-s-obsidian .HyperMD-goback { | |
| width: 1px; | |
| } | |
| .cm-s-obsidian div.HyperMD-goback-button { | |
| padding-right: 15px; | |
| border-radius: 0 10px 10px 0; | |
| display: inline-block; | |
| text-align: center; | |
| background-color: #8daed9; | |
| color: #f7f7f7; | |
| cursor: pointer; | |
| } | |
| .cm-s-obsidian div.HyperMD-goback-button:hover { | |
| color: transparent; | |
| text-align: left; | |
| } | |
| .cm-s-obsidian div.HyperMD-goback-button:hover:before { | |
| position: absolute; | |
| padding-left: 5px; | |
| content: "Back"; | |
| color: #f7f7f7; | |
| } | |
| .cm-s-obsidian pre.HyperMD-table-row span.cm-hmd-table-sep { | |
| color: var(--background-modifier-border); | |
| } | |
| .cm-s-obsidian pre.HyperMD-table-row-1 > span { | |
| color: var(--background-modifier-border); | |
| } | |
| .cm-s-obsidian pre.HyperMD-table-row.HyperMD-table-row-0 { | |
| font-weight: 600; | |
| } | |
| .cm-s-obsidian pre.HyperMD-table-row.HyperMD-table-row-0 span.cm-strong { | |
| font-weight: 800; | |
| } | |
| .cm-s-obsidian.CodeMirror div.HyperMD-hover > .HyperMD-hover-content { | |
| background-color: #000; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| border: 0; | |
| color: #fff; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| font-size: 95%; | |
| min-width: 200px; | |
| } | |
| .cm-s-obsidian.CodeMirror div.HyperMD-hover > .HyperMD-hover-content a { | |
| color: inherit; | |
| } | |
| .cm-s-obsidian.CodeMirror div.HyperMD-hover > .HyperMD-hover-content p { | |
| margin: 0.2em 0; | |
| } | |
| .cm-s-obsidian.CodeMirror div.HyperMD-hover > .HyperMD-hover-content code { | |
| display: inline-block; | |
| font-size: 0.87em; | |
| border: 1px solid #999; | |
| border-radius: 2px; | |
| padding: 0px 4px; | |
| } | |
| .cm-s-obsidian.CodeMirror div.HyperMD-hover > .HyperMD-hover-indicator { | |
| content: " "; | |
| display: block; | |
| width: 0px; | |
| margin-bottom: -5px; | |
| border: 5px solid transparent; | |
| border-top-color: #000; | |
| border-top-color: rgba(0, 0, 0, 0.7); | |
| } | |
| .cm-s-obsidian .hmd-fold-html-stub, | |
| .cm-s-obsidian .hmd-fold-code-stub { | |
| display: inline-block; | |
| font-size: 67%; | |
| color: #999; | |
| vertical-align: middle; | |
| border: 1px solid #999; | |
| padding: 0 0.2em; | |
| border-radius: 5px; | |
| margin: 0 0.5em; | |
| background-color: var(--background-primary-alt); | |
| cursor: pointer; | |
| } | |
| .cm-s-obsidian .hmd-fold-html-stub.omittable, | |
| .cm-s-obsidian .omittable.hmd-fold-code-stub { | |
| display: none; | |
| } | |
| .cm-s-obsidian .hmd-fold-html-stub:hover, | |
| .cm-s-obsidian .hmd-fold-code-stub:hover, | |
| .cm-s-obsidian .hmd-fold-html-stub.highlight, | |
| .cm-s-obsidian .highlight.hmd-fold-code-stub { | |
| color: #FFF; | |
| border-color: #C30; | |
| background: #F40; | |
| } | |
| .cm-s-obsidian .hmd-fold-html { | |
| position: relative; | |
| border: 1px solid #FFF; | |
| } | |
| .cm-s-obsidian .hmd-fold-html:hover { | |
| border: 1px dashed #999; | |
| } | |
| .cm-s-obsidian .hmd-fold-html:hover .hmd-fold-html-stub.omittable, | |
| .cm-s-obsidian .hmd-fold-html:hover .omittable.hmd-fold-code-stub { | |
| display: block; | |
| right: 0; | |
| bottom: 100%; | |
| margin: 0; | |
| position: absolute; | |
| z-index: 100; | |
| } | |
| .cm-s-obsidian .hmd-fold-code-image { | |
| text-align: center; | |
| } | |
| .cm-s-obsidian pre.HyperMD-header, | |
| .cm-s-obsidian pre.HyperMD-footnote, | |
| .cm-s-obsidian pre.HyperMD-codeblock, | |
| .cm-s-obsidian pre.HyperMD-hr { | |
| clear: left; | |
| } | |
| .cm-s-obsidian span.hmd-hidden-token.cm-formatting-task { | |
| color: transparent !important; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line.HyperMD-table-row-1 { | |
| color: transparent; | |
| text-shadow: none; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line.HyperMD-hr { | |
| color: transparent; | |
| background-color: transparent; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line.HyperMD-table-row-1 > span { | |
| background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAQAAAAziH6sAAAADklEQVR42mOc+Z9x5n8ACTkDM4ikM1IAAAAASUVORK5CYII=) repeat-x 0px center; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line.HyperMD-table-row span.cm-hmd-table-sep { | |
| color: transparent; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line span.cm-formatting-quote { | |
| color: transparent; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line span.cm-hmd-escape-backslash, | |
| .cm-s-obsidian pre.hmd-inactive-line span.cm-formatting-header { | |
| font-size: 0 !important; | |
| display: inline; | |
| } | |
| .cm-s-obsidian pre.hmd-inactive-line span.cm-hmd-list-indent { | |
| border-right: 0; | |
| } | |
| .cm-s-obsidian span.cm-formatting-highlight, | |
| .cm-s-obsidian span.cm-highlight { | |
| background-color: var(--text-highlight-bg); | |
| color: var(--text-normal); | |
| } | |
| * { | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .static-full-page-container { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| background-color: var(--background-secondary); | |
| color: var(--text-normal); | |
| overflow-y: auto; | |
| } | |
| .app-header { | |
| height: 66px; | |
| width: 100%; | |
| position: fixed; | |
| background-color: rgba(22, 22, 22, 0.7); | |
| backdrop-filter: blur(5px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| justify-content: flex-end; | |
| padding: 0 100px; | |
| z-index: 1; | |
| } | |
| .app-header .nav-logo-text { | |
| right: 6px; | |
| } | |
| .static-full-page-container .nav-logo { | |
| position: absolute; | |
| left: 100px; | |
| top: 0; | |
| line-height: 95px; | |
| } | |
| .app-header-link { | |
| margin-left: 30px; | |
| line-height: 66px; | |
| text-decoration: none; | |
| } | |
| .hero-container { | |
| padding: 220px 0 250px 0; | |
| text-align: center; | |
| background-image: url(public/images/3ba400e073a8a2c1dc0891939c0986be.svg); | |
| background-position: 50% 180px; | |
| background-size: 800px; | |
| background-repeat: repeat-x; | |
| } | |
| .hero-button-container { | |
| margin-top: 40px; | |
| } | |
| .feature-button-container { | |
| margin-top: 20px; | |
| } | |
| .cta-explanation { | |
| font-size: 16px; | |
| color: var(--text-muted); | |
| margin-top: 10px; | |
| opacity: 0.6; | |
| } | |
| .landing-container button { | |
| padding: 15px 30px; | |
| border-radius: 5px; | |
| margin: 0; | |
| } | |
| .hero-inner { | |
| width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero-headline, | |
| .feature-title { | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 800; | |
| color: #F8F8F8; | |
| } | |
| .hero-headline { | |
| font-size: 70px; | |
| line-height: 86px; | |
| margin-bottom: 24px; | |
| } | |
| .hero-intro-text { | |
| font-size: 24px; | |
| line-height: 36px; | |
| color: var(--text-muted); | |
| } | |
| .hero-intro-text p { | |
| margin: 4px 0; | |
| } | |
| .feature-row { | |
| text-align: center; | |
| border-top: 1px solid var(--background-primary); | |
| } | |
| .feature-row-inner { | |
| width: 640px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 100px 30px 170px 30px; | |
| } | |
| .feature-row.mod-stripe { | |
| background-color: var(--background-secondary-alt); | |
| box-shadow: inset 0 8px 8px -10px #050505, inset 0 -8px 8px -10px #050505; | |
| } | |
| .feature-title { | |
| font-size: 48px; | |
| line-height: 66px; | |
| margin-bottom: 40px; | |
| } | |
| .feature-explanation { | |
| font-size: 22px; | |
| line-height: 34px; | |
| margin: 0 0 30px 0; | |
| text-align: left; | |
| color: var(--text-muted); | |
| } | |
| .feature-explanation.mod-heading { | |
| font-size: 26px; | |
| margin-top: 40px; | |
| margin-bottom: 10px; | |
| } | |
| .feature-explanation b { | |
| color: var(--text-normal); | |
| font-weight: 600; | |
| } | |
| .landing-link { | |
| color: var(--text-accent); | |
| } | |
| .landing-link.mod-internal { | |
| margin: 0 3px; | |
| } | |
| .account-container { | |
| background-color: var(--background-secondary); | |
| width: 460px; | |
| } | |
| .account-container .page-header { | |
| margin: 50px 0 30px 0; | |
| text-align: center; | |
| } | |
| .account-container .button-container { | |
| margin-top: 30px; | |
| } | |
| .vault-list-item { | |
| margin: 10px 0; | |
| } | |
| .vault-list-item:hover .vault-list-item-icon { | |
| filter: none; | |
| } | |
| .vault-list-item:hover .vault-list-item-title { | |
| color: var(--text-normal); | |
| } | |
| .vault-list-item-icon, | |
| .vault-list-item-title { | |
| display: inline-block; | |
| } | |
| .vault-list-item-icon { | |
| filter: grayscale(); | |
| position: relative; | |
| top: 5px; | |
| } | |
| .vault-list-item-title { | |
| font-size: 20px; | |
| color: var(--text-muted); | |
| user-select: none; | |
| } | |
| @media only screen and (max-width: 720px) { | |
| .app-header { | |
| height: 50px; | |
| padding: 0 20px; | |
| z-index: 1; | |
| } | |
| .app-header .nav-logo-text { | |
| right: 6px; | |
| } | |
| .static-full-page-container .nav-logo { | |
| left: 5px; | |
| top: 0; | |
| line-height: 50px; | |
| padding-left: 18px; | |
| } | |
| .static-full-page-container .nav-logo-icon { | |
| top: 8px; | |
| } | |
| .static-full-page-container .nav-logo-text { | |
| display: none; | |
| } | |
| .app-header-link { | |
| font-size: 16px; | |
| margin-left: 15px; | |
| line-height: 50px; | |
| } | |
| .hero-container { | |
| padding: 150px 0; | |
| background-image: none; | |
| } | |
| .hero-button-container { | |
| margin-top: 40px; | |
| } | |
| .feature-button-container { | |
| margin-top: 20px; | |
| } | |
| .cta-explanation { | |
| font-size: 16px; | |
| margin-top: 10px; | |
| } | |
| .landing-container button { | |
| padding: 15px 30px; | |
| margin: 0; | |
| } | |
| .hero-inner { | |
| width: 100%; | |
| padding: 0 10px; | |
| } | |
| .hero-headline { | |
| font-size: 40px; | |
| line-height: 54px; | |
| margin-bottom: 24px; | |
| } | |
| .hero-intro-text { | |
| font-size: 22px; | |
| line-height: 30px; | |
| padding: 0 30px; | |
| text-align: left; | |
| } | |
| .hero-intro-text p { | |
| margin: 5px 0; | |
| } | |
| .feature-row.mod-cta .feature-row-inner { | |
| padding-bottom: 150px; | |
| } | |
| .feature-row-inner { | |
| width: 100%; | |
| padding: 60px 10px; | |
| } | |
| .feature-title { | |
| font-size: 36px; | |
| line-height: 50px; | |
| } | |
| .feature-explanation { | |
| padding: 0 20px; | |
| font-size: 20px; | |
| line-height: 28px; | |
| margin: 0 0 30px 0; | |
| } | |
| .feature-explanation.mod-heading { | |
| font-size: 22px; | |
| } | |
| } | |
| .pricing-container { | |
| padding: 100px 0 0 0; | |
| text-align: center; | |
| background-color: var(--background-primary); | |
| } | |
| .pricing-header { | |
| font-size: 50px; | |
| line-height: 76px; | |
| margin-bottom: 75px; | |
| } | |
| .pricing-header small { | |
| display: block; | |
| color: var(--text-muted); | |
| font-size: 20px; | |
| line-height: 30px; | |
| width: 600px; | |
| max-width: 90vw; | |
| font-weight: normal; | |
| margin: 10px auto; | |
| text-align: left; | |
| } | |
| .pricing-cards-container { | |
| width: 900px; | |
| max-width: 90vw; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-content: end; | |
| } | |
| .pricing-card { | |
| background-color: var(--background-secondary-alt); | |
| border-radius: 18px 18px 6px 6px; | |
| display: flex; | |
| flex-basis: 310px; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin: 0 10px; | |
| min-height: 500px; | |
| padding: 30px 20px 60px 20px; | |
| transform: scale(1); | |
| transition: all 150ms ease-in; | |
| user-select: none; | |
| } | |
| .pricing-card button.mod-cta.mod-muted { | |
| background-color: var(--background-primary); | |
| cursor: default; | |
| } | |
| .pricing-card.mod-evaluation { | |
| transform-origin: bottom right; | |
| } | |
| .pricing-card.mod-personal { | |
| transform-origin: bottom center; | |
| } | |
| .pricing-card.mod-business { | |
| transform-origin: bottom left; | |
| } | |
| .pricing-card.mod-muted { | |
| transform: scale(0.9); | |
| opacity: 0.6; | |
| position: relative; | |
| bottom: 0; | |
| cursor: pointer; | |
| } | |
| .pricing-card.mod-muted:hover { | |
| opacity: 0.7; | |
| bottom: 10px; | |
| } | |
| .pricing-card-title { | |
| font-size: 36px; | |
| line-height: 42px; | |
| } | |
| .pricing-card-description { | |
| color: var(--text-muted); | |
| margin: 10px 6px; | |
| text-align: left; | |
| } | |
| .pricing-card-description.mod-point:before { | |
| content: ' • '; | |
| } | |
| .pricing-card-price { | |
| font-size: 50px; | |
| font-weight: 200; | |
| margin: 20px 0; | |
| line-height: 76px; | |
| } | |
| .pricing-card-price strike { | |
| text-decoration-color: var(--text-accent); | |
| } | |
| .pricing-card-price small { | |
| font-size: 16px; | |
| line-height: 22px; | |
| font-weight: normal; | |
| display: block; | |
| color: var(--text-muted); | |
| } | |
| .pricing-card-price small.u-pop { | |
| color: var(--text-accent-hover); | |
| } | |
| .u-pop { | |
| color: var(--text-accent-hover); | |
| } | |
| @media only screen and (max-width: 720px) { | |
| .pricing-container { | |
| padding: 60px 0 0 0; | |
| } | |
| .pricing-header { | |
| font-size: 40px; | |
| line-height: 60px; | |
| margin-bottom: 25px; | |
| } | |
| .pricing-cards-container { | |
| width: 100%; | |
| flex-direction: column; | |
| } | |
| .pricing-card { | |
| min-height: 460px; | |
| flex-direction: column; | |
| margin: 15px; | |
| border-radius: 18px; | |
| } | |
| .pricing-card.mod-muted { | |
| transform: scale(1); | |
| opacity: 1; | |
| bottom: 0; | |
| } | |
| .pricing-card.mod-muted:hover { | |
| opacity: 1; | |
| bottom: 0; | |
| } | |
| .pricing-card-title { | |
| font-size: 32px; | |
| line-height: 40px; | |
| } | |
| } | |
| .eula-container { | |
| padding: 100px 0 250px 0; | |
| text-align: center; | |
| background-color: var(--background-primary); | |
| } | |
| .eula-header { | |
| text-align: center; | |
| line-height: 50px; | |
| } | |
| .eula-text { | |
| padding: 40px 40px 60px 40px; | |
| border-radius: 4px 0 4px 4px; | |
| text-align: left; | |
| width: 80vw; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| font-size: 18px; | |
| line-height: 28px; | |
| position: relative; | |
| background-color: var(--background-secondary); | |
| } | |
| .eula-text b { | |
| color: var(--text-normal); | |
| } | |
| .eula-text p { | |
| margin: 6px 0; | |
| } | |
| .eula-text li { | |
| margin: 10px 0 20px 0; | |
| } | |
| .eula-text:before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| border-width: 0 30px 30px 0; | |
| border-style: solid; | |
| border-color: var(--background-secondary-alt) var(--background-primary); | |
| } | |
| .horizontal-main-container { | |
| width: 100%; | |
| display: flex; | |
| overflow: hidden; | |
| flex-grow: 1; | |
| } | |
| .view-actions { | |
| padding: 5px 10px; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .view-action { | |
| margin: 0 8px; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| position: relative; | |
| top: 3px; | |
| } | |
| .view-action:hover, | |
| .view-action.is-active { | |
| color: var(--text-accent); | |
| } | |
| .editor-split { | |
| position: relative; | |
| height: 100%; | |
| overflow-y: hidden; | |
| } | |
| .editor-inner-container, | |
| .preview { | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| width: 100%; | |
| word-break: break-word; | |
| overflow-y: auto; | |
| color: var(--text-normal); | |
| } | |
| .editor-inner-container img, | |
| .preview img { | |
| max-width: 100%; | |
| } | |
| .editor-inner-container h1, | |
| .preview h1 { | |
| font-size: 34px; | |
| line-height: 40px; | |
| } | |
| .editor-inner-container h2, | |
| .preview h2 { | |
| font-size: 26px; | |
| line-height: 32px; | |
| } | |
| .editor-inner-container h3, | |
| .preview h3 { | |
| font-size: 22px; | |
| line-height: 28px; | |
| } | |
| .editor-inner-container h4, | |
| .preview h4 { | |
| font-size: 20px; | |
| } | |
| .editor-inner-container h5, | |
| .preview h5 { | |
| font-size: 18px; | |
| } | |
| .editor-inner-container h6, | |
| .preview h6 { | |
| font-size: 18px; | |
| color: var(--text-muted); | |
| } | |
| .editor-inner-container { | |
| white-space: pre-wrap; | |
| left: 0; | |
| z-index: 1; | |
| background-color: var(--background-primary); | |
| } | |
| .workspace-leaf-content.is-read-mode .editor-inner-container { | |
| z-index: 0; | |
| } | |
| .editor { | |
| min-height: 100%; | |
| padding: 18px 20px 50vh 20px; | |
| font-family: 'Source Code Pro', 'Microsoft YaHei Light', monospace; | |
| font-size: 0.9em; | |
| } | |
| .obsidian-search-match-highlight { | |
| color: var(--text-normal); | |
| background-color: var(--text-highlight-bg); | |
| } | |
| .markdown-source-view { | |
| position: relative; | |
| height: 100%; | |
| z-index: 1; | |
| background-color: var(--background-primary); | |
| } | |
| .workspace-leaf-content.is-read-mode .markdown-source-view { | |
| z-index: 0; | |
| } | |
| .editor .cl-hashtag { | |
| color: var(--text-muted); | |
| text-decoration: underline; | |
| } | |
| .markdown-embed-title { | |
| font-size: 26px; | |
| height: 36px; | |
| line-height: 42px; | |
| top: 5px; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| text-align: center; | |
| font-weight: 900; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .document-search { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40px; | |
| background-color: var(--background-primary-alt); | |
| display: flex; | |
| padding: 5px; | |
| z-index: var(--layer-popover); | |
| border-top: 1px solid var(--background-secondary); | |
| } | |
| input.document-search-input { | |
| border: none; | |
| border-radius: 0; | |
| flex-grow: 1; | |
| height: 28px; | |
| margin: 1px 8px; | |
| } | |
| input.document-search-input.mod-no-match { | |
| background-color: rgba(var(--background-modifier-error-rgb), 0.4); | |
| } | |
| input.document-search-input.mod-no-match:hover { | |
| background-color: rgba(var(--background-modifier-error-rgb), 0.4); | |
| } | |
| .document-search-button { | |
| height: 26px; | |
| font-size: 14px; | |
| padding: 0 6px; | |
| color: var(--text-muted); | |
| margin: 2px 4px; | |
| } | |
| .document-search-button:hover { | |
| color: var(--text-normal); | |
| } | |
| .document-search-close-button { | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| position: relative; | |
| top: 4px; | |
| font-size: 26px; | |
| line-height: 10px; | |
| margin-left: 5px; | |
| } | |
| .document-search-close-button:before { | |
| content: '\D7'; | |
| } | |
| .document-search-close-button:hover { | |
| color: var(--text-normal); | |
| } | |
| .workspace { | |
| flex-grow: 1; | |
| transition: padding-left 100ms ease-in; | |
| overflow: hidden; | |
| height: 100%; | |
| } | |
| .workspace.is-empty { | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .workspace-split { | |
| display: flex; | |
| position: relative; | |
| } | |
| .workspace-split.mod-vertical { | |
| flex-direction: row; | |
| } | |
| .workspace-split.mod-horizontal { | |
| flex-direction: column; | |
| } | |
| .workspace-leaf { | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .workspace-leaf:last-child .workspace-leaf-resize-handle { | |
| display: none; | |
| } | |
| .workspace-leaf:last-child .workspace-leaf-content { | |
| padding-right: 0; | |
| } | |
| .workspace-leaf.is-highlighted:before { | |
| content: ' '; | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| background-color: rgba(var(--interactive-accent-rgb), 0.1); | |
| z-index: var(--layer-popover); | |
| } | |
| .workspace > .workspace-leaf, | |
| .workspace > .workspace-split { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .workspace > .workspace-split > .workspace-leaf-resize-handle { | |
| display: none; | |
| } | |
| .workspace-leaf-resize-handle { | |
| position: absolute; | |
| z-index: 2; | |
| background-color: var(--background-primary-alt); | |
| transition: background-color 200ms ease-in-out; | |
| border: none; | |
| margin: 0; | |
| } | |
| .workspace-leaf-resize-handle:hover { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle { | |
| right: 0; | |
| top: 0; | |
| width: 4px; | |
| height: 100%; | |
| cursor: col-resize; | |
| } | |
| .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { | |
| bottom: 0; | |
| left: 0; | |
| height: 4px; | |
| width: 100%; | |
| cursor: row-resize; | |
| } | |
| .workspace-split.mod-vertical > * { | |
| height: 100%; | |
| flex: 1 0 100px; | |
| width: 0; | |
| } | |
| .workspace-split.mod-horizontal > * { | |
| width: 100%; | |
| flex: 1 0 100px; | |
| height: 0; | |
| } | |
| .workspace-leaf-content { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| padding-right: 4px; | |
| } | |
| .workspace-leaf-content .image-container, | |
| .workspace-leaf-content .audio-container, | |
| .workspace-leaf-content .video-container { | |
| text-align: center; | |
| padding: 50px; | |
| } | |
| .workspace > .workspace-split > .workspace-leaf:first-of-type:last-of-type .workspace-leaf-header { | |
| border-bottom: 2px solid var(--background-secondary-alt); | |
| background-color: var(--background-secondary); | |
| } | |
| .view-action.mod-pin-leaf { | |
| opacity: 0.6; | |
| } | |
| .view-action.mod-pin-leaf.is-active, | |
| .view-action.mod-pin-leaf:hover { | |
| opacity: 1; | |
| } | |
| .view-header { | |
| height: 40px; | |
| display: flex; | |
| border-top: 1px solid var(--background-secondary-alt); | |
| border-bottom: 2px solid var(--background-secondary-alt); | |
| background-color: var(--background-secondary); | |
| z-index: 1; | |
| } | |
| .workspace-leaf.mod-active .view-header { | |
| background-color: var(--background-primary-alt); | |
| border-bottom: 2px solid var(--interactive-accent); | |
| } | |
| .view-header-title { | |
| font-size: 18px; | |
| font-weight: 800; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| line-height: 38px; | |
| color: var(--text-muted); | |
| } | |
| .workspace-leaf.mod-active .view-header-title { | |
| color: var(--text-normal); | |
| } | |
| .view-header-title-container { | |
| flex-grow: 1; | |
| height: 40px; | |
| line-height: 40px; | |
| overflow: hidden; | |
| padding-left: 20px; | |
| } | |
| .view-content { | |
| width: 100%; | |
| height: calc(100% - 40px); | |
| } | |
| .markdown-preview-view { | |
| background-color: var(--background-primary); | |
| padding: 20px 30px 50px 30px; | |
| width: 100%; | |
| height: 100%; | |
| word-break: break-word; | |
| position: relative; | |
| overflow-y: auto; | |
| color: var(--text-normal); | |
| } | |
| .markdown-preview-view img, | |
| .markdown-preview-view audio, | |
| .markdown-preview-view video { | |
| max-width: 100%; | |
| } | |
| .markdown-preview-view h1, | |
| .markdown-preview-view h2, | |
| .markdown-preview-view h3, | |
| .markdown-preview-view h4, | |
| .markdown-preview-view h5, | |
| .markdown-preview-view h6 { | |
| margin: 15px 0; | |
| } | |
| .markdown-preview-view h1 { | |
| font-size: 34px; | |
| line-height: 40px; | |
| } | |
| .markdown-preview-view h2 { | |
| font-size: 26px; | |
| line-height: 32px; | |
| } | |
| .markdown-preview-view h3 { | |
| font-size: 22px; | |
| line-height: 28px; | |
| } | |
| .markdown-preview-view h4 { | |
| font-size: 20px; | |
| } | |
| .markdown-preview-view h5 { | |
| font-size: 18px; | |
| } | |
| .markdown-preview-view h6 { | |
| font-size: 18px; | |
| color: var(--text-muted); | |
| } | |
| .workspace-leaf-content.is-read-mode .markdown-preview-view { | |
| width: 100%; | |
| left: 0; | |
| background-color: var(--background-primary); | |
| } | |
| .markdown-preview-view .internal-link { | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .markdown-preview-view table { | |
| border-collapse: collapse; | |
| } | |
| .markdown-preview-view th { | |
| font-weight: 800; | |
| background-color: var(--background-primary); | |
| } | |
| .markdown-preview-view th, | |
| .markdown-preview-view td { | |
| padding: 4px 10px; | |
| border: 1px solid var(--background-modifier-border); | |
| } | |
| .markdown-preview-view tr:nth-child(odd) { | |
| background-color: var(--background-primary); | |
| } | |
| .markdown-preview-view blockquote { | |
| border-radius: 0 4px 4px 0; | |
| border: 1px solid var(--background-modifier-border); | |
| border-left-width: 5px; | |
| padding: 10px; | |
| } | |
| .markdown-preview-view blockquote p { | |
| margin: 0 10px; | |
| } | |
| .markdown-preview-view mark { | |
| background-color: var(--text-highlight-bg); | |
| } | |
| .markdown-preview-view .markdown-embed { | |
| background-color: var(--background-primary); | |
| border-radius: 6px; | |
| border: 1px solid var(--background-modifier-border); | |
| padding: 5px 20px 15px 20px; | |
| margin: 0 20px; | |
| } | |
| .markdown-preview-view .markdown-embed-content { | |
| max-height: 500px; | |
| overflow-y: auto; | |
| padding-right: 10px; | |
| } | |
| .markdown-preview-view .markdown-embed-content p:first-child { | |
| margin-top: 6px; | |
| } | |
| .markdown-preview-view .task-list-item { | |
| list-style: none; | |
| margin-left: -1.5em; | |
| } | |
| .markdown-preview-view .task-list-item-checkbox { | |
| width: 15px; | |
| height: 15px; | |
| position: relative; | |
| top: 3px; | |
| } | |
| .markdown-preview-view code { | |
| font-family: var(--font-monospace); | |
| background-color: var(--background-primary-alt); | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| font-size: 0.85em; | |
| position: relative; | |
| bottom: 2px; | |
| } | |
| .markdown-preview-view pre code { | |
| padding: 0; | |
| } | |
| .markdown-preview-view pre { | |
| padding: 6px 10px; | |
| background-color: var(--background-primary-alt); | |
| border-radius: 4px; | |
| white-space: pre-wrap; | |
| } | |
| .markdown-preview-view pre code { | |
| border: none; | |
| } | |
| .markdown-preview-view hr { | |
| height: 2px; | |
| border: none; | |
| background-color: var(--background-modifier-border); | |
| } | |
| .footnote-backref { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| } | |
| .footnote-backref:hover { | |
| color: var(--text-accent); | |
| } | |
| .mjx-container { | |
| outline: none; | |
| } | |
| .side-dock { | |
| width: 300px; | |
| height: 100%; | |
| flex-shrink: 0; | |
| background-color: var(--background-secondary); | |
| display: flex; | |
| overflow: hidden; | |
| z-index: var(--layer-sidedock); | |
| transition: width ease-in-out 200ms; | |
| } | |
| .side-dock.mod-right .side-dock-plugin-panel { | |
| border-left: 1px solid var(--background-modifier-border); | |
| } | |
| .app-container.is-left-sidedock-collapsed .side-dock.mod-left, | |
| .app-container.is-right-sidedock-collapsed .side-dock.mod-right { | |
| width: 36px !important; | |
| } | |
| .app-container.is-left-sidedock-collapsed .side-dock.mod-left .side-dock-ribbon, | |
| .app-container.is-right-sidedock-collapsed .side-dock.mod-right .side-dock-ribbon { | |
| background-color: var(--background-secondary); | |
| } | |
| .side-dock.mod-left { | |
| border-right: 1px solid var(--background-modifier-border); | |
| } | |
| .side-dock.mod-right { | |
| border-left: 1px solid var(--background-modifier-border); | |
| } | |
| .side-dock.mod-left.is-empty, | |
| .side-dock.mod-right.is-empty, | |
| .app-container.is-left-sidedock-collapsed .side-dock.mod-left.is-empty, | |
| .app-container.is-right-sidedock-collapsed .side-dock.mod-right.is-empty { | |
| width: 0; | |
| } | |
| .side-dock.mod-bottom { | |
| display: none; | |
| } | |
| .side-dock-panels-container { | |
| transition: left 100ms ease-in-out 200ms; | |
| height: 100%; | |
| width: calc(100% - 36px); | |
| position: relative; | |
| } | |
| .side-dock-ribbon-before { | |
| height: 60px; | |
| } | |
| .side-dock-ribbon-after { | |
| height: 12px; | |
| } | |
| .side-dock-ribbon { | |
| flex: 0 0 36px; | |
| background-color: var(--background-secondary-alt); | |
| display: flex; | |
| flex-direction: column; | |
| transition: background-color 200ms ease-in-out; | |
| } | |
| .side-dock.mod-right .side-dock-ribbon, | |
| .side-dock.mod-bottom .side-dock-ribbon { | |
| order: 2; | |
| } | |
| .side-dock.mod-right .side-dock-ribbon-after, | |
| .side-dock.mod-bottom .side-dock-ribbon-after { | |
| order: 3; | |
| } | |
| .side-dock-ribbon-tab, | |
| .side-dock-ribbon-action { | |
| color: var(--text-faint); | |
| text-align: center; | |
| cursor: pointer; | |
| stroke-width: 2px; | |
| } | |
| .side-dock-ribbon-tab:hover, | |
| .side-dock-ribbon-action:hover { | |
| color: var(--text-muted); | |
| } | |
| .side-dock-ribbon-action { | |
| padding: 10px 0; | |
| } | |
| .side-dock-ribbon-tab-inner { | |
| padding: 18px 0; | |
| line-height: 16px; | |
| } | |
| .side-dock-ribbon-tab.is-active { | |
| background-color: var(--background-secondary); | |
| color: var(--text-muted); | |
| } | |
| .side-dock-ribbon-tab.is-active:hover { | |
| color: var(--text-normal); | |
| } | |
| .side-dock-ribbon-tab, | |
| .side-dock-ribbon-before, | |
| .side-dock-ribbon-after, | |
| .side-dock-ribbon-tab-inner { | |
| transition: background-color 200ms ease-in-out; | |
| } | |
| .side-dock-ribbon-before.is-before-active, | |
| .side-dock-ribbon-after.is-after-active, | |
| .side-dock-ribbon-tab.is-before-active, | |
| .side-dock-ribbon-tab.is-after-active { | |
| background-color: var(--background-secondary); | |
| } | |
| .side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner, | |
| .side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner, | |
| .side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner, | |
| .side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .side-dock.mod-left .side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner, | |
| .side-dock.mod-left .side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner { | |
| border-bottom-right-radius: 10px; | |
| } | |
| .side-dock.mod-left .side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner, | |
| .side-dock.mod-left .side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner { | |
| border-top-right-radius: 10px; | |
| } | |
| .side-dock.mod-right .side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner, | |
| .side-dock.mod-right .side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner { | |
| border-bottom-left-radius: 10px; | |
| } | |
| .side-dock.mod-right .side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner, | |
| .side-dock.mod-right .side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner { | |
| border-top-left-radius: 10px; | |
| } | |
| .side-dock-ribbon-before .side-dock-ribbon-tab-inner, | |
| .side-dock-ribbon-after .side-dock-ribbon-tab-inner { | |
| height: 100%; | |
| } | |
| .side-dock-ribbon-action.is-active { | |
| color: var(--text-accent); | |
| } | |
| .side-dock-ribbon-action.is-active:hover { | |
| color: var(--text-accent-hover); | |
| } | |
| .side-dock-settings { | |
| margin-top: auto; | |
| margin-bottom: 20px; | |
| } | |
| .side-dock-title { | |
| font-size: 22px; | |
| padding: 25px 20px 10px 20px; | |
| user-select: none; | |
| white-space: nowrap; | |
| } | |
| .side-dock-collapsible-section-header { | |
| font-size: 18px; | |
| padding: 3px 14px 0 34px; | |
| user-select: none; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .side-dock-collapsible-section-header.is-collapsed { | |
| color: var(--text-muted); | |
| } | |
| .side-dock-collapsible-section-header-indicator { | |
| color: var(--text-faint); | |
| position: absolute; | |
| left: 16px; | |
| top: 1px; | |
| width: 9px; | |
| height: 9px; | |
| transition: transform 150ms ease-in-out; | |
| } | |
| .side-dock-collapsible-section-header.is-collapsed .side-dock-collapsible-section-header-indicator { | |
| transform: translateX(-10px) translateY(9px) rotate(-90deg); | |
| } | |
| .side-dock-collapse-btn { | |
| position: absolute; | |
| right: 15px; | |
| top: 27px; | |
| display: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| } | |
| .side-dock-collapse-btn:hover { | |
| color: var(--text-accent); | |
| } | |
| .side-dock:hover .side-dock-collapse-btn { | |
| display: block; | |
| } | |
| .side-dock-plugin-panel { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .side-dock-plugin-panel-inner { | |
| display: flex; | |
| flex-direction: column; | |
| flex-grow: 1; | |
| overflow: hidden; | |
| padding-right: 6px; | |
| } | |
| .side-dock-plugin-panel.mod-backlinks .side-dock-plugin-panel-inner { | |
| overflow-y: auto; | |
| padding-bottom: 20px; | |
| } | |
| .side-dock-resize-handle { | |
| height: 100%; | |
| width: 5px; | |
| position: absolute; | |
| top: 0; | |
| cursor: col-resize; | |
| z-index: 1; | |
| transition: background-color 200ms ease-in-out; | |
| } | |
| .side-dock-resize-handle:hover { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .side-dock.mod-left .side-dock-resize-handle { | |
| right: 0; | |
| } | |
| .side-dock.mod-right .side-dock-resize-handle { | |
| left: 0; | |
| } | |
| .app-container.is-left-sidedock-collapsed .side-dock.mod-left .side-dock-resize-handle, | |
| .app-container.is-right-sidedock-collapsed .side-dock.mod-right .side-dock-resize-handle { | |
| display: none; | |
| } | |
| .status-bar { | |
| background-color: var(--background-secondary); | |
| border-top: 1px solid var(--background-modifier-border); | |
| color: var(--text-muted); | |
| display: flex; | |
| font-size: 14px; | |
| justify-content: flex-end; | |
| line-height: 22px; | |
| max-height: 22px; | |
| padding: 0 42px; | |
| user-select: none; | |
| z-index: var(--layer-status-bar); | |
| } | |
| .status-bar-item { | |
| display: inline-block; | |
| margin-left: 20px; | |
| } | |
| .nav-header { | |
| padding: 10px 20px 4px 20px; | |
| } | |
| .nav-logo { | |
| text-align: center; | |
| margin-bottom: 15px; | |
| text-decoration: none; | |
| } | |
| .nav-logo-icon { | |
| position: relative; | |
| bottom: 8px; | |
| right: 4px; | |
| } | |
| .nav-logo-text { | |
| position: relative; | |
| bottom: 13px; | |
| font-size: 20px; | |
| font-family: 'Avenir Next', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin: 0; | |
| user-select: none; | |
| color: var(--text-muted); | |
| } | |
| .nav-buttons-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .nav-action-button { | |
| color: var(--text-muted); | |
| padding: 0 10px; | |
| cursor: pointer; | |
| } | |
| .nav-action-button:hover { | |
| color: var(--text-accent); | |
| } | |
| .nav-files-container { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding-bottom: 20px; | |
| } | |
| .nav-file-title, | |
| .nav-folder-title { | |
| border: 1px solid transparent; | |
| border-radius: 3px; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| line-height: 20px; | |
| padding: 1px 20px 0 26px; | |
| cursor: pointer; | |
| position: relative; | |
| white-space: nowrap; | |
| } | |
| .nav-file-title.is-being-dragged, | |
| .nav-folder-title.is-being-dragged { | |
| background-color: var(--interactive-accent); | |
| color: var(--text-on-accent); | |
| } | |
| .nav-file-title.is-being-dragged .nav-file-tag, | |
| .nav-folder-title.is-being-dragged .nav-file-tag { | |
| color: var(--text-normal); | |
| } | |
| .nav-file-title.is-being-dragged .nav-folder-collapse-indicator, | |
| .nav-folder-title.is-being-dragged .nav-folder-collapse-indicator { | |
| color: var(--text-on-accent); | |
| } | |
| body:not(.is-grabbing) .nav-file-title:hover, | |
| body:not(.is-grabbing) .nav-folder-title:hover { | |
| background-color: var(--background-secondary-alt); | |
| color: var(--text-normal); | |
| } | |
| body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator, | |
| body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator { | |
| background-color: var(--background-secondary-alt); | |
| color: var(--text-normal); | |
| } | |
| .nav-folder.mod-root > .nav-file-title, | |
| .nav-folder.mod-root > .nav-folder-title { | |
| padding-left: 10px; | |
| font-size: 16px; | |
| color: var(--text-normal); | |
| cursor: default; | |
| } | |
| .nav-folder.mod-root > .nav-file-title:hover, | |
| .nav-folder.mod-root > .nav-folder-title:hover { | |
| background-color: inherit; | |
| } | |
| .nav-folder.mod-root > .nav-file-title.is-being-dragged-over, | |
| .nav-folder.mod-root > .nav-folder-title.is-being-dragged-over { | |
| background-color: rgba(var(--interactive-accent-rgb), 0.2); | |
| } | |
| .nav-file-tag { | |
| background-color: var(--background-secondary-alt); | |
| border-radius: 3px; | |
| display: inline-block; | |
| font-size: 9px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| line-height: 14px; | |
| margin-left: 4px; | |
| padding: 0 4px; | |
| position: relative; | |
| text-transform: uppercase; | |
| top: -2px; | |
| } | |
| .nav-file-title-content, | |
| .nav-folder-title-content { | |
| border-radius: 2px; | |
| border: 1px solid transparent; | |
| display: inline-block; | |
| padding: 2px 4px; | |
| } | |
| .nav-file-title-content.is-being-renamed, | |
| .nav-folder-title-content.is-being-renamed { | |
| cursor: text; | |
| border-color: var(--interactive-accent); | |
| background-color: var(--background-accent); | |
| } | |
| .nav-file-title > *, | |
| .nav-folder-title > * { | |
| pointer-events: none; | |
| } | |
| .nav-file-title, | |
| .nav-folder-title, | |
| .nav-folder-collapse-indicator { | |
| user-select: none; | |
| } | |
| .nav-file.is-active > .nav-file-title, | |
| .nav-file.is-active > .nav-folder-title, | |
| .nav-file.is-active > .nav-folder-collapse-indicator, | |
| .nav-folder.is-active > .nav-file-title, | |
| .nav-folder.is-active > .nav-folder-title, | |
| .nav-folder.is-active > .nav-folder-collapse-indicator { | |
| background-color: var(--background-secondary-alt); | |
| color: var(--text-normal); | |
| } | |
| .nav-folder-title.is-being-dragged-over { | |
| border-radius: 3px; | |
| border-color: var(--interactive-accent); | |
| background-color: rgba(var(--interactive-accent-rgb), 0.2); | |
| color: var(--text-normal); | |
| } | |
| .nav-folder-title.is-being-dragged-over .nav-folder-collapse-indicator { | |
| color: var(--text-normal); | |
| } | |
| .nav-folder-collapse-indicator { | |
| color: var(--text-faint); | |
| position: absolute; | |
| left: 12px; | |
| top: 2px; | |
| width: 9px; | |
| height: 9px; | |
| transition: transform 100ms ease-in-out; | |
| } | |
| .nav-folder.is-collapsed .nav-folder-collapse-indicator { | |
| transform: translateX(-5px) translateY(7px) rotate(-90deg); | |
| } | |
| .nav-folder.mod-root > .nav-folder-title .nav-folder-collapse-indicator { | |
| display: none; | |
| } | |
| .nav-folder-children { | |
| padding-left: 15px; | |
| } | |
| .nav-folder.mod-root > .nav-folder-children { | |
| padding-left: 0; | |
| } | |
| .nav-drag-ghost { | |
| border-radius: 4px; | |
| background-color: var(--background-secondary); | |
| border: 1px solid var(--background-secondary-alt); | |
| box-shadow: 0 2px 8px var(--background-modifier-box-shadow); | |
| position: absolute; | |
| z-index: var(--layer-dragged-item); | |
| } | |
| .item-list { | |
| flex-grow: 1; | |
| margin-top: 15px; | |
| padding-bottom: 20px; | |
| overflow-y: auto; | |
| } | |
| .plugin { | |
| position: relative; | |
| color: var(--text-muted); | |
| margin-bottom: 6px; | |
| padding: 10px 20px; | |
| user-select: none; | |
| border-radius: 3px; | |
| } | |
| .plugin-list-plugins { | |
| overflow-y: auto; | |
| padding-bottom: 20px; | |
| } | |
| .plugin-name { | |
| color: var(--text-muted); | |
| margin-bottom: 6px; | |
| } | |
| .plugin-description { | |
| color: var(--text-faint); | |
| font-size: 15px; | |
| line-height: 22px; | |
| } | |
| .plugin-enabled-state { | |
| margin-top: 6px; | |
| font-size: 16px; | |
| color: var(--text-faint); | |
| } | |
| .plugin-enabled-state.is-enabled { | |
| color: var(--text-accent); | |
| } | |
| .plugin-settings { | |
| position: absolute; | |
| right: 12px; | |
| bottom: 8px; | |
| } | |
| .search-input { | |
| display: block; | |
| margin: 10px auto; | |
| width: 200px; | |
| } | |
| .search-result-container { | |
| padding: 8px 4px 4px 4px; | |
| position: relative; | |
| } | |
| .side-dock-plugin-panel.mod-global-search .search-result-container { | |
| overflow-y: auto; | |
| } | |
| .search-result-container:before { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| width: 0; | |
| height: 3px; | |
| } | |
| .search-result-container.is-loading:before { | |
| background-color: var(--interactive-accent); | |
| animation: 1000ms ease-in-out 300ms infinite progress-bar; | |
| } | |
| @keyframes progress-bar { | |
| 0% { | |
| width: 0; | |
| left: 0; | |
| } | |
| 5% { | |
| width: 0; | |
| left: 0; | |
| } | |
| 50% { | |
| width: 100%; | |
| right: 0; | |
| } | |
| 95% { | |
| width: 0; | |
| right: 0; | |
| } | |
| 100% { | |
| width: 0; | |
| right: 0; | |
| } | |
| } | |
| .search-empty-state { | |
| color: var(--text-muted); | |
| font-size: 16px; | |
| width: 200px; | |
| margin: 5px auto 15px auto; | |
| } | |
| .search-result { | |
| word-break: break-word; | |
| } | |
| .search-result-file-title { | |
| font-size: 18px; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| border-radius: 3px; | |
| } | |
| .search-result-file-title:hover { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .search-result-file-matches { | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| line-height: 22px; | |
| margin-bottom: 15px; | |
| padding: 5px 0; | |
| } | |
| .search-result-file-match { | |
| cursor: pointer; | |
| border-radius: 3px; | |
| position: relative; | |
| padding: 5px 10px; | |
| } | |
| .search-result-file-match:hover { | |
| background-color: var(--background-secondary-alt); | |
| } | |
| .search-result-file-match:hover .search-result-file-match-replace-button { | |
| display: block; | |
| } | |
| .search-result-file-match:not(:first-child) { | |
| margin-top: 8px; | |
| } | |
| .search-result-file-matched-text { | |
| color: var(--text-normal); | |
| background-color: var(--text-highlight-bg); | |
| } | |
| .search-result-file-match-replace-button { | |
| display: none; | |
| position: absolute; | |
| background-color: var(--background-secondary-alt); | |
| top: 3px; | |
| right: -8px; | |
| opacity: 0.8; | |
| padding: 2px 10px; | |
| font-size: 14px; | |
| } | |
| .search-result-file-match-replace-button:hover { | |
| opacity: 1; | |
| background-color: var(--background-secondary-alt); | |
| } | |
| #graph-view-canvas { | |
| font-size: 14px; | |
| font-weight: normal; | |
| user-select: none; | |
| cursor: grab; | |
| cursor: -moz-grabb; | |
| cursor: -webkit-grab; | |
| } | |
| #graph-view-canvas .nodes { | |
| stroke: var(--text-muted); | |
| } | |
| #graph-view-canvas .nodes text { | |
| fill: var(--text-normal); | |
| stroke-width: 0; | |
| cursor: pointer; | |
| transition: opacity 200ms ease-in-out; | |
| } | |
| #graph-view-canvas .nodes text:hover { | |
| fill: var(--text-normal); | |
| } | |
| #graph-view-canvas .nodes circle { | |
| stroke: var(--text-faint); | |
| cursor: pointer; | |
| fill: var(--background-secondary); | |
| transition: opacity 200ms ease-in-out; | |
| } | |
| #graph-view-canvas .links { | |
| stroke: var(--background-modifier-border); | |
| transition: opacity 200ms ease-in-out; | |
| } | |
| .svg-container { | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| } | |
| .empty-state { | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| background-color: var(--background-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: var(--layer-vault-chooser); | |
| flex-direction: column; | |
| } | |
| .choose-vault-clickable-area { | |
| text-align: center; | |
| padding: 40px 60px; | |
| border: 5px dashed var(--interactive-accent); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| } | |
| .choose-vault-clickable-area:hover { | |
| background-color: rgba(var(--interactive-accent-rgb), 0.4); | |
| border: 5px solid rgba(var(--interactive-accent-rgb), 0.4); | |
| } | |
| .choose-vault-label-welcome { | |
| line-height: 46px; | |
| color: var(--text-muted); | |
| } | |
| .choose-vault-label-choose { | |
| font-weight: 800; | |
| font-size: 32px; | |
| } | |
| .slides-iframe { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| width: 100vw; | |
| transition: -webkit-transform 0.8s ease 0s; | |
| background-color: #191919; | |
| z-index: var(--layer-slides); | |
| border: none; | |
| } | |
| .reveal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| width: 100vw; | |
| transition: -webkit-transform 0.8s ease 0s; | |
| z-index: 1; | |
| } | |
| .slides-close-btn { | |
| display: inline-block; | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| z-index: 1; | |
| } | |
| .slides-close-btn:hover { | |
| color: var(--text-muted); | |
| } | |
| audio { | |
| width: 100%; | |
| height: 46px; | |
| } | |
| .theme-dark audio { | |
| filter: invert(100%); | |
| } | |
| .pdf-container { | |
| height: 100%; | |
| padding: 0 10px; | |
| position: relative; | |
| } | |
| .pdf-scroll-container { | |
| overflow-y: auto; | |
| height: 100%; | |
| } | |
| .pdf-canvas { | |
| width: 100%; | |
| margin: 6px 0; | |
| } | |
| .pdf-controls { | |
| position: absolute; | |
| top: 30px; | |
| left: calc(50% - 50px); | |
| height: 30px; | |
| background-color: var(--background-secondary); | |
| opacity: 0; | |
| border-radius: 6px; | |
| box-shadow: inset 8px 0 8px -10px var(--background-modifier-box-shadow); | |
| transition: opacity 200ms ease-in-out; | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 30px; | |
| padding: 0 30px; | |
| } | |
| .pdf-container:hover .pdf-controls { | |
| opacity: 0.75; | |
| } | |
| .pdf-container:hover .pdf-controls:hover { | |
| opacity: 0.9; | |
| } | |
| .pdf-controls-pager { | |
| position: absolute; | |
| top: 3px; | |
| cursor: pointer; | |
| } | |
| .pdf-controls-pager.mod-previous { | |
| left: 8px; | |
| } | |
| .pdf-controls-pager.mod-next { | |
| right: 8px; | |
| } | |
| .tag-pane-tags { | |
| overflow-y: auto; | |
| padding-bottom: 25px; | |
| } | |
| .tag-pane-tag { | |
| cursor: pointer; | |
| user-select: none; | |
| color: var(--text-muted); | |
| padding: 2px 15px; | |
| border-radius: 3px; | |
| font-size: 16px; | |
| position: relative; | |
| } | |
| .tag-pane-tag:hover { | |
| background-color: var(--background-secondary-alt); | |
| color: var(--text-normal); | |
| } | |
| .tag-pane-tag-text, | |
| .tag-pane-tag-count { | |
| display: inline-block; | |
| } | |
| .tag-pane-tag-text { | |
| word-break: break-word; | |
| padding-right: 20px; | |
| } | |
| .tag-pane-tag-count { | |
| position: absolute; | |
| top: 7px; | |
| right: 10px; | |
| font-size: 12px; | |
| background-color: var(--background-secondary-alt); | |
| line-height: 12px; | |
| border-radius: 3px; | |
| padding: 2px 4px; | |
| } | |
| .tag-pane-empty { | |
| color: var(--text-muted); | |
| font-size: 16px; | |
| width: 200px; | |
| margin: 5px auto; | |
| } | |
| .notice { | |
| animation: slideInFromRight 500ms forwards; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px var(--background-modifier-box-shadow); | |
| color: #dcddde; | |
| font-size: 14px; | |
| line-height: 22px; | |
| padding: 10px 20px; | |
| position: fixed; | |
| right: -350px; | |
| top: 14px; | |
| max-width: 300px; | |
| z-index: var(--layer-notice); | |
| } | |
| .notice.mod-disappearing { | |
| right: 14px; | |
| animation: slideOutUp 1000ms forwards; | |
| } | |
| @keyframes slideInFromRight { | |
| 100% { | |
| right: 14px; | |
| } | |
| } | |
| @keyframes slideOutUp { | |
| 100% { | |
| top: -100px; | |
| } | |
| } | |
| body { | |
| --layer-sidedock: 10; | |
| --layer-vault-chooser: 13; | |
| --layer-status-bar: 15; | |
| --layer-dragged-item: 20; | |
| --layer-menu: 30; | |
| --layer-popover: 40; | |
| --layer-slides: 45; | |
| --layer-modal: 50; | |
| --layer-notice: 60; | |
| --layer-tooltip: 70; | |
| --font-monospace: 'Source Code Pro', monospace; | |
| } | |
| .modal.mod-settings { | |
| padding: 0; | |
| width: 800px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal.mod-settings .vertical-tab-header { | |
| padding: 30px 0; | |
| flex: 0 0 150px; | |
| } | |
| .modal.mod-settings .vertical-tab-content-container { | |
| padding: 60px 20px 20px 0; | |
| height: 50vh; | |
| } | |
| .modal.mod-settings .modal-content { | |
| margin-top: 0; | |
| } | |
| .modal.mod-plugin-options .modal-content { | |
| margin: 40px 0; | |
| } | |
| .vertical-tab-content-container { | |
| overflow: hidden; | |
| flex-grow: 1; | |
| } | |
| .vertical-tab-content { | |
| overflow-y: auto; | |
| max-height: calc(50vh - 80px); | |
| } | |
| .setting-item { | |
| display: flex; | |
| margin-bottom: 20px; | |
| } | |
| .setting-item-info { | |
| flex-grow: 1; | |
| margin-right: 20px; | |
| } | |
| .setting-item-description { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .setting-item-description code { | |
| font-family: var(--font-monospace); | |
| font-size: 0.85em; | |
| border-radius: 3px; | |
| background-color: var(--background-secondary-alt); | |
| padding: 0 3px 2px 3px; | |
| position: relative; | |
| bottom: 1px; | |
| } | |
| .setting-item-name { | |
| font-size: 16px; | |
| } | |
| .setting-item-control { | |
| padding-top: 8px; | |
| flex-shrink: 1; | |
| text-align: right; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .setting-item-control.mod-hotkey { | |
| padding-top: 0; | |
| cursor: default; | |
| } | |
| .setting-item-control.mod-hotkey input { | |
| font-family: var(--font-monospace); | |
| font-size: 0.85em; | |
| } | |
| .setting-item-control.mod-hotkey input:focus { | |
| background-color: var(--interactive-accent); | |
| color: var(--text-on-accent); | |
| } | |
| .setting-item-control button { | |
| font-size: 15px; | |
| padding: 6px 20px; | |
| } | |
| .setting-command-hotkeys { | |
| display: flex; | |
| flex-direction: column; | |
| margin-right: 6px; | |
| } | |
| .setting-hotkey { | |
| font-family: var(--font-monospace); | |
| font-size: 13px; | |
| background-color: var(--background-secondary-alt); | |
| border-radius: 4px; | |
| padding: 0 25px 0 10px; | |
| height: 24px; | |
| align-self: flex-end; | |
| position: relative; | |
| } | |
| .setting-hotkey.mod-active { | |
| background-color: var(--interactive-accent); | |
| color: var(--text-on-accent); | |
| } | |
| .setting-hotkey.mod-empty { | |
| padding-right: 10px; | |
| } | |
| .setting-hotkey:not(:first-child) { | |
| margin-top: 10px; | |
| } | |
| .setting-delete-hotkey { | |
| position: absolute; | |
| top: 5px; | |
| right: 3px; | |
| cursor: pointer; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 10px; | |
| line-height: 15px; | |
| text-align: center; | |
| } | |
| .setting-hotkey.mod-empty .setting-delete-hotkey { | |
| display: none; | |
| } | |
| .setting-delete-hotkey:hover { | |
| background-color: var(--background-modifier-error); | |
| color: var(--text-on-accent); | |
| } | |
| .setting-add-hotkey-button, | |
| .setting-restore-hotkey-button { | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| height: 26px; | |
| } | |
| .setting-add-hotkey-button svg, | |
| .setting-restore-hotkey-button svg { | |
| position: relative; | |
| bottom: 2px; | |
| } | |
| .setting-add-hotkey-button.mod-active, | |
| .setting-restore-hotkey-button.mod-active { | |
| color: var(--text-accent); | |
| } | |
| .setting-add-hotkey-button:hover, | |
| .setting-restore-hotkey-button:hover { | |
| background-color: var(--background-secondary-alt); | |
| color: var(--text-normal); | |
| } | |
| .setting-plugin-setting-button { | |
| order: -1; | |
| color: var(--text-muted); | |
| height: 24px; | |
| margin-right: 10px; | |
| margin-top: 5px; | |
| cursor: pointer; | |
| } | |
| .setting-plugin-setting-button:hover { | |
| color: var(--text-normal); | |
| } | |
| .setting-message { | |
| font-size: 16px; | |
| line-height: 24px; | |
| } | |
| .theme-light { | |
| /* PrismJS 1.20.0 | |
| https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+al+antlr4+apacheconf+apl+applescript+aql+arduino+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bbcode+bison+bnf+brainfuck+brightscript+bro+c+concurnas+csharp+cpp+cil+coffeescript+cmake+clojure+crystal+csp+css-extras+d+dart+dax+diff+django+dns-zone-file+docker+ebnf+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gcode+gdscript+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+iecst+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+js-templates+json+jsonp+json5+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+purebasic+python+q+qml+qore+r+racket+jsx+tsx+renpy+reason+regex+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smalltalk+smarty+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+stylus+swift+tap+tcl+textile+toml+tt2+turtle+twig+typescript+t4-cs+t4-vb+t4-templating+unrealscript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+zig */ | |
| /** | |
| * prism.js default theme for JavaScript, CSS and HTML | |
| * Based on dabblet (http://dabblet.com) | |
| * @author Lea Verou | |
| */ | |
| /* Code blocks */ | |
| /* Inline code */ | |
| } | |
| .theme-light code[class*="language-"], | |
| .theme-light pre[class*="language-"] { | |
| color: black; | |
| background: none; | |
| text-shadow: 0 1px white; | |
| font-family: var(--font-monospace); | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| word-wrap: normal; | |
| line-height: 1.5; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| } | |
| .theme-light pre[class*="language-"]::-moz-selection, | |
| .theme-light pre[class*="language-"] ::-moz-selection, | |
| .theme-light code[class*="language-"]::-moz-selection, | |
| .theme-light code[class*="language-"] ::-moz-selection { | |
| text-shadow: none; | |
| background: #b3d4fc; | |
| } | |
| .theme-light pre[class*="language-"]::selection, | |
| .theme-light pre[class*="language-"] ::selection, | |
| .theme-light code[class*="language-"]::selection, | |
| .theme-light code[class*="language-"] ::selection { | |
| text-shadow: none; | |
| background: #b3d4fc; | |
| } | |
| @media print { | |
| .theme-light code[class*="language-"], | |
| .theme-light pre[class*="language-"] { | |
| text-shadow: none; | |
| } | |
| } | |
| .theme-light pre[class*="language-"] { | |
| padding: 1em; | |
| margin: 0.5em 0; | |
| overflow: auto; | |
| } | |
| .theme-light :not(pre) > code[class*="language-"], | |
| .theme-light pre[class*="language-"] { | |
| background: #f5f2f0; | |
| } | |
| .theme-light :not(pre) > code[class*="language-"] { | |
| padding: 0.1em; | |
| border-radius: 0.3em; | |
| white-space: normal; | |
| } | |
| .theme-light .token.comment, | |
| .theme-light .token.prolog, | |
| .theme-light .token.doctype, | |
| .theme-light .token.cdata { | |
| color: slategray; | |
| } | |
| .theme-light .token.punctuation { | |
| color: #999; | |
| } | |
| .theme-light .token.namespace { | |
| opacity: 0.7; | |
| } | |
| .theme-light .token.property, | |
| .theme-light .token.tag, | |
| .theme-light .token.boolean, | |
| .theme-light .token.number, | |
| .theme-light .token.constant, | |
| .theme-light .token.symbol, | |
| .theme-light .token.deleted { | |
| color: #905; | |
| } | |
| .theme-light .token.selector, | |
| .theme-light .token.attr-name, | |
| .theme-light .token.string, | |
| .theme-light .token.char, | |
| .theme-light .token.builtin, | |
| .theme-light .token.inserted { | |
| color: #690; | |
| } | |
| .theme-light .token.operator, | |
| .theme-light .token.entity, | |
| .theme-light .token.url, | |
| .theme-light .language-css .token.string, | |
| .theme-light .style .token.string { | |
| color: #9a6e3a; | |
| background: hsla(0, 0%, 100%, 0.5); | |
| } | |
| .theme-light .token.atrule, | |
| .theme-light .token.attr-value, | |
| .theme-light .token.keyword { | |
| color: #07a; | |
| } | |
| .theme-light .token.function, | |
| .theme-light .token.class-name { | |
| color: #DD4A68; | |
| } | |
| .theme-light .token.regex, | |
| .theme-light .token.important, | |
| .theme-light .token.variable { | |
| color: #e90; | |
| } | |
| .theme-light .token.important, | |
| .theme-light .token.bold { | |
| font-weight: bold; | |
| } | |
| .theme-light .token.italic { | |
| font-style: italic; | |
| } | |
| .theme-light .token.entity { | |
| cursor: help; | |
| } | |
| .theme-dark { | |
| /* PrismJS 1.20.0 | |
| https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+al+antlr4+apacheconf+apl+applescript+aql+arduino+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bbcode+bison+bnf+brainfuck+brightscript+bro+c+concurnas+csharp+cpp+cil+coffeescript+cmake+clojure+crystal+csp+css-extras+d+dart+dax+diff+django+dns-zone-file+docker+ebnf+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gcode+gdscript+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+iecst+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+js-templates+json+jsonp+json5+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+purebasic+python+q+qml+qore+r+racket+jsx+tsx+renpy+reason+regex+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smalltalk+smarty+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+stylus+swift+tap+tcl+textile+toml+tt2+turtle+twig+typescript+t4-cs+t4-vb+t4-templating+unrealscript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+zig */ | |
| /** | |
| * okaidia theme for JavaScript, CSS and HTML | |
| * Loosely based on Monokai textmate theme by http://www.monokai.nl/ | |
| * @author ocodia | |
| */ | |
| /* Code blocks */ | |
| /* Inline code */ | |
| } | |
| .theme-dark code[class*="language-"], | |
| .theme-dark pre[class*="language-"] { | |
| color: #f8f8f2; | |
| background: none; | |
| text-shadow: 0 1px rgba(0, 0, 0, 0.3); | |
| font-family: var(--font-monospace); | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| word-wrap: normal; | |
| line-height: 1.5; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| } | |
| .theme-dark pre[class*="language-"] { | |
| padding: 1em; | |
| margin: 0.5em 0; | |
| overflow: auto; | |
| border-radius: 0.3em; | |
| } | |
| .theme-dark :not(pre) > code[class*="language-"], | |
| .theme-dark pre[class*="language-"] { | |
| background: var(--background-primary-alt); | |
| } | |
| .theme-dark :not(pre) > code[class*="language-"] { | |
| padding: 0.1em; | |
| border-radius: 0.3em; | |
| white-space: normal; | |
| } | |
| .theme-dark .token.comment, | |
| .theme-dark .token.prolog, | |
| .theme-dark .token.doctype, | |
| .theme-dark .token.cdata { | |
| color: slategray; | |
| } | |
| .theme-dark .token.punctuation { | |
| color: #f8f8f2; | |
| } | |
| .theme-dark .token.namespace { | |
| opacity: 0.7; | |
| } | |
| .theme-dark .token.property, | |
| .theme-dark .token.tag, | |
| .theme-dark .token.constant, | |
| .theme-dark .token.symbol, | |
| .theme-dark .token.deleted { | |
| color: #f92672; | |
| } | |
| .theme-dark .token.boolean, | |
| .theme-dark .token.number { | |
| color: #ae81ff; | |
| } | |
| .theme-dark .token.selector, | |
| .theme-dark .token.attr-name, | |
| .theme-dark .token.string, | |
| .theme-dark .token.char, | |
| .theme-dark .token.builtin, | |
| .theme-dark .token.inserted { | |
| color: #a6e22e; | |
| } | |
| .theme-dark .token.operator, | |
| .theme-dark .token.entity, | |
| .theme-dark .token.url, | |
| .theme-dark .language-css .token.string, | |
| .theme-dark .style .token.string, | |
| .theme-dark .token.variable { | |
| color: #f8f8f2; | |
| } | |
| .theme-dark .token.atrule, | |
| .theme-dark .token.attr-value, | |
| .theme-dark .token.function, | |
| .theme-dark .token.class-name { | |
| color: #e6db74; | |
| } | |
| .theme-dark .token.keyword { | |
| color: #66d9ef; | |
| } | |
| .theme-dark .token.regex, | |
| .theme-dark .token.important { | |
| color: #fd971f; | |
| } | |
| .theme-dark .token.important, | |
| .theme-dark .token.bold { | |
| font-weight: bold; | |
| } | |
| .theme-dark .token.italic { | |
| font-style: italic; | |
| } | |
| .theme-dark .token.entity { | |
| cursor: help; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| text-rendering: optimizeLegibility; | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: auto; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; | |
| line-height: 1.5em; | |
| font-size: 16px; | |
| background-color: var(--background-primary); | |
| color: var(--text-normal); | |
| } | |
| body.is-grabbing, | |
| body.is-grabbing * { | |
| cursor: -moz-grabbing !important; | |
| cursor: -webkit-grabbing !important; | |
| } | |
| .app-container { | |
| display: flex; | |
| height: 100%; | |
| width: 100%; | |
| position: relative; | |
| flex-direction: column; | |
| } | |
| .app-container.no-transition * { | |
| transition: none !important; | |
| } | |
| .app-container.is-text-garbled * { | |
| font-family: 'Flow Circular', sans-serif !important; | |
| line-height: 1.45em !important; | |
| } | |
| .external-link { | |
| background-position: center right; | |
| background-repeat: no-repeat; | |
| background-image: linear-gradient(transparent, transparent), url(public/images/fdc86034ba18de3558c8fa414a58f9e8.svg); | |
| background-size: 13px; | |
| padding-right: 16px; | |
| background-position-y: 4px; | |
| } | |
| .popover.hover-popover { | |
| position: absolute; | |
| z-index: var(--layer-popover); | |
| max-height: 300px; | |
| width: 400px; | |
| overflow: hidden; | |
| padding: 0; | |
| border-bottom: none; | |
| } | |
| .popover.hover-popover:after { | |
| content: ' '; | |
| position: absolute; | |
| width: 100%; | |
| height: 50px; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(to bottom, transparent, var(--background-primary) 80%, var(--background-primary)); | |
| } | |
| .popover.hover-popover img { | |
| max-width: 400px; | |
| height: auto; | |
| } | |
| .popover.hover-popover .markdown-embed { | |
| padding: 5px 20px 15px 20px; | |
| font-size: 0.85em; | |
| line-height: 1.4em; | |
| } | |
| .u-center-text { | |
| text-align: center; | |
| } | |
| .u-faded-text { | |
| color: var(--text-muted); | |
| } |
You can’t perform that action at this time.