From 2c02126d93dc0f10f0b5a820b0e25f36f72199db Mon Sep 17 00:00:00 2001
From: Tony BONNIN <stopyz@gmail.com>
Date: Mon, 19 Aug 2024 00:23:03 +0200
Subject: [PATCH] Update TRINITY Template
---
app/acf-util/welcome-html.lsp | 4 +-
app/template-html.lsp | 2 +-
.../dashboard/css/dashboard-main/content.css | 16 ++
.../dashboard/css/dashboard-main/dark.css | 2 +-
.../dashboard/css/dashboard-main/header.css | 3 +-
.../dashboard/css/dashboard-main/icons.css | 238 +++++++-----------
.../dashboard/css/dashboard-main/mobile.css | 13 +-
.../dashboard/css/dashboard-main/page.css | 45 +++-
.../dashboard/css/dashboard-pages/roles.css | 4 +-
.../dashboard/css/dashboard-pages/welcome.css | 8 +-
10 files changed, 163 insertions(+), 172 deletions(-)
diff --git a/app/acf-util/welcome-html.lsp b/app/acf-util/welcome-html.lsp
index f756e52..77c9ad5 100644
--- a/app/acf-util/welcome-html.lsp
+++ b/app/acf-util/welcome-html.lsp
@@ -78,7 +78,7 @@
table.sort(interfaces)
-- FORMAT BYTES
local function bytesToSize(bytes)
- local units = {"Bytes", "KB", "MB", "GB", "TB"}
+ local units = {"Bytes", "KiB", "MiB", "GiB", "TiB"}
local thresholds = {1024, 1024^2, 1024^3, 1024^4}
for i = #thresholds, 1, -1 do
if bytes >= thresholds[i] then
@@ -89,7 +89,7 @@
end
-- FORMAT OCTETS
local function blocksToSize(octets)
- local units = {"Octets", "Ko", "Mo", "Go", "To"}
+ local units = {"Octets", "Kio", "Mio", "Gio", "Tio"}
local thresholds = {1024, 1024^2, 1024^3, 1024^4}
for i = #thresholds, 1, -1 do
if octets >= thresholds[i] then
diff --git a/app/template-html.lsp b/app/template-html.lsp
index d382e61..38d2bc2 100644
--- a/app/template-html.lsp
+++ b/app/template-html.lsp
@@ -113,7 +113,7 @@ end
%>
<a id="about-link" class="icon-header" href="https://gitlab.alpinelinux.org/trinity-labs/trinity" target="_blank" title="About"><i class="fa-brands fa-gitlab fa-2x about-icon"></i></a>
<!-- Theme Toggle -->
- <a href='javascript:void(0);' id='toggle-theme' title='Dark Mode' onclick='toggleTheme()'><i class="fa-solid fa-circle-half-stroke"></i></a>
+ <a class='icon-header' id='toggle-theme' title='Dark Mode' onclick='toggleTheme()' href='javascript:void(0);'><i class="fa-solid fa-circle-half-stroke"></i></a>
<%
if session.userinfo and session.userinfo.userid then
print("<span id='text-user-logon' class='text-user-"..(session.userinfo.userid).."' title='User @ HOST'>"..(session.userinfo.userid).." @ "..string.upper(hostname or "unknown").."</span>")
diff --git a/www/skins/dashboard/css/dashboard-main/content.css b/www/skins/dashboard/css/dashboard-main/content.css
index cbafe2f..88e1e21 100644
--- a/www/skins/dashboard/css/dashboard-main/content.css
+++ b/www/skins/dashboard/css/dashboard-main/content.css
@@ -52,6 +52,22 @@
justify-content: flex-start;
}
+#networking #content h1::before {
+ color: #005179 !important;
+}
+
+#applications #content h1::before {
+ color: #2743a9 !important;
+}
+
+#system #content h1::before {
+ color: #5a329f !important;
+}
+
+.dispatcherror #content h1::before {
+ color: #ff5454 !important;
+}
+
#content h1::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
diff --git a/www/skins/dashboard/css/dashboard-main/dark.css b/www/skins/dashboard/css/dashboard-main/dark.css
index dda7274..f41f152 100644
--- a/www/skins/dashboard/css/dashboard-main/dark.css
+++ b/www/skins/dashboard/css/dashboard-main/dark.css
@@ -85,7 +85,7 @@ html.app-logon.dark-theme {
background: #404040 !important;
}
-#content h1::before {
+.dark-theme #content h1::before {
color: rgb(0 0 0 / 20%) !important;
}
diff --git a/www/skins/dashboard/css/dashboard-main/header.css b/www/skins/dashboard/css/dashboard-main/header.css
index 10ee6ce..5be39af 100644
--- a/www/skins/dashboard/css/dashboard-main/header.css
+++ b/www/skins/dashboard/css/dashboard-main/header.css
@@ -81,7 +81,6 @@ header {
.icon-header {
padding: 1.25rem 1.5rem;
- margin: 0 1.5rem 0 0;
}
#header-left {
@@ -116,7 +115,7 @@ header {
font-size: 0.7rem;
font-weight: bold;
cursor: pointer;
- margin: 0 1rem 0 0;
+ margin: 0 1.75rem 0 0;
font-family: Arial Black;
padding: 0.33rem 1.5rem;
vertical-align: middle;
diff --git a/www/skins/dashboard/css/dashboard-main/icons.css b/www/skins/dashboard/css/dashboard-main/icons.css
index bd6b533..4a48b64 100644
--- a/www/skins/dashboard/css/dashboard-main/icons.css
+++ b/www/skins/dashboard/css/dashboard-main/icons.css
@@ -46,7 +46,7 @@
display: inline-block;
position: relative;
margin: 0 0.5rem 0 0;
- color: #e5e5e5;
+ color: #e5e5e5 !important;;
font-size: 1.5rem;
top: -0.2rem;
}
@@ -56,58 +56,40 @@
*----------------------------------------------------------------------------------
*/
-#networking-title.category-title::before {
+#networking #subnav::before {
font-family: "Font Awesome 6 Free";
+ content: '\F0E8';
font-weight: bold;
- content: '\F0E8';
- margin: 0 0.5rem 0 0rem;
+ margin: 0 1rem 0 0;
+ color: white;
position: relative;
- font-size: 0.85rem;
- color: #adadad
+ font-size: 1.5rem;
+ top: 1.5rem;
+ background: #005179;
+ padding: 1.5rem;
+ border-radius: 8rem;
}
-
-#networking .page-header-title::before {
+
+#networking-title.category-title::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F0E8';
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
+ margin: 0 0.5rem 0 0rem;
position: relative;
- font-size: 2rem;
- top: 0.4rem;
+ font-size: 0.85rem;
+ color: #adadad
}
-#section-restart-networking .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+#section-restart-networking #subnav::before {
content: '\F2F1' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-#section-network .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+#section-network #subnav::before {
content: '\F0E8' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-#section-network-statistics .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+#section-network-statistics #subnav::before {
content: '\F0EC' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
.interface-name::before {
@@ -135,49 +117,32 @@
color: #adadad
}
- #applications .page-header-title::before {
+#applications #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
- content: '\F1B3';
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
+ margin: 0 1rem 0 0;
+ color: white;
position: relative;
- font-size: 2rem;
- top: 0.4rem;
+ font-size: 1.5rem;
+ top: 1.5rem;
+ background: #2743a9;
+ padding: 1.5rem;
+ border-radius: 8rem;
}
-.openssl .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+.openssl #subnav::before {
+ padding: 1.35rem 1.5rem !important;
content: '\F023' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-.openssl-readall .page-header-title::before,
-.openssl-read .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+.openssl-readall #subnav::before,
+.openssl-read #subnav::before {
content: '\F1C9' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-.openssh .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+.openssh #subnav::before {
+ padding: 1.4rem 1.5rem !important;
content: '\F084' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
/*----------------------------------------------------------------------------------
@@ -195,113 +160,100 @@
color: #adadad
}
-#system .page-header-title::before {
+#system #subnav::before {
font-family: "Font Awesome 6 Free";
+ content: '\F21E';
font-weight: bold;
- content: '\E163';
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
+ margin: 0 1rem 0 0;
+ color: white;
position: relative;
- font-size: 2rem;
- top: 0.4rem;
+ font-size: 1.5rem;
+ top: 1.5rem;
+ background: #5a329f;
+ padding: 1.5rem;
+ border-radius: 8rem;
}
-#section-hardware-information .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+.health-system #subnav::before,
+.health-proc #subnav::before,
+.health-api #subnav::before,
+.health-network #subnav::before,
+.health-networkstats #subnav::before {
+ top: 1.6rem !important;
+ font-size: 1.6rem !important;
+ padding: 1.41rem 1.5rem !important;
+}
+
+#section-hardware-information #subnav::before {
content: '\F2DB' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-#section-storage .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+#section-storage #subnav::before {
content: '\F0A0' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
#section-storage #legend-object b::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
content: '\F0A0' !important;
- margin: 0 0.5rem 0 -0.5rem;
- color: rgb(0 0 0 / 32%);
- position: relative;
- font-size: 0.75rem;
}
-.apk .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
- content: '\F1B3' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
+.apk #subnav::before {
+ padding: 1.5rem 1.4rem !important;
+ content: '\F49E' !important;
}
-.roles .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
+.cron #subnav::before {
+ padding: 1.4rem 1.5rem !important;
+ content: '\F1DA' !important;
+}
+
+.syslog #subnav::before {
+ content: '\F06E' !important;
+}
+
+.logfiles #subnav::before {
+ padding: 1.2rem 1.5rem !important;
+ content: '\F15C' !important;
+}
+
+.password #subnav::before {
+ content: '\F13E' !important;
+}
+
+.roles #subnav::before {
+ padding: 1.5rem 1.35rem !important;
content: '\E595' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
}
-.rc .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
- content: '\F479' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
+.rc #subnav::before {
+ padding: 1.4rem 1.5rem !important;
+ content: '\F469' !important;
}
-.modules .page-header-title::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
- content: '\E4E2' !important;
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
- position: relative;
- font-size: 2rem;
- top: 0.4rem;
+.modules #subnav::before {
+ content: '\F1B3' !important;
+}
+
+.skins #subnav::before {
+ padding: 1.2rem 1.5rem !important;
+ content: '\F043' !important;
}
-#system .page-header-title::before {
+.dispatcherror #subnav::before {
font-family: "Font Awesome 6 Free";
+ content: '\E55D' !important;
font-weight: bold;
- content: '\F21E';
- margin: 0 1rem 0 0;
- color: rgb(0 0 0 / 30%);
+ margin: 0 1rem 0 0;
+ color: white;
position: relative;
- font-size: 2rem;
- top: 0.4rem;
+ font-size: 1.5rem;
+ top: 1.5rem;
+ background: #ff5454;
+ padding: 1.5rem;
+ border-radius: 8rem;
}
.welcome .dashboard-title-memory::before {
- font-family: "Font Awesome 6 Free";
- font-weight: bold;
content: '\F538' !important;
- display: inline-block;
- position: relative;
- margin: 0 0.5rem 0 0;
- color: inherit;
- font-size: 0.7rem;
}
.welcome .system-uptodate .dashboard-title-system::before {
diff --git a/www/skins/dashboard/css/dashboard-main/mobile.css b/www/skins/dashboard/css/dashboard-main/mobile.css
index 00c84e0..33c75e8 100644
--- a/www/skins/dashboard/css/dashboard-main/mobile.css
+++ b/www/skins/dashboard/css/dashboard-main/mobile.css
@@ -74,11 +74,6 @@
align-items: stretch;
align-content: stretch;
}
-
- .page-header-title {
- margin: 0 auto 2.5rem !important;
- width: 96% !important;
- }
#main {
margin: auto !important;
@@ -202,7 +197,7 @@
}
.icon-header {
- padding: 1.25rem 1rem;
+ padding: 1.25rem 0.5rem;
margin: 0 0.5rem 0 0;
}
@@ -257,9 +252,9 @@
}
#text-user-logon {
- padding: 0.33rem 1.5rem !important;
- font-size: 0.65rem;
- margin: 0 !important;
+ padding: 0.33rem 1rem !important;
+ font-size: 0.65rem;
+ margin: 0 !important;
}
#user-logon {
diff --git a/www/skins/dashboard/css/dashboard-main/page.css b/www/skins/dashboard/css/dashboard-main/page.css
index 22456b2..23af479 100644
--- a/www/skins/dashboard/css/dashboard-main/page.css
+++ b/www/skins/dashboard/css/dashboard-main/page.css
@@ -38,27 +38,52 @@ body {
}
.page-header-title {
- font-weight: 600;
- margin: 0 1rem 2.5rem 0;
- text-transform: capitalize;
- width: 33%;
- color: white;
- padding: 0.25rem 0 1rem 1.25rem;
- border-radius: 2px;
+ margin: 0 1rem 4rem 5.25rem;
+ text-transform: uppercase;
+ width: fit-content;
+ padding: 0.25rem 0 0.25rem;
+ font-family: "Arial Black", sans-serif;
+ font-weight: 900 !important;
+ font-size: 0.9rem;
+ letter-spacing: -0.1rem;
+ border-top: 3px solid;
+ border-bottom: 3px solid;
}
#networking .page-header-title {
- background: #005179;
+ color: #005179;
}
#applications .page-header-title {
- background: #2743a9;
+ color: #2743a9;
}
#system .page-header-title {
- background: #5a329f;
+ color: #5a329f;
}
.small-block {
width: 30%;
+}
+
+/*----------------------------------------------------------------------------------
+ * PAGE > ERROR
+ *----------------------------------------------------------------------------------
+ */
+
+.dispatcherror .page-header-title {
+ color: #ff5454;
+}
+
+.dispatcherror p {
+ color: #ff5454 !important;
+ font-weight: bold;
+}
+
+.errordetail.error {
+ color: #727272 !important;
+}
+
+.errordetail.error a:hover {
+ text-decoration: underline !important;
}
\ No newline at end of file
diff --git a/www/skins/dashboard/css/dashboard-pages/roles.css b/www/skins/dashboard/css/dashboard-pages/roles.css
index a371463..6a44ce9 100644
--- a/www/skins/dashboard/css/dashboard-pages/roles.css
+++ b/www/skins/dashboard/css/dashboard-pages/roles.css
@@ -11,7 +11,7 @@
.roles .section-1 .section-2:nth-child(2) {
background: #e6ffc4;
padding: 1rem;
- border-radius: 2px;
+ border-radius: 6px;
}
#section-root-is-valid-in-these-roles h2 {
@@ -25,7 +25,7 @@
font-weight: bold;
content: '\F505';
margin: 0 0.5rem 0 0;
- color: rgb(0 0 0 / 30%);
+ color: rgb(173 219 0);
position: relative;
font-size: 1.25rem;
top: 0;
diff --git a/www/skins/dashboard/css/dashboard-pages/welcome.css b/www/skins/dashboard/css/dashboard-pages/welcome.css
index 3ac81c4..9cec8bf 100644
--- a/www/skins/dashboard/css/dashboard-pages/welcome.css
+++ b/www/skins/dashboard/css/dashboard-pages/welcome.css
@@ -72,10 +72,14 @@ span.dashboard-infos {
.welcome-read #content h1 {
background: none !important;
font-weight: 600;
- text-transform: capitalize;
- margin: 0.5rem 0 0.5rem;
+ text-transform: uppercase;
+ margin: 0.5rem 0 1.75rem;
font-family: Arial Black;
+ box-shadow: 2px 2px 30px #4e4e4e20;
color: #b7b7b7;
+ border: 2px solid #f7f7f7;
+ font-size: 0.8rem;
+ letter-spacing: -0.05rem;
}
.welcome-title-user {
--
GitLab