-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Try CSS variable again #545
base: main
Are you sure you want to change the base?
Changes from 21 commits
00f72e0
24d7869
f3477b7
053d931
8c337ea
9d08961
12057bf
28bb43c
434f187
718b52a
531c7e2
7f099cc
fe1319f
d6e86c6
1446007
ed87f06
4d2a219
6b5db39
12f1b3f
5d2a33f
1b2ce13
a348a9e
d6c139b
047c286
f847c0e
69dfc0a
5844acf
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also for illustration only |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/* Theme defaults? */ | ||
:root { | ||
--readthedocs-font-size: 10px; | ||
--readthedocs-flyout-font-size: 30px; | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And also not needed There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We can probably create another HTML file to keep in the repository and show this as example 👍🏼 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import styleSheetFlyout from "./flyout.css"; | ||
|
||
import { CSSResult } from "lit"; | ||
|
||
// We use a native construct here as Lit's CSSResult is largely read only. | ||
export const defaultStyleSheet = new CSSStyleSheet(); | ||
|
||
/* | ||
* Specific styles based on documentation tools and themes | ||
* | ||
* Usage of `@layer` at-rule pushes this rules down a step in | ||
* precedence/priority. This allows a user `:root` rule to override these | ||
* values. | ||
**/ | ||
defaultStyleSheet.replaceSync(` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't like too much that we are writing all these CSS in a JS file. Can't we just have a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Actually, I don't really understand why you migrated from |
||
@layer defaults { | ||
:root[data-readthedocs-tool="mkdocs-material"] { | ||
--readthedocs-font-size: 0.58rem; | ||
--readthedocs-flyout-font-size: 0.58rem; | ||
} | ||
|
||
:root[data-readthedocs-tool="antora"] { | ||
--readthedocs-font-size: 0.7rem; | ||
--readthedocs-flyout-font-size: 0.7rem; | ||
} | ||
|
||
:root[data-readthedocs-tool="mdbook"] { | ||
--readthedocs-font-size: 1.3rem; | ||
--readthedocs-flyout-font-size: 1.3rem; | ||
} | ||
|
||
:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] { | ||
--readthedocs-font-size: 0.75rem; | ||
--readthedocs-flyout-font-size: 0.75rem; | ||
} | ||
|
||
:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] { | ||
--readthedocs-font-size: 0.58rem; | ||
--readthedocs-flyout-font-size: 0.58rem; | ||
} | ||
} | ||
`); | ||
|
||
const styleSheets = [styleSheetFlyout]; | ||
|
||
for (let styleSheet of styleSheets) { | ||
if (styleSheet instanceof CSSResult) { | ||
styleSheet = styleSheet.styleSheet; | ||
} | ||
for (const rule of styleSheet.cssRules) { | ||
if (rule instanceof CSSLayerBlockRule && rule.name == "defaults") { | ||
defaultStyleSheet.insertRule(rule.cssText); | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,23 @@ | ||
/* Flyout styles */ | ||
|
||
:host { | ||
/* These variables are used more than once, use a local variable so we can set | ||
* a default in this addon */ | ||
--addons-flyout-font-size: var( | ||
--readthedocs-flyout-font-size, | ||
var(--readthedocs-font-size, 0.8rem) | ||
); | ||
--addons-flyout-line-height: var(--readthedocs-flyout-line-height, 1.25em); | ||
@layer defaults { | ||
:root { | ||
--readthedocs-flyout-font-family: var(--readthedocs-font-family); | ||
--readthedocs-flyout-font-size: var(--readthedocs-font-size); | ||
Comment on lines
+7
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems we need to define these in |
||
--readthedocs-flyout-line-height: 1.25em; | ||
--readthedocs-flyout-header-font-size: 1.125em; | ||
--readthedocs-flyout-dt-font-size: 1.125em; | ||
--readthedocs-flyout-dd-font-size: 1.125em; | ||
--readthedocs-flyout-line-height: 1.25em; | ||
|
||
--readthedocs-flyout-color: rgb(128, 128, 128); | ||
--readthedocs-flyout-background-color: rgb(39, 39, 37); | ||
--readthedocs-flyout-current-version-color: #27ae60; | ||
--readthedocs-flyout-section-heading-color: rgb(128, 128, 128); | ||
--readthedocs-flyout-item-link-color: rgb(252, 252, 252); | ||
--readthedocs-flyout-divider-color: #413d3d; | ||
--readthedocs-flyout-link-color: rgb(42, 128, 185); | ||
} | ||
} | ||
|
||
.container { | ||
|
@@ -17,7 +27,7 @@ | |
height: auto; | ||
max-height: calc(100% - 100px); | ||
overflow-y: auto; | ||
line-height: var(--addons-flyout-line-height); | ||
line-height: var(--readthedocs-flyout-line-height); | ||
} | ||
|
||
.container.bottom-right { | ||
|
@@ -41,18 +51,11 @@ | |
} | ||
|
||
:host > div { | ||
font-family: var( | ||
--readthedocs-flyout-font-family, | ||
"Lato", | ||
"proxima-nova", | ||
"Helvetica Neue", | ||
"Arial", | ||
"sans-serif" | ||
); | ||
font-size: var(--addons-flyout-font-size); | ||
line-height: 1.2em; | ||
color: var(--readthedocs-flyout-color, rgb(128, 128, 128)); | ||
background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37)); | ||
font-family: var(--readthedocs-flyout-font-family); | ||
font-size: var(--readthedocs-flyout-font-size); | ||
color: var(--readthedocs-flyout-color); | ||
background-color: var(--readthedocs-flyout-background-color); | ||
line-height: var(--readthedocs-flyout-line-height, 1.2em); | ||
z-index: 3000; | ||
padding: 0 10px; | ||
overflow-y: auto; | ||
|
@@ -64,7 +67,7 @@ header { | |
gap: 1em; | ||
align-items: center; | ||
cursor: pointer; | ||
background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37)); | ||
background-color: var(--readthedocs-flyout-background-color); | ||
position: sticky; | ||
top: 0px; | ||
font-size: var(--readthedocs-flyout-header-font-size, 1.25em); | ||
|
@@ -80,7 +83,9 @@ header > img.logo { | |
} | ||
|
||
header > span { | ||
color: var(--readthedocs-flyout-current-version-color, #27ae60); | ||
color: var(--readthedocs-flyout-current-version-color); | ||
font-size: var(--readthedocs-flyout-header-font-size); | ||
margin-left: 10px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This property is new. Is this correct? |
||
/* Total height of 1 + 0.75 + 0.75 = 2.5em */ | ||
padding: 0.75em 0em; | ||
line-height: 1em; | ||
|
@@ -105,7 +110,7 @@ header > span:first-of-type { | |
|
||
header > span svg.icon { | ||
color: rgb(128, 128, 128); | ||
height: 1em; | ||
height: var(--readthedocs-flyout-header-font-size); | ||
padding-right: 0.25em; | ||
vertical-align: middle; | ||
} | ||
|
@@ -126,25 +131,19 @@ dl { | |
} | ||
|
||
dl > dt { | ||
font-size: var( | ||
--readthedocs-flyout-dt-font-size, | ||
calc(var(--addons-flyout-font-size) * 1.125) | ||
); | ||
color: var(--readthedocs-flyout-section-heading-color, rgb(128, 128, 128)); | ||
font-size: var(--readthedocs-flyout-dt-font-size); | ||
color: var(--readthedocs-flyout-section-heading-color); | ||
} | ||
|
||
dl > dd { | ||
display: inline-block; | ||
margin: 0; | ||
font-size: var( | ||
--readthedocs-flyout-dd-font-size, | ||
calc(var(--addons-flyout-font-size) * 1.125) | ||
); | ||
Comment on lines
-139
to
-142
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are missing the calculated value here. |
||
font-size: var(--readthedocs-flyout-dd-font-size); | ||
} | ||
|
||
dd a { | ||
text-decoration: none; | ||
color: var(--readthedocs-flyout-item-link-color, rgb(252, 252, 252)); | ||
color: var(--readthedocs-flyout-item-link-color); | ||
padding: 6px; | ||
display: inline-block; | ||
} | ||
|
@@ -167,10 +166,10 @@ hr { | |
padding: 0; | ||
border-top-width: 1px; | ||
border-top-style: solid; | ||
border-top-color: var(--readthedocs-flyout-divider-color, #413d3d); | ||
border-top-color: var(--readthedocs-flyout-divider-color); | ||
} | ||
|
||
small a { | ||
text-decoration: none; | ||
color: var(--readthedocs-flyout-link-color, rgb(42, 128, 185)); | ||
color: var(--readthedocs-flyout-link-color); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file is for illustration only.