diff --git a/_sass/base.scss b/_sass/base.scss index 1486d24..1c40601 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -26,6 +26,10 @@ h2 { border-bottom: 1px solid $borders; } +hr { + opacity: 0.5; +} + blockquote { color: $blockquote-color; margin-bottom: 20px; @@ -33,16 +37,35 @@ blockquote { border-left: 3px solid $borders; } -code, tt { +:not(pre) > code, pre { color: $code-color; background-color: $code-bg; padding: 3px; border-radius: 0.25rem; - white-space: nowrap; + + &:not(.wrap) { + white-space: nowrap; + + @media screen and (max-width: 576px) { + white-space: normal; + } + } + } -li > p { - margin-bottom: 0; +pre { + padding: 16px; + border-radius: 0.5rem; + white-space: pre; +} + +a > code { + color: inherit!important; +} + +div.language-bash pre.highlight code::before { + content: "$ "; + color: $code-light; } // .a is for making other things look like s @@ -80,14 +103,6 @@ img { height: auto; } -dt, dd { - display: inline-block; -} - -dl, dd:not(:last-of-type) { - margin-bottom: 0; -} - .content { flex: 1 0 auto; } @@ -97,10 +112,19 @@ dl, dd:not(:last-of-type) { padding-right: 0.75rem; } -.btn, .btn a { +.btn, .btn a, a.btn { text-decoration: none; } +.btn:focus { + box-shadow: none; +} + +div .btn-primary:hover { + background-color: inherit; + opacity: inherit; +} + // Override bootstraps primary color .bg-primary { background-color: $primary!important; @@ -131,24 +155,20 @@ dl, dd:not(:last-of-type) { color: $main-color; } -.btn-dark:hover, .btn-dark:active { - opacity: 0.8; -} - -.btn:focus { - box-shadow: none; -} - .alert-secondary { color: $code-color; - background-color: $code-bg; - border-color: $code-bg; + background-color: $alert-secondary-bg; + border-color: $alert-secondary-border; } // Override the dark text too .text-dark { color: $dark!important; } +// text-dark that I dont override +.text-dark-always { + color: $dark-always!important; +} // And the light bg .bg-light { @@ -258,6 +278,25 @@ html:not([dir=rtl]) { padding: 5px; z-index: 10; } + + .btn-with-qr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: 0!important; + padding-right: 0.25rem; + } + + .btn-qr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -5px!important; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .end-3 { + right: 1rem; + } } html[dir=rtl] { @@ -270,6 +309,21 @@ html[dir=rtl] { z-index: 10; } + .btn-with-qr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: 0!important; + padding-left: 0.25rem; + } + + .btn-qr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -5px!important; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .end-3 { left: 1rem; } @@ -282,11 +336,28 @@ html[dir=rtl] { border-color: $light-border; } .form-control, .form-control:focus, .form-control::placeholder { - color: $light-placeholder; + color: $main-color; background-color: $light; border-color: $light-border; - display: inline; - min-width: 50%!important; +} +.form-control:disabled { + background-color: $light-disabled; +} + +.input-group-text, .form-control::-webkit-file-upload-button { + background-color: $alert-secondary-bg; + color: $main-color; +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: $alert-secondary-border; +} +// Safari is dumb and doesn't let the Firefox one be with the others +.form-control::file-selector-button { + background-color: $alert-secondary-bg; + color: $main-color; +} +.form-control:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: $alert-secondary-border; } // Cards @@ -297,10 +368,9 @@ html[dir=rtl] { .card a { text-decoration: none; font-weight: normal; - color: inherit; } -.card a:hover { +.card a:hover h4, .card a:hover small, .card a:hover p.card-text { opacity: 50%; } @@ -331,6 +401,18 @@ html[dir=rtl] { cursor: pointer; } +.card-qr { + color: $small-color; +} + +.card-qr:hover { + opacity: 75%; +} + +.qr-image { + border-radius: 1rem; +} + .modal-content { background-color: $main-bg; } @@ -346,6 +428,310 @@ html[dir=rtl] { border-radius: 10px; } +html[dir=lrt] .li-bullet { + list-style: disc; + margin-left: 1.25em; +} + +html[dir=rtl] .li-bullet { + list-style: disc; + margin-right: 1.5em; +} + +// Hide header anchors unless hovering the header +.header-anchor { + text-decoration: none; + display: none; +} + +h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover { + .header-anchor { + display: inline; + text-decoration: none; + } +} + +// File forms +.form-control { + background-color: $main-bg; + color: $main-color; + border: 1px solid $borders; +} + +.input-group-text, .form-control::-webkit-file-upload-button { + background-color: $secondary-bg; + color: $main-color; + border: 1px solid $borders; +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: $code-bg; +} +// Safari is dumb and don't let the Firefox one be with the others +.form-control::file-selector-button { + background-color: $secondary-bg; + color: $main-color; + border: 1px solid $borders; +} +.form-control:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: $code-bg; +} + +// Tables +table { + margin-bottom: 1em; +} +table th { + text-align: center; +} +table th, table td { + padding: 6px 13px; + border: 1px solid $light-borders; +} +table tr:nth-child(2n) { + background-color: $table-alt-bg; +} +// Fix bootstrap messing up the th bottom borders and dark mode text +.table>:not(:last-child)>:last-child>* { + border-bottom-color: $light-borders; +} + +.table { + color: inherit; +} + +// Buttons +kbd { + padding: 3px 6px; + font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + line-height: 10px; + color: $main-color; + vertical-align: middle; + background-color: $kbd-bg; + border: 1px solid $kbd-border; + border-radius: 6px; + box-shadow: inset 0 -1px 0 $kbd-border; +} + +kbd.l { + border-radius: 15px 6px 6px 6px; + padding-left: 8px; +} + +kbd.r { + border-radius: 6px 15px 6px 6px; + padding-right: 8px; +} + +kbd.face { + border-radius: 15px; +} + +// Sidebar +.sidebar-container { + font-size: 0.9rem; + border: 1px solid $borders; +} + +.sidebar-container ul { + margin-bottom: 0; +} + +.sidebar-container li:not(:last-of-type) { + padding-bottom: 0.25rem; +} + +// Details +:not(li) > details { + margin-bottom: 1rem; +} + +.details-content { + background-color: $details-bg; + margin-left: 1rem; + padding: 0.5rem; + border-radius: 0.5rem; +} + +// Footnotes +.footnotes li p { + margin-bottom: 0.25rem; +} + +a.footnote { + unicode-bidi: isolate; +} + +a.footnote::before { + content: "["; +} +a.footnote::after { + content: "]"; +} + +// Alerts +.small-alert { + padding: 0.5rem 1rem; +} + +// Fixes for alerts of opposite text direction +.alert-dismissible[dir=ltr] { + padding-left: 1rem; +} +.alert-dismissible[dir=rtl] { + padding-right: 1rem; +} + +.alert-dismissible[dir=ltr] .btn-close { + left: unset; + right: 0; +} +.alert-dismissible[dir=rtl] .btn-close { + left: 0; + right: unset; +} + +// Tabs +.tab-container { + display: flex; + flex-wrap: wrap; + + .tab-link { + border: 1px solid $borders; + border-bottom-width: 0; + padding: 0.5rem 1rem; + transition: 150ms ease; + + @media screen and (min-width: 576px) { + html[dir=ltr] & { + &:not(:first-of-type) { + border-left-width: 0px; + } + + &:first-of-type { + border-top-left-radius: 0.25rem; + } + + &:last-of-type { + border-top-right-radius: 0.25rem; + } + } + + html[dir=rtl] & { + &:not(:first-of-type) { + border-right-width: 0px; + } + + &:first-of-type { + border-top-right-radius: 0.25rem; + } + + &:last-of-type { + border-top-left-radius: 0.25rem; + } + } + } + + @media screen and (max-width: 575px) { + width: 100%; + + &:first-of-type { + border-radius: 0.25rem 0.25rem 0 0; + } + } + } + + + .tab { + display: none; + order: 99; + padding: 1rem 1rem 0 1rem; + margin-bottom: 1rem; + width: 100%; + border: 1px solid $borders; + + @media screen and (min-width: 576px) { + border-radius: 0 0.25rem 0.25rem 0.25rem; + + html[dir=rtl] & { + border-radius: 0.25rem 0 0.25rem 0.25rem; + } + } + + + @media screen and (max-width: 575px) { + border-radius: 0 0 0.25rem 0.25rem; + } + } + + input:checked + .tab-link + .tab { + display: block; + } + + input:checked + .tab-link:not(:hover):not(:active):not(:focus) { + background-color: $borders; + border-color: $borders; + } + .tab-link:hover, .tab-link:active, .tab-link:focus { + color: $borders-hover-color; + background-color: $borders-hover; + border-color: $borders-hover; + } +} + + +// FAQs +#faq-container { + margin-bottom: 1rem; + + > details.accordian-item { + margin-bottom: 0; + + > summary.accordion-button { + color: $header-color; + + // Padding for chevron + html[dir=ltr] & { + padding-right: 40px; + } + html[dir=rtl] & { + padding-left: 40px; + } + + &::-webkit-details-marker { + display: none; + } + + &::after { + position: absolute; + top: 35%; + + html[dir=ltr] & { + right: 1rem; + } + html[dir=rtl] & { + left: 1rem; + } + } + } + + > .faq { + background-color: $active-accordian-bg-color; + } + + &[open] { + summary.accordion-button { + color: $active-accordian-header-color; + background-color: $active-accordian-header-bg-color; + + &::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); + } + } + } + } +} + // Select .form-select-dark { background-color: #444; @@ -362,6 +748,12 @@ html[dir=rtl] { fill: currentColor; } +.icon-qr_code { + font-size: 14px; + margin-top: -3px; +} + + @media only screen and (min-width: 576px) { // Seems to be broken in RTL in bootstrap v5.0-beta1, so override here html[dir=rtl] .dropdown-menu-sm-end { @@ -405,8 +797,13 @@ html[dir=rtl] { display: block; } + header { + position: absolute; + right: 1rem; + } + nav { - .navbar-brand, .navbar-toggler, .navbar-collapse, .navbar-nav, li.nav-item, .dropdown { + header, .navbar-brand, .navbar-toggler, .navbar-collapse, .navbar-nav, li.nav-item, .dropdown { display: inline-block; } } diff --git a/assets/css/dark.scss b/assets/css/dark.scss index d1aba85..2b81e49 100755 --- a/assets/css/dark.scss +++ b/assets/css/dark.scss @@ -5,14 +5,30 @@ // Main contents $main-bg: #333; $main-color: #ccc; +$secondary-bg: #4f4f4f; $header-color: #ddd; $borders: #555; +$borders-hover: #777; +$borders-hover-color: #fff; +$light-borders: #444; $blockquote-color: #999; -$code-bg: #3f3f3f; +$code-bg: #5559; $code-color: #ddd; +$code-light: #999; $a-color: #58a6ff; -$small-color: #999; +$small-color: gray; +$textarea-bg: #303030; +$textarea-color: #fff; $carousel-caption-bg: #333b; +$table-alt-bg: #303030; +$kbd-bg: #666; +$kbd-border: #444; +$alert-secondary-bg: #444; +$alert-secondary-border: #2f2f2f; +$details-bg: #3f3f3f; +$active-accordian-bg-color: #393939; +$active-accordian-header-color: #222; +$active-accordian-header-bg-color: #4477ac; // Cards $card-background: #444; @@ -28,11 +44,22 @@ $nav-link-color-active: rgba(255, 255, 255, 1); $dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); $primary: {{ page.color | default: site.color }}; $dark: #f8f9fa; +$dark-always: #343a40; $light: #3f3f3f; $light-border: #292929; $light-placeholder: #999; +$light-disabled: #303030; /// Import base style @import "base"; /// CSS Overrides +// Override FAQ accordian chevron color +#faq-container > details.accordian-item > summary.accordion-button::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ddd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +} + +#faq-container > details.accordian-item[open] > summary.accordion-button::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); +} diff --git a/assets/css/light.scss b/assets/css/light.scss index 22f55c0..5627024 100755 --- a/assets/css/light.scss +++ b/assets/css/light.scss @@ -5,14 +5,30 @@ // Main contents $main-bg: #fff; $main-color: #222; +$secondary-bg: #e9e9e9; $header-color: #222; $borders: #bbb; +$borders-hover: #666; +$borders-hover-color: #fff; +$light-borders: #dee2e6; $blockquote-color: #666; -$code-bg: #e9e9e9; +$code-bg: #ccc6; $code-color: #333; +$code-light: #999; $a-color: #0366d6; -$small-color: #666; +$small-color: gray; +$textarea-bg: $main-bg; +$textarea-color: #000; $carousel-caption-bg: #fffb; +$table-alt-bg: #f3f3f3; +$kbd-bg: #fafafa; +$kbd-border: #ddd; +$alert-secondary-bg: #e9e9e9; +$alert-secondary-border: #bbb; +$details-bg: #f9f9f9; +$active-accordian-bg-color: #fcfcfc; +$active-accordian-header-color: #0c63e4; +$active-accordian-header-bg-color: #e7f1ff; // Cards $card-background: $main-bg; @@ -28,9 +44,11 @@ $nav-link-color-active: rgba(255, 255, 255, 1); $dropdown-item-bg-hover: rgba(0, 0, 0, 0.3); $primary: {{ page.color | default: site.color }}; $dark: #343a40; +$dark-always: #343a40; $light: #f8f9fa; $light-border: #ced4da; $light-placeholder: darkgray; +$light-disabled: #e9ecef; /// Import base style @import "base";