mirror of
https://github.com/billz/raspap-webgui.git
synced 2023-10-10 13:37:24 +02:00
Fixed visual errors and improved some visuals
1. The rounded corners issue is gone 2. Fixed light theme status indicator, so on latest insiders it wont hide active green button 3. Added new visuals to navigation menu to make it more clear what card is active
This commit is contained in:
parent
7a1900d814
commit
2828b09d54
@ -46,16 +46,7 @@ function lightenColor($color, $percent)
|
||||
return sprintf("#%02x%02x%02x", $r, $g, $b);
|
||||
}
|
||||
|
||||
// Function to calculate luminance
|
||||
function calculateLuminance($color) {
|
||||
$rgb = sscanf($color, "#%02x%02x%02x");
|
||||
list($r, $g, $b) = $rgb;
|
||||
return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
|
||||
}
|
||||
|
||||
$luminance = calculateLuminance($backgroundColor);
|
||||
$textColor = $luminance > 0.5 ? 'black' : 'white';
|
||||
|
||||
$textColor = lightenColor($baseColor, 95);
|
||||
// Create other color variables
|
||||
$cardsColor = darkenColor($baseColor, 60);
|
||||
$secondaryColor = lightenColor($baseColor, 30);
|
||||
@ -75,6 +66,14 @@ html * {
|
||||
color: <?php echo $textColor; ?>;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
background-color: <?php echo $secondaryColor; ?>;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
border-top-right-radius: 18px;
|
||||
border-bottom-right-radius: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
@ -93,7 +92,7 @@ h5.card-title {
|
||||
}
|
||||
|
||||
.sidebar-light .nav-item.active .nav-link i {
|
||||
color: <?php echo $primaryColor; ?>;
|
||||
color: <?php echo $textColor; ?>;
|
||||
}
|
||||
|
||||
.sidebar .nav-item.active .nav-link {
|
||||
@ -208,6 +207,8 @@ a:focus, a:hover {
|
||||
.card-header {
|
||||
border-bottom-left-radius: 0px!important;
|
||||
border-bottom-right-radius: 0px!important;
|
||||
position: relative;
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
|
||||
.card>.card-header .fa {
|
||||
@ -237,7 +238,7 @@ hr {
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
color: <?php echo $primaryColor; ?>;
|
||||
color: <?php echo $secondaryColor; ?>;
|
||||
}
|
||||
|
||||
.ra-raspap:before {
|
||||
@ -277,6 +278,8 @@ hr {
|
||||
border-top: 0px;
|
||||
border-bottom-right-radius: 18px!important;
|
||||
border-bottom-left-radius: 18px!important;
|
||||
position: relative;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
|
@ -47,21 +47,12 @@ function lightenColor($color, $percent)
|
||||
return sprintf("#%02x%02x%02x", $r, $g, $b);
|
||||
}
|
||||
|
||||
// Function to calculate luminance
|
||||
function calculateLuminance($color) {
|
||||
$rgb = sscanf($color, "#%02x%02x%02x");
|
||||
list($r, $g, $b) = $rgb;
|
||||
return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
|
||||
}
|
||||
|
||||
$luminance = calculateLuminance($backgroundColor);
|
||||
$textColor = $luminance < 0.7 ? 'white' : 'black';
|
||||
|
||||
$textColor = lightenColor($baseColor, 95);
|
||||
// Create other color variables
|
||||
$cardsColor = lightenColor($baseColor, 60);
|
||||
$secondaryColor = lightenColor($baseColor, 50);
|
||||
$cardsColor = lightenColor($baseColor, 50);
|
||||
$secondaryColor = lightenColor($baseColor, 30);
|
||||
$primaryColor = $baseColor;
|
||||
$backgroundColor = lightenColor($baseColor, 70);
|
||||
$backgroundColor = lightenColor($baseColor, 60);
|
||||
|
||||
?>
|
||||
|
||||
@ -76,6 +67,14 @@ html * {
|
||||
color: <?php echo $textColor; ?>;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
background-color: <?php echo $secondaryColor; ?>;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
border-top-right-radius: 18px;
|
||||
border-bottom-right-radius: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
@ -94,7 +93,7 @@ h5.card-title {
|
||||
}
|
||||
|
||||
.sidebar-light .nav-item.active .nav-link i {
|
||||
color: <?php echo $primaryColor; ?>;
|
||||
color: <?php echo $textColor; ?>;
|
||||
}
|
||||
|
||||
.sidebar .nav-item.active .nav-link {
|
||||
@ -210,6 +209,8 @@ a:focus, a:hover {
|
||||
.card-header {
|
||||
border-bottom-left-radius: 0px!important;
|
||||
border-bottom-right-radius: 0px!important;
|
||||
position: relative;
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
|
||||
.card>.card-header .fa {
|
||||
@ -279,6 +280,8 @@ hr {
|
||||
border-top: 0px;
|
||||
border-bottom-right-radius: 18px!important;
|
||||
border-bottom-left-radius: 18px!important;
|
||||
position: relative;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@ -522,7 +525,7 @@ button.btn.btn-light.js-toggle-password {
|
||||
}
|
||||
|
||||
.btn.service-status {
|
||||
background-color: <?php echo $backgroundColor; ?>;
|
||||
background-color: <?php echo $secondaryColor; ?>;
|
||||
}
|
||||
|
||||
input.btn.btn-success {
|
||||
|
Loading…
Reference in New Issue
Block a user