Update text colors to more closely match original palette, Add -blacktext classes for navbar colors where 600 is white and 500 is black
This commit is contained in:
parent
ee21ff9ec8
commit
8c98f168a7
@ -1,4 +1,8 @@
|
||||
/* Material-Color.css Copyright (c) 2017 Netsyms Technologies MIT License */
|
||||
/* Material-Color.css
|
||||
* Copyright (c) 2017 Netsyms Technologies
|
||||
* MIT License
|
||||
* https://source.netsyms.com/Netsyms/Material-Color
|
||||
*/
|
||||
|
||||
/*****************************************************\
|
||||
PANELS
|
||||
@ -31,7 +35,7 @@
|
||||
|
||||
.panel-blue .panel-heading {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.panel-light-blue .panel-heading {
|
||||
@ -81,7 +85,7 @@
|
||||
|
||||
.panel-deep-orange .panel-heading {
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.panel-brown .panel-heading {
|
||||
@ -225,7 +229,7 @@
|
||||
|
||||
.alert-blue {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.alert-light-blue {
|
||||
@ -275,7 +279,7 @@
|
||||
|
||||
.alert-deep-orange {
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.alert-brown {
|
||||
@ -702,6 +706,72 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* blue with black text */
|
||||
|
||||
.navbar-blue-blacktext {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-brand {
|
||||
color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-brand:hover,
|
||||
.navbar-blue-blacktext .navbar-brand:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > li > a:hover,
|
||||
.navbar-blue-blacktext .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > .active > a,
|
||||
.navbar-blue-blacktext .navbar-nav > .active > a:hover,
|
||||
.navbar-blue-blacktext .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a,
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a:hover,
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-blue-blacktext .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a .caret,
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-blue-blacktext .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-toggle:hover,
|
||||
.navbar-blue-blacktext .navbar-toggle:focus {
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-blue-blacktext .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-blue-blacktext .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-blue-blacktext .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* light-blue */
|
||||
|
||||
@ -910,45 +980,45 @@
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.navbar-green .navbar-brand {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-green .navbar-brand:hover,
|
||||
.navbar-green .navbar-brand:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav > li > a {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav > li > a:hover,
|
||||
.navbar-green .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav > .active > a,
|
||||
.navbar-green .navbar-nav > .active > a:hover,
|
||||
.navbar-green .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green .navbar-nav > .open > a,
|
||||
.navbar-green .navbar-nav > .open > a:hover,
|
||||
.navbar-green .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-green .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav > .open > a .caret,
|
||||
.navbar-green .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-green .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-green .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
@ -958,14 +1028,81 @@
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
background-color: white;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-green .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* green with black text */
|
||||
|
||||
.navbar-green-blacktext {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-brand {
|
||||
color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-brand:hover,
|
||||
.navbar-green-blacktext .navbar-brand:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > li > a:hover,
|
||||
.navbar-green-blacktext .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > .active > a,
|
||||
.navbar-green-blacktext .navbar-nav > .active > a:hover,
|
||||
.navbar-green-blacktext .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > .open > a,
|
||||
.navbar-green-blacktext .navbar-nav > .open > a:hover,
|
||||
.navbar-green-blacktext .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-green-blacktext .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav > .open > a .caret,
|
||||
.navbar-green-blacktext .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-green-blacktext .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green-blacktext .navbar-toggle:hover,
|
||||
.navbar-green-blacktext .navbar-toggle:focus {
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-green-blacktext .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-green-blacktext .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-green-blacktext .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-green-blacktext .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@ -1372,6 +1509,71 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* deep-orange with black text */
|
||||
.navbar-deep-orange-blacktext {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-brand {
|
||||
color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-brand:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-brand:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > li > a:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .active > a,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .active > a:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a .caret,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-deep-orange-blacktext .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-toggle:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-toggle:focus {
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-deep-orange-blacktext .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-deep-orange-blacktext .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-deep-orange-blacktext .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* brown */
|
||||
|
||||
@ -1446,45 +1648,45 @@
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.navbar-grey .navbar-brand {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-grey .navbar-brand:hover,
|
||||
.navbar-grey .navbar-brand:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav > li > a {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav > li > a:hover,
|
||||
.navbar-grey .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav > .active > a,
|
||||
.navbar-grey .navbar-nav > .active > a:hover,
|
||||
.navbar-grey .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey .navbar-nav > .open > a,
|
||||
.navbar-grey .navbar-nav > .open > a:hover,
|
||||
.navbar-grey .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
color: white;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-grey .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav > .open > a .caret,
|
||||
.navbar-grey .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-grey .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
border-top-color: white;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.navbar-grey .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
@ -1494,14 +1696,81 @@
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
background-color: white;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-grey .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-grey .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-grey .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* grey with black text */
|
||||
|
||||
.navbar-grey-blacktext {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-brand {
|
||||
color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-brand:hover,
|
||||
.navbar-grey-blacktext .navbar-brand:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > li > a:hover,
|
||||
.navbar-grey-blacktext .navbar-nav > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > .active > a,
|
||||
.navbar-grey-blacktext .navbar-nav > .active > a:hover,
|
||||
.navbar-grey-blacktext .navbar-nav > .active > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a,
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a:hover,
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a:focus {
|
||||
color: black;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > .dropdown > a .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-grey-blacktext .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a .caret,
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a:hover .caret,
|
||||
.navbar-grey-blacktext .navbar-nav > .open > a:focus .caret {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-toggle {
|
||||
border-color: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-toggle:hover,
|
||||
.navbar-grey-blacktext .navbar-toggle:focus {
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-toggle .icon-bar {
|
||||
background-color: black;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-grey-blacktext .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: black;
|
||||
}
|
||||
.navbar-grey-blacktext .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.navbar-grey-blacktext .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@ -1604,7 +1873,7 @@
|
||||
|
||||
.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn-light-blue, .btn-light-blue:hover, .btn-light-blue:active, .btn-light-blue:focus {
|
||||
@ -1654,7 +1923,7 @@
|
||||
|
||||
.btn-deep-orange, .btn-deep-orange:hover, .btn-deep-orange:active, .btn-deep-orange:focus {
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn-brown, .btn-brown:hover, .btn-brown:active, .btn-brown:focus {
|
||||
@ -1783,7 +2052,7 @@
|
||||
|
||||
.label-blue {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.label-light-blue {
|
||||
@ -1833,7 +2102,7 @@
|
||||
|
||||
.label-deep-orange {
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.label-brown {
|
||||
@ -1882,7 +2151,7 @@
|
||||
|
||||
.progress-bar-blue {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.progress-bar-light-blue {
|
||||
@ -1932,7 +2201,7 @@
|
||||
|
||||
.progress-bar-deep-orange {
|
||||
background-color: #ff5722;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.progress-bar-brown {
|
||||
@ -1948,4 +2217,4 @@
|
||||
.progress-bar-blue-grey {
|
||||
background-color: #607d8b;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
8
material-color.min.css
vendored
8
material-color.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user