diff --git a/assets/css/_html.css b/assets/css/_html.css
index 4fa3a53f0..fc70350fd 100644
--- a/assets/css/_html.css
+++ b/assets/css/_html.css
@@ -35,6 +35,22 @@
@import "makeup.css";
@import "tabset.css";
+body {
+ background-color: var(--background);
+ color: var(--textBody);
+ font-size: var(--text-md);
+ line-height: 1.6875em;
+}
+
+.swup-progress-bar {
+ height: 2px;
+ background-color: var(--progressBarColor);
+}
+
+option {
+ background-color: var(--sidebarBackground);
+}
+
body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
body.dark .content-inner img[src*="#gh-light-mode-only"] {
display: none;
diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
index 31ae57fa0..dbc1a727e 100644
--- a/assets/css/autocomplete.css
+++ b/assets/css/autocomplete.css
@@ -3,20 +3,24 @@
position: absolute;
width: calc(100% - 32px);
top: 55px;
-}
-.autocomplete .triangle {
- width: 0;
- height: 0;
- border-left: 12px solid transparent;
- border-right: 12px solid transparent;
- border-bottom: 12px solid var(--autocompleteBackground);
- position: absolute;
- top: 8px;
- left: 26px;
- transform: translateX(-50%);
- z-index: 100;
- background-color: transparent;
+ & .triangle {
+ width: 0;
+ height: 0;
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ border-bottom: 12px solid var(--autocompleteBackground);
+ position: absolute;
+ top: 8px;
+ left: 26px;
+ transform: translateX(-50%);
+ z-index: 100;
+ background-color: transparent;
+ }
+
+ &.shown {
+ display: block;
+ }
}
.autocomplete-results {
@@ -30,19 +34,21 @@
font-weight: 300;
font-size: 0.9rem;
font-style: italic;
-}
-.autocomplete-results .query {
- margin-right: auto;
-}
+ & .query {
+ margin-right: auto;
+ }
-.autocomplete-results .bold {
- color: var(--autocompleteResultsBold);
- font-weight: 400;
-}
+ & .bold {
+ color: var(--autocompleteResultsBold);
+ font-weight: 400;
+ }
-.autocomplete.shown {
- display: block;
+ @media screen and (hover: none) {
+ & .press-return {
+ display: none !important;
+ }
+ }
}
.autocomplete-container {
@@ -55,7 +61,7 @@
.autocomplete-suggestions {
background-color: var(--autocompleteBackground);
border-radius: var(--borderRadius-base);
- box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
overflow-y: auto;
max-height: 450px;
white-space: normal;
@@ -75,45 +81,38 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-}
-.autocomplete-suggestion.selected {
- background-color: var(--autocompleteSelected);
-}
-
-.autocomplete-suggestion:hover {
- background-color: var(--autocompleteHover);
-}
-
-.autocomplete-suggestion em {
- font-style: normal;
- font-weight: bold;
-}
+ &.selected {
+ background-color: var(--autocompleteSelected);
+ }
-.autocomplete-suggestion .separator {
- opacity: 0.4;
- margin: 0 2px;
-}
+ &:hover {
+ background-color: var(--autocompleteHover);
+ }
-.autocomplete-suggestion .description {
- opacity: 0.6;
-}
+ & em {
+ font-style: normal;
+ font-weight: bold;
+ }
-.autocomplete-suggestion .label {
- background-color: var(--autocompleteLabelBack);
- opacity: 0.6;
- color: var(--autocompleteLabelFont);
- padding: 4px 8px 4px 8px;
- border-radius: 4px;
- margin-left: 5px;
- text-transform: uppercase;
- font-family: var(--sansFontFamily);
- font-size: 0.7rem;
-}
+ & .separator {
+ opacity: 0.4;
+ margin: 0 2px;
+ }
+ & .description {
+ opacity: 0.6;
+ }
-@media screen and (hover: none) {
- .autocomplete-results .press-return {
- display: none !important;
+ & .label {
+ background-color: var(--autocompleteLabelBack);
+ opacity: 0.6;
+ color: var(--autocompleteLabelFont);
+ padding: 4px 8px 4px 8px;
+ border-radius: 4px;
+ margin-left: 5px;
+ text-transform: uppercase;
+ font-family: var(--sansFontFamily);
+ font-size: 0.7rem;
}
}
diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css
index e49368526..e765e2a07 100644
--- a/assets/css/content/admonition.css
+++ b/assets/css/content/admonition.css
@@ -1,129 +1,83 @@
/* See general.css for base admonition styles - they are shared with blockquote */
.content-inner section.admonition {
- border-radius: var(--borderRadius-base);
-}
+ --admonitionBackground: transparent;
+ --admonitionHeading: var(--contrast);
-.content-inner section.admonition > .admonition-title {
- color: var(--contrast);
- padding-left: 2.2rem;
- font-weight: 700;
- font-style: normal;
-}
-.content-inner section.admonition > .admonition-title::before {
- color: var(--contrast);
- position: absolute;
- left: 1rem;
- font-size: 1.8rem;
- font-family: 'remixicon';
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
+ background-color: var(--admonitionBackground);
+ border-radius: var(--borderRadius-base);
-.content-inner section.admonition {
&.warning {
- background-color: var(--warningBackground);
- & .admonition-title {
- &, &::before {
- content: var(--icon-error-warning);
- color: var(--warningHeading);
- }
- }
+ --admonitionBackground: var(--warningBackground);
+ --admonitionHeading: var(--warningHeading);
+ --admonitionPrintHeading: hsl(var(--warningHue), 90%, 40%);
+ --admonitionIcon: var(--icon-error-warning);
}
&.error {
- background-color: var(--errorBackground);
- & .admonition-title {
- &, &::before {
- content: var(--icon-error-warning);
- color: var(--errorHeading);
- }
- }
+ --admonitionBackground: var(--errorBackground);
+ --admonitionHeading: var(--errorHeading);
+ --admonitionPrintHeading: hsl(var(--errorHue), 80%, 40%);
+ --admonitionIcon: var(--icon-error-warning);
}
&.info {
- background-color: var(--infoBackground);
- & .admonition-title {
- &, &::before {
- content: var(--icon-information);
- color: var(--infoHeading);
- }
- }
+ --admonitionBackground: var(--infoBackground);
+ --admonitionHeading: var(--infoHeading);
+ --admonitionPrintHeading: hsl(var(--infoHue), 80%, 40%);
+ --admonitionIcon: var(--icon-information);
}
&.neutral {
- background-color: var(--neutralBackground);
- & .admonition-title {
- &, &::before {
- content: var(--icon-double-quotes-l);
- color: var(--neutralHeading);
- }
- }
+ --admonitionBackground: var(--neutralBackground);
+ --admonitionHeading: var(--neutralHeading);
+ --admonitionPrintHeading: hsl(var(--neutralHue), 30%, 40%);
+ --admonitionIcon: var(--icon-double-quotes-l);
}
&.tip {
- background-color: var(--tipBackground);
- & .admonition-title {
- &, &::before {
- content: var(--icon-information);
- color: var(--tipHeading);
- }
- }
+ --admonitionBackground: var(--tipBackground);
+ --admonitionHeading: var(--tipHeading);
+ --admonitionPrintHeading: hsl(var(--tipHue), 50%, 40%);
+ --admonitionIcon: var(--icon-information);
}
-}
-@media print {
- .content-inner section.admonition {
- &.warning {
- border-color: hsl(from var(--warningHeading) h s l / 15%);
- & .admonition-title {
- &, &::before {
- color: hsl(var(--warningHue), 90%, 40%);
- }
- }
- }
- &.error {
- border-color: hsl(from var(--errorHeading) h s l / 15%);
- & .admonition-title {
- &, &::before {
- color: hsl(var(--errorHue), 80%, 40%);
- }
- }
- }
- &.info {
- border-color: hsl(from var(--infoHeading) h s l / 15%);
- & .admonition-title {
- &, &::before {
- color: hsl(var(--infoHue), 80%, 40%);
- }
- }
- }
- &.neutral {
- border-color: hsl(from var(--neutralHeading) h s l / 15%);
- & .admonition-title {
- &, &::before {
- color: hsl(var(--neutralHue), 30%, 40%);
- }
- }
+ & > .admonition-title {
+ color: var(--admonitionHeading);
+ padding-left: 2.2rem;
+ font-weight: 700;
+ font-style: normal;
+
+ &::before {
+ content: var(--admonitionIcon);
+ color: var(--admonitionHeading);
+ position: absolute;
+ left: 1rem;
+ font-size: 1.8rem;
+ font-family: 'remixicon';
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
- &.tip {
- border-color: hsl(from var(--tipHeading) h s l / 15%);
- & .admonition-title {
- &, &::before {
- color: hsl(var(--tipHue), 50%, 40%);
- }
- }
+
+ & code {
+ margin: 0 0.5ch;
}
}
-}
-
-.content-inner section.admonition > .admonition-title code {
- margin: 0 0.5ch;
-}
-@media screen and (max-width: 768px) {
- .content-inner section.admonition {
+ @media screen and (max-width: 768px) {
margin-left: calc(-1 * var(--content-gutter));
margin-right: calc(-1 * var(--content-gutter));
padding-left: var(--content-gutter);
padding-right: var(--content-gutter);
border-radius: 0;
}
+
+ @media print {
+ &:is(.warning, .error, .info, .neutral, .tip) {
+ border-color: hsl(from var(--admonitionHeading) h s l / 15%);
+ }
+
+ & > .admonition-title {
+ &, &::before {
+ color: var(--admonitionPrintHeading, var(--admonitionHeading));
+ }
+ }
+ }
}
diff --git a/assets/css/content/bottom-actions.css b/assets/css/content/bottom-actions.css
index 6907588a1..e30cb4b45 100644
--- a/assets/css/content/bottom-actions.css
+++ b/assets/css/content/bottom-actions.css
@@ -3,46 +3,45 @@
justify-content: space-between;
margin-top: 7em;
gap: 12px;
-}
-.bottom-actions-item {
- flex: 1 1 0%;
-}
+ & .bottom-actions-item {
+ flex: 1 1 0%;
+ }
-.content-inner .bottom-actions .bottom-actions-button {
- display: flex;
- text-decoration: none;
- flex-direction: column;
- border-radius: var(--borderRadius-sm);
- border: 1px solid var(--bottomActionsBtnBorder);
- padding: 12px 16px;
- min-width: 150px;
- transition: var(--transition-all);
-}
+ & .bottom-actions-button {
+ display: flex;
+ text-decoration: none;
+ flex-direction: column;
+ border-radius: var(--borderRadius-sm);
+ border: 1px solid var(--bottomActionsBtnBorder);
+ padding: 12px 16px;
+ min-width: 150px;
+ transition: var(--transition-all);
-.content-inner .bottom-actions .bottom-actions-button:hover {
- border-color: var(--mainLight);
-}
-.content-inner .bottom-actions .bottom-actions-button .subheader {
- font-size: .8em;
- color: var(--textHeaders);
- white-space: nowrap;
-}
+ &:hover {
+ border-color: var(--mainLight);
+ }
-.content-inner .bottom-actions .bottom-actions-button .title {
- color: var(--bottomActionsBtnTitle);
-}
+ & .subheader {
+ font-size: 0.8em;
+ color: var(--textHeaders);
+ white-space: nowrap;
+ }
-.content-inner .bottom-actions .bottom-actions-button[rel="prev"] {
- text-align: start;
-}
+ & .title {
+ color: var(--bottomActionsBtnTitle);
+ }
-.content-inner .bottom-actions .bottom-actions-button[rel="next"] {
- text-align: end;
-}
+ &[rel="prev"] {
+ text-align: start;
+ }
+
+ &[rel="next"] {
+ text-align: end;
+ }
+ }
-@media screen and (max-width: 768px) {
- .content-inner .bottom-actions {
+ @media screen and (max-width: 768px) {
flex-direction: column-reverse;
}
}
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
index ada9f44b4..0badf9749 100644
--- a/assets/css/content/cheatsheet.css
+++ b/assets/css/content/cheatsheet.css
@@ -3,16 +3,12 @@
.page-cheatmd .content-inner {
--horizontal-space: 1.5em;
--vertical-space: 1em;
-}
-@media (max-width: 600px) {
- .page-cheatmd .content-inner {
+ @media (max-width: 600px) {
--horizontal-space: 1em;
--vertical-space: 0.75em;
}
-}
-.page-cheatmd .content-inner {
max-width: 1200px;
}
@@ -221,94 +217,98 @@
/* Columns */
.page-cheatmd .content-inner {
- & section.width-50 {
- display: block;
- width: 50%;
- margin: 0;
+ & section {
+ &.width-50 {
+ display: block;
+ width: 50%;
+ margin: 0;
- & > section > table {
- width: 100%;
+ & > section > table {
+ width: 100%;
+ }
}
- }
- & section:is(.col-2, .col-2-left, .col-3) {
- column-gap: 40px;
- }
+ &:is(.col-2, .col-2-left, .col-3) {
+ column-gap: 40px;
+ }
- & section.col-2 {
- column-count: 2;
- height: auto;
- }
+ &.col-2 {
+ column-count: 2;
+ height: auto;
+ }
- & section.col-2-left {
- display: grid;
- grid-template-columns: calc(100% / 3) auto;
+ &.col-2-left {
+ display: grid;
+ grid-template-columns: calc(100% / 3) auto;
- & > h2 {
- grid-column-end: span 2;
+ & > h2 {
+ grid-column-end: span 2;
+ }
}
- }
- & section.col-3 {
- column-count: 3;
- height: auto;
- }
+ &.col-3 {
+ column-count: 3;
+ height: auto;
+ }
- & section.list-4 > ul {
- display: flex;
- flex-wrap: wrap;
+ &.list-4 > ul {
+ display: flex;
+ flex-wrap: wrap;
- & > li {
- flex: 0 0 calc(100% / 4);
+ & > li {
+ flex: 0 0 calc(100% / 4);
+ }
}
- }
- & section.list-6 > ul {
- display: flex;
- flex-wrap: wrap;
+ &.list-6 > ul {
+ display: flex;
+ flex-wrap: wrap;
- & > li {
- flex: 0 0 calc(100% / 6);
+ & > li {
+ flex: 0 0 calc(100% / 6);
+ }
}
}
/* Layout adjustments for smaller viewports. Limited to screen as sufficient width is assumed when printing. */
- @media screen and (max-width: 1400px) {
- & section.col-3 {
- column-count: 2;
- }
+ section {
+ @media screen and (max-width: 1400px) {
+ &.col-3 {
+ column-count: 2;
+ }
- & section.col-2-left {
- display: flex;
- flex-direction: column;
+ &.col-2-left {
+ display: flex;
+ flex-direction: column;
+ }
}
- }
- @media screen and (max-width: 1200px) {
- & section:is(.col-2, .col-3) {
- display: flex;
- flex-direction: column;
- }
+ @media screen and (max-width: 1200px) {
+ &:is(.col-2, .col-3) {
+ display: flex;
+ flex-direction: column;
+ }
- & section.list-6 > ul > li {
- flex: 0 0 calc(100% / 4);
+ &.list-6 > ul > li {
+ flex: 0 0 calc(100% / 4);
+ }
}
- }
- @media screen and (max-width: 1000px) {
- & section:is(.list-4, .list-6) > ul > li {
- flex: 0 0 calc(100% / 3);
+ @media screen and (max-width: 1000px) {
+ &:is(.list-4, .list-6) > ul > li {
+ flex: 0 0 calc(100% / 3);
+ }
}
- }
- @media screen and (max-width: 600px) {
- & section:is(.list-4, .list-6) > ul > li {
- flex: 0 0 calc(100% / 2);
- }
+ @media screen and (max-width: 600px) {
+ &:is(.list-4, .list-6) > ul > li {
+ flex: 0 0 calc(100% / 2);
+ }
- & section.width-50 {
- width: 100%;
+ &.width-50 {
+ width: 100%;
+ }
}
}
}
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
index ad2ba7081..6277c7005 100644
--- a/assets/css/content/code.css
+++ b/assets/css/content/code.css
@@ -1,3 +1,5 @@
+/* Used in EPUB styles. Use selectors with good support in ebook readers for important rules. */
+
/* The Consolas font on Windows is too small compared to other ones */
@font-face {
font-family: "Consolas";
@@ -5,15 +7,17 @@
size-adjust: 110%;
}
-.content-inner.content-inner :is(a:has(code, img), pre a) {
- color: var(--link-color);
- text-shadow: none;
- text-decoration: none;
- background-image: none;
-}
+.content-inner.content-inner {
+ & :is(a:has(code, img), pre a) {
+ color: var(--link-color);
+ text-shadow: none;
+ text-decoration: none;
+ background-image: none;
-.content-inner.content-inner :is(a:has(code, img), pre a):is(:visited, :active, :focus, :hover) {
- color: var(--link-visited-color);
+ :is(:visited, :active, :focus, :hover) {
+ color: var(--link-visited-color);
+ }
+ }
}
.content-inner strong > code {
@@ -29,7 +33,7 @@
background-color: var(--codeBackground);
vertical-align: baseline;
border-radius: var(--borderRadius-sm);
- padding: .1em .2em;
+ padding: 0.1em 0.2em;
border: 1px solid var(--codeBorder);
text-transform: none;
}
@@ -39,7 +43,12 @@
word-wrap: break-word;
}
-.content-inner :is(h1, h2, h3, h4, h5, h6) code {
+.content-inner h1 code,
+.content-inner h2 code,
+.content-inner h3 code,
+.content-inner h4 code,
+.content-inner h5 code,
+.content-inner h6 code {
font-size: 0.875em;
}
@@ -83,8 +92,8 @@
}
@media screen and (max-width: 768px) {
- .content-inner > pre:has(code),
- .content-inner section > pre:has(code) {
+ .content-inner > pre,
+ .content-inner section > pre {
margin-left: calc(-1 * var(--content-gutter));
margin-right: calc(-1 * var(--content-gutter));
}
diff --git a/assets/css/content/epub-admonition.css b/assets/css/content/epub-admonition.css
index f83102ef7..ab7070e9a 100755
--- a/assets/css/content/epub-admonition.css
+++ b/assets/css/content/epub-admonition.css
@@ -1,3 +1,5 @@
+/* Used in EPUB styles. Use selectors with good support in ebook readers for important rules. */
+
.content-inner section.admonition {
border-left: solid 4px;
color: var(--black);
@@ -36,7 +38,7 @@
.content-inner section.admonition > .admonition-title {
font-weight: bold;
- margin: 0px 10px 5px 0px;
+ margin: 0 10px 5px 0;
font-style: normal;
font-weight: 700;
}
diff --git a/assets/css/content/footer.css b/assets/css/content/footer.css
index 392bd0f14..b61fd4250 100644
--- a/assets/css/content/footer.css
+++ b/assets/css/content/footer.css
@@ -2,22 +2,18 @@
margin: 4em auto 1em;
text-align: center;
font-size: var(--text-sm);
-}
-.content-inner .footer .line {
- display: inline-block;
-}
+ & .line {
+ display: inline-block;
-.content-inner .footer .line {
- display: inline-block;
-}
-
-.content-inner .footer .line a, .content-inner .footer .line button {
- padding: 0 4px;
-}
+ & :is(a, button) {
+ padding: 0 4px;
+ }
+ }
-.content-inner .footer button {
- background-color: transparent;
- border: 0;
- cursor: pointer;
+ & button {
+ background-color: transparent;
+ border: 0;
+ cursor: pointer;
+ }
}
diff --git a/assets/css/content/functions.css b/assets/css/content/functions.css
index 0ee71f7b9..0df97d64c 100644
--- a/assets/css/content/functions.css
+++ b/assets/css/content/functions.css
@@ -1,3 +1,5 @@
+/* Used in EPUB styles. Use selectors with good support in ebook readers for important rules. */
+
@keyframes blink-background {
0%, 100% {
background-color: var(--textDetailBackground);
diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index 402363539..78014712d 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -4,74 +4,77 @@
position: relative;
background-color: var(--background);
color: var(--textBody);
-}
-.content-inner .heading-with-actions {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-end;
- align-items: center;
- gap: 6px;
-}
-.content-inner .heading-with-actions > *:not(h1) {
- flex-shrink: 0;
-}
-.content-inner .heading-with-actions h1 {
- flex-grow: 1;
- justify-self: flex-start;
- max-width: 100%;
- margin: 0;
- overflow-wrap: break-word;
-}
-.content-inner .heading-with-actions .icon-action {
- width: 20px;
- height: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- font-weight: normal;
- margin-left: 3px;
-}
-.content-inner .heading-with-actions.top-heading .icon-action {
- font-size: 1.2rem;
-}
-/* When content is wide enough, ensure action icon is to the right of, not below, heading */
-@container content (width > 600px) {
- .content-inner .heading-with-actions.top-heading {
- flex-wrap: nowrap;
- align-items: flex-start;
+ & .heading-with-actions {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 6px;
+
+ & > *:not(h1) {
+ flex-shrink: 0;
+ }
& h1 {
- padding-right: 32px; /* ensures space between heading text and icon(s) */
+ flex-grow: 1;
+ justify-self: flex-start;
+ max-width: 100%;
+ margin: 0;
+ overflow-wrap: break-word;
}
& .icon-action {
- padding-top: 1.7rem; /* vertically align with x-height of first line of heading */
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: normal;
+ margin-left: 3px;
+ }
+
+ &.top-heading .icon-action {
+ font-size: 1.2rem;
}
}
-}
-.content-inner .top-heading {
- padding-top: 1rem;
-}
+ /* When content is wide enough, ensure action icon is to the right of, not below, heading */
+ @container content (width > 600px) {
+ & .heading-with-actions.top-heading {
+ flex-wrap: nowrap;
+ align-items: flex-start;
-.content-inner :is(h1, h2, h3, h4, h5, h6) {
- font-family: var(--sansFontFamily);
- font-weight: 700;
- line-height: 1.5em;
- word-wrap: break-word;
- color: var(--textHeaders);
-}
+ & h1 {
+ padding-right: 32px; /* ensures space between heading text and icon(s) */
+ }
-.content-inner div.group-description {
- margin: 0 0 3em;
-}
+ & .icon-action {
+ padding-top: 1.7rem; /* vertically align with x-height of first line of heading */
+ }
+ }
+ }
-.content-inner h1 small {
- font-weight: 400;
-}
+ & .top-heading {
+ padding-top: 1rem;
+ }
+
+ & :is(h1, h2, h3, h4, h5, h6) {
+ font-family: var(--sansFontFamily);
+ font-weight: 700;
+ line-height: 1.5em;
+ word-wrap: break-word;
+ color: var(--textHeaders);
+ }
+
+ & div.group-description {
+ margin: 0 0 3em;
+ }
+
+ & h1 small {
+ font-weight: 400;
+ }
-.content-inner {
& h1 {
font-size: 1.5rem;
margin-top: 1.75em;
@@ -102,9 +105,8 @@
& h6 {
font-size: 1rem;
}
-}
-@container content (width > 600px) {
- .content-inner {
+
+ @container content (width > 600px) {
& h1 {
font-size: 2rem;
}
@@ -117,51 +119,51 @@
font-size: 1.45rem;
}
}
-}
-.content-inner li + li {
- margin-top: 0.25em;
-}
+ & li + li {
+ margin-top: 0.25em;
+ }
-.content-inner :is(a, .a-main) {
- color: var(--link-color);
- text-decoration: underline;
- text-decoration-skip-ink: auto;
-}
-.content-inner :is(a:visited, .a-main:visited) {
- color: var(--link-visited-color);
-}
+ & :is(a, .a-main) {
+ color: var(--link-color);
+ text-decoration: underline;
+ text-decoration-skip-ink: auto;
+ }
+ & :is(a:visited, .a-main:visited) {
+ color: var(--link-visited-color);
+ }
-.content-inner .icon-action {
- color: var(--iconAction);
- text-decoration: none;
- border: none;
- transition: var(--transition-colors);
- background-color: transparent;
- cursor: pointer;
-}
-.content-inner .icon-action:hover {
- color: var(--iconActionHover);
-}
-.content-inner .icon-action:visited {
- color: var(--iconAction);
-}
+ & .icon-action {
+ color: var(--iconAction);
+ text-decoration: none;
+ border: none;
+ transition: var(--transition-colors);
+ background-color: transparent;
+ cursor: pointer;
-.content-inner .livebook-badge-container {
- display: flex;
-}
+ &:hover {
+ color: var(--iconActionHover);
+ }
-.content-inner a.livebook-badge {
- display: inline-flex;
-}
+ &:visited {
+ color: var(--iconAction);
+ }
+ }
-.content-inner .note {
- color: var(--iconAction);
- font-size: var(--text-xs);
- font-weight: normal;
-}
+ & .livebook-badge-container {
+ display: flex;
+ }
+
+ & a.livebook-badge {
+ display: inline-flex;
+ }
+
+ & .note {
+ color: var(--iconAction);
+ font-size: var(--text-xs);
+ font-weight: normal;
+ }
-.content-inner {
& :is(blockquote, section.admonition) {
position: relative;
margin: 1.5625em 0;
@@ -206,119 +208,117 @@
border-left: 3px solid var(--blockquoteBorder);
background-color: var(--blockquoteBackground);
}
-}
-@media print {
- .content-inner :is(blockquote, section.admonition) {
- border: 2px solid hsl(from var(--textBody) h s l / 15%);
+ @media print {
+ & :is(blockquote, section.admonition) {
+ border: 2px solid hsl(from var(--textBody) h s l / 15%);
- & :is(code, pre code) {
- border-color: var(--gray400);
- }
+ & :is(code, pre code) {
+ border-color: var(--gray400);
+ }
- & pre code.makeup {
- white-space: break-spaces;
- break-inside: avoid;
+ & pre code.makeup {
+ white-space: break-spaces;
+ break-inside: avoid;
+ }
}
}
-}
-
-.content-inner table {
- margin: 2em 0;
- border-collapse: collapse;
- display: block;
- overflow: auto;
-}
-.content-inner th {
- text-align: left;
- font-family: var(--sansFontFamily);
- font-weight: 700;
- padding-bottom: 0.5em;
- white-space: nowrap;
-}
+ & table {
+ margin: 2em 0;
+ border-collapse: collapse;
+ display: block;
+ overflow: auto;
+ }
-.content-inner thead tr {
- border-bottom: 1px solid var(--tableHeadBorder);
-}
+ & th {
+ text-align: left;
+ font-family: var(--sansFontFamily);
+ font-weight: 700;
+ padding-bottom: 0.5em;
+ white-space: nowrap;
+ }
-.content-inner tbody tr {
- border-bottom: 1px solid var(--tableBodyBorder);
-}
+ & thead tr {
+ border-bottom: 1px solid var(--tableHeadBorder);
+ }
-.content-inner tbody tr:last-child {
- border-bottom: none;
-}
+ & tbody tr {
+ border-bottom: 1px solid var(--tableBodyBorder);
-.content-inner tr {
- vertical-align: bottom;
- height: 2.5em;
-}
+ &:last-child {
+ border-bottom: none;
+ }
+ }
-.content-inner :is(td, th) {
- padding: 0.25em;
- padding-left: 1em;
- line-height: 2em;
- vertical-align: top;
-}
+ & tr {
+ vertical-align: bottom;
+ height: 2.5em;
+ }
-.content-inner .section-heading {
- --icon-size: 16px;
- --icon-spacing: 5px;
- display: grid;
- grid-template: 1fr / 1fr;
-}
-@media screen and (max-width: 768px) {
- .content-inner .section-heading {
- --icon-spacing: 2px;
+ & :is(td, th) {
+ padding: 0.25em;
+ padding-left: 1em;
+ line-height: 2em;
+ vertical-align: top;
}
-}
-.content-inner .section-heading > :is(.hover-link, .text) {
- grid-row: 1;
- grid-column: 1;
-}
+ & .section-heading {
+ --icon-size: 16px;
+ --icon-spacing: 5px;
-.content-inner .section-heading .hover-link {
- text-decoration: none;
-}
+ @media screen and (max-width: 768px) {
+ --icon-spacing: 2px;
+ }
-.content-inner .section-heading i {
- font-size: var(--icon-size);
- color: var(--mainLight);
- top: -2px;
- margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
- padding-right: var(--icon-spacing);
- position: relative;
- opacity: 0;
-}
+ display: grid;
+ grid-template: 1fr / 1fr;
-.content-inner :is(blockquote, section.admonition) .section-heading i {
- display: none;
-}
+ & > :is(.hover-link, .text) {
+ grid-row: 1;
+ grid-column: 1;
+ }
-.content-inner .section-heading:is(:hover, :focus, :target) i {
- opacity: 1;
-}
+ & .hover-link {
+ text-decoration: none;
+ }
-.content-inner .app-vsn {
- display: none !important;
- font-size: 0.6em;
- line-height: 1.5em;
-}
+ & i {
+ font-size: var(--icon-size);
+ color: var(--mainLight);
+ top: -2px;
+ margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
+ padding-right: var(--icon-spacing);
+ position: relative;
+ opacity: 0;
+ }
-@media screen and (max-width: 768px) {
- .content-inner .app-vsn {
- display: block !important;
+ &:is(:hover, :focus, :target) i {
+ opacity: 1;
+ }
}
-}
-.content-inner img {
- max-width: 100%;
-}
+ & :is(blockquote, section.admonition) .section-heading i {
+ display: none;
+ }
+
+ & .app-vsn {
+ display: none !important;
+ font-size: 0.6em;
+ line-height: 1.5em;
-@media screen and (max-width: 768px) {
- .content-inner :is(ol, ul) {
- padding-left: calc(1.5 * var(--content-gutter));
+ @media screen and (max-width: 768px) {
+ display: block !important;
+ }
+ }
+
+ & img {
+ max-width: 100%;
+ }
+
+ @media screen and (max-width: 768px) {
+ & :is(ol, ul) {
+ padding-left: calc(1.5 * var(--content-gutter));
+ }
}
}
diff --git a/assets/css/content/summary.css b/assets/css/content/summary.css
index e59f2d73e..f527481f6 100644
--- a/assets/css/content/summary.css
+++ b/assets/css/content/summary.css
@@ -1,32 +1,36 @@
/* Summary section subheading (e.g., Types) */
-.content-inner .summary h3 a {
- text-decoration: none;
- border: none;
- color: var(--textHeaders) !important;
-}
+.content-inner .summary {
+ & h3 a {
+ text-decoration: none;
+ border: none;
+ color: var(--textHeaders) !important;
+ }
-.content-inner .summary span.deprecated {
- color: var(--darkDeprecated);
- font-weight: normal;
-}
+ & span.deprecated {
+ color: var(--darkDeprecated);
+ font-weight: normal;
+ }
-.content-inner .summary .summary-row .summary-signature {
- font-family: var(--monoFontFamily);
- font-size: 13px;
- font-weight: 700;
-}
+ & .summary-row {
+ & .summary-signature {
+ font-family: var(--monoFontFamily);
+ font-size: 13px;
+ font-weight: 700;
-.content-inner .summary .summary-row .summary-signature a {
- text-decoration: none;
- border: none;
-}
+ & a {
+ text-decoration: none;
+ border: none;
+ }
+ }
-.content-inner .summary .summary-row .summary-synopsis {
- padding: 0 1.2em;
- margin: 0 0 0.5em;
-}
+ & .summary-synopsis {
+ padding: 0 1.2em;
+ margin: 0 0 0.5em;
-.content-inner .summary .summary-row .summary-synopsis p {
- margin: 0;
- padding: 0;
+ & p {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
}
diff --git a/assets/css/copy-button.css b/assets/css/copy-button.css
index 776dedf62..42d87f52b 100644
--- a/assets/css/copy-button.css
+++ b/assets/css/copy-button.css
@@ -2,11 +2,6 @@ pre {
position: relative;
}
-pre:hover .copy-button,
-pre .copy-button:focus {
- opacity: 1;
-}
-
.copy-button {
display: flex;
opacity: 0;
@@ -24,35 +19,33 @@ pre .copy-button:focus {
line-height: 24px;
color: currentColor;
- & svg[aria-live="polite"] {
- display: none;
- }
-}
+ & svg {
+ opacity: 0.5;
+ transition: var(--transition-all);
+ width: 20px;
-.copy-button svg {
- opacity: 0.5;
- transition: var(--transition-all);
-}
+ &[aria-live="polite"] {
+ display: none;
+ }
+ }
-pre .copy-button:hover svg,
-pre .copy-button:focus-visible svg {
- opacity: 1;
-}
+ pre:hover &,
+ &:focus,
+ &.clicked,
+ &:is(:hover, :focus-visible) svg {
+ opacity: 1;
+ }
-.copy-button svg {
- width: 20px;
-}
+ &.clicked {
+ color: var(--success);
-.copy-button.clicked {
- opacity: 1;
- color: var(--success);
+ & svg {
+ display: none;
+ color: currentColor;
- & svg[aria-live="polite"] {
- display: block;
+ &[aria-live="polite"] {
+ display: block;
+ }
+ }
}
}
-
-.copy-button.clicked svg {
- display: none;
- color: currentColor;
-}
diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css
index f9db03122..6ffba6a27 100644
--- a/assets/css/custom-props/common.css
+++ b/assets/css/custom-props/common.css
@@ -88,7 +88,3 @@
--content-gutter: 20px;
}
}
-
-option {
- background-color: var(--sidebarBackground);
-}
diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
index baf5330c7..c8e4a71a7 100644
--- a/assets/css/custom-props/theme-dark.css
+++ b/assets/css/custom-props/theme-dark.css
@@ -82,7 +82,7 @@ body.dark {
--searchBarBorder: var(--gray500);
--searchAccentMain: var(--gray300);
--searchSearch: var(--gray900);
- --autocompleteBorder: rgba(28,42,60,.75);
+ --autocompleteBorder: rgba(28,42,60,0.75);
--autocompletePreview: var(--gray750);
--autocompleteSelected: var(--gray750);
--autocompleteHover: var(--gray700);
diff --git a/assets/css/focus.css b/assets/css/focus.css
index 4c304f0c0..6d58f5efc 100644
--- a/assets/css/focus.css
+++ b/assets/css/focus.css
@@ -39,3 +39,8 @@ input[type="week"],
textarea {
outline: 0;
}
+
+/* swup.js adds tabindex=-1 on Chrome, which then adds an outline when clicked */
+body {
+ outline: none !important;
+}
diff --git a/assets/css/icons.css b/assets/css/icons.css
index 114ffb98a..8ca1e02e2 100644
--- a/assets/css/icons.css
+++ b/assets/css/icons.css
@@ -38,7 +38,7 @@
--icon-markdown-line: "\ef1e";
}
-.ri-lg { font-size: 1.3333em; line-height: .75em; vertical-align: -.0667em; }
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -0.0667em; }
.ri-settings-3-line:before { content: var(--icon-settings-3-line); }
.ri-add-line:before { content: var(--icon-add); }
diff --git a/assets/css/keyboard-shortcuts.css b/assets/css/keyboard-shortcuts.css
index 59263abc9..d8df039b6 100644
--- a/assets/css/keyboard-shortcuts.css
+++ b/assets/css/keyboard-shortcuts.css
@@ -1,38 +1,37 @@
-#keyboard-shortcuts-content dl.shortcut-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 0;
- padding: 6px 0 8px;
- border-bottom: 1px solid var(--settingsSectionBorder);
-}
-
-#keyboard-shortcuts-content dl.shortcut-row:last-of-type {
- border-bottom-style: none;
-}
+#keyboard-shortcuts-content {
+ & dl.shortcut-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0;
+ padding: 6px 0 8px;
+ border-bottom: 1px solid var(--settingsSectionBorder);
-#keyboard-shortcuts-content dl.shortcut-row:first-child {
- padding-top: 0;
-}
+ &:last-of-type {
+ border-bottom-style: none;
+ }
-#keyboard-shortcuts-content :is(.shortcut-keys, .shortcut-description) {
- display: inline-block;
-}
+ &:first-child {
+ padding-top: 0;
+ }
+ }
-#keyboard-shortcuts-content kbd > kbd {
- background-color: var(--settingsInputBorder);
- color: var(--contrast);
- border-radius: var(--borderRadius-sm);
- font-family: inherit;
- font-weight: bold;
- display: inline-block;
- line-height: 1;
- padding: 4px 7px 6px 7px;
- min-width: 26px;
- text-align: center;
- font-size: var(--text-sm);
-}
+ & :is(.shortcut-keys, .shortcut-description) {
+ display: inline-block;
+ margin: 0;
+ }
-#keyboard-shortcuts-content :is(.shortcut-keys, .shortcut-description) {
- margin: 0;
+ & kbd > kbd {
+ background-color: var(--settingsInputBorder);
+ color: var(--contrast);
+ border-radius: var(--borderRadius-sm);
+ font-family: inherit;
+ font-weight: bold;
+ display: inline-block;
+ line-height: 1;
+ padding: 4px 7px 6px 7px;
+ min-width: 26px;
+ text-align: center;
+ font-size: var(--text-sm);
+ }
}
diff --git a/assets/css/layout.css b/assets/css/layout.css
index de51b1ced..77493ede2 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -9,13 +9,6 @@ body {
--sidebarWidth: 300px;
--sidebarMinWidth: 300px;
--sidebarTransitionDuration: 0.3s;
- background-color: var(--background);
- color: var(--textBody);
- font-size: var(--text-md);
- line-height: 1.6875em;
- /* swup.js adds tabindex=-1 on Chrome,
- which then adds an outline when clicked */
- outline: none !important;
}
*,
@@ -29,7 +22,7 @@ body {
height: 100%;
}
-/* Sidebar is closed by default and opened with body.sidebar-opened. */
+/* Sidebar is closed by default and opened with body.sidebar-opened */
.sidebar {
display: none;
flex-direction: column;
@@ -59,42 +52,37 @@ body {
width: 100%;
height: 100%;
position: absolute;
-}
-
-.content .content-inner {
- container: content / inline-size;
- max-width: var(--content-width);
- min-height: 100%;
- margin: 0 auto;
- padding: 0 var(--content-gutter) 10px;
-}
-.content-inner:focus {
- outline: none;
+ & .content-inner {
+ container: content / inline-size;
+ max-width: var(--content-width);
+ min-height: 100%;
+ margin: 0 auto;
+ padding: 0 var(--content-gutter) 10px;
+ }
}
-.sidebar-transition .sidebar,
-.sidebar-transition .sidebar-button,
-.sidebar-transition .content {
+.sidebar-transition :is(.sidebar, .sidebar-button, .content) {
transition: all var(--sidebarTransitionDuration) ease-in-out allow-discrete;
}
-.sidebar-open .sidebar,
-.sidebar-transition .sidebar {
+:is(.sidebar-open, .sidebar-transition) .sidebar {
display: flex;
}
-.sidebar-open .sidebar {
- left: 0;
-}
+.sidebar-open {
+ & .sidebar {
+ left: 0;
+ }
-.sidebar-open .sidebar-button {
- transform: translateX(calc(var(--sidebarWidth) - 100%));
-}
+ & .sidebar-button {
+ transform: translateX(calc(var(--sidebarWidth) - 100%));
+ }
-.sidebar-open .content {
- width: calc(100% - var(--sidebarWidth));
- left: var(--sidebarWidth);
+ & .content {
+ width: calc(100% - var(--sidebarWidth));
+ left: var(--sidebarWidth);
+ }
}
@media screen and (max-width: 768px) {
@@ -111,8 +99,3 @@ body {
position: absolute;
}
}
-
-.swup-progress-bar {
- height: 2px;
- background-color: var(--progressBarColor);
-}
diff --git a/assets/css/makeup.css b/assets/css/makeup.css
index 74f000a2e..8772824d1 100644
--- a/assets/css/makeup.css
+++ b/assets/css/makeup.css
@@ -1,3 +1,5 @@
+/* Used in EPUB styles. Use selectors with good support in ebook readers for important rules. */
+
code.makeup .unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
diff --git a/assets/css/modal.css b/assets/css/modal.css
index da27b970b..6f5480f86 100644
--- a/assets/css/modal.css
+++ b/assets/css/modal.css
@@ -8,79 +8,80 @@
}
.modal {
- animation-duration: .15s;
+ animation-duration: 0.15s;
animation-name: keyboard-shortcuts-show;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
display: none;
- background-color: rgba(0, 0, 0, .75);
+ background-color: rgba(0, 0, 0, 0.75);
position: fixed;
inset: 0;
z-index: 300;
-}
-.modal.shown {
- display: block;
-}
+ &.shown {
+ display: block;
+ }
-.modal .modal-contents {
- margin: 75px auto 0 auto;
- max-width: 500px;
- background-color: var(--modalBackground);
- border-radius: var(--borderRadius-sm);
- box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
- padding: 25px 35px 35px;
-}
+ & .modal-contents {
+ margin: 75px auto 0 auto;
+ max-width: 500px;
+ background-color: var(--modalBackground);
+ border-radius: var(--borderRadius-sm);
+ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+ padding: 25px 35px 35px;
-@media screen and (max-width: 768px) {
- .modal .modal-contents {
- padding: 20px;
+ @media screen and (max-width: 768px) {
+ padding: 20px;
+ }
}
-}
-.modal .modal-header {
- display: flex;
- align-items: start;
-}
+ & .modal-header {
+ display: flex;
+ align-items: start;
+ }
-.modal .modal-title {
- display: inline-block;
- flex-grow: 1;
- font-size: 1.2rem;
- font-weight: bold;
- margin-bottom: 20px;
-}
+ & .modal-title {
+ display: inline-block;
+ flex-grow: 1;
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-bottom: 20px;
-.modal .modal-title button {
- border: none;
- background-color: transparent;
- color: var(--textHeaders);
- font-weight: bold;
- margin-right: 30px;
- padding-left: 0;
- text-align: left;
- transition: var(--transition-colors);
-}
-.modal .modal-title button:hover {
- color: var(--main);
- cursor: pointer;
-}
-.modal .modal-title button.active {
- color: var(--main);
-}
+ & button {
+ border: none;
+ background-color: transparent;
+ color: var(--textHeaders);
+ font-weight: bold;
+ margin-right: 30px;
+ padding-left: 0;
+ text-align: left;
+ transition: var(--transition-colors);
-.modal .modal-close {
- cursor: pointer;
- display: block;
- font-size: 1.5rem;
- margin: -8px -8px 0 0;
- padding: 8px;
- opacity: .7;
- background-color: transparent;
- color: var(--textHeaders);
- border: none;
- transition: var(--transition-opacity);
-}
-.modal .modal-close:hover {
- opacity: 1;
+ &:hover,
+ &.active {
+ color: var(--main);
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+
+ & .modal-close {
+ cursor: pointer;
+ display: block;
+ font-size: 1.5rem;
+ margin: -8px -8px 0 0;
+ padding: 8px;
+ opacity: 0.7;
+ background-color: transparent;
+ color: var(--textHeaders);
+ border: none;
+ transition: var(--transition-opacity);
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
diff --git a/assets/css/print-cheatsheet.css b/assets/css/print-cheatsheet.css
index 77d633be6..0b282dd6a 100644
--- a/assets/css/print-cheatsheet.css
+++ b/assets/css/print-cheatsheet.css
@@ -6,21 +6,23 @@
max-width: 100%;
width: 100%;
padding: 0;
- font-size: .7em;
+ font-size: 0.7em;
- & section:is(.col-2, .col-2-left, .col-3) {
- column-gap: 30px;
- }
+ & section {
+ &:is(.col-2, .col-2-left, .col-3) {
+ column-gap: 30px;
+ }
- /* column-count and grid display required to be set again within @print media query to take effect when actually printing */
- & section.col-2 {
- column-count: 2;
- }
- & section.col-2-left {
- display: grid;
- }
- & section.col-3 {
- column-count: 3;
+ /* column-count and grid display required to be set again within @print media query to take effect when actually printing */
+ &.col-2 {
+ column-count: 2;
+ }
+ &.col-2-left {
+ display: grid;
+ }
+ &.col-3 {
+ column-count: 3;
+ }
}
}
@@ -39,7 +41,7 @@
& h1 {
margin-top: 0;
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
}
& h2.section-heading {
@@ -68,7 +70,7 @@
}
& h4 {
- padding: .5em 0;
+ padding: 0.5em 0;
border: none;
font-weight: bold;
color: black;
@@ -138,5 +140,4 @@
}
}
}
-
}
diff --git a/assets/css/print.css b/assets/css/print.css
index 305f2bd60..0f67257a3 100644
--- a/assets/css/print.css
+++ b/assets/css/print.css
@@ -15,7 +15,7 @@
.content {
padding-left: 0;
overflow: visible;
- left: 0px;
+ left: 0;
width: 100%;
}
@@ -29,31 +29,27 @@
.content-inner {
padding: 0;
- }
- .content-inner .section-heading a.hover-link {
- display: none;
- }
+ & .section-heading a.hover-link {
+ display: none;
+ }
- .content-inner button.icon-action {
- display: none;
- }
+ & :is(button, a).icon-action {
+ display: none;
+ }
- .content-inner a.icon-action {
- display: none;
- }
+ & .bottom-actions {
+ display: none;
+ }
- .content-inner .bottom-actions {
- display: none;
+ & pre code.makeup {
+ white-space: break-spaces;
+ break-inside: avoid;
+ }
}
/* Hide On Hex.pm text but keep Built Using ExDoc */
.footer p:first-of-type {
display: none;
}
-
- .content-inner pre code.makeup {
- white-space: break-spaces;
- break-inside: avoid;
- }
}
diff --git a/assets/css/quick-switch.css b/assets/css/quick-switch.css
index 267d02499..f51b07c4d 100644
--- a/assets/css/quick-switch.css
+++ b/assets/css/quick-switch.css
@@ -1,47 +1,47 @@
#quick-switch-modal-body {
width: 100%;
position: relative;
-}
-#quick-switch-modal-body .ri-search-2-line {
- position: absolute;
- left: 0;
- top: 0;
- padding: 4px 10px;
- color: var(--quickSwitchContour);
- font-weight: bold;
-}
+ & .ri-search-2-line {
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 4px 10px;
+ color: var(--quickSwitchContour);
+ font-weight: bold;
+ }
-#quick-switch-modal-body #quick-switch-input {
- width: 100%;
- padding: 8px 6px 8px 38px;
- border: none;
- color: var(--quickSwitchInput);
- background-color: transparent;
- border-bottom: 1px solid var(--quickSwitchContour);
- box-sizing: border-box;
- transition: all .12s ease-out;
-}
+ & #quick-switch-input {
+ width: 100%;
+ padding: 8px 6px 8px 38px;
+ border: none;
+ color: var(--quickSwitchInput);
+ background-color: transparent;
+ border-bottom: 1px solid var(--quickSwitchContour);
+ box-sizing: border-box;
+ transition: all 0.12s ease-out;
+ }
-#quick-switch-modal-body #quick-switch-results {
- margin: 0;
-}
+ & #quick-switch-results {
+ margin: 0;
+ }
-#quick-switch-modal-body .quick-switch-result {
- padding: 2px 5px;
- border-bottom: 1px dotted var(--quickSwitchContour);
- transition: all .12s ease-out;
-}
+ & .quick-switch-result {
+ padding: 2px 5px;
+ border-bottom: 1px dotted var(--quickSwitchContour);
+ transition: all 0.12s ease-out;
-#quick-switch-modal-body .quick-switch-result:last-child {
- border-bottom: none;
-}
+ &:last-child {
+ border-bottom: none;
+ }
-#quick-switch-modal-body .quick-switch-result:hover {
- cursor: pointer;
-}
+ &:hover {
+ cursor: pointer;
+ }
-#quick-switch-modal-body .quick-switch-result:is(:hover, .selected) {
- border-left: 4px solid var(--main);
- background-color: var(--codeBackground);
+ &:is(:hover, .selected) {
+ border-left: 4px solid var(--main);
+ background-color: var(--codeBackground);
+ }
+ }
}
diff --git a/assets/css/screen-reader.css b/assets/css/screen-reader.css
index c865284c4..78491607a 100644
--- a/assets/css/screen-reader.css
+++ b/assets/css/screen-reader.css
@@ -1,3 +1,5 @@
+/* Used in EPUB styles. Use selectors with good support in ebook readers for important rules. */
+
.sr-only {
position: absolute;
width: 1px;
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index 2596bb6f9..b03326698 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -1,12 +1,3 @@
-.top-search {
- background-color: var(--background);
- top: 0;
- z-index: 99;
- position: relative;
- width: 100%;
- padding: 10px 0;
-}
-
.search-settings {
display: flex;
column-gap: 12px;
@@ -23,186 +14,200 @@
width: 100%;
}
-.top-search .search-bar .search-input {
- background-color: var(--searchSearch);
- border: 1px solid transparent;
- border-radius: var(--borderRadius-base);
- color: var(--searchAccentMain);
+.top-search {
+ background-color: var(--background);
+ top: 0;
+ z-index: 99;
position: relative;
- height: 38px;
- padding: 8px 40px 8px 12px;
width: 100%;
- transition: var(--transition-all);
-}
-
-.top-search .search-bar .search-input::placeholder {
- color: var(--searchAccentMain);
- opacity: 0.5;
-}
-
-.top-search .search-bar .search-input:focus {
- border: 1px solid var(--searchBarFocusColor);
- border-radius: calc(var(--borderRadius-base) - 1px);
- position: relative;
-}
-
-.top-search .search-bar .search-label {
- position: relative;
-}
-
-.top-search .search-bar .search-input-wrapper {
- position: relative;
- display: flex;
- align-items: center;
-}
-
-.top-search .search-settings .engine-selector {
- position: relative;
-}
-
-.top-search .search-settings .engine-selector[data-multiple="false"] {
- display: none;
-}
-
-.top-search .search-settings .engine-selector[data-multiple="false"] .engine-button {
- cursor: default;
-}
-
-.top-search .search-settings .engine-selector[data-multiple="false"] .engine-button .ri-arrow-down-s-line {
- display: none;
-}
-
-.top-search .search-settings .engine-button {
- display: flex;
- align-items: center;
- gap: 6px;
- background-color: var(--autocompleteHover);
- border: none;
- color: var(--searchAccentMain);
- cursor: pointer;
- font-size: var(--text-sm);
- padding: 8px 12px;
- border-radius: var(--borderRadius-base);
- transition: var(--transition-all);
- height: 40px;
-}
-
-.top-search .search-settings .engine-button:hover {
- background-color: var(--autocompleteSelected);
-}
-
-.top-search .search-settings .engine-button[aria-expanded="true"] {
- background-color: var(--autocompleteSelected);
-}
-
-.top-search .search-settings .engine-name {
- font-size: var(--text-sm);
- white-space: nowrap;
-}
-
-.top-search .search-settings .engine-dropdown {
- position: absolute;
- top: calc(100% + 10px);
- right: 0;
- min-width: 200px;
- max-width: 50vh;
- width: max-content;
- background-color: var(--autocompleteBackground);
- border-radius: var(--borderRadius-base);
- box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
- z-index: 200;
-}
-
-.top-search .search-settings .engine-dropdown[hidden] {
- display: none;
-}
-
-.top-search .search-settings .engine-option {
- display: block;
- width: 100%;
- text-align: left;
- background-color: transparent;
- border: 0;
- color: var(--textHeaders);
- cursor: pointer;
- padding: 10px 12px;
- transition: var(--transition-colors);
-}
-
-.top-search .search-settings .engine-option:hover {
- background-color: var(--autocompleteHover);
-}
-
-.top-search .search-settings .engine-option:focus {
- border-left: 2px solid var(--main);
- padding-left: 10px;
- background-color: var(--autocompleteHover);
- outline: none;
-}
-
-.top-search .search-settings .engine-option[aria-checked="true"] {
- background-color: var(--autocompleteSelected);
-}
-
-.top-search .search-settings .engine-option .name {
- display: block;
- font-size: var(--text-sm);
- font-weight: 500;
- margin-bottom: 2px;
-}
-
-.top-search .search-settings .engine-option .help {
- display: block;
- font-size: var(--text-xs);
- opacity: 0.7;
-}
-
-.top-search .search-bar .search-close-button {
- font-size: var(--text-md);
- color: var(--searchAccentMain);
- background-color: transparent;
- border: none;
- cursor: pointer;
- margin: 0;
- opacity: 0.5;
- padding: 5px;
- transform: scaleY(0);
- transition: var(--transition-all);
- display: flex;
- align-items: center;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%) scaleY(0);
-}
-
-.top-search .search-bar .search-close-button:hover {
- opacity: 0.7;
-}
-
-.top-search .search-settings button.icon-settings {
- display: flex;
- align-items: center;
- justify-content: flex-end;
-}
+ padding: 10px 0;
-.top-search .search-settings .icon-settings {
- font-size: var(--text-xl);
- float: right;
- color: var(--iconAction);
- text-decoration: none;
- border: none;
- transition: color 0.3s ease-in-out;
- background-color: transparent;
- cursor: pointer;
- padding: 0;
-}
+ & .search-bar {
+ & .search-input {
+ background-color: var(--searchSearch);
+ border: 1px solid transparent;
+ border-radius: var(--borderRadius-base);
+ color: var(--searchAccentMain);
+ position: relative;
+ height: 38px;
+ padding: 8px 40px 8px 12px;
+ width: 100%;
+ transition: var(--transition-all);
+
+ &::placeholder {
+ color: var(--searchAccentMain);
+ opacity: 0.5;
+ }
+
+ &:focus {
+ border: 1px solid var(--searchBarFocusColor);
+ border-radius: calc(var(--borderRadius-base) - 1px);
+ position: relative;
+ }
+ }
+
+ & .search-label {
+ position: relative;
+ }
+
+ & .search-input-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ }
+
+ & .search-close-button {
+ font-size: var(--text-md);
+ color: var(--searchAccentMain);
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ margin: 0;
+ opacity: 0.5;
+ padding: 5px;
+ transform: scaleY(0);
+ transition: var(--transition-all);
+ display: flex;
+ align-items: center;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%) scaleY(0);
+
+ &:hover {
+ opacity: 0.7;
+ }
+ }
+ }
-.top-search .search-settings .icon-settings:hover {
- color: var(--iconActionHover);
-}
-.top-search .search-settings .icon-settings:visited {
- color: var(--iconAction);
+ & .search-settings {
+ & button.icon-settings {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ & .icon-settings {
+ font-size: var(--text-xl);
+ float: right;
+ color: var(--iconAction);
+ text-decoration: none;
+ border: none;
+ transition: color 0.3s ease-in-out;
+ background-color: transparent;
+ cursor: pointer;
+ padding: 0;
+
+ &:hover {
+ color: var(--iconActionHover);
+ }
+
+ &:visited {
+ color: var(--iconAction);
+ }
+ }
+
+ & .engine-selector {
+ position: relative;
+
+ &[data-multiple="false"] {
+ display: none;
+
+ & .engine-button {
+ cursor: default;
+
+ & .ri-arrow-down-s-line {
+ display: none;
+ }
+ }
+ }
+ }
+
+ & .engine-button {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ background-color: var(--autocompleteHover);
+ border: none;
+ color: var(--searchAccentMain);
+ cursor: pointer;
+ font-size: var(--text-sm);
+ padding: 8px 12px;
+ border-radius: var(--borderRadius-base);
+ transition: var(--transition-all);
+ height: 40px;
+
+ &:hover {
+ background-color: var(--autocompleteSelected);
+ }
+
+ &[aria-expanded="true"] {
+ background-color: var(--autocompleteSelected);
+ }
+ }
+
+ & .engine-name {
+ font-size: var(--text-sm);
+ white-space: nowrap;
+ }
+
+ & .engine-dropdown {
+ position: absolute;
+ top: calc(100% + 10px);
+ right: 0;
+ min-width: 200px;
+ max-width: 50vh;
+ width: max-content;
+ background-color: var(--autocompleteBackground);
+ border-radius: var(--borderRadius-base);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ z-index: 200;
+
+ &[hidden] {
+ display: none;
+ }
+ }
+
+ & .engine-option {
+ display: block;
+ width: 100%;
+ text-align: left;
+ background-color: transparent;
+ border: 0;
+ color: var(--textHeaders);
+ cursor: pointer;
+ padding: 10px 12px;
+ transition: var(--transition-colors);
+
+ &:hover {
+ background-color: var(--autocompleteHover);
+ }
+
+ &:focus {
+ border-left: 2px solid var(--main);
+ padding-left: 10px;
+ background-color: var(--autocompleteHover);
+ outline: none;
+ }
+
+ &[aria-checked="true"] {
+ background-color: var(--autocompleteSelected);
+ }
+
+ & .name {
+ display: block;
+ font-size: var(--text-sm);
+ font-weight: 500;
+ margin-bottom: 2px;
+ }
+
+ & .help {
+ display: block;
+ font-size: var(--text-xs);
+ opacity: 0.7;
+ }
+ }
+ }
}
@media screen and (max-width: 768px) {
@@ -232,21 +237,25 @@ body.search-focused .search-bar .search-close-button {
}
@media screen and (hover: hover) {
- body.search-focused .top-search {
- position: sticky !important;
- }
-
- body.search-focused .sidebar-button {
- position: fixed !important;
+ body.search-focused {
+ & .top-search {
+ position: sticky !important;
+ }
+
+ & .sidebar-button {
+ position: fixed !important;
+ }
}
}
@media screen and (hover: none) {
- body.scroll-sticky .top-search {
- position: sticky !important;
- }
-
- body.scroll-sticky .sidebar-button {
- position: fixed !important;
+ body.scroll-sticky {
+ & .top-search {
+ position: sticky !important;
+ }
+
+ & .sidebar-button {
+ position: fixed !important;
+ }
}
}
diff --git a/assets/css/search.css b/assets/css/search.css
index 355b250da..6c01c2d59 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -17,62 +17,64 @@
position: absolute;
top: 50%;
left: calc(50% - 32px);
- }
- & .loading div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 51px;
- height: 51px;
- margin: 6px;
- border: 6px solid var(--coldGray);
- border-radius: 50%;
- animation: loading 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
- border-color: var(--coldGray) transparent transparent transparent;
- }
+ & div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 51px;
+ height: 51px;
+ margin: 6px;
+ border: 6px solid var(--coldGray);
+ border-radius: 50%;
+ animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: var(--coldGray) transparent transparent transparent;
- & .loading div:nth-child(1) {
- animation-delay: -.45s;
- }
- & .loading div:nth-child(2) {
- animation-delay: -.3s;
- }
- & .loading div:nth-child(3) {
- animation-delay: -.15s;
+ &:nth-child(1) {
+ animation-delay: -0.45s;
+ }
+ &:nth-child(2) {
+ animation-delay: -0.3s;
+ }
+ &:nth-child(3) {
+ animation-delay: -0.15s;
+ }
+ }
}
& .result {
margin: 2em 0;
- }
- & .result p {
- margin: 0;
+ & p {
+ margin: 0;
+ }
}
& .result-id {
font-size: 1.4em;
margin: 0;
- }
- & .result-id a {
- text-decoration: none;
- color: var(--textHeaders);
- transition: var(--transition-colors);
- }
- & .result-id a:is(:visited, :active) {
- color: var(--textHeaders);
- }
- & .result-id a:is(:hover, :focus) {
- color: var(--main);
+ & a {
+ text-decoration: none;
+ color: var(--textHeaders);
+ transition: var(--transition-colors);
+
+ &:is(:visited, :active) {
+ color: var(--textHeaders);
+ }
+
+ &:is(:hover, :focus) {
+ color: var(--main);
+ }
+ }
+
+ & small {
+ font-weight: normal;
+ }
}
& :is(.result-id, .result-elem) em {
font-style: normal;
color: var(--main);
}
-
- & .result-id small {
- font-weight: normal;
- }
}
diff --git a/assets/css/settings.css b/assets/css/settings.css
index f050bd369..55b1cc506 100644
--- a/assets/css/settings.css
+++ b/assets/css/settings.css
@@ -1,119 +1,124 @@
#settings-modal-content {
margin-top: 10px;
-}
-#settings-modal-content .hidden {
- display: none;
-}
+ & .hidden {
+ display: none;
+ }
-#settings-modal-content .input {
- box-sizing: border-box;
- width: 80%;
- padding: 8px;
- font-size: var(--text-sm);
- background-color: var(--settingsInputBackground);
- color: var(--settingsInput);
- border: 1px solid var(--settingsInputBorder);
- border-radius: var(--borderRadius-base);
- transition: var(--transition-all);
-}
-#settings-modal-content .input:focus {
- border-color: var(--main);
-}
-#settings-modal-content .input::placeholder {
- color: var(--gray400);
-}
+ & .input {
+ box-sizing: border-box;
+ width: 80%;
+ padding: 8px;
+ font-size: var(--text-sm);
+ background-color: var(--settingsInputBackground);
+ color: var(--settingsInput);
+ border: 1px solid var(--settingsInputBorder);
+ border-radius: var(--borderRadius-base);
+ transition: var(--transition-all);
-#settings-modal-content .switch-button-container {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-top: 1px solid var(--settingsSectionBorder);
- padding: 10px 0;
-}
-#settings-modal-content .switch-button-container:first-of-type {
- border-top-style: none;
- padding-top: 0;
-}
+ &:focus {
+ border-color: var(--main);
+ }
-#settings-modal-content .switch-button-container > div > span {
- font-size: var(--text-md);
-}
+ &::placeholder {
+ color: var(--gray400);
+ }
+ }
-#settings-modal-content .switch-button-container > div > p {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-size: var(--text-sm);
- line-height: 1.4;
- margin: 0;
- padding-bottom: 6px;
- padding-right: 10px;
-}
+ & .switch-button-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-top: 1px solid var(--settingsSectionBorder);
+ padding: 10px 0;
-#settings-modal-content .switch-button {
- position: relative;
- display: inline-block;
- flex-shrink: 0;
- width: 40px;
- height: 20px;
- user-select: none;
- transition: var(--transition-all);
-}
+ &:first-of-type {
+ border-top-style: none;
+ padding-top: 0;
+ }
-#settings-modal-content .switch-button__checkbox {
- appearance: none;
- position: absolute;
- display: block;
- width: 20px;
- height: 20px;
- border-radius: 1000px;
- background-color: #91a4b7;
- border: 3px solid #e5edf5;
- cursor: pointer;
- transition: var(--transition-all);
-}
+ & > div {
+ & > span {
+ font-size: var(--text-md);
+ }
-#settings-modal-content .switch-button__bg {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 1000px;
- background-color: #e5edf5;
- cursor: pointer;
- transition: var(--transition-all);
-}
+ & > p {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: var(--text-sm);
+ line-height: 1.4;
+ margin: 0;
+ padding-bottom: 6px;
+ padding-right: 10px;
+ }
+ }
+ }
-#settings-modal-content .switch-button__checkbox:checked {
- background-color: white;
- border-color: var(--main);
- transform: translateX(100%);
-}
+ & .switch-button {
+ position: relative;
+ display: inline-block;
+ flex-shrink: 0;
+ width: 40px;
+ height: 20px;
+ user-select: none;
+ transition: var(--transition-all);
+ }
-#settings-modal-content .switch-button__checkbox:checked + .switch-button__bg {
- background-color: var(--main);
-}
+ & .switch-button__checkbox {
+ appearance: none;
+ position: absolute;
+ display: block;
+ width: 20px;
+ height: 20px;
+ border-radius: 1000px;
+ background-color: #91a4b7;
+ border: 3px solid #e5edf5;
+ cursor: pointer;
+ transition: var(--transition-all);
+ }
-#settings-modal-content .switch-button__checkbox:focus {
- outline: 0;
-}
+ & .switch-button__bg {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 1000px;
+ background-color: #e5edf5;
+ cursor: pointer;
+ transition: var(--transition-all);
+ }
-#settings-modal-content .switch-button__checkbox:focus + .switch-button__bg {
- outline: 2px solid var(--main);
- outline-offset: 2px;
-}
+ & .switch-button__checkbox:checked {
+ background-color: white;
+ border-color: var(--main);
+ transform: translateX(100%);
+ }
-#settings-modal-content .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {
- outline: 0;
-}
+ & .switch-button__checkbox:checked + .switch-button__bg {
+ background-color: var(--main);
+ }
-#settings-modal-content .settings-select {
- cursor: pointer;
- position: relative;
- border: none;
- background-color: transparent;
- color: var(--textBody);
-}
+ & .switch-button__checkbox:focus {
+ outline: 0;
+ }
+
+ & .switch-button__checkbox:focus + .switch-button__bg {
+ outline: 2px solid var(--main);
+ outline-offset: 2px;
+ }
+
+ & .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {
+ outline: 0;
+ }
+
+ & .settings-select {
+ cursor: pointer;
+ position: relative;
+ border: none;
+ background-color: transparent;
+ color: var(--textBody);
-#settings-modal-content .settings-select option {
- color: initial;
+ & option {
+ color: initial;
+ }
+ }
}
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
index a0ad31aa7..3e9c3596f 100644
--- a/assets/css/sidebar.css
+++ b/assets/css/sidebar.css
@@ -11,371 +11,368 @@
& .sidebar-tabpanel {
scrollbar-width: thin;
}
-}
-
-.apple-os .sidebar {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.sidebar ul {
- list-style: none;
-}
-
-.sidebar ul li {
- margin: 0;
- padding: 0 10px;
-}
-
-.sidebar a {
- color: var(--sidebarAccentMain);
- text-decoration: none;
- transition: var(--transition-colors);
-}
-
-.sidebar a:hover {
- color: var(--sidebarHover);
-}
-
-.sidebar .external-link {
- margin-left: 2.5px;
-}
-
-.sidebar .sidebar-header {
- background-color: var(--sidebarHeader);
- width: 100%;
-}
-
-.sidebar .sidebar-projectInfo {
- display: flex;
- justify-content: start;
- align-items: center;
- gap: 8px;
- margin: 8px 34px 12px 14px;
-}
-
-.sidebar .sidebar-projectInfo > div {
- flex: 1;
-}
-
-.sidebar .sidebar-projectImage {
- align-self: flex-end;
-}
-
-.sidebar .sidebar-projectImage img {
- display: block;
- max-width: 48px;
- max-height: 48px;
-}
-
-.sidebar .sidebar-projectName {
- font-weight: 700;
- font-size: var(--text-xl);
- line-height: 24px;
- color: var(--sidebarAccentMain);
- margin: 0;
- padding: 0;
- word-wrap: break-word;
- display: block;
- width: calc(100% - 12px);
-}
-
-.sidebar .sidebar-projectVersion {
- display: block;
- position: relative;
- margin: 0;
- padding: 0;
- font-size: var(--sidebarFontSize);
- line-height: var(--sidebarLineHeight);
- color: var(--sidebarMuted);
- width: calc(100% - 12px);
-}
-
-.sidebar .sidebar-projectVersion form {
- display: flex;
-}
-
-.sidebar .sidebar-projectVersion select {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding: 0 0 0 10px;
- border: none;
- -webkit-appearance: none;
- appearance: none;
- background-color: transparent;
- color: var(--sidebarMuted);
- z-index: 2;
-}
-
-.sidebar .sidebar-projectVersion option {
- color: initial;
-}
-
-.sidebar .sidebar-projectVersionsCaret {
- position: absolute;
- left: 0;
- top: 2px;
- z-index: 1;
- font-size: 8px;
- color: var(--sidebarMuted);
-}
-
-.sidebar .sidebar-projectVersion select::-ms-expand {
- display: none;
-}
-
-.sidebar .sidebar-staleVersion {
- display: block;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: var(--sidebarStaleVersion);
-}
-
-.sidebar .sidebar-staleVersion > a {
- color: var(--sidebarStaleVersion);
- font-weight: 400;
-}
-
-.sidebar .sidebar-staleIcon {
- font-size: var(--text-lg);
- line-height: 0;
-}
-
-.sidebar .sidebar-list-nav {
- display: flex;
- margin: 0;
- padding: 0px;
- overflow: auto;
- scrollbar-width: thin;
-}
-
-.sidebar .sidebar-list-nav :is(li, li button) {
- text-transform: uppercase;
- letter-spacing: 0.02em;
- font-size: var(--text-sm);
- color: var(--sidebarSubheadings);
- white-space: nowrap;
-}
-
-.sidebar .sidebar-list-nav li {
- display: inline-block;
- padding: 0;
-}
-
-.sidebar .sidebar-list-nav button {
- background: none;
- border: 0;
- border-radius: 0;
- -webkit-appearance: none;
- text-align: inherit;
- color: inherit;
- font-weight: inherit;
- cursor: pointer;
- display: inline-block;
- line-height: 27px;
- padding: 4px 14px 4px 14px;
- transition: var(--transition-all);
-}
-
-.sidebar .sidebar-list-nav button {
- border-bottom: var(--navTabBorderWidth) solid transparent;
-}
-
-.sidebar .sidebar-list-nav button:not([aria-selected]):hover {
- border-bottom: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
- color: var(--sidebarAccentMain);
- transition: var(--transition-all);
-}
-
-.sidebar .sidebar-list-nav button[aria-selected] {
- border-bottom: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
- color: var(--sidebarAccentMain);
-}
-
-.sidebar .sidebar-tabpanel {
- flex: 1 1 0.01%;
- overflow-y: auto;
- overscroll-behavior: contain;
- position: relative;
- -webkit-overflow-scrolling: touch;
- padding-top: 12px;
- scroll-padding-top: 40px;
-}
-.sidebar .full-list {
- margin: 0;
- padding: 0 0 20px 0;
- position: relative;
-}
-
-.sidebar .full-list :is(li, a) {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.sidebar .full-list li {
- padding: 0;
- line-height: 27px;
-}
-
-.sidebar .full-list li.group {
- text-transform: uppercase;
- font-weight: bold;
- font-size: 0.8em;
- margin: 1.5em 0 0;
- line-height: 1.8em;
- color: var(--sidebarSubheadings);
- padding-left: 15px;
-}
-
-.sidebar .full-list li.nesting-context {
- font-weight: bold;
- font-size: 0.9em;
- line-height: 1.8em;
- color: var(--sidebarSubheadings);
- margin-top: 10px;
- padding-left: 15px;
-}
-
-.sidebar .full-list a {
- margin-right: 30px;
- padding: 3px 0 3px 12px;
- border-left: var(--navTabBorderWidth) solid transparent;
- color: var(--sidebarItem);
-}
-
-.sidebar .full-list a[aria-selected] {
- color: var(--sidebarActiveItem);
-}
-
-.sidebar .full-list button {
- appearance: none;
- background-color: transparent;
- border: 0;
- padding: 0;
- cursor: pointer;
- color: inherit;
- width: 20px;
- text-align: center;
- font-size: calc(1.2 * var(--sidebarFontSize));
- line-height: var(--sidebarLineHeight);
- position: absolute;
- display: block;
- right: 10px;
- transform: translateY(-100%);
-}
-
-.sidebar .full-list a[aria-selected] + button {
- color: var(--sidebarActiveItem);
-}
-
-.sidebar .full-list button:after {
- font-family: remixicon;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- content: var(--icon-arrow-down-s);
-}
-
-.sidebar .full-list button[aria-expanded=true]:after {
- content: var(--icon-arrow-up-s);
-}
-
-.sidebar .full-list ul {
- display: none;
- margin: 10px 0 10px 10px;
- padding: 0;
-}
-
-.sidebar .full-list button[aria-expanded=true] + ul {
- display: block;
-}
+ .apple-os & {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
-/* Level 1 */
+ & ul {
+ list-style: none;
-.sidebar .full-list > li > a {
- height: 27px;
- line-height: var(--sidebarLineHeight);
-}
+ & li {
+ margin: 0;
+ padding: 0 10px;
+ }
+ }
-.sidebar .full-list > li > a:hover {
- border-left-color: var(--sidebarLanguageAccentBar);
-}
+ & a {
+ color: var(--sidebarAccentMain);
+ text-decoration: none;
+ transition: var(--transition-colors);
-.sidebar .full-list > li > a[aria-selected] {
- border-left-color: var(--sidebarLanguageAccentBar);
-}
-
-.sidebar .full-list > li:last-child {
- margin-bottom: 30px;
-}
+ &:hover {
+ color: var(--sidebarHover);
+ }
+ }
-.sidebar .full-list > li.group:first-child {
- margin-top: 0;
-}
+ & .external-link {
+ margin-left: 2.5px;
+ }
-/* Level 2 */
+ & .sidebar-header {
+ background-color: var(--sidebarHeader);
+ width: 100%;
+ }
-.sidebar .full-list > li > ul > li:not(:has(li a[aria-selected=true])) > a[aria-selected=true]:before,
-.sidebar .full-list > li > ul > li > a:hover:before {
- content: "\2022";
- position: absolute;
- margin-left: -15px;
- color: var(--sidebarActiveItem);
-}
+ & .sidebar-projectInfo {
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ gap: 8px;
+ margin: 8px 34px 12px 14px;
-/* Level 2+ */
+ & > div {
+ flex: 1;
+ }
+ }
-.sidebar .full-list ul li {
- line-height: var(--sidebarFontSize);
- padding: 0 8px;
-}
+ & .sidebar-projectImage {
+ align-self: flex-end;
-.sidebar .full-list ul a {
- padding-left: 15px;
- height: 24px;
-}
+ & img {
+ display: block;
+ max-width: 48px;
+ max-height: 48px;
+ }
+ }
-.sidebar .full-list ul button {
- font-size: var(--sidebarFontSize);
-}
+ & .sidebar-projectName {
+ font-weight: 700;
+ font-size: var(--text-xl);
+ line-height: 24px;
+ color: var(--sidebarAccentMain);
+ margin: 0;
+ padding: 0;
+ word-wrap: break-word;
+ display: block;
+ width: calc(100% - 12px);
+ }
-.sidebar .full-list ul button:after {
- content: var(--icon-add);
-}
+ & .sidebar-projectVersion {
+ display: block;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ font-size: var(--sidebarFontSize);
+ line-height: var(--sidebarLineHeight);
+ color: var(--sidebarMuted);
+ width: calc(100% - 12px);
+
+ & form {
+ display: flex;
+ }
+
+ & select {
+ cursor: pointer;
+ position: relative;
+ margin: 0;
+ padding: 0 0 0 10px;
+ border: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background-color: transparent;
+ color: var(--sidebarMuted);
+ z-index: 2;
+ }
+
+ & option {
+ color: initial;
+ }
+
+ & select::-ms-expand {
+ display: none;
+ }
+ }
-.sidebar .full-list ul button[aria-expanded=true]:after {
- content: var(--icon-subtract);
-}
+ & .sidebar-projectVersionsCaret {
+ position: absolute;
+ left: 0;
+ top: 2px;
+ z-index: 1;
+ font-size: 8px;
+ color: var(--sidebarMuted);
+ }
-/* Level 3+ */
+ & .sidebar-staleVersion {
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--sidebarStaleVersion);
+
+ & > a {
+ color: var(--sidebarStaleVersion);
+ font-weight: 400;
+ }
+ }
-.sidebar .full-list ul ul {
- margin: 9px 0 9px 10px;
-}
+ & .sidebar-staleIcon {
+ font-size: var(--text-lg);
+ line-height: 0;
+ }
-.sidebar .full-list ul ul li {
- height: 20px;
- color: var(--sidebarAccentMain);
-}
+ & .sidebar-list-nav {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+ scrollbar-width: thin;
-.sidebar .full-list ul ul a {
- border-left: 1px solid var(--sidebarInactiveItemMarker);
- padding: 0 10px;
- height: 20px;
-}
+ & :is(li, li button) {
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ font-size: var(--text-sm);
+ color: var(--sidebarSubheadings);
+ white-space: nowrap;
+ }
+
+ & li {
+ display: inline-block;
+ padding: 0;
+ }
+
+ & button {
+ background: none;
+ border: 0;
+ border-bottom: var(--navTabBorderWidth) solid transparent;
+ border-radius: 0;
+ -webkit-appearance: none;
+ text-align: inherit;
+ color: inherit;
+ font-weight: inherit;
+ cursor: pointer;
+ display: inline-block;
+ line-height: 27px;
+ padding: 4px 14px 4px 14px;
+ transition: var(--transition-all);
+
+ &:not([aria-selected]):hover {
+ border-bottom: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
+ color: var(--sidebarAccentMain);
+ transition: var(--transition-all);
+ }
+
+ &[aria-selected] {
+ border-bottom: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+ color: var(--sidebarAccentMain);
+ }
+ }
+ }
-.sidebar .full-list ul ul a:hover {
- border-color: var(--sidebarLanguageAccentBar);
-}
+ & .sidebar-tabpanel {
+ flex: 1 1 0.01%;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ position: relative;
+ -webkit-overflow-scrolling: touch;
+ padding-top: 12px;
+ scroll-padding-top: 40px;
+ }
-.sidebar .full-list ul ul a[aria-selected] {
- color: var(--sidebarActiveItem);
- border-color: var(--sidebarLanguageAccentBar);
+ & .full-list {
+ margin: 0;
+ padding: 0 0 20px 0;
+ position: relative;
+
+ & :is(li, a) {
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ & li {
+ padding: 0;
+ line-height: 27px;
+
+ &.group {
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 0.8em;
+ margin: 1.5em 0 0;
+ line-height: 1.8em;
+ color: var(--sidebarSubheadings);
+ padding-left: 15px;
+ }
+
+ &.nesting-context {
+ font-weight: bold;
+ font-size: 0.9em;
+ line-height: 1.8em;
+ color: var(--sidebarSubheadings);
+ margin-top: 10px;
+ padding-left: 15px;
+ }
+ }
+
+ & a {
+ margin-right: 30px;
+ padding: 3px 0 3px 12px;
+ border-left: var(--navTabBorderWidth) solid transparent;
+ color: var(--sidebarItem);
+
+ &[aria-selected] {
+ color: var(--sidebarActiveItem);
+
+ & + button {
+ color: var(--sidebarActiveItem);
+ }
+ }
+ }
+
+ & button {
+ appearance: none;
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ color: inherit;
+ width: 20px;
+ text-align: center;
+ font-size: calc(1.2 * var(--sidebarFontSize));
+ line-height: var(--sidebarLineHeight);
+ position: absolute;
+ display: block;
+ right: 10px;
+ transform: translateY(-100%);
+
+ &:after {
+ font-family: remixicon;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: var(--icon-arrow-down-s);
+ }
+
+ &[aria-expanded=true] + ul {
+ display: block;
+ }
+
+ &[aria-expanded=true]:after {
+ content: var(--icon-arrow-up-s);
+ }
+ }
+
+ & ul {
+ display: none;
+ margin: 10px 0 10px 10px;
+ padding: 0;
+ }
+
+ /* Level 1 */
+
+ & > li > a {
+ height: 27px;
+ line-height: var(--sidebarLineHeight);
+ }
+
+ & > li > a:hover {
+ border-left-color: var(--sidebarLanguageAccentBar);
+ }
+
+ & > li > a[aria-selected] {
+ border-left-color: var(--sidebarLanguageAccentBar);
+ }
+
+ & > li:last-child {
+ margin-bottom: 30px;
+ }
+
+ & > li.group:first-child {
+ margin-top: 0;
+ }
+
+ /* Level 2 */
+
+ & > li > ul > li:not(:has(li a[aria-selected=true])) > a[aria-selected=true]:before,
+ & > li > ul > li > a:hover:before {
+ content: "\2022";
+ position: absolute;
+ margin-left: -15px;
+ color: var(--sidebarActiveItem);
+ }
+
+ /* Level 2+ */
+
+ & ul li {
+ line-height: var(--sidebarFontSize);
+ padding: 0 8px;
+ }
+
+ & ul a {
+ padding-left: 15px;
+ height: 24px;
+ }
+
+ & ul button {
+ font-size: var(--sidebarFontSize);
+ }
+
+ & ul button:after {
+ content: var(--icon-add);
+ }
+
+ & ul button[aria-expanded=true]:after {
+ content: var(--icon-subtract);
+ }
+
+ /* Level 3+ */
+
+ & ul ul {
+ margin: 9px 0 9px 10px;
+ }
+
+ & ul ul li {
+ height: 20px;
+ color: var(--sidebarAccentMain);
+ }
+
+ & ul ul a {
+ border-left: 1px solid var(--sidebarInactiveItemMarker);
+ padding: 0 10px;
+ height: 20px;
+ }
+
+ & ul ul a:hover {
+ border-color: var(--sidebarLanguageAccentBar);
+ }
+
+ & ul ul a[aria-selected] {
+ color: var(--sidebarActiveItem);
+ border-color: var(--sidebarLanguageAccentBar);
+ }
+ }
}
.sidebar-button {
@@ -384,10 +381,10 @@
border: none;
font-size: var(--sidebarFontSize);
color: var(--sidebarAccentMain);
-}
-.sidebar-button:hover {
- color: var(--sidebarHover);
+ &:hover {
+ color: var(--sidebarHover);
+ }
}
body:not(.sidebar-open) .sidebar-button {
@@ -397,9 +394,9 @@ body:not(.sidebar-open) .sidebar-button {
@media screen and (max-height: 500px) {
.sidebar {
overflow-y: auto;
- }
- .sidebar .full-list {
- overflow: visible;
+ & .full-list {
+ overflow: visible;
+ }
}
}
diff --git a/assets/css/tabset.css b/assets/css/tabset.css
index 4f2547e5d..a268f0dfe 100644
--- a/assets/css/tabset.css
+++ b/assets/css/tabset.css
@@ -22,30 +22,30 @@
color: var(--textColor);
margin-right: calc(-1 * var(--borderWidth));
background-color: transparent;
- border:0;
+ border: 0;
box-shadow: none;
cursor: pointer;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: transparent;
transition: var(--transition-all);
-}
-:hover.tabset-tab {
- border-bottom-color: var(--tabBorderTop);
- color: var(--textHeaders);
-}
+ &:hover {
+ border-bottom-color: var(--tabBorderTop);
+ color: var(--textHeaders);
+ }
-.tabset-tab[aria-selected=true] {
- border-bottom-color: var(--mainLight);
- color: var(--textHeaders);
-}
+ &[aria-selected=true] {
+ border-bottom-color: var(--mainLight);
+ color: var(--textHeaders);
-/* Keyboard navigation focus state (increased contrast) */
-.tabset-tab[aria-selected=true]:focus-visible {
- background-color: var(--mainLight);
- border-color: var(--mainLight);
- color: var(--white); /* light works best for both light and dark themes given background colors */
+ /* Keyboard navigation focus state (increased contrast) */
+ &:focus-visible {
+ background-color: var(--mainLight);
+ border-color: var(--mainLight);
+ color: var(--white); /* light works best for both light and dark themes given background colors */
+ }
+ }
}
@media screen and (max-width: 768px) {
@@ -56,18 +56,16 @@
.tabset-panel {
padding-top: calc(var(--tabsetPadding) / 2);
padding-bottom: calc(var(--tabsetPadding) / 2);
- }
- .tabset-panel pre,
- .tabset-panel blockquote,
- .tabset-panel section.admonition {
- margin-left: calc(-1 * var(--tabsetPadding)) !important;
- margin-right: calc(-1 * var(--tabsetPadding)) !important;
- }
+ & :is(pre, blockquote, section.admonition) {
+ margin-left: calc(-1 * var(--tabsetPadding)) !important;
+ margin-right: calc(-1 * var(--tabsetPadding)) !important;
+ }
- .tabset-panel > pre code {
- border-left-width: 0;
- border-right-width: 0;
+ & > pre code {
+ border-left-width: 0;
+ border-right-width: 0;
+ }
}
}
@@ -75,10 +73,11 @@
@media screen and (max-width: 768px) {
.tabset-panel > :is(:first-child) {
&:is(table) {
- margin: .5em 0;
+ margin: 0.5em 0;
}
}
}
+
@media screen and (min-width: 769px) {
.tabset-panel > :is(:first-child) {
&:is(blockquote, .admonition) {
@@ -88,7 +87,7 @@
margin-top: 1.25em;
}
&:is(table) {
- margin-top: .75em;
+ margin-top: 0.75em;
}
}
.tabset-panel > :is(:last-child) {
@@ -99,7 +98,7 @@
margin-bottom: 1.25em;
}
&:is(table) {
- margin-bottom: .75em;
+ margin-bottom: 0.75em;
}
}
}
diff --git a/assets/css/toast.css b/assets/css/toast.css
index 0ead452bf..6b5e620a5 100644
--- a/assets/css/toast.css
+++ b/assets/css/toast.css
@@ -4,39 +4,37 @@
position: fixed;
z-index: 1000;
right: 10px;
- top: 0px;
+ top: 0;
font-size: 0.9rem;
min-width: 3rem;
- padding: .7rem 1.2rem .7rem 2.8rem;
+ padding: 0.7rem 1.2rem 0.7rem 2.8rem;
text-align: left;
font-weight: 400;
border-radius: var(--borderRadius-base);
border: 1px solid hsl(from var(--tipHeading) h s l / 15%);
background-color: var(--tipBackground);
color: var(--tipHeading);
- transition: opacity .4s ease-in-out, transform .3s ease-out;
+ transition: opacity 0.4s ease-in-out, transform 0.3s ease-out;
cursor: default;
-}
-#toast::before {
- content: var(--icon-information);
- position: absolute;
- left: 1rem;
- font-size: 1.2rem;
- font-family: 'remixicon';
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
+ &::before {
+ content: var(--icon-information);
+ position: absolute;
+ left: 1rem;
+ font-size: 1.2rem;
+ font-family: 'remixicon';
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
-#toast.show {
- visibility: visible;
- opacity: 1;
- transform: translateY(.75rem);
-}
+ &.show {
+ visibility: visible;
+ opacity: 1;
+ transform: translateY(0.75rem);
+ }
-@media (prefers-reduced-motion: reduce) {
- #toast {
+ @media (prefers-reduced-motion: reduce) {
transition: none;
}
}
diff --git a/assets/css/tooltips.css b/assets/css/tooltips.css
index 355d975a0..2a6402388 100644
--- a/assets/css/tooltips.css
+++ b/assets/css/tooltips.css
@@ -12,58 +12,57 @@
visibility: hidden;
transform: translateY(20px);
opacity: 0;
- transition: .2s visibility ease-out, .2s transform ease-out, .2s opacity ease-out;
-}
+ transition: 0.2s visibility ease-out, 0.2s transform ease-out, 0.2s opacity ease-out;
-/*
-Show-up animation
-======
-Note: it's fine to hide the tooltip with `visibility: hidden` (rather than `display: none`)
-as it has absolute positioning, so doesn't impact the layout and click events pass through.
-*/
-.tooltip.tooltip-shown {
- visibility: visible;
- transform: translateY(0);
- opacity: 1;
-}
+ /*
+ Show-up animation
+ Note: it's fine to hide the tooltip with `visibility: hidden` (rather than `display: none`)
+ as it has absolute positioning, so doesn't impact the layout and click events pass through.
+ */
+ &.tooltip-shown {
+ visibility: visible;
+ transform: translateY(0);
+ opacity: 1;
+ }
-.tooltip .tooltip-body {
- border: 1px solid var(--codeBorder);
- border-radius: var(--borderRadius-sm);
- overflow: auto;
-}
+ & .tooltip-body {
+ border: 1px solid var(--codeBorder);
+ border-radius: var(--borderRadius-sm);
+ overflow: auto;
-/* !important used in order to beat main heading and functions signature styles. */
-.tooltip .tooltip-body .signature {
- min-width: 320px;
- width: 100%;
- line-height: 1em !important;
- margin: .75em 0 !important;
-}
+ /* !important used in order to beat main heading and functions signature styles. */
+ & .signature {
+ min-width: 320px;
+ width: 100%;
+ line-height: 1em !important;
+ margin: 0.75em 0 !important;
+ }
-.tooltip .tooltip-body .detail-header {
- border-left: 0;
- margin-bottom: 0;
- margin-top: 0;
-}
+ & .detail-header {
+ border-left: 0;
+ margin-bottom: 0;
+ margin-top: 0;
+ }
-.tooltip .tooltip-body .docstring {
- background-color: var(--background);
- padding: 1.2em;
- margin: 0;
- width: 498px; /* Taking 2 * 1px of border into account */
-}
+ & .docstring {
+ background-color: var(--background);
+ padding: 1.2em;
+ margin: 0;
+ width: 498px; /* Taking 2 * 1px of border into account */
+ }
-/* Used for simple tooltips having only description. */
-.tooltip .tooltip-body .docstring-plain {
- max-width: 498px;
- width: auto;
-}
+ /* Used for simple tooltips having only description. */
+ & .docstring-plain {
+ max-width: 498px;
+ width: auto;
+ }
-.tooltip .tooltip-body .version-info {
- float: right;
- font-family: var(--monoFontFamily);
- font-weight: normal;
- opacity: .3;
- padding-left: .3em;
+ & .version-info {
+ float: right;
+ font-family: var(--monoFontFamily);
+ font-weight: normal;
+ opacity: 0.3;
+ padding-left: 0.3em;
+ }
+ }
}