| /* Style overrides for light and dark mode / theme */ | |
| html, html[data-theme="light"] { | |
| --main-navbar-color: #eee; | |
| --main-navbar-li-active-text-color: rgb(152, 144, 130); | |
| --main-navbar-li-active-text-color: #818181; | |
| --main-navbar-li-active-background-color: #dfdfdf; | |
| --main-background-color: #fff; | |
| --main-text-color: #000; | |
| --main-border-color: #ccc; | |
| --main-code-text-color: #c7254e; | |
| --main-code-background-color: #f9f2f4;; | |
| --main-syntax-highlight-background-color: #fff0f0; | |
| --main-syntax-highlight-o-text-color: #333; | |
| --main-carousel-color: #333; | |
| --main-post-date-author: rgba(77,77,77,0.75); | |
| --main-navbar-text-color: #000; | |
| --main-a-text-color: #428bca; | |
| --main-a-hover-focus-color: #2a6496; | |
| --main-sidebar-nav-a-active: #000; | |
| --main-hr-border-color: #eee; | |
| } | |
| html[data-theme="dark"] { | |
| --main-navbar-color: rgb(34, 36, 38); | |
| --main-navbar-li-active-text-color: rgb(152, 144, 130); | |
| --main-navbar-li-active-background-color: rgb(42, 46, 47); | |
| --main-background-color: rgb(24, 26, 27); | |
| --main-text-color: rgb(200, 195, 188); | |
| --main-border-color: rgb(62, 68, 70); | |
| --main-code-text-color: rgb(221, 73, 110); | |
| --main-code-background-color: rgb(43, 20, 26); | |
| --main-syntax-highlight-background-color: rgb(60, 0, 0); | |
| --main-syntax-highlight-o-text-color: rgb(200, 195, 188); | |
| --main-carousel-color: #fff; | |
| --main-post-date-author: rgba(183, 177, 168, 0.75); | |
| --main-navbar-text-color: #fff; | |
| --main-a-text-color: rgb(125, 178, 219); | |
| --main-a-hover-focus-color: rgb(125, 178, 219); | |
| --main-sidebar-nav-a-active: rgb(232, 230, 227); | |
| --main-hr-border-color: rgb(53, 57, 59); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| html, html[data-theme="dark"] { | |
| --main-navbar-color: rgb(34, 36, 38); | |
| --main-navbar-li-active-text-color: rgb(152, 144, 130); | |
| --main-navbar-li-active-background-color: rgb(42, 46, 47); | |
| --main-background-color: rgb(24, 26, 27); | |
| --main-text-color: rgb(200, 195, 188); | |
| --main-border-color: rgb(62, 68, 70); | |
| --main-code-text-color: rgb(221, 73, 110); | |
| --main-code-background-color: rgb(43, 20, 26); | |
| --main-syntax-highlight-background-color: rgb(60, 0, 0); | |
| --main-syntax-highlight-o-text-color: rgb(200, 195, 188); | |
| --main-carousel-color: #fff; | |
| --main-post-date-author: rgba(183, 177, 168, 0.75); | |
| --main-navbar-text-color: #fff; | |
| --main-a-text-color: rgb(125, 178, 219); | |
| --main-a-hover-focus-color: rgb(125, 178, 219); | |
| --main-sidebar-nav-a-active: rgb(232, 230, 227); | |
| --main-hr-border-color: rgb(53, 57, 59); | |
| } | |
| html[data-theme="light"] { | |
| --main-navbar-color: #eee; | |
| --main-navbar-li-active-text-color: rgb(152, 144, 130); | |
| --main-navbar-li-active-text-color: #818181; | |
| --main-navbar-li-active-background-color: #dfdfdf; | |
| --main-text-color: #000; | |
| --main-background-color: #fff; | |
| --main-border-color: #ccc; | |
| --main-code-text-color: #c7254e; | |
| --main-code-background-color: #f9f2f4;; | |
| --main-syntax-highlight-background-color: #fff0f0; | |
| --main-syntax-highlight-o-text-color: #333; | |
| --main-carousel-color: #333; | |
| --main-post-date-author: rgba(77,77,77,0.75); | |
| --main-navbar-text-color: #000; | |
| --main-a-text-color: #428bca; | |
| --main-a-hover-focus-color: #2a6496; | |
| --main-sidebar-nav-a-active: #000; | |
| --main-hr-border-color: #eee; | |
| } | |
| } | |
| html, body { | |
| height: 100%; | |
| background-color: var(--main-background-color); | |
| color: var(--main-text-color); | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 1.6em; | |
| padding-top: 80px; | |
| } | |
| h2 { | |
| margin-top: 30px; | |
| } | |
| /* Needed so when user click on a link which points to the anchor we end up slightly | |
| * above the anchor and not below it. */ | |
| h2:before { | |
| display: block; | |
| content: " "; | |
| margin-top: -90px; | |
| height: 90px; | |
| visibility: hidden; | |
| } | |
| .anchor { | |
| padding-top: 80px; | |
| margin-top: -70px; | |
| } | |
| a[name] { | |
| color: #000000; | |
| text-decoration: none; | |
| } | |
| /* Navigation bar styles */ | |
| .navbar-brand { | |
| font-weight: 600; | |
| padding-top: 18px !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .navbar-logo { | |
| padding-top: 1px !important; | |
| margin-top: -8px; | |
| margin-right: 10px; | |
| } | |
| /* Add top border, remove bottom one */ | |
| nav.navbar { | |
| border-top: #0c60ff 10px solid; | |
| border-bottom: none; | |
| } | |
| /* Increase default navbar height */ | |
| .navbar-fixed-top { | |
| height: 73px; | |
| } | |
| .navbar-nav > li > a { | |
| padding-top: 21px !important; | |
| padding-bottom: 21px !important; | |
| font-size: 1.1em; | |
| } | |
| /* Custom background color for the navbar */ | |
| .navbar-inverse { | |
| background-color: var(--main-navbar-color); | |
| } | |
| /* Custom hover background */ | |
| ul.nav.navbar-nav li a { | |
| color: #818181; | |
| } | |
| .navbar-inverse .navbar-nav > li > a:hover { | |
| background-color: #3ca8ff; | |
| } | |
| .navbar-brand { | |
| color: var(--main-navbar-text-color) !important; | |
| } | |
| .navbar-nav > li.active > a { | |
| color: var(--main-navbar-li-active-text-color) !important; | |
| background-color: var(--main-navbar-li-active-background-color) !important; | |
| } | |
| /* Custom color for responsive button thingy */ | |
| .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle { | |
| background-color: #818181; | |
| border: none; | |
| } | |
| .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { | |
| background-color: #3ca8ff; | |
| border: none; | |
| } | |
| /* Custom style for responsive menu bar */ | |
| .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { | |
| background-color: var(--main-navbar-color); | |
| /*border-top: #0c60ff solid;*/ | |
| } | |
| /* Homepage */ | |
| img.provider-logo { | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| h2.tagline { | |
| font-size: 1.5em; | |
| margin-bottom: 20px; | |
| } | |
| div.row-2 { | |
| margin-top: 20px; | |
| } | |
| div.row-3, div.row-4 { | |
| margin-top: 20px; | |
| } | |
| div.whos-using { | |
| margin-bottom: 15px; | |
| } | |
| img.logo { | |
| margin-left: 5px; | |
| margin-right: 5px; | |
| } | |
| /* Carousel */ | |
| /* Only specify height for larger resolutions */ | |
| @media (min-width: 992px) { | |
| #carousel-provider-logos { | |
| height: 85px; | |
| } | |
| } | |
| .carousel-inner > .item > img, .carousel-inner > .item > a > img { | |
| display: inline; | |
| } | |
| .carousel-control.left, .carousel-control.right { | |
| background: none !important; | |
| } | |
| .carousel-control { | |
| color: var(--main-carousel-color) !important; | |
| } | |
| /* Content pages */ | |
| div.sidebar-nav { | |
| position: fixed; | |
| margin-top: 20px; | |
| } | |
| @media (max-width: 1200px) { | |
| div.sidebar-nav { | |
| position: relative; | |
| } | |
| } | |
| .sidebar-nav > ul > li > a { | |
| padding: 5px 10px; | |
| } | |
| .sidebar-nav > ul > li.active > a { | |
| color: var(--main-sidebar-nav-a-active); | |
| text-decoration: none; | |
| cursor: default; | |
| } | |
| .sidebar-nav > ul > li.active > a:hover { | |
| color: var(--main-sidebar-nav-a-active); | |
| background-color: var(--main-navbar-color); | |
| text-decoration: none; | |
| cursor: default; | |
| } | |
| .sidebar-nav > ul > li > a:hover { | |
| background-color: var(--main-navbar-color); | |
| } | |
| /* Credits page */ | |
| div.member { | |
| margin-bottom: 20px; | |
| } | |
| img.gravatar { | |
| float: left; | |
| display: block; | |
| margin-right: 10px; | |
| } | |
| /* Other */ | |
| div.page-content { | |
| font-size: 12pt; | |
| } | |
| img.inline { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| img.center { | |
| margin: 0 auto; | |
| } | |
| /* Blog styles */ | |
| div.post h2 { | |
| margin-bottom: 10px; | |
| } | |
| div.post pre { | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| } | |
| pre { | |
| background-color: var(--main-navbar-color); | |
| color: var(--main-text-color); | |
| } | |
| .popover { | |
| background-color: var(--main-background-color); | |
| border: 1px solid var(--main-border-color); | |
| } | |
| pre { | |
| border: 1px solid var(--main-border-color); | |
| } | |
| span.post-date-author { | |
| font-style: italic; | |
| color: var(--main-post-date-author); | |
| } | |
| div.post-content { | |
| margin-top: 20px; | |
| } | |
| div.post-meta { | |
| margin-top: 30px; | |
| } | |
| div.imginline { | |
| text-align: center; | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| img.inline { | |
| border: none !important; | |
| margin: 0 auto 8px; | |
| } | |
| p.img-caption { | |
| margin-top: 10px; | |
| } | |
| /* Misc */ | |
| code { | |
| font-family: 'Inconsolata', monospace; | |
| font-size: 11pt !important; | |
| } | |
| code span[id] { | |
| cursor: pointer; | |
| } | |
| code span[id]:hover { | |
| background-color: white; | |
| } | |
| /* Footer */ | |
| footer { | |
| margin: 20px 0; | |
| font-size: 0.9em; | |
| } | |
| div.footer-text { | |
| margin-top: 10px; | |
| } | |
| /* Overrides for purposes of dark and light theme. */ | |
| hr { | |
| border-color: var(--main-hr-border-color); | |
| } | |
| a { | |
| color: var(--main-a-text-color); | |
| } | |
| a:hover, | |
| a:focus { | |
| color: var(--main-a-hover-focus-color); | |
| } | |
| /* Syntax highlighter classes */ | |
| .s { | |
| background-color: var(--main-syntax-highlight-background-color); | |
| } | |
| .o { | |
| color: var(--main-syntax-highlight-o-text-color); | |
| } | |
| code { | |
| color: var(--main-code-text-color); | |
| background-color: var(--main-code-background-color); | |
| } | |
| span.theme-switch { | |
| color: var(--main-navbar-li-active-text-color); | |
| margin-left: 7px; | |
| font-size: 0.85em; | |
| } |