Commit 3877b542 authored by Chaoting Liu's avatar Chaoting Liu
Browse files

change to blue-based themem

parent 6e539cf0
Pipeline #3500 failed with stage
in 0 seconds
......@@ -5,7 +5,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #7FBEEB;
--blue: #00acff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
......@@ -18,7 +18,7 @@
--white: #fff;
--gray: #868e96;
--gray-dark: #343a40;
--primary: #0073AA;
--primary: #00acff;
--secondary: #868e96;
--success: #28a745;
--info: #17a2b8;
......@@ -151,12 +151,12 @@ sup {
}
a {
color: #0073AA;
color: #00acff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #003f5e;
color: #0078b3;
text-decoration: underline;
}
......@@ -1556,21 +1556,21 @@ pre code {
.table-primary,
.table-primary > th,
.table-primary > td {
background-color: #b8d8e7;
background-color: #b8e8ff;
}
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
border-color: #7ab6d3;
border-color: #7ad4ff;
}
.table-hover .table-primary:hover {
background-color: #a5cee1;
background-color: #9fe0ff;
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
background-color: #a5cee1;
background-color: #9fe0ff;
}
.table-secondary,
......@@ -1839,9 +1839,9 @@ pre code {
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #2bbaff;
border-color: #80d6ff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.form-control::placeholder {
color: #868e96;
......@@ -2284,7 +2284,7 @@ textarea.form-control {
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.btn.disabled, .btn:disabled {
opacity: 0.65;
......@@ -2297,29 +2297,29 @@ fieldset:disabled a.btn {
.btn-primary {
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.btn-primary:hover {
color: #fff;
background-color: #005984;
border-color: #005177;
background-color: #0092d9;
border-color: #008acc;
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(38, 136, 183, 0.5);
box-shadow: 0 0 0 0.2rem rgba(38, 184, 255, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #005177;
border-color: #00486a;
background-color: #008acc;
border-color: #0081bf;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 136, 183, 0.5);
box-shadow: 0 0 0 0.2rem rgba(38, 184, 255, 0.5);
}
.btn-secondary {
......@@ -2512,28 +2512,28 @@ fieldset:disabled a.btn {
}
.btn-outline-primary {
color: #0073AA;
border-color: #0073AA;
color: #00acff;
border-color: #00acff;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.5);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: #0073AA;
color: #00acff;
background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.5);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.5);
}
.btn-outline-secondary {
......@@ -2713,11 +2713,11 @@ fieldset:disabled a.btn {
.btn-link {
font-weight: 400;
color: #0073AA;
color: #00acff;
text-decoration: none;
}
.btn-link:hover {
color: #003f5e;
color: #0078b3;
text-decoration: underline;
}
.btn-link:focus, .btn-link.focus {
......@@ -2991,7 +2991,7 @@ input[type="button"].btn-block {
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #0073AA;
background-color: #00acff;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: #868e96;
......@@ -3313,19 +3313,19 @@ input[type="button"].btn-block {
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #0073AA;
background-color: #0073AA;
border-color: #00acff;
background-color: #00acff;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: #2bbaff;
border-color: #80d6ff;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
color: #fff;
background-color: #5ecbff;
border-color: #5ecbff;
background-color: #b3e6ff;
border-color: #b3e6ff;
}
.custom-control-input:disabled ~ .custom-control-label {
color: #868e96;
......@@ -3369,17 +3369,17 @@ input[type="button"].btn-block {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
border-color: #0073AA;
background-color: #0073AA;
border-color: #00acff;
background-color: #00acff;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 115, 170, 0.5);
background-color: rgba(0, 172, 255, 0.5);
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
background-color: rgba(0, 115, 170, 0.5);
background-color: rgba(0, 172, 255, 0.5);
}
.custom-radio .custom-control-label::before {
......@@ -3389,7 +3389,7 @@ input[type="button"].btn-block {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 115, 170, 0.5);
background-color: rgba(0, 172, 255, 0.5);
}
.custom-switch {
......@@ -3420,7 +3420,7 @@ input[type="button"].btn-block {
transform: translateX(0.75rem);
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 115, 170, 0.5);
background-color: rgba(0, 172, 255, 0.5);
}
.custom-select {
......@@ -3440,9 +3440,9 @@ input[type="button"].btn-block {
appearance: none;
}
.custom-select:focus {
border-color: #2bbaff;
border-color: #80d6ff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-select:focus::-ms-value {
color: #495057;
......@@ -3494,8 +3494,8 @@ input[type="button"].btn-block {
opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
border-color: #2bbaff;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
border-color: #80d6ff;
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-file-input:disabled ~ .custom-file-label {
background-color: #e9ecef;
......@@ -3550,13 +3550,13 @@ input[type="button"].btn-block {
outline: none;
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-range:focus::-ms-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.custom-range::-moz-focus-outer {
border: 0;
......@@ -3565,7 +3565,7 @@ input[type="button"].btn-block {
width: 1rem;
height: 1rem;
margin-top: -0.25rem;
background-color: #0073AA;
background-color: #00acff;
border: 0;
border-radius: 1rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
......@@ -3577,7 +3577,7 @@ input[type="button"].btn-block {
}
}
.custom-range::-webkit-slider-thumb:active {
background-color: #5ecbff;
background-color: #b3e6ff;
}
.custom-range::-webkit-slider-runnable-track {
width: 100%;
......@@ -3591,7 +3591,7 @@ input[type="button"].btn-block {
.custom-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
background-color: #0073AA;
background-color: #00acff;
border: 0;
border-radius: 1rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
......@@ -3603,7 +3603,7 @@ input[type="button"].btn-block {
}
}
.custom-range::-moz-range-thumb:active {
background-color: #5ecbff;
background-color: #b3e6ff;
}
.custom-range::-moz-range-track {
width: 100%;
......@@ -3620,7 +3620,7 @@ input[type="button"].btn-block {
margin-top: 0;
margin-right: 0.2rem;
margin-left: 0.2rem;
background-color: #0073AA;
background-color: #00acff;
border: 0;
border-radius: 1rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
......@@ -3632,7 +3632,7 @@ input[type="button"].btn-block {
}
}
.custom-range::-ms-thumb:active {
background-color: #5ecbff;
background-color: #b3e6ff;
}
.custom-range::-ms-track {
width: 100%;
......@@ -3739,7 +3739,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #0073AA;
background-color: #00acff;
}
.nav-fill .nav-item {
......@@ -4340,13 +4340,13 @@ input[type="button"].btn-block {
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #0073AA;
color: #00acff;
background-color: #fff;
border: 1px solid #dee2e6;
}
.page-link:hover {
z-index: 2;
color: #003f5e;
color: #0078b3;
text-decoration: none;
background-color: #e9ecef;
border-color: #dee2e6;
......@@ -4354,7 +4354,7 @@ input[type="button"].btn-block {
.page-link:focus {
z-index: 2;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.25);
}
.page-item:first-child .page-link {
......@@ -4369,8 +4369,8 @@ input[type="button"].btn-block {
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.page-item.disabled .page-link {
color: #868e96;
......@@ -4445,15 +4445,15 @@ a.badge:hover, a.badge:focus {
.badge-primary {
color: #fff;
background-color: #0073AA;
background-color: #00acff;
}
a.badge-primary:hover, a.badge-primary:focus {
color: #fff;
background-color: #005177;
background-color: #008acc;
}
a.badge-primary:focus, a.badge-primary.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.5);
box-shadow: 0 0 0 0.2rem rgba(0, 172, 255, 0.5);
}
.badge-secondary {
......@@ -4593,15 +4593,15 @@ a.badge-dark:focus, a.badge-dark.focus {
}
.alert-primary {
color: #003c58;
background-color: #cce3ee;
border-color: #b8d8e7;
color: #005985;
background-color: #cceeff;
border-color: #b8e8ff;
}
.alert-primary hr {
border-top-color: #a5cee1;
border-top-color: #9fe0ff;
}
.alert-primary .alert-link {
color: #001925;
color: #003752;
}
.alert-secondary {
......@@ -4712,7 +4712,7 @@ a.badge-dark:focus, a.badge-dark.focus {
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #0073AA;
background-color: #00acff;
transition: width 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
......@@ -4792,8 +4792,8 @@ a.badge-dark:focus, a.badge-dark.focus {
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #0073AA;
border-color: #0073AA;
background-color: #00acff;
border-color: #00acff;
}
.list-group-horizontal {
......@@ -4912,17 +4912,17 @@ a.badge-dark:focus, a.badge-dark.focus {
}
.list-group-item-primary {
color: #003c58;
background-color: #b8d8e7;
color: #005985;
background-color: #b8e8ff;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
color: #003c58;
background-color: #a5cee1;
color: #005985;
background-color: #9fe0ff;
}
.list-group-item-primary.list-group-item-action.active {
color: #fff;
background-color: #003c58;
border-color: #003c58;
background-color: #005985;
border-color: #005985;
}
.list-group-item-secondary {
......@@ -5775,13 +5775,13 @@ a.close.disabled {
}
.bg-primary {
background-color: #0073AA !important;
background-color: #00acff !important;
}
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
background-color: #005177 !important;
background-color: #008acc !important;
}
.bg-secondary {
......@@ -5903,7 +5903,7 @@ button.bg-dark:focus {
}
.border-primary {
border-color: #0073AA !important;
border-color: #00acff !important;
}
.border-secondary {
......@@ -9453,11 +9453,11 @@ button.bg-dark:focus {
}
.text-primary {
color: #0073AA !important;
color: #00acff !important;
}
a.text-primary:hover, a.text-primary:focus {
color: #003f5e !important;
color: #0078b3 !important;
}
.text-secondary {
......@@ -9668,7 +9668,7 @@ html {
hr.divider {
max-width: 3.25rem;
border-width: 0.2rem;
border-color: #0073AA;
border-color: #00acff;
}
hr.light {
......@@ -9710,10 +9710,10 @@ hr.light {
padding: 0.75rem 0;
}
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
color: #0073AA;
color: #00acff;
}
#mainNav .navbar-nav .nav-item .nav-link.active {
color: #0073AA !important;
color: #00acff !important;
}
@media (min-width: 992px) {
#mainNav {
......@@ -9744,20 +9744,20 @@ hr.light {
color: #0073AA;
}
#mainNav.navbar-scrolled .navbar-brand:hover {
color: #0073AA;
color: #00acff;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
color: #0073AA;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
color: #0073AA;
color: #00acff;
}
}
header.masthead {
padding-top: 10rem;
padding-bottom: calc(10rem - 72px);
background: linear-gradient(to bottom, rgba(73, 80, 87, 0.8) 0%, rgba(73, 80, 87, 0.8) 100%), url("../img/bg-masthead.jpg");
background: linear-gradient(to bottom, rgba(52, 58, 64, 0.8) 0%, rgba(52, 58, 64, 0.8) 100%), url("../img/bg-masthead.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
......@@ -9766,6 +9766,9 @@ header.masthead {
header.masthead h1 {
font-size: 2.25rem;
}
header.masthead col-lg-8 {
color: #00acff;
}
@media (min-width: 992px) {
header.masthead {
height: 100vh;
......@@ -9805,7 +9808,7 @@ header.masthead h1 {
text-align: center;
opacity: 0;
color: #fff;
background: rgba(0, 115, 170, 0.9);
background: rgba(0, 172, 255, 0.9);
transition: opacity 0.25s ease;
text-align: center;
}
......
This diff is collapsed.
......@@ -4,7 +4,7 @@ header.masthead {
padding-bottom: calc(10rem - #{$navbar-height});
// replace the masthead.jpg image in the /img directory to change the image
// if the image name change, make sure to update the url path below!
background: linear-gradient(to bottom, #{fade-out($gray-700, .2)} 0%,#{fade-out($gray-700, .2)} 100%), url('../img/bg-masthead.jpg');
background: linear-gradient(to bottom, #{fade-out($gray-800, .2)} 0%,#{fade-out($gray-800, .2)} 100%), url('../img/bg-masthead.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
......@@ -12,6 +12,9 @@ header.masthead {
h1 {
font-size: 2.25rem;
}
col-lg-8 {
color: $blue;
}
@include media-breakpoint-up(lg) {
height: 100vh;
min-height: 40rem;
......
......@@ -14,10 +14,10 @@ $gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #0073AA !default;
$black: #000 !default;
$blue: #7FBEEB !default;
$blue: #00acff !default;
// Set primary color to orange
$primary: $gray-900 !default;
$primary: $blue !default;
// Font overrides
$font-family-sans-serif: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 'Noto Color Emoji' !default;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment