fix CSS inconsistency and small errors

This commit is contained in:
Ziad-I
2024-08-05 14:48:55 +03:00
committed by Dion Moult
parent d745265048
commit 78f664e892
4 changed files with 61 additions and 40 deletions
@@ -39,7 +39,7 @@
html { html {
font-size: var(--base-font-size); font-size: var(--base-font-size);
color: var(--blender-text); color: var(--blender-text, var(--text-color));
} }
body { body {
@@ -127,7 +127,7 @@ nav ul li a.active {
overflow-y: auto; overflow-y: auto;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
border: 1px solid var(--blender-tab-outline, var(--details-border-color)); border: 1px solid var(--blender-tab-outline, var(--border-color));
background-color: var(--blender-panel-background, var(--nav-bg-color)); background-color: var(--blender-panel-background, var(--nav-bg-color));
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@@ -146,7 +146,7 @@ nav ul li a.active {
.client { .client {
padding: var(--margin-small); padding: var(--margin-small);
border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
cursor: pointer; cursor: pointer;
} }
@@ -166,14 +166,13 @@ nav ul li a.active {
} }
.client-detail { .client-detail {
border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
padding: var(--padding-small); padding: var(--padding-small);
} }
#show-connected-button { #show-connected-button {
width: auto; width: auto;
background-color: var(--blender-panel-header, var(--bg-color)); background-color: var(--blender-panel-header, var(--bg-color));
border: none;
font-size: var(--base-font-size); font-size: var(--base-font-size);
} }
@@ -188,6 +187,32 @@ nav ul li a.active {
margin-top: var(--margin-small); margin-top: var(--margin-small);
} }
footer {
background-color: var(--blender-top-bar-header, var(--nav-bg-color));
text-align: right;
padding: var(--padding-tiny);
border-top: 1px solid var(--blender-tab-outline, var(--nav-border-color));
}
footer p {
margin: 0;
color: var(--blender-text, var(--nav-link-color));
margin-right: var(--margin-small);
font-size: 0.8rem;
}
button {
background-color: var(--blender-panel-header, var(--bg-color));
color: var(--blender-text, var(--text-color));
border-color: var(--blender-tab-outline, var(--border-color));
transition: filter 0.2s ease;
}
button:hover {
filter: brightness(1.2);
}
.left { .left {
flex: 1; flex: 1;
@@ -265,20 +290,6 @@ li.svg-name {
outline: none; outline: none;
} }
footer {
background-color: var(--blender-top-bar-header, var(--nav-bg-color));
text-align: right;
padding: var(--padding-tiny);
border-top: 1px solid var(--blender-tab-outline, var(--nav-border-color));
}
footer p {
margin: 0;
color: var(--blender-text, var(--nav-link-color));
margin-right: var(--margin-small);
font-size: 0.8rem;
}
/* remove bootstrap css confilcts */ /* remove bootstrap css confilcts */
*, *,
@@ -290,4 +301,8 @@ footer p {
.btn, .btn,
.btn:hover { .btn:hover {
color: var(--blender-text, var(--nav-link-color)); color: var(--blender-text, var(--nav-link-color));
}
button:focus {
outline: none;
} }
@@ -35,7 +35,7 @@
--group-item-bg-color: #4b4b4b; --group-item-bg-color: #4b4b4b;
--input-bg-color: #3b3b3b; --input-bg-color: #3b3b3b;
--input-border-color: #000; --input-border-color: #000;
--details-border-color: #464444; --border-color: #464444;
} }
:root.light { :root.light {
@@ -47,7 +47,7 @@
--nav-link-color: #000000; --nav-link-color: #000000;
--nav-link-hover-color: #38a63d; --nav-link-hover-color: #38a63d;
--warning-color: #FF4500; --warning-color: #FF4500;
--details-border-color: #222; --border-color: #222;
} }
html { html {
@@ -158,7 +158,7 @@ nav ul li a.active {
overflow-y: auto; overflow-y: auto;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
border: 1px solid var(--blender-tab-outline, var(--details-border-color)); border: 1px solid var(--blender-tab-outline, var(--border-color));
background-color: var(--blender-panel-background, var(--nav-bg-color)); background-color: var(--blender-panel-background, var(--nav-bg-color));
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@@ -177,7 +177,7 @@ nav ul li a.active {
.client { .client {
padding: var(--margin-small); padding: var(--margin-small);
border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
cursor: pointer; cursor: pointer;
} }
@@ -197,14 +197,13 @@ nav ul li a.active {
} }
.client-detail { .client-detail {
border-bottom: 1px solid var(--blender-tab-outline, var(--details-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
padding: var(--padding-small); padding: var(--padding-small);
} }
#show-connected-button { #show-connected-button {
width: auto; width: auto;
background-color: var(--blender-panel-header, var(--bg-color)); background-color: var(--blender-panel-header, var(--bg-color));
border: none;
font-size: var(--base-font-size); font-size: var(--base-font-size);
} }
@@ -258,7 +257,14 @@ footer p {
transition: filter 0.2s ease; transition: filter 0.2s ease;
} }
:root.blender button:hover { button {
background-color: var(--blender-panel-header, var(--bg-color));
color: var(--blender-text, var(--text-color));
border-color: var(--blender-tab-outline, var(--border-color));
transition: filter 0.2s ease;
}
button:hover {
filter: brightness(1.2); filter: brightness(1.2);
} }
@@ -22,7 +22,7 @@
--nav-link-color: #fff; --nav-link-color: #fff;
--nav-link-hover-color: #3fb449; --nav-link-hover-color: #3fb449;
--warning-color: #FFDB8F; --warning-color: #FFDB8F;
--table-border-color: #464444; --border-color: #464444;
} }
:root.light { :root.light {
@@ -34,7 +34,7 @@
--nav-link-color: #000000; --nav-link-color: #000000;
--nav-link-hover-color: #38a63d; --nav-link-hover-color: #38a63d;
--warning-color: #FF4500; --warning-color: #FF4500;
--table-border-color: #222; --border-color: #222;
} }
html { html {
@@ -127,7 +127,7 @@ nav ul li a.active {
overflow-y: auto; overflow-y: auto;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
border: 1px solid var(--blender-tab-outline, var(--table-border-color)); border: 1px solid var(--blender-tab-outline, var(--border-color));
background-color: var(--blender-panel-background, var(--nav-bg-color)); background-color: var(--blender-panel-background, var(--nav-bg-color));
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@@ -146,7 +146,7 @@ nav ul li a.active {
.client { .client {
padding: var(--margin-small); padding: var(--margin-small);
border-bottom: 1px solid var(--blender-tab-outline, var(--table-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
cursor: pointer; cursor: pointer;
} }
@@ -166,7 +166,7 @@ nav ul li a.active {
} }
.client-detail { .client-detail {
border-bottom: 1px solid var(--blender-tab-outline, var(--table-border-color)); border-bottom: 1px solid var(--blender-tab-outline, var(--border-color));
padding: var(--padding-small); padding: var(--padding-small);
} }
@@ -210,14 +210,14 @@ footer p {
margin-top: var(--margin-small); margin-top: var(--margin-small);
} }
:root.blender button { button {
background-color: var(--blender-panel-header); background-color: var(--blender-panel-header, var(--bg-color));
color: var(--blender-text); color: var(--blender-text, var(--text-color));
border-color: var(--blender-tab-outline); border-color: var(--blender-tab-outline, var(--border-color));
transition: filter 0.2s ease; transition: filter 0.2s ease;
} }
:root.blender button:hover { button:hover {
filter: brightness(1.2); filter: brightness(1.2);
} }
@@ -230,8 +230,8 @@ footer p {
} }
:root.light .tabulator { :root.light .tabulator {
border-top: 1px solid var(--table-border-color); border-top: 1px solid var(--border-color);
border-bottom: 2px solid var(--table-border-color); border-bottom: 2px solid var(--border-color);
} }
:root.blender .tabulator-table-holder, :root.blender .tabulator-table-holder,
@@ -82,7 +82,7 @@
<div class="card pb-2"> <div class="card pb-2">
<div class="card-header overflow-hidden" id="headingOne"> <div class="card-header overflow-hidden" id="headingOne">
<button <button
class="btn p-0 w-100 text-left" class="btn p-0 pl-2 w-100 text-left"
data-toggle="collapse" data-toggle="collapse"
data-target="#collapseOne" data-target="#collapseOne"
> >
@@ -101,7 +101,7 @@
<div class="card pb-2"> <div class="card pb-2">
<div class="card-header overflow-hidden" id="headingTwo"> <div class="card-header overflow-hidden" id="headingTwo">
<button <button
class="btn p-0 w-100 text-left" class="btn p-0 pl-2 w-100 text-left"
data-toggle="collapse" data-toggle="collapse"
data-target="#collapseTwo" data-target="#collapseTwo"
> >