From 373e95d47e52661c2ce96dbf709f1890b7c8c4e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Andreas=20Nilsen?= <on@ntnu.no>
Date: Tue, 23 Sep 2025 13:19:11 +0200
Subject: [PATCH] modern css style for bas

---
 modern-bas.css | 531 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 531 insertions(+)
 create mode 100644 modern-bas.css

diff --git a/modern-bas.css b/modern-bas.css
new file mode 100644
index 0000000..fe86665
--- /dev/null
+++ b/modern-bas.css
@@ -0,0 +1,531 @@
+/* General Body and Root Styles - Bootstrap Inspired */
+:root {
+    --bs-blue: #0d6efd;
+    --bs-gray-100: #f8f9fa;
+    --bs-gray-200: #e9ecef;
+    --bs-gray-400: #ced4da;
+    --bs-gray-700: #495057;
+    --bs-gray-800: #343a40;
+    --bs-gray-900: #212529;
+    --bs-white: #fff;
+    --bs-border-color: #dee2e6;
+    --bs-border-radius: 0.375rem;
+
+    /* Light Theme */
+    --background-color: var(--bs-gray-100);
+    --text-color: var(--bs-gray-900);
+    --primary-color: var(--bs-blue);
+    --border-color: var(--bs-border-color);
+    --card-background: var(--bs-white);
+    --card-header-background: var(--bs-gray-100);
+    --link-color: var(--bs-blue);
+    --link-hover-color: #0a58ca;
+    --menu-hover-background: var(--bs-gray-200);
+    --success-color: #198754;
+    --warning-color: #ffc107;
+    --danger-color: #dc3545;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bs-dark-bg: #1a1a1a;
+        --bs-dark-card-bg: #212121;
+        --bs-dark-border: #444;
+        --bs-dark-text: #dee2e6;
+        --bs-dark-header-bg: #2c2c2c;
+
+        --background-color: var(--bs-dark-bg);
+        --text-color: var(--bs-dark-text);
+        --border-color: var(--bs-dark-border);
+        --card-background: var(--bs-dark-card-bg);
+        --card-header-background: var(--bs-dark-header-bg);
+        --link-color: #4dabf7;
+        --link-hover-color: #82c9ff;
+        --menu-hover-background: #333;
+    }
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    margin: 0;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+#pagewrap {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+#orginfo { 
+    display: none;
+}
+
+.even {
+    background-color: #f6faff;
+}
+
+.deleted {
+    background-color: #ffeaec;
+}
+
+/* Header */
+#ntnuheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background-color: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+#ntnuheader #ntnulogo { 
+    height: 40px; 
+}
+
+#help_link {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.875rem;
+}
+
+#help_link a {
+    color: var(--link-color);
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.15s ease-in-out;
+}
+
+#help_link a:hover {
+    background-color: var(--menu-hover-background);
+}
+
+/* Main Layout Grid on #container */
+#container {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    grid-template-areas:
+        "tabs    tabs"
+        "subnav  subnav"
+        "actions content"
+        "bottom  bottom";
+    gap: 1.5rem 2rem;
+}
+
+/* Grid Area Assignments */
+#tabview { grid-area: tabs; }
+#sub-nav { grid-area: subnav; }
+#actions { grid-area: actions; }
+#content-wrap { grid-area: content; }
+#bottom { grid-area: bottom; }
+
+/* Logged in user info */
+.loggedin {
+    grid-area: tabs;
+    text-align: right;
+    font-size: 0.875rem;
+    color: var(--bs-gray-700);
+    margin-bottom: 1rem;
+    padding: 0.5rem 0;
+}
+
+.loggedin a.logoutlink {
+    color: var(--danger-color);
+    text-decoration: none;
+    margin-left: 0.5rem;
+}
+
+.loggedin a.logoutlink:hover {
+    text-decoration: underline;
+}
+
+/* Actions Menu (as List Group) */
+#actions h3 {
+    font-size: 1.25rem;
+    margin: 0 0 0.75rem 0;
+    color: var(--text-color);
+}
+
+#actions ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    background-color: var(--card-background);
+}
+
+#actions ul li a {
+    display: block;
+    padding: 0.75rem 1rem;
+    text-decoration: none;
+    color: var(--link-color);
+    background-color: var(--card-background);
+    border-bottom: 1px solid var(--border-color);
+    transition: background-color 0.15s ease-in-out;
+}
+
+#actions ul li:first-child a { 
+    border-top-left-radius: calc(var(--bs-border-radius) - 1px); 
+    border-top-right-radius: calc(var(--bs-border-radius) - 1px); 
+}
+
+#actions ul li:last-child a { 
+    border-bottom: 0; 
+    border-bottom-left-radius: calc(var(--bs-border-radius) - 1px); 
+    border-bottom-right-radius: calc(var(--bs-border-radius) - 1px); 
+}
+
+#actions ul li a:hover {
+    background-color: var(--menu-hover-background);
+    color: var(--link-hover-color);
+}
+
+/* Main Content Area */
+#content-wrap { 
+    min-width: 0; 
+}
+
+#title h1 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0 0 1.5rem 0;
+    color: var(--text-color);
+}
+
+/* Nav Tabs */
+#tabview {
+    #border-bottom: 1px solid var(--border-color);
+    #margin-bottom: 0;
+}
+
+#tabview ul.yui-nav {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#tabview ul.yui-nav li a {
+    display: block;
+    padding: 0.75rem 1.25rem;
+    text-decoration: none;
+    color: var(--link-color);
+    border: 1px solid transparent;
+    border-top-left-radius: var(--bs-border-radius);
+    border-top-right-radius: var(--bs-border-radius);
+    margin-right: 0.25rem;
+    transition: all 0.15s ease-in-out;
+}
+
+#tabview ul.yui-nav li.selected a {
+    color: var(--text-color);
+    background-color: var(--card-background);
+    border-color: var(--border-color) var(--border-color) var(--card-background);
+    margin-bottom: -1px;
+}
+
+#tabview ul.yui-nav li a:hover:not(.selected a) {
+    background-color: var(--menu-hover-background);
+    border-color: var(--border-color) var(--border-color) transparent;
+}
+
+/* Sub Navigation */
+#sub-nav { 
+    background-color: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    padding: 0.75rem 1rem;
+    margin-top: -1rem;
+}
+
+#sub-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 1.5rem;
+}
+
+#sub-nav ul li a {
+    color: var(--link-color);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.15s ease-in-out;
+}
+
+#sub-nav ul li a:hover {
+    background-color: var(--menu-hover-background);
+}
+
+/* Cards (.box, .view) */
+.box, .view {
+    background-color: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.box h3, .view h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 1rem 1.25rem;
+    margin: 0;
+    background-color: var(--card-header-background);
+    border-bottom: 1px solid var(--border-color);
+    border-top-left-radius: calc(var(--bs-border-radius) - 1px);
+    border-top-right-radius: calc(var(--bs-border-radius) - 1px);
+    color: var(--text-color);
+}
+
+.view form {
+    padding: 1.5rem;
+}
+
+/* Form Styling */
+.view .required,
+.view .optional {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.view label {
+    flex: 0 0 140px;
+    font-weight: 500;
+    color: var(--text-color);
+    margin-bottom: 0;
+}
+
+.view .required label {
+    font-weight: 600;
+}
+
+.view input[type="text"],
+.view input[type="checkbox"] {
+    flex: 1;
+}
+
+.view input[type="checkbox"] {
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+}
+
+.view .buttons {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 0.75rem;
+}
+
+.view .help {
+    margin: 1rem 1.5rem 1.5rem;
+    padding: 1rem;
+    background-color: var(--bs-gray-100);
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    font-size: 0.875rem;
+    color: var(--bs-gray-700);
+}
+
+@media (prefers-color-scheme: dark) {
+    .view .help {
+        background-color: var(--bs-dark-header-bg);
+        color: var(--bs-dark-text);
+    }
+}
+
+/* Tooltip icons */
+img.tt {
+    width: 16px;
+    height: 16px;
+    opacity: 0.7;
+    transition: opacity 0.15s ease-in-out;
+}
+
+img.tt:hover {
+    opacity: 1;
+}
+
+/* Tables */
+.box table, .view table { 
+    width: 100%; 
+    border-collapse: collapse; 
+}
+
+.box th, .box td, .view th, .view td { 
+    padding: 0.25rem 0.75rem; 
+    text-align: left; 
+    border-bottom: 1px solid var(--border-color); 
+}
+
+.box tr:last-child td, .view tr:last-child td { 
+    border-bottom: 0; 
+}
+
+/* Bottom Section */
+#bottom {
+    grid-column: 1 / -1;
+    padding-top: 1.5rem;
+    margin-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.bottom_div {
+    background-color: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    padding: 1.5rem;
+}
+
+.activitylog h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+    color: var(--text-color);
+}
+
+.activitylog h2 a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+.activitylog h2 a:hover {
+    color: var(--link-color);
+}
+
+.amsg {
+    color: var(--bs-gray-700);
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+}
+
+.amsg a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+.amsg a:hover {
+    text-decoration: underline;
+}
+
+/* Forms */
+input[type="text"],
+input[type="password"],
+select,
+textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--text-color);
+    background-color: var(--card-background);
+    background-clip: padding-box;
+    border: 1px solid var(--border-color);
+    border-radius: var(--bs-border-radius);
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    box-sizing: border-box;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+select:focus,
+textarea:focus {
+    border-color: var(--primary-color);
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Buttons */
+input[type="submit"],
+input[type="button"] {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--primary-color);
+    border-radius: var(--bs-border-radius);
+    background-color: var(--primary-color);
+    color: var(--bs-white);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+    text-transform: none;
+}
+
+input[type="submit"]:hover,
+input[type="button"]:hover {
+    background-color: var(--link-hover-color);
+    border-color: var(--link-hover-color);
+}
+
+input[type="button"] {
+    background-color: var(--bs-gray-200);
+    border-color: var(--bs-gray-200);
+    color: var(--text-color);
+}
+
+input[type="button"]:hover {
+    background-color: var(--bs-gray-400);
+    border-color: var(--bs-gray-400);
+}
+
+/* Links */
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color 0.15s ease-in-out;
+}
+
+a:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline;
+}
+
+/* Hide elements that are not needed in modern layout */
+#quicksearch, 
+#help_link img {
+    display: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #container {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "tabs"
+            "subnav"
+            "content"
+            "actions"
+            "bottom";
+        gap: 1rem;
+    }
+    
+    #pagewrap {
+        padding: 0.5rem;
+    }
+    
+    .view .required,
+    .view .optional {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .view label {
+        flex: none;
+        margin-bottom: 0.25rem;
+    }
+}
\ No newline at end of file