fluzzi32/traefik-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Fede Luzzi
2024-08-05 10:58:57 -03:00
parent ab6f27524d
commit 2353362c04
11 changed files with 649 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
static/css/colors.css
View File

@@ -1,122 +0,0 @@
:root {
--light-background: #f0f0f0;
--dark-background: #121212;
--light-title-text: #e0e0e0;
--light-icons: #333;
--dark-title-text: #e0e0e0;
--dark-icons: #e0e0e0;
--light-header: #3f51b5;
--light-group-text: #3f51b5;
--light-router-title: #3f51b5;
--dark-header: #1e1e1e;
--light-border: #3f51b5;
--dark-border: #bb86fc;
--dark-group-text: #bb86fc;
--dark-router-title: #bb86fc;
--light-icon-bg: rgba(240, 240, 240, 0.2);
--dark-icon-bg: rgba(224, 224, 224, 0.2);
--light-icon-hover-bg: rgba(240, 240, 240, 0.4);
--dark-icon-hover-bg: rgba(224, 224, 224, 0.4);
--light-router-bg: white;
--dark-router-bg: #1e1e1e;
--light-router-hover-shadow: rgba(0, 0, 0, 0.2);
--light-router-text: #666;
--dark-router-text: #e0e0e0;
--dark-router-hover-shadow: rgba(255, 255, 255, 0.2);
}
body {
background-color: var(--light-background);
color: var(--light-title-text);
}
.dark-mode {
background-color: var(--dark-background);
color: var(--dark-title-text);
}
.header {
background-color: var(--light-header);
}
.dark-mode .header {
background-color: var(--dark-header);
}
.icon-button {
background-color: var(--light-icon-bg);
border: 1px solid var(--light-border);
color: var(--light-icons);
}
.icon-button:hover {
background-color: var(--light-icon-hover-bg);
}
.dark-mode .icon-button {
background-color: var(--dark-icon-bg);
border: 1px solid var(--dark-border);
color: var(--dark-icons);
}
.dark-mode .icon-button:hover {
background-color: var(--dark-icon-hover-bg);
}
.group h2 {
color: var(--light-group-text);
}
.dark-mode .group h2 {
color: var(--dark-group-text);
}
.router {
background-color: var(--light-router-bg);
color: var(--light-router-text);
}
.router:hover {
box-shadow: 0 4px 8px var(--light-router-hover-shadow);
}
.router h2 {
color: var(--light-router-title);
}
.dark-mode .router h2 {
color: var(--dark-router-title);
}
.dark-mode .router {
background-color: var(--dark-router-bg);
color: var(--dark-router-text);
}
.dark-mode .router:hover {
box-shadow: 0 4px 8px var(--dark-router-hover-shadow);
}
.group-title .fa {
color: var(--light-group-text);
}
.dark-mode .group-title .fa {
color: var(--dark-group-text);
}
.settings-menu .fa {
color: var(--light-icons);
}
.dark-mode .settings-menu .fa {
color: var(--dark-icons);
}
.router svg {
font-size: 26px;
color: var(--light-router-title);
}
.dark-mode .router svg {
color: var(--dark-router-title);
}

115
static/css/components.css
View File

@@ -9,6 +9,7 @@
margin: 0;
flex-grow: 1;
text-align: center;
font-size: 2em;
}
.settings {
@@ -41,13 +42,14 @@
}
.group {
margin-bottom: 20px; /* Reduced margin between groups */
margin-bottom: 15px; /* Reduced margin between groups */
}
.group-title {
display: inline-block;
cursor: pointer;
margin-top: 10px; /* Reduced margin above group title */
margin-left: 15px;
}
.group-icon {
@@ -89,34 +91,139 @@
margin: 0;
}
.router div {
overflow: hidden;
}
.router p {
font-size: 14px;
margin: 5px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content {
padding: 20px; /* Added padding to the left and right of the webpage */
padding-bottom: 60px
}
/* List mode styles */
.list-mode .content {
display: flex;
flex-wrap: wrap;
}
.list-mode .group {
display: flex;
flex-direction: column;
flex: 1 1 calc(33.333% - 40px); /* Adjusted for new margin */
max-width: calc(33.333% - 40px); /* Adjusted for new margin */
margin: 0 15px 15px 15px;
}
.list-mode .group-title {
margin-left: 0;
}
.list-mode .router-container {
flex-direction: column;
flex-wrap: nowrap;
}
.list-mode .router {
max-width: 100%;
margin: 1px 0; /* Adjusted margin between routers */
}
.router:first-child {
margin-top: 15px; /* Adjusted margin between routers */
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px 0;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.search-bar {
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
border-radius: 20px;
padding: 5px 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 20px;
}
.search-bar i {
margin-right: 10px;
}
#clear-search, #start-search {
cursor: pointer;
}
.search-bar input {
width: 100%;
border: none;
background: none;
outline: none;
text-align: center;
font-weight: bold;
}
/* Responsive Design */
@media (max-width: 1024px) {
.router {
body:not(.list-mode) .router {
flex: 1 1 calc(50% - 40px); /* Adjusted for new margin */
max-width: calc(50% - 40px); /* Adjusted for new margin */
}
.list-mode .group {
flex: 1 1 calc(50% - 40px); /* Adjusted for new margin */
max-width: calc(50% - 40px); /* Adjusted for new margin */
}
}
@media (max-width: 768px) {
.router {
body:not(.list-mode) .router {
flex: 1 1 calc(50% - 40px); /* Adjusted for new margin */
max-width: calc(50% - 40px); /* Adjusted for new margin */
}
.list-mode .group {
flex: 1 1 calc(50% - 40px); /* Adjusted for new margin */
max-width: calc(50% - 40px); /* Adjusted for new margin */
}
.header h1 {
font-size: 1.8em;
}
}
@media (max-width: 480px) {
.router {
body:not(.list-mode) .router {
flex: 1 1 100%;
max-width: 100%;
}
.list-mode .group {
flex: 1 1 100%;
max-width: 100%;
}
.router:first-child {
margin-top: 1px; /* Adjusted margin between routers */
}
.header h1 {
font-size: 1.5em;
}
}

10
static/css/styles.css
View File

@@ -1,5 +1,5 @@
body {
font-family: Arial, sans-serif;
font-family: 'Helvetica', 'Arial', sans-serif;
margin: 0;
transition: background-color 0.3s, color 0.3s;
}
@@ -34,4 +34,10 @@ body {
transition: box-shadow 0.3s ease;
box-sizing: border-box;
}
/* Custom scrollbar for webkit browsers */
body::-webkit-scrollbar {
width: 8px;
height: 8px;
overflow: visible;
display: none;
}