pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improving contrast for UI tabs (#2076)

Browse Source 
* Improving nav-tabs contrast

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>

* Improving nav-tabs contrast + prettier

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
This commit is contained in:
RD WebDesign
2022-01-15 03:47:26 -03:00
committed by GitHub
parent 035d8f981d
commit e1cbe8775f
3 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/themes/default-dark.css
+22 -15
View File
@@ -263,24 +263,36 @@ h4 {
.nav-tabs-custom .tab-content {
background-color: #30383f;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
border-left-color: #353c42;
border-right-color: #353c42;
background-color: #272c30;
color: #bec5cb;
}
.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
border-left-color: #353c42;
.nav-tabs-custom > .nav-tabs {
background: rgba(64, 72, 80, 0.666);
}
.nav-tabs-custom > .nav-tabs > li {
margin-right: 1px;
color: #bec5cb;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #30383f;
color: #bec5cb;
}
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
border-top-color: #d2d6de;
background-color: transparent;
}
.nav-tabs-custom > .nav-tabs > li > a {
color: #bec5cb;
color: #8e959b;
}
.nav-tabs-custom > .nav-tabs > li > a:focus {
background: #404850;
color: #3c8dbc;
}
.nav-tabs-custom > .nav-tabs > li:hover > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #353c42;
color: #bec5cb;
}
.list-group {
color: #bec5cb;
background-color: #272c30;
@@ -452,11 +464,6 @@ div.dataTables_wrapper div.dataTables_length select {
color: #bec5cb;
border: 1px solid #3d444b;
}
.nav-tabs-custom > .nav-tabs > li:hover > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #353c42;
color: #bec5cb;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
style/themes/default-darker.css
+6 -6
View File
@@ -3330,16 +3330,18 @@ a:focus {
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px;
}
.nav-tabs-custom > .nav-tabs {
background: rgb(30, 40, 44);
border-bottom-color: rgb(51, 55, 57);
}
.nav-tabs-custom > .nav-tabs > li {
border-top-color: transparent;
margin-right: 1px;
}
.nav-tabs-custom > .nav-tabs > li.disabled > a {
color: rgb(157, 148, 136);
}
.nav-tabs-custom > .nav-tabs > li > a {
color: rgb(189, 183, 175);
color: rgb(140, 144, 154);
}
.nav-tabs-custom > .nav-tabs > li > a.text-muted {
color: rgb(168, 160, 149);
@@ -3352,10 +3354,8 @@ a:focus {
.nav-tabs-custom > .nav-tabs > li > a:hover {
color: rgb(168, 160, 149);
}
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
border-color: transparent;
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
background: rgb(24, 32, 35);
}
.nav-tabs-custom > .nav-tabs > li.active {
border-top-color: rgb(44, 103, 137);
@@ -3392,7 +3392,7 @@ a:focus {
}
.nav-tabs-custom > .nav-tabs > li > a:focus,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
color: rgb(95, 142, 170);
color: rgb(60, 140, 188);
}
.nav-tabs-custom.tab-primary > .nav-tabs > li.active {
style/themes/default-light.css
+16 -1
View File
@@ -130,8 +130,23 @@
border-bottom-right-radius: 2px;
border-bottom-left-radius: 0;
}
.nav-tabs-custom > .nav-tabs {
background: #e4e8f0;
}
.nav-tabs-custom > .nav-tabs > li {
margin-right: 1px;
}
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
background: #fff;
border-top-color: #d2d6de;
}
.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
color: #567;
}
.nav-tabs-custom > .nav-tabs > li > a:focus {
color: #60a4cc;
color: #3c8dbc;
}
.layout-top-nav .main-header > .logo {