Browse Source

Update text colors to more closely match original palette, Add -blacktext classes for navbar colors where 600 is white and 500 is black

bootstrap-3
Skylar Ittner 4 years ago
parent
commit
8c98f168a7
  1. 349
      material-color.css
  2. 8
      material-color.min.css

349
material-color.css

@ -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
File diff suppressed because it is too large
View File

Loading…
Cancel
Save