Update wrapper.tt to BS5, use now BS5 alerts for messages

Author: kuro610

root/static/css/local_bootstrap_modifications.css

@@ -1,20 +1,15 @@
-
 /*
 BOOSTRAP LOCAL CUSTOMIZATION
 */
 
-
-/*
-highlight fontcolor to white in case of navbar-light
-*/
-.navbar-light .navbar-nav .active > .nav-link,
-.navbar-light .navbar-nav           .nav-link.active,
-.navbar-light .navbar-nav           .nav-link.show,
-.navbar-light .navbar-nav .show   > .nav-link {
-    color: rgba(220,220,220,1);
+:root {
+  --cc-green: #4CAF50;
+  --cc-green-dark: #3A8E3D;
+  --cc-green-light: #6CBF6F;
 }
 
 
+
 /*
 redefined list -> non-indended
 */
@@ -60,15 +55,6 @@ smaller font-size of text similar class small
   font-size: 65%;
 }
 
-
-
-
-input[type="number"] {
-    text-align: left;
-}
-
-
-
 /*===========================================================================
 align material icons vertical: https://stackoverflow.com/questions/56171473/different-material-icons-styles-do-not-align
 ===========================================================================*/
@@ -95,50 +81,24 @@ input.with-markdown-preview {
 }
 
 
-/*===========================================================================
-overwrite behavior of navbar-dark nav-links
-===========================================================================*/
-
-.navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.99);
-}
-
-.navbar-dark .navbar-nav .nav-link:hover,
-.navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
-}
-
-
 /*===========================================================================
 login logout header color
 ===========================================================================*/
-.login_logout input[name="logout"],
-.login_logout button,
-.login_logout a {
-    background-color: rgba(255,255,255,0.0);
+.login-logout-btn {
+    background-color: transparent;
     color: #333333;
     border: 0px;
-
     -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
     -moz-box-shadow:    0px 0px 0px rgba(255,255,255,0.0) !important;
     box-shadow:         0px 0px 0px rgba(255,255,255,0.0) !important;
 }
 
-.login_logout input[name="logout"]:active,
-.login_logout input[name="logout"]:hover,
-.login_logout button:active,
-.login_logout button:hover,
-.login_logout a:active,
-.login_logout a:hover {
-    color: #f5f5ef;
-    background-color:rgba(255,255,255,0.0);
-    border: 0px;
-
-    -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
-    -moz-box-shadow:    0px 0px 0px rgba(255,255,255,0.0) !important;
-    box-shadow:         0px 0px 0px rgba(255,255,255,0.0) !important;
+.login-logout-btn:active,
+.login-logout-btn:hover,
+.login-logout-btn:focus {
+    color: var(--bs-light);
 }
 
 .bg-header {
-    background-color: #4CAF50;
+    background-color: var(--cc-green);
 }

root/static/css/style.css

@@ -16,161 +16,69 @@ html {
 body {
     margin: 0;
     position: relative;
-    height: 100%;
-    color: #333333;
-}
-
-#container {
-    min-height: 100%;
-    position: relative;
-}
-
-/******** header part ********/
-
-/*** general part ***/
-
-header {
-    margin: 0;
-    background-color: #4CAF50;
-}
-
-header nav ul {
-    list-style-type: none;
-    padding-left: 0;
-}
-
-header nav li {
-    display: inline;
-}
-
-/* "Logout" must be button for POST request but style like link */
-header nav input[name="logout"]:hover,
-header nav input[name="logout"] {
-    border: 0;
-    font-family: inherit;
-    font-size:   inherit;
-    cursor: pointer;
-}
-
-/*
- * stop Firefox adding 2px to the submit button's height
- * see https://stackoverflow.com/questions/12288175/firefox-adds-2px-padding-in-a-submit-button
- */
-header nav input[name="logout"]::-moz-focus-inner { border:0; padding:0 }
-
-header h1 {
-    font-size: 2.5em;
-}
-
-header p {
-    margin: 0;
-    padding: 0 0.5em 0 0.5em;
-    color: #f5f5ef;
-}
-
-header p a[href] {
-    color: #f5f5ef;
-}
-
-/*** user nav ***/
-header #user_nav {
-    height: 7em;
-    padding: 0 1.5em 0 1.5em;
-    display: flex;
-    justify-content: space-between;
-}
-
-header #h1-div {
-    align-self: center;
-}
-
-header #user_nav li {
-    padding-left: 1em;
-}
-
-header #user_nav a {
-    padding: 0;
-}
-
-header #user_nav h4 a:hover,
-header #user_nav h4 a:active {
-    color: #333333;
-}
-
-header #user_nav a:hover,
-header #user_nav a:active {
-    color: #f5f5ef;
-}
-
-header #user_nav ul {
+    color: var(--bs-dark);
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
 }
 
-header #user_nav ul p + div {
-    margin-top: 1em;
+a {
+    text-decoration: none;
+    color: var(--bs-dark);
 }
 
-header #user_nav ul div:only-child {
-    margin-top: 3em;
+a.hov-under:hover,
+a.hov-under:focus,
+button.alert-link:hover,
+button.alert-link:focus,
+a.alert-link:hover,
+a.alert-link:focus {
+    text-decoration: underline;
 }
 
-header #user_nav h4 {
-    margin: 0;
-    padding: 0 0.5em 0 0.5em;
-    color: #f5f5ef;
-}
+/******** header part ********/
 
-header #user_nav h4 a {
-    color: #f5f5ef;
+/*** general part ***/
+header h1 {
+    font-size: 2.5em;
 }
 
-header nav input[name="logout"] {
-    background-color: #4CAF50;
-    color: #333333;
+header a {
+    color: inherit;
 }
 
-header nav input[name="logout"]:active,
-header nav input[name="logout"]:hover {
-    color: #f5f5ef;
-
-    box-shadow:         0px 0px 0px grey !important;
+header a:hover,
+header a:focus {
+    color: inherit;
 }
 
 /*** project nav ***/
+#project_nav .nav-link {
+    color: var(--bs-light);
+}
 
-header #project_nav a:hover {
-    background-color:#f5f5ef;
-    color: #333333;
+#project_nav a:hover,
+#project_nav a:focus {
+    background: var(--bs-light);
+    color: var(--bs-dark);
 }
 
 /*** submenu nav ***/
-header #submenu_nav a:hover,
-header #submenu_nav a.current {
-    color: #f5f5ef !important;
+#submenu_nav a:hover,
+#submenu_nav a.active,
+#submenu_nav a:focus {
+    color: var(--bs-light) !important;
+    background: var(--cc-green-dark);
 }
 
 /******** content part ********/
-
-main {
-    padding: 1.5em;
-    padding-bottom: 12em; /*necessary for position of footer*/
+main a {
+    color: var(--cc-green);
 }
 
-a[href] {
-    text-decoration:none;
-    color: #333333;
-}
-
-main a[href] {
-    text-decoration:none;
-    color: #4CAF50;
-}
-
-main a[href]:hover,
-main a[href]:active {
-    color: #333333;
+main a:hover,
+main a:focus {
+    color: var(--bs-dark);
 }
 
 a.btn-secondary {
@@ -202,18 +110,12 @@ code {
     padding:       0.25em;
 }
 
-.message {
-    border: 2px solid;
-    border-radius: 0.5em;
-    padding: 0 0.5em;
-    margin:  0.5em 0;
+button.alert-link {
+    background: transparent;
+    border: none;
+    padding: 0;
 }
 
-.message-debug { background-color: #f5f5ef;                          color: DarkGrey; }
-.message-info  { background-color: #dfd;                             color: DarkGreen; }
-.message-warn  { background-color: orange; border-color: DarkOrange; color: black; }
-.message-error { background-color: #f55;   border-color: DarkRed;    color: black; }
-
 .inline,
 .inline * {
     display: inline;
@@ -329,37 +231,11 @@ input[type=number].editable-content:not(:focus) {
 }
 
 /******** footer part ********/
-
-footer {
-    background-color: #333333;
-    color: #f5f5ef;
-    position: absolute; /*necessary to position it at the bottom in all cases*/
-    bottom: 0;
-    width: 100%;
-    padding: 0.5em 1em 0.5em 1em;
-    margin: 0 auto;
-    display: inline-block;
-    line-height: 1.5;
-    height: 12em; /*adjust if there are additional links in the footer*/
-}
-
-footer nav ul {
-    list-style-type: none;
-    float: left;
-}
-
-footer nav ul:first-child {
-    padding-left: 10px;
-}
-
-footer nav h4 {
-    margin: 0;
-}
-
-footer a[href] {
+footer a {
     color: inherit;
 }
 
-footer a[href]:hover {
+footer a:hover {
     text-decoration: underline;
+    color: inherit;
 }