From f23bb7dffd0239dda9ae0521620d5077c32df472 Mon Sep 17 00:00:00 2001
From: Steve Nyemba <nyemba@gmail.com>
Date: Tue, 8 Jul 2025 16:10:18 -0500
Subject: [PATCH] ...

---
 www/html/_assets/themes/default/borders.css   | 38 +++++++++
 www/html/_assets/themes/default/footer.css    | 19 +++++
 www/html/_assets/themes/default/header.css    | 15 ++++
 www/html/_assets/themes/default/layout.css    | 35 +++++++++
 www/html/_assets/themes/default/menu.css      | 78 +++++++++++++++++++
 www/html/_assets/themes/default/pane.css      |  9 +++
 .../_assets/themes/default/responsive.css     | 36 +++++++++
 7 files changed, 230 insertions(+)
 create mode 100644 www/html/_assets/themes/default/borders.css
 create mode 100644 www/html/_assets/themes/default/footer.css
 create mode 100644 www/html/_assets/themes/default/header.css
 create mode 100644 www/html/_assets/themes/default/layout.css
 create mode 100644 www/html/_assets/themes/default/menu.css
 create mode 100644 www/html/_assets/themes/default/pane.css
 create mode 100644 www/html/_assets/themes/default/responsive.css

diff --git a/www/html/_assets/themes/default/borders.css b/www/html/_assets/themes/default/borders.css
new file mode 100644
index 0000000..6f9a192
--- /dev/null
+++ b/www/html/_assets/themes/default/borders.css
@@ -0,0 +1,38 @@
+.border {
+    border:1px solid #CAD5E0 ;    
+}
+.border-round {
+    padding:6px;
+    border-radius:8px;
+}
+.border-round-top-left{
+    border-top-left-radius: 8px;    
+    padding:6px;
+}
+.border-round-top-right{
+    border-top-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-right{
+    border-bottom-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-left{
+    border-bottom-left-radius: 8px;
+    padding:6px;
+}
+
+
+.border-right{
+    border-right:1px solid #CAD5E0;
+    
+}
+
+.border-left{
+    border-left:1px solid #CAD5E0;
+}
+
+
+.border-bottom { border-bottom:1px solid #CAD5E0}
+.border-top { border-top:1px solid #CAD5E0}
+
diff --git a/www/html/_assets/themes/default/footer.css b/www/html/_assets/themes/default/footer.css
new file mode 100644
index 0000000..ee9c89a
--- /dev/null
+++ b/www/html/_assets/themes/default/footer.css
@@ -0,0 +1,19 @@
+/**
+* This file styles the footer of the page
+*/
+
+#footer {
+    text-align:center;
+    display:grid;
+    
+    grid-template-columns: repeat(3,1fr);
+    gap:4px;
+    
+    font-size:12px;
+    color:black;
+    align-items: center;
+    align-content: center;
+    text-transform: capitalize;
+    grid-column:2;
+    grid-row:1 ;
+}
diff --git a/www/html/_assets/themes/default/header.css b/www/html/_assets/themes/default/header.css
new file mode 100644
index 0000000..bdfebdd
--- /dev/null
+++ b/www/html/_assets/themes/default/header.css
@@ -0,0 +1,15 @@
+.main .header {
+    
+    grid-column:1 ;
+    display:grid; grid-template-columns:64px auto; gap:4px}
+.main .header .title {font-size:28px; font-weight:bold}
+.main .header .subtitle {font-size:12px;}
+.main .header img {width:55px; height:55px;}
+
+.header, .footer {
+    padding:4px;
+    align-content: center;
+    align-items:center;
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+}
+
diff --git a/www/html/_assets/themes/default/layout.css b/www/html/_assets/themes/default/layout.css
new file mode 100644
index 0000000..c0d713e
--- /dev/null
+++ b/www/html/_assets/themes/default/layout.css
@@ -0,0 +1,35 @@
+
+
+.main {
+     display:grid; 
+    grid-template-rows:70px calc(100% - 70px);
+    grid-template-columns:75% 25%; 
+    gap:4px;
+    margin:2%;
+    height:96vh;
+    line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
+}
+.main #content{
+    
+    display:grid;
+    
+    
+    
+    /* display:grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+    align-self:center; */
+   
+   
+}
+/* .main .pane {border-left:1px solid transparent; height:100%;} */
+.bold {font-weight:bold}
+.small-text {font-size:12px; font-weight:lighter; color :#000000;}
+.active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}
+.active:hover {border-bottom-color: #4682b4;}
+
+/**
+* 
+*/
+.large-text {font-weight:bold; font-size:28px;}
+    
\ No newline at end of file
diff --git a/www/html/_assets/themes/default/menu.css b/www/html/_assets/themes/default/menu.css
new file mode 100644
index 0000000..0e47ae7
--- /dev/null
+++ b/www/html/_assets/themes/default/menu.css
@@ -0,0 +1,78 @@
+.menu {
+    padding:8px;
+    border:1px solid #CAD5E0 ;
+    
+    display:none;
+    grid-column: 1 / span 2;
+    grid-template-columns: 92px repeat(7,auto);
+    gap:4px;
+    text-transform: capitalize;
+    align-items: center;
+    
+}
+.menu .icon {padding:4px;}
+.menu .icon img {width:30px; height:30px;}
+.menu .item {
+    font-weight:bold;
+    cursor:pointer;
+    padding:4px;
+    text-align: left;
+   
+    
+   
+    
+    
+}
+
+.menu .sub-menu {
+    
+    display:none;
+    position:absolute;
+    
+    margin-top:2px;
+    min-width:10%;
+    z-index:90;
+    padding:8px;
+    font-weight:lighter;
+    text-align:left;
+    align-items:left; 
+    background-color: rgba(255,255,255,0.8);
+    
+}
+
+.menu .item:hover .sub-menu{
+    
+    display:block;
+    height:auto;    
+}
+/**
+* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
+*/
+.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
+.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
+/* .tab-content {width:80%;} */
+
+.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; 
+    /* background-color: #f3f3f3; */
+    padding-top:4px;
+    padding-left:4px;
+    padding-right:4px;
+}
+.tabs input[type=radio] {display:none; }
+.tabs input[type=radio] + label { font-weight:lighter;  
+    border:1px solid transparent;
+    border-bottom-color: #CAD5E0;
+    background-color: #f3f3f3;
+    padding:8px;
+    padding-right:10px; padding-left:10px;
+    
+    cursor:pointer
+}
+.tabs input[type=radio]:checked +label {
+    background-color: #ffffff;
+    border-top-right-radius: 8px; 
+    border-top-left-radius: 8px;
+    font-weight:bold;
+    border-color: #CAD5E0;
+    border-bottom-color: #FFFFFF;
+}
diff --git a/www/html/_assets/themes/default/pane.css b/www/html/_assets/themes/default/pane.css
new file mode 100644
index 0000000..9322c03
--- /dev/null
+++ b/www/html/_assets/themes/default/pane.css
@@ -0,0 +1,9 @@
+.main .pane { 
+height:auto;
+gap:8px;
+grid-row:2 / span 3 ;
+grid-column:2 ;
+
+
+}
+.main .pane iframe{ width:100%; border:0px; height:80%;}
diff --git a/www/html/_assets/themes/default/responsive.css b/www/html/_assets/themes/default/responsive.css
new file mode 100644
index 0000000..cd91420
--- /dev/null
+++ b/www/html/_assets/themes/default/responsive.css
@@ -0,0 +1,36 @@
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .main {
+        grid-template-columns: 60% 40%;
+        grid-template-rows: 70px auto 32px;
+    }
+}
+
+@media (max-width: 768px) {
+    .main {
+        grid-template-columns: 100%;
+        grid-template-rows: auto;
+        height: auto;
+    }
+    
+    .main .pane {
+        border-left: none;
+        border-top: 1px solid #CAD5E0;
+        padding: 8px;
+    }
+}
+
+@media (max-width: 480px) {
+    .main {
+        padding: 5%;
+        font-size: 14px;
+    }
+
+    .large-text {
+        font-size: 24px;
+    }
+
+    .small-text {
+        font-size: 10px;
+    }
+}