mirror of
https://github.com/boostorg/boostlook.git
synced 2026-01-19 04:02:14 +00:00
Refactor CSS variables and styles for light and dark themes
- remove underline links - tidy CSS variables - adjust font-stretch to match asciidoctor - adjust link colors and hover states - add caret icon for current page in nav - update font family names to avoid integration conflicts
This commit is contained in:
Julio Estrada
committed by
Julio C. Estrada
Julio C. Estrada
parent
42749fe146
commit
226d48a4fa
179
boostlook.css
179
boostlook.css
@@ -35,32 +35,50 @@
|
||||
/*----------------- Root Variables - Start -----------------*/
|
||||
|
||||
:root {
|
||||
--bl-primary-color: rgb(255, 159, 0);
|
||||
--bl-header-height: 2.5rem;
|
||||
|
||||
/* Light Theme Variables */
|
||||
--light-bl-background: rgb(255, 255, 255);
|
||||
--light-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23000000'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
|
||||
--light-bl-card-background-color: rgb(255, 255, 255);
|
||||
--light-bl-code-background: rgb(255, 255, 255);
|
||||
--light-bl-code-border-color: rgb(220, 220, 220);
|
||||
--light-bl-code-text-color: inherit;
|
||||
--light-bl-link-color: rgb(0, 90, 156);
|
||||
--light-bl-link-hover-color: rgba(0, 90, 156, 0.7);
|
||||
--light-bl-hljs-attribute-color: rgb(70, 130, 180);
|
||||
--light-bl-hljs-doctag-color: rgb(221, 17, 68);
|
||||
--light-bl-hljs-keyword-color: rgb(51, 51, 51);
|
||||
--light-bl-hljs-number-color: rgb(0, 128, 128);
|
||||
--light-bl-hljs-section-color: rgb(153, 0, 0);
|
||||
--light-bl-nav-link-color: rgb(0, 0, 0);
|
||||
--light-bl-pasteboard-color: rgb(209, 213, 219);
|
||||
--light-bl-pre-background: rgb(248, 248, 248);
|
||||
--light-bl-primary-color: rgb(255, 159, 0);
|
||||
--light-bl-quote-background: rgb(255, 255, 255);
|
||||
--light-bl-table-border-color: rgb(232, 232, 232);
|
||||
--light-bl-table-head-background: rgb(248, 248, 248);
|
||||
--light-bl-background: rgb(255, 255, 255);
|
||||
--light-bl-card-background-color: rgb(255, 255, 255);
|
||||
--light-bl-cyan-color: rgb(0, 90, 156);
|
||||
--light-bl-quote-background: rgb(250, 250, 250);
|
||||
--light-bl-quote-background: rgb(255, 255, 255);
|
||||
--light-bl-code-background: rgb(255, 255, 255);
|
||||
--light-bl-code-border-color: rgb(220 220 220);
|
||||
--light-bl-code-text-color: inherit;
|
||||
--dark-bl-quote-background: rgb(11, 59, 82);
|
||||
|
||||
/* Dark Theme Variables */
|
||||
--dark-bl-border-color: rgb(209, 228, 242);
|
||||
--dark-bl-text-color: rgb(209, 228, 242);
|
||||
--dark-bl-quote-word-color: rgb(209, 228, 242);
|
||||
--dark-bl-tabpanel-background: rgb(28, 50, 59);
|
||||
--dark-bl-hljs-keyword-color: rgb(173, 216, 230);
|
||||
--dark-bl-hljs-number-color: rgb(72, 209, 204);
|
||||
--dark-bl-hljs-doctag-color: rgb(255, 99, 132);
|
||||
--dark-bl-hljs-section-color: rgb(255, 69, 58);
|
||||
--dark-bl-hljs-attribute-color: rgb(70, 130, 180);
|
||||
--dark-bl-pagination-color: rgb(200, 200, 200);
|
||||
--dark-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23ccc'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
|
||||
--dark-bl-code-background: rgb(20, 20, 20);
|
||||
--dark-bl-code-border-color: transparent;
|
||||
--dark-bl-code-text-color: rgb(255, 255, 255);
|
||||
--dark-bl-link-color: rgb(125 211 252);
|
||||
--dark-bl-link-hover-color: rgb(100, 160, 210);
|
||||
--dark-bl-hljs-attribute-color: rgb(70, 130, 180);
|
||||
--dark-bl-hljs-doctag-color: rgb(255, 99, 132);
|
||||
--dark-bl-hljs-keyword-color: rgb(173, 216, 230);
|
||||
--dark-bl-hljs-number-color: rgb(72, 209, 204);
|
||||
--dark-bl-hljs-section-color: rgb(255, 69, 58);
|
||||
--dark-bl-nav-link-color: rgb(0, 0, 0);
|
||||
--dark-bl-pagination-color: rgb(200, 200, 200);
|
||||
--dark-bl-quote-background: rgb(11, 59, 82);
|
||||
--dark-bl-quote-word-color: rgb(209, 228, 242);
|
||||
--dark-bl-tabpanel-background: rgb(28, 50, 59);
|
||||
--dark-bl-text-color: rgb(209, 228, 242);
|
||||
}
|
||||
|
||||
/*----------------- Root Variables - End -----------------*/
|
||||
@@ -68,37 +86,48 @@
|
||||
/*----------------- HTML Variables - Start -----------------*/
|
||||
|
||||
html {
|
||||
--bl-quote-background: var(--light-bl-quote-background);
|
||||
--bl-code-background: var(--light-bl-code-background);
|
||||
--bl-code-border-color: var(--light-bl-code-border-color);
|
||||
--bl-quote-background: var(--light-bl-quote-background);
|
||||
--bl-background: var(--light-bl-background);
|
||||
--bl-caret-svg: var(--light-bl-caret-svg);
|
||||
--bl-card-background-color: var(--light-bl-card-background-color);
|
||||
--bl-code-background: var(--light-bl-code-background);
|
||||
--bl-code-border-color: var(--light-bl-code-border-color);
|
||||
--bl-code-text-color: var(--light-bl-code-text-color);
|
||||
--bl-hljs-doctag-color: var(--light-bl-hljs-doctag-color);
|
||||
--bl-hljs-attribute-color: var(--light-bl-hljs-attribute-color);
|
||||
--bl-hljs-keyword-color: var(--light-bl-hljs-keyword-color);
|
||||
--bl-hljs-number-color: var(--light-bl-hljs-number-color);
|
||||
--bl-hljs-section-color: var(--light-bl-hljs-section-color);
|
||||
--bl-link-color: var(--light-bl-link-color);
|
||||
--bl-link-hover-color: var(--light-bl-link-hover-color);
|
||||
--bl-nav-link-color: var(--light-bl-nav-link-color);
|
||||
--bl-pasteboard-color: var(--light-bl-pasteboard-color);
|
||||
--bl-pre-background: var(--light-bl-pre-background);
|
||||
--bl-quote-background: var(--light-bl-quote-background);
|
||||
--bl-table-border-color: var(--light-bl-table-border-color);
|
||||
--bl-table-head-background: var(--light-bl-table-head-background);
|
||||
--bl-background: var(--light-bl-background);
|
||||
--bl-card-background-color: var(--light-bl-card-background-color);
|
||||
--bl-link-color: var(--light-bl-cyan-color);
|
||||
--bl-code-text-color: var(--light-bl-code-text-color);
|
||||
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bl-quote-background: var(--dark-bl-quote-background);
|
||||
--bl-border-color: var(--dark-bl-border-color);
|
||||
--bl-caret-svg: var(--dark-bl-caret-svg);
|
||||
--bl-code-background: var(--dark-bl-code-background);
|
||||
--bl-code-border-color: var(--dark-bl-code-border-color);
|
||||
--bl-border-color: var(--dark-bl-border-color);
|
||||
--bl-text-color: var(--dark-bl-text-color);
|
||||
--bl-quote-word-color: var(--dark-bl-quote-word-color);
|
||||
--bl-tabpanel-background: var(--dark-bl-tabpanel-background);
|
||||
--bl-code-text-color: var(--dark-bl-code-text-color);
|
||||
--bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color);
|
||||
--bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color);
|
||||
--bl-hljs-keyword-color: var(--dark-bl-hljs-keyword-color);
|
||||
--bl-hljs-number-color: var(--dark-bl-hljs-number-color);
|
||||
--bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color);
|
||||
--bl-hljs-section-color: var(--dark-bl-hljs-section-color);
|
||||
--bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color);
|
||||
--bl-link-color: var(--dark-bl-link-color);
|
||||
--bl-link-hover-color: var(--dark-bl-link-hover-color);
|
||||
--bl-nav-link-color: var(--dark-bl-nav-link-color);
|
||||
--bl-pagination-color: var(--dark-bl-pagination-color);
|
||||
--bl-code-text-color: var(--dark-bl-code-text-color);
|
||||
--bl-quote-background: var(--dark-bl-quote-background);
|
||||
--bl-quote-word-color: var(--dark-bl-quote-word-color);
|
||||
--bl-tabpanel-background: var(--dark-bl-tabpanel-background);
|
||||
--bl-text-color: var(--dark-bl-text-color);
|
||||
|
||||
}
|
||||
|
||||
/*----------------- HTML Variables - End -----------------*/
|
||||
@@ -106,7 +135,7 @@ html.dark {
|
||||
/*----------------- Font-Face Declarations start -----------------*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
font-family: "Noto Sans Display";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-stretch: semi-condensed;
|
||||
@@ -117,7 +146,7 @@ html.dark {
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
font-family: "Noto Sans Italic";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-stretch: semi-condensed;
|
||||
@@ -171,7 +200,8 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
/*----------------- Global Styles for .boostlook start -----------------*/
|
||||
|
||||
.boostlook {
|
||||
font-family: "Noto Sans" !important;
|
||||
font-family: "Noto Sans Display" !important;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
|
||||
.boostlook h1,
|
||||
@@ -197,13 +227,20 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 1rem;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
.boostlook a {
|
||||
|
||||
.boostlook a,
|
||||
.boostlook .doc a {
|
||||
color: var(--bl-link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.boostlook a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
.boostlook a:hover,
|
||||
.boostlook .doc a:hover {
|
||||
color: var(--bl-link-hover-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.boostlook code {
|
||||
font-family: "Noto Sans Mono", monospace;
|
||||
}
|
||||
@@ -267,7 +304,6 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--bl-hljs-section-color);
|
||||
}
|
||||
|
||||
.boostlook p a:link,
|
||||
.boostlook p a:visited,
|
||||
.boostlook table a,
|
||||
.boostlook .pagination a {
|
||||
@@ -284,7 +320,6 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--bl-pagination-color);
|
||||
}
|
||||
|
||||
|
||||
/*----------------- Global Styles for .boostlook end -----------------*/
|
||||
|
||||
/*----------------- Styles specific to AsciiDoctor content start -----------------*/
|
||||
@@ -451,10 +486,31 @@ html.toc-hidden .boostlook:not(:has(.doc)) {
|
||||
|
||||
/*----------------- Styles specific to Antora Templates start -----------------*/
|
||||
|
||||
/* Typography */
|
||||
.boostlook .doc,
|
||||
.boostlook .doc i {
|
||||
font-family: "Noto Sans Display";
|
||||
}
|
||||
|
||||
.boostlook .nav-menu .title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.boostlook .breadcrumbs ul li {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
/* Navigation Menu */
|
||||
|
||||
|
||||
.boostlook .nav-panel-menu {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.boostlook .nav-menu {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.boostlook .nav-menu > .nav-list > .nav-list {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -467,13 +523,44 @@ html.toc-hidden .boostlook:not(:has(.doc)) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.boostlook .breadcrumbs ul li {
|
||||
font-size: 0.875rem !important;
|
||||
.boostlook .nav-link,
|
||||
.boostlook .nav-menu a{
|
||||
cursor: pointer;
|
||||
color: var(--bl-nav-link-color);
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.boostlook .nav-link:hover,
|
||||
.boostlook .nav-menu a:hover {
|
||||
color: var(--bl-link-hover-color);
|
||||
}
|
||||
|
||||
.boostlook .nav-text {
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
/* Active Page Indicator */
|
||||
.boostlook .nav-list .is-current-page.is-active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.boostlook .is-current-page.is-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -1rem;
|
||||
background-image: var(--bl-caret-svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
/* Code Block */
|
||||
.boostlook .doc .content pre code {
|
||||
background-color: var(--bl-code-background) !important;
|
||||
border-color: var(--bl-code-border-color) !important;
|
||||
background-color: var(--bl-code-background);
|
||||
border-color: var(--bl-code-border-color);
|
||||
}
|
||||
|
||||
/*----------------- Styles specific to Antora Templates end -----------------*/
|
||||
Reference in New Issue
Block a user