frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
Code Issues Releases Wiki Activity

Fixed visual errors and improved some visuals

Browse Source 
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:
Marek Guráň 2023-08-29 10:36:11 +02:00 committed by GitHub
parent 7a1900d814
commit 2828b09d54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/css/material-dark.php
View File

@ -46,16 +46,7 @@ function lightenColor($color, $percent)
return sprintf("#%02x%02x%02x", $r, $g, $b); return sprintf("#%02x%02x%02x", $r, $g, $b);
} }
// Function to calculate luminance $textColor = lightenColor($baseColor, 95);
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';
// Create other color variables // Create other color variables
$cardsColor = darkenColor($baseColor, 60); $cardsColor = darkenColor($baseColor, 60);
$secondaryColor = lightenColor($baseColor, 30); $secondaryColor = lightenColor($baseColor, 30);
@ -75,6 +66,14 @@ html * {
color: <?php echo $textColor; ?>; 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 { h2 {
font-size: 2rem !important; font-size: 2rem !important;
} }
@ -93,7 +92,7 @@ h5.card-title {
} }
.sidebar-light .nav-item.active .nav-link i { .sidebar-light .nav-item.active .nav-link i {
color: <?php echo $primaryColor; ?>; color: <?php echo $textColor; ?>;
} }
.sidebar .nav-item.active .nav-link { .sidebar .nav-item.active .nav-link {
@ -208,6 +207,8 @@ a:focus, a:hover {
.card-header { .card-header {
border-bottom-left-radius: 0px!important; border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 0px!important; border-bottom-right-radius: 0px!important;
position: relative;
margin-bottom: -18px;
} }
.card>.card-header .fa { .card>.card-header .fa {
@ -237,7 +238,7 @@ hr {
} }
.sidebar-brand-text { .sidebar-brand-text {
color: <?php echo $primaryColor; ?>; color: <?php echo $secondaryColor; ?>;
} }
.ra-raspap:before { .ra-raspap:before {
@ -277,6 +278,8 @@ hr {
border-top: 0px; border-top: 0px;
border-bottom-right-radius: 18px!important; border-bottom-right-radius: 18px!important;
border-bottom-left-radius: 18px!important; border-bottom-left-radius: 18px!important;
position: relative;
margin-top: -18px;
} }
.modal-footer { .modal-footer {

33
app/css/material-light.php
View File

@ -47,21 +47,12 @@ function lightenColor($color, $percent)
return sprintf("#%02x%02x%02x", $r, $g, $b); return sprintf("#%02x%02x%02x", $r, $g, $b);
} }
// Function to calculate luminance $textColor = lightenColor($baseColor, 95);
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';
// Create other color variables // Create other color variables
$cardsColor = lightenColor($baseColor, 60); $cardsColor = lightenColor($baseColor, 50);
$secondaryColor = lightenColor($baseColor, 50); $secondaryColor = lightenColor($baseColor, 30);
$primaryColor = $baseColor; $primaryColor = $baseColor;
$backgroundColor = lightenColor($baseColor, 70); $backgroundColor = lightenColor($baseColor, 60);
?> ?>
@ -76,6 +67,14 @@ html * {
color: <?php echo $textColor; ?>; 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 { h2 {
font-size: 2rem !important; font-size: 2rem !important;
} }
@ -94,7 +93,7 @@ h5.card-title {
} }
.sidebar-light .nav-item.active .nav-link i { .sidebar-light .nav-item.active .nav-link i {
color: <?php echo $primaryColor; ?>; color: <?php echo $textColor; ?>;
} }
.sidebar .nav-item.active .nav-link { .sidebar .nav-item.active .nav-link {
@ -210,6 +209,8 @@ a:focus, a:hover {
.card-header { .card-header {
border-bottom-left-radius: 0px!important; border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 0px!important; border-bottom-right-radius: 0px!important;
position: relative;
margin-bottom: -18px;
} }
.card>.card-header .fa { .card>.card-header .fa {
@ -279,6 +280,8 @@ hr {
border-top: 0px; border-top: 0px;
border-bottom-right-radius: 18px!important; border-bottom-right-radius: 18px!important;
border-bottom-left-radius: 18px!important; border-bottom-left-radius: 18px!important;
position: relative;
margin-top: -18px;
} }
.modal-footer { .modal-footer {
@ -522,7 +525,7 @@ button.btn.btn-light.js-toggle-password {
} }
.btn.service-status { .btn.service-status {
background-color: <?php echo $backgroundColor; ?>; background-color: <?php echo $secondaryColor; ?>;
} }
input.btn.btn-success { input.btn.btn-success {