diff --git a/tethysapp/app_store/public/css/labels.css b/tethysapp/app_store/public/css/labels.css index 700c87f..0f2fb4f 100644 --- a/tethysapp/app_store/public/css/labels.css +++ b/tethysapp/app_store/public/css/labels.css @@ -61,12 +61,6 @@ color: var(--bs-primary); text-decoration: none; } -.custom-label:active { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); -} .channels_container{ display: flex; @@ -134,6 +128,12 @@ border-color: var(--bs-blue); } +.nav-link.active .label-outline-blue { + color: var(--bs-white); + background-color: var(--bs-blue); + border-color: var(--bs-blue); +} + /* indigo outline label */ .label-outline-indigo { color: var(--bs-indigo); @@ -146,6 +146,12 @@ border-color: var(--bs-indigo); } +.nav-link.active .label-outline-indigo { + color: var(--bs-white); + background-color: var(--bs-indigo); + border-color: var(--bs-indigo); +} + /* purple outline label */ .label-outline-purple { color: var(--bs-purple); @@ -158,17 +164,30 @@ border-color: var(--bs-purple); } +.nav-link.active .label-outline-purple { + color: var(--bs-white); + background-color: var(--bs-purple); + border-color: var(--bs-purple); +} + /* pink outline label */ .label-outline-pink { color: var(--bs-pink); border-color: var(--bs-pink); } + .label-outline-pink:hover { color: var(--bs-white); background-color: var(--bs-pink); border-color: var(--bs-pink); } +.nav-link.active .label-outline-pink { + color: var(--bs-white); + background-color: var(--bs-pink); + border-color: var(--bs-pink); +} + /* red outline label */ .label-outline-red { color: var(--bs-red); @@ -181,6 +200,12 @@ border-color: var(--bs-red); } +.nav-link.active .label-outline-red { + color: var(--bs-white); + background-color: var(--bs-red); + border-color: var(--bs-red); +} + /* orange outline label */ .label-outline-orange { color: var(--bs-orange); @@ -193,10 +218,16 @@ border-color: var(--bs-orange); } +.nav-link.active .label-outline-orange { + color: var(--bs-white); + background-color: var(--bs-orange); + border-color: var(--bs-orange); +} + /* yellow outline label */ .label-outline-yellow { - color: var(--bs-orange); - border-color: var(--bs-orange); + color: var(--bs-yellow); + border-color: var(--bs-yellow); } .label-outline-yellow:hover { @@ -205,6 +236,12 @@ border-color: var(--bs-yellow); } +.nav-link.active .label-outline-yellow { + color: var(--bs-white); + background-color: var(--bs-yellow); + border-color: var(--bs-yellow); +} + /* green outline label */ .label-outline-green { color: var(--bs-green); @@ -216,6 +253,13 @@ background-color: var(--bs-green); border-color: var(--bs-green); } + +.nav-link.active .label-outline-green { + color: var(--bs-white); + background-color: var(--bs-green); + border-color: var(--bs-green); +} + /* teal outline label */ .label-outline-teal { color: var(--bs-teal); @@ -228,6 +272,12 @@ border-color: var(--bs-teal); } +.nav-link.active .label-outline-teal { + color: var(--bs-white); + background-color: var(--bs-teal); + border-color: var(--bs-teal); +} + /* cyan outline label */ .label-outline-cyan { color: var(--bs-cyan); @@ -240,6 +290,12 @@ border-color: var(--bs-cyan); } +.nav-link.active .label-outline-cyan { + color: var(--bs-white); + background-color: var(--bs-cyan); + border-color: var(--bs-cyan); +} + /* gray outline label */ .label-outline-gray { color: var(--bs-gray); @@ -252,6 +308,12 @@ border-color: var(--bs-gray); } +.nav-link.active .label-outline-gray { + color: var(--bs-white); + background-color: var(--bs-gray); + border-color: var(--bs-gray); +} + /* gray-dark outline label */ .label-outline-gray-dark { color: var(--bs-gray-dark); @@ -264,6 +326,12 @@ border-color: var(--bs-gray-dark); } +.nav-link.active .label-outline-gray-dark { + color: var(--bs-white); + background-color: var(--bs-gray-dark); + border-color: var(--bs-gray-dark); +} + /* primary outline label */ .label-outline-primary { color: var(--bs-primary); @@ -276,6 +344,12 @@ border-color: var(--bs-primary); } +.nav-link.active .label-outline-primary { + color: var(--bs-white); + background-color: var(--bs-primary); + border-color: var(--bs-primary); +} + /* secondary outline label */ .label-outline-secondary { color: var(--bs-secondary); @@ -287,6 +361,13 @@ background-color: var(--bs-secondary); border-color: var(--bs-secondary); } + +.nav-link.active .label-outline-secondary { + color: var(--bs-white); + background-color: var(--bs-secondary); + border-color: var(--bs-secondary); +} + /* success outline label */ .label-outline-success { color: var(--bs-success); @@ -299,6 +380,12 @@ border-color: var(--bs-success); } +.nav-link.active .label-outline-success { + color: var(--bs-white); + background-color: var(--bs-success); + border-color: var(--bs-success); +} + /* info outline label */ .label-outline-info { color: var(--bs-info); @@ -311,6 +398,12 @@ border-color: var(--bs-info); } +.nav-link.active .label-outline-info { + color: var(--bs-white); + background-color: var(--bs-info); + border-color: var(--bs-info); +} + /* warning outline label */ .label-outline-warning { color: var(--bs-warning); @@ -323,6 +416,12 @@ border-color: var(--bs-warning); } +.nav-link.active .label-outline-warning { + color: var(--bs-white); + background-color: var(--bs-warning); + border-color: var(--bs-warning); +} + /* danger outline label */ .label-outline-danger { color: var(--bs-danger); @@ -335,6 +434,12 @@ border-color: var(--bs-danger); } +.nav-link.active .label-outline-danger { + color: var(--bs-white); + background-color: var(--bs-danger); + border-color: var(--bs-danger); +} + /* light outline label */ .label-outline-light { color: var(--bs-light); @@ -347,6 +452,12 @@ border-color: var(--bs-light); } +.nav-link.active .label-outline-light { + color: var(--bs-white); + background-color: var(--bs-light); + border-color: var(--bs-light); +} + /* dark outline label */ .label-outline-dark { color: var(--bs-dark); @@ -359,6 +470,12 @@ border-color: var(--bs-dark); } +.nav-link.active .label-outline-dark { + color: var(--bs-white); + background-color: var(--bs-dark); + border-color: var(--bs-dark); +} + /* dark outline label */ .label-outline-dark { color: var(--bs-dark); @@ -371,6 +488,12 @@ border-color: var(--bs-dark); } +.nav-link.active .label-outline-dark { + color: var(--bs-white); + background-color: var(--bs-dark); + border-color: var(--bs-dark); +} + /* gray color label */ .label-color-gray { color: var(--bs-white); diff --git a/tethysapp/app_store/public/css/main.css b/tethysapp/app_store/public/css/main.css index bf28fe6..ecfafff 100755 --- a/tethysapp/app_store/public/css/main.css +++ b/tethysapp/app_store/public/css/main.css @@ -280,7 +280,6 @@ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: transparent !important; - filter: drop-shadow(2px 4px 6px black); } .tags-input ul {