From eec98c2f33a2fa857c422dc3f3476b02c9b13659 Mon Sep 17 00:00:00 2001 From: "Steve L. Nyemba" Date: Wed, 19 Mar 2025 20:41:31 +0000 Subject: [PATCH] Upload files to "www/html/_assets/themes/default" --- www/html/_assets/themes/default/borders.css | 38 +++++++++ www/html/_assets/themes/default/footer.css | 19 +++++ www/html/_assets/themes/default/header.css | 3 + www/html/_assets/themes/default/layout.css | 92 +++++++++++++++++++++ www/html/_assets/themes/default/menu.css | 78 +++++++++++++++++ 5 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 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..8086c04 --- /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; + padding:8px; + font-size:12px; + color:black; + align-items: center; + align-content: center; + text-transform: capitalize; + /* background-color: rgba(255,255,255,0.8); */ + + grid-column: 1 /span 2; +} diff --git a/www/html/_assets/themes/default/header.css b/www/html/_assets/themes/default/header.css new file mode 100644 index 0000000..a64ce8b --- /dev/null +++ b/www/html/_assets/themes/default/header.css @@ -0,0 +1,3 @@ +.main .header { display:grid; grid-template-columns:64px auto; gap:4px} +.main .header .title {font-size:28px; font-weight:bold} +.main .header img {width:55px; height:55px;} diff --git a/www/html/_assets/themes/default/layout.css b/www/html/_assets/themes/default/layout.css new file mode 100644 index 0000000..2b5b09a --- /dev/null +++ b/www/html/_assets/themes/default/layout.css @@ -0,0 +1,92 @@ +.main { + height: 98vh; + display: grid; + grid-template-columns: 70% auto; + grid-template-rows: 70px 40px auto 32px; + gap: 4px; + padding-left: 2%; + padding-right: 2%; + line-height: 1.5; + font-size: 16px; + font-family: sans-serif; + font-weight: lighter; +} + +/* Ensure text scales properly */ +.main .content { + align-self: center; +} + +.main .pane { + border-left: 1px solid #CAD5E0; + height: 100%; + padding: 8px; +} + +/* Typography */ +.bold { + font-weight: bold; +} + +.small-text { + font-size: 12px; + font-weight: lighter; + color: #000000; +} + +.large-text { + font-weight: bold; + font-size: 28px; +} + +/* Active state styling */ +.active { + cursor: pointer; + padding: 2px; + margin: 2px; + border-bottom: 2px solid transparent; +} + +.active:hover { + border-bottom-color: #4682b4; +} + +/* Responsive Design */ + +/* Tablets & Small Screens */ +@media (max-width: 1024px) { + .main { + grid-template-columns: 60% 40%; + grid-template-rows: 60px 40px auto 32px; + font-size: 14px; + } + + .large-text { + font-size: 24px; + } +} + +/* Mobile Screens */ +@media (max-width: 768px) { + .main { + grid-template-columns: 1fr; /* Single column layout */ + grid-template-rows: auto; + height: auto; + gap: 8px; + padding: 4%; + } + + .main .pane { + border-left: none; + border-top: 1px solid #CAD5E0; + padding: 12px; + } + + .large-text { + font-size: 20px; + } + + .small-text { + font-size: 10px; + } +} diff --git a/www/html/_assets/themes/default/menu.css b/www/html/_assets/themes/default/menu.css new file mode 100644 index 0000000..7a14d15 --- /dev/null +++ b/www/html/_assets/themes/default/menu.css @@ -0,0 +1,78 @@ +.menu { + padding:8px; + border:1px solid #CAD5E0 ; + + display:grid; + 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; +}