mirror of
https://github.com/docker/docs.git
synced 2026-04-03 09:49:05 +07:00
Merge pull request #11180 from thaJeztah/fix_header_color
Fix header color to be consistent
This commit is contained in:
Usha Mandya
@@ -1,4 +1,4 @@
|
||||
<body ng-app="Docker" ng-controller="DockerController" id="landing">
|
||||
<body ng-app="Docker" ng-controller="DockerController" id="landing" class="landing">
|
||||
<nav class="navbar header">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
/*
|
||||
*
|
||||
* globals
|
||||
*
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-body;
|
||||
color: $body-text-color;
|
||||
color: $body-text;
|
||||
font-family: $font;
|
||||
font-size: $body-text-size;
|
||||
margin: $clear;
|
||||
@@ -30,4 +24,4 @@ a {
|
||||
opacity: .8;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@ h3:hover > a.anchorLink
|
||||
}
|
||||
|
||||
a.glossary {
|
||||
color: $body-text-color;
|
||||
color: $body-text;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
&:hover {
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
$light-blue: #2496ed;
|
||||
$dark-blue: #002c66;
|
||||
$bg-header-night: #101c29;
|
||||
$bg-body-night: #061F2F;
|
||||
$bg-card-night: #0F161E;
|
||||
|
||||
body#landing {
|
||||
background-color: $bg-sidebar;
|
||||
color: $body-text-color;
|
||||
font-size: $body-text-size;
|
||||
margin: $clear;
|
||||
padding: $clear;
|
||||
overflow-x: hidden;
|
||||
body.landing {
|
||||
|
||||
h2, h5, h6 {
|
||||
font-family: 'Geomanist Regular', sans-serif;
|
||||
@@ -22,11 +13,6 @@ body#landing {
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: $light-blue;
|
||||
border: unset;
|
||||
border-radius: unset;
|
||||
height: unset;
|
||||
|
||||
@include md-width {
|
||||
.navbar-collapse.collapse {
|
||||
display: flex !important;
|
||||
@@ -390,14 +376,11 @@ body#landing {
|
||||
}
|
||||
}
|
||||
|
||||
body#landing.night {
|
||||
background-color: $bg-body-night;
|
||||
color: $body-text-color-night;
|
||||
|
||||
.header {
|
||||
background-color: $bg-body-night;
|
||||
}
|
||||
body.landing:not(.night) {
|
||||
background-color: $bg-sidebar;
|
||||
}
|
||||
|
||||
body.landing.night {
|
||||
.card {
|
||||
background-color: $bg-card-night;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
/*
|
||||
*
|
||||
* layout
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* branding *********************************************************************
|
||||
@@ -41,71 +35,15 @@
|
||||
*/
|
||||
|
||||
.header {
|
||||
background: $bg-secondary;
|
||||
// animation: gradientswitch 80s infinite;
|
||||
// -webkit-animation: gradientswitch 80s infinite;
|
||||
background-color: $bg-header;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.1s ease;
|
||||
border: unset;
|
||||
border-radius: unset;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
// @keyframes gradientswitch {
|
||||
// 0% {
|
||||
// background: #0087C9;
|
||||
// }
|
||||
// 16% {
|
||||
// background: #EF4A53;
|
||||
// }
|
||||
// 32% {
|
||||
// background: #FFB463;
|
||||
// }
|
||||
// 49% {
|
||||
// background: #33D5D4;
|
||||
// }
|
||||
// 65% {
|
||||
// background: #254356;
|
||||
// }
|
||||
// 81% {
|
||||
// background: #5B4097
|
||||
// }
|
||||
// 100% {
|
||||
// background: #0087C9
|
||||
// }
|
||||
// }
|
||||
|
||||
// @-webkit-keyframes gradientswitch {
|
||||
// 0% {
|
||||
// background: #0087C9;
|
||||
// }
|
||||
// 16% {
|
||||
// background: #EF4A53;
|
||||
// }
|
||||
// 32% {
|
||||
// background: #FFB463;
|
||||
// }
|
||||
// 49% {
|
||||
// background: #33D5D4;
|
||||
// }
|
||||
// 65% {
|
||||
// background: #254356;
|
||||
// }
|
||||
// 81% {
|
||||
// background: #5B4097
|
||||
// }
|
||||
// 100% {
|
||||
// background: #0087C9
|
||||
// }
|
||||
// }
|
||||
|
||||
// .fan {
|
||||
// // background: linear-gradient(-120deg, rgba(245, 33, 33, 0) 87%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-110deg, rgba(27, 0, 255, 0) 85%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-103deg, rgba(255, 33, 33, 0) 84%, rgba(255, 255, 255, 0.08) 15%), radial-gradient(circle, rgba(0, 135, 201, 0) 0%, rgba(0, 135, 201, 0) 100%);
|
||||
|
||||
// position: absolute;
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// z-index: -1;
|
||||
// }
|
||||
|
||||
.columns,
|
||||
.col-body {
|
||||
display: flex;
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
*/
|
||||
|
||||
.nav-secondary {
|
||||
background: $bg-secondary;
|
||||
background-color: $bg-secondary;
|
||||
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
|
||||
height: 55px;
|
||||
}
|
||||
@@ -76,7 +76,7 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
&.affix {
|
||||
background: $bg-secondary;
|
||||
background-color: $bg-secondary;
|
||||
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.24);
|
||||
top: 0;
|
||||
position: fixed;
|
||||
@@ -146,12 +146,12 @@
|
||||
cursor: default;
|
||||
background: #F3F4F4;
|
||||
color: #2089C4;
|
||||
border-left: 4px solid #077CBC;
|
||||
border-left: 4px solid $primary-links;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-sidebar ul li li a {
|
||||
border-left: 1px solid #077CBC;
|
||||
border-left: 1px solid $primary-links;
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
@@ -210,7 +210,7 @@
|
||||
.toc-nav i.fa {
|
||||
font-size: 14px;
|
||||
margin: 0 8px 0 0;
|
||||
color: #4fa1d0;
|
||||
color: $primary-links;
|
||||
}
|
||||
|
||||
i.fa.fa-question {
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
body.night {
|
||||
background-color: $bg-body-night;
|
||||
color: $body-text-color-night;
|
||||
color: $body-text-night;
|
||||
p,
|
||||
.rating-nero-value,
|
||||
.reading-time {
|
||||
color: $body-text-color-night!important;
|
||||
color: $body-text-night!important;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
@@ -30,8 +30,7 @@ body.night {
|
||||
color: #c7c9ca !important;
|
||||
}
|
||||
.header {
|
||||
background-color: #101c29!important;
|
||||
animation: none!important;
|
||||
background-color: $bg-header-night;
|
||||
}
|
||||
hr {
|
||||
border-top: 1px solid #4f6071;
|
||||
@@ -81,10 +80,10 @@ body.night {
|
||||
.toc-nav li a.active {
|
||||
color: $active-sidebar-night;
|
||||
background: #0a151a;
|
||||
border-left: 4px solid #077CBC;//add to variables
|
||||
border-left: 4px solid $primary-links//add to variables
|
||||
}
|
||||
.tabs li.active a {
|
||||
border-bottom: 4px solid #077CBC;//add to variables
|
||||
border-bottom: 4px solid $primary-links;//add to variables
|
||||
}
|
||||
.slider {
|
||||
background-color: #344658;
|
||||
@@ -146,7 +145,7 @@ body.night {
|
||||
}
|
||||
a.glossary,
|
||||
.toc-nav i.fa{
|
||||
color: $body-text-color-night;
|
||||
color: $body-text-night;
|
||||
}
|
||||
.component img, .component-full-icon img {
|
||||
opacity: 1;
|
||||
@@ -284,7 +283,7 @@ body.night {
|
||||
}
|
||||
/** apply to images with garbled text **/
|
||||
img.white-bg {
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -297,10 +296,10 @@ body.night {
|
||||
|
||||
body.night {
|
||||
/* accordion */
|
||||
.panel {
|
||||
color: #d3d4d4;
|
||||
margin-bottom: 20px;
|
||||
background-color: #24394c;
|
||||
.panel {
|
||||
color: $body-text-night;
|
||||
margin-bottom: 20px;
|
||||
background-color: #24394c;
|
||||
}
|
||||
.panel-default {
|
||||
border-color: #374656;
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
.nav .open>a:focus,
|
||||
.nav .open>a:hover {
|
||||
background-color: transparent;
|
||||
border-color: #337ab7;
|
||||
border-color: $primary-links;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a:focus,
|
||||
|
||||
@@ -27,7 +27,7 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $headings;
|
||||
color: $body-text-color;
|
||||
color: $body-text;
|
||||
clear: both;
|
||||
line-height: 26px;
|
||||
}
|
||||
@@ -61,7 +61,7 @@ h6 {
|
||||
}
|
||||
|
||||
p {
|
||||
color: $body-text-color;
|
||||
color: $body-text;
|
||||
font-family: $font;
|
||||
font-size: $body-text-size;
|
||||
line-height: 24px;
|
||||
|
||||
@@ -1,84 +1,51 @@
|
||||
|
||||
/*
|
||||
*
|
||||
* global +++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
*
|
||||
* global
|
||||
*/
|
||||
|
||||
$headings: "Geomanist Book", sans-serif;
|
||||
|
||||
$font: "Open Sans", sans-serif;
|
||||
|
||||
$body-text-size: 14px;
|
||||
|
||||
$global-header-height: 440px;
|
||||
|
||||
$bg-secondary-tabs: rgba(0, 0, 0, 0.05);
|
||||
|
||||
$white: #fff;
|
||||
|
||||
$black: #000;
|
||||
|
||||
$clear: 0;
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* standard mode
|
||||
*
|
||||
*/
|
||||
$body-text: #33444c;
|
||||
$primary-links: #2496ed;
|
||||
|
||||
$bg-body: #fff;
|
||||
|
||||
$heading-color: #254356;
|
||||
|
||||
$body-text-color: #33444C;//grey #11 in color palette
|
||||
|
||||
$bg-footer: #fff;
|
||||
|
||||
$bg-secondary: #077CBC;
|
||||
|
||||
$bg-sidebar: #FBFBFC;
|
||||
|
||||
$bg-component: #FBFBFC;
|
||||
$bg-body: #ffffff;
|
||||
$bg-header: #2496ed;
|
||||
$bg-secondary: #2496ed;
|
||||
$bg-sidebar: #fbfbfc;
|
||||
$bg-footer: #ffffff;
|
||||
|
||||
$bg-component: #fbfbfc;
|
||||
$bdr-sidebar: rgba(204, 204, 204, 0.29);
|
||||
|
||||
$primary-links: #0090C8;
|
||||
|
||||
$slider-bg: #c3e4f7;
|
||||
|
||||
$slider-btn: #4fa1d0;
|
||||
$slider-bg: #c3e4f7;
|
||||
$slider-btn: #2496ed;
|
||||
|
||||
$code-blocks: rgba(12, 81, 118, 0.1);
|
||||
|
||||
$table-head: #CFD2D4;
|
||||
$table-head: #cfd2d4;
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* night mode
|
||||
*
|
||||
*/
|
||||
$body-text-night: #d3d4d4;
|
||||
$primary-links-night: #9cd7f7;
|
||||
|
||||
$bg-body-night: #061F2F;
|
||||
|
||||
$body-text-color-night: #d3d4d4;
|
||||
|
||||
$bg-secondary-night: #27343B;
|
||||
|
||||
$bg-sidebar-night: #101e26;
|
||||
$bg-body-night: #061F2F;
|
||||
$bg-header-night: #101c29;
|
||||
$bg-secondary-night: #101c29;
|
||||
$bg-sidebar-night: #101e26;
|
||||
$bg-footer-night: #000000;
|
||||
|
||||
$active-sidebar-night: #077CBC;
|
||||
|
||||
$bg-component-night: #101c29;
|
||||
|
||||
$heading-color-night: #b9c2cc;
|
||||
|
||||
$body-text-night: #cbdbe6;
|
||||
|
||||
$primary-links-night: #9CD7F7;
|
||||
|
||||
$bg-footer-night: #000;
|
||||
|
||||
$bg-search-results-night: rgba(10, 10, 10, 0.95);
|
||||
|
||||
Reference in New Issue
Block a user