From 182aabfc42b85be5433fa546c277783b5403a917 Mon Sep 17 00:00:00 2001
From: Retro_Guy <retro.guy@rocksolidbbs.com>
Date: Sun, 21 May 2023 06:10:53 -0700
Subject: [PATCH] Add new theme and change default.

---
 .../images/latest.png                         | Bin
 .../style-colors.css                          |   0
 .../{Default Theme => Dark Theme}/style.css   |   0
 Rocksolid_Light/common/themes/Default Theme   |   1 +
 .../themes/Light Theme/images/latest.png      | Bin 0 -> 2202 bytes
 .../themes/Light Theme/style-colors.css       |  15 +
 .../common/themes/Light Theme/style.css       | 844 ++++++++++++++++++
 7 files changed, 860 insertions(+)
 rename Rocksolid_Light/common/themes/{Default Theme => Dark Theme}/images/latest.png (100%)
 rename Rocksolid_Light/common/themes/{Default Theme => Dark Theme}/style-colors.css (100%)
 rename Rocksolid_Light/common/themes/{Default Theme => Dark Theme}/style.css (100%)
 create mode 120000 Rocksolid_Light/common/themes/Default Theme
 create mode 100644 Rocksolid_Light/common/themes/Light Theme/images/latest.png
 create mode 100644 Rocksolid_Light/common/themes/Light Theme/style-colors.css
 create mode 100644 Rocksolid_Light/common/themes/Light Theme/style.css

diff --git a/Rocksolid_Light/common/themes/Default Theme/images/latest.png b/Rocksolid_Light/common/themes/Dark Theme/images/latest.png
similarity index 100%
rename from Rocksolid_Light/common/themes/Default Theme/images/latest.png
rename to Rocksolid_Light/common/themes/Dark Theme/images/latest.png
diff --git a/Rocksolid_Light/common/themes/Default Theme/style-colors.css b/Rocksolid_Light/common/themes/Dark Theme/style-colors.css
similarity index 100%
rename from Rocksolid_Light/common/themes/Default Theme/style-colors.css
rename to Rocksolid_Light/common/themes/Dark Theme/style-colors.css
diff --git a/Rocksolid_Light/common/themes/Default Theme/style.css b/Rocksolid_Light/common/themes/Dark Theme/style.css
similarity index 100%
rename from Rocksolid_Light/common/themes/Default Theme/style.css
rename to Rocksolid_Light/common/themes/Dark Theme/style.css
diff --git a/Rocksolid_Light/common/themes/Default Theme b/Rocksolid_Light/common/themes/Default Theme
new file mode 120000
index 0000000..6e69055
--- /dev/null
+++ b/Rocksolid_Light/common/themes/Default Theme	
@@ -0,0 +1 @@
+Light Theme
\ No newline at end of file
diff --git a/Rocksolid_Light/common/themes/Light Theme/images/latest.png b/Rocksolid_Light/common/themes/Light Theme/images/latest.png
new file mode 100644
index 0000000000000000000000000000000000000000..eded3a2496e654fb94678d46655c592fae8ea1a8
GIT binary patch
literal 2202
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
A#sB~S

literal 0
HcmV?d00001

diff --git a/Rocksolid_Light/common/themes/Light Theme/style-colors.css b/Rocksolid_Light/common/themes/Light Theme/style-colors.css
new file mode 100644
index 0000000..01c44f8
--- /dev/null
+++ b/Rocksolid_Light/common/themes/Light Theme/style-colors.css	
@@ -0,0 +1,15 @@
+:root {
+  --color-dark: #F3E8EA;
+  --color-medium: #F8F0E3;
+  --color-light: #F8F6F0;
+
+  --color-text: #0C090A;
+  --color-text-quote: #52595D;
+  --color-highlight: #36013F;
+
+  --color-link: #36013F;
+  --color-visited: #663399;
+
+  --color-border: #828282;
+  --color-row-border: white;
+}
diff --git a/Rocksolid_Light/common/themes/Light Theme/style.css b/Rocksolid_Light/common/themes/Light Theme/style.css
new file mode 100644
index 0000000..65b4786
--- /dev/null
+++ b/Rocksolid_Light/common/themes/Light Theme/style.css	
@@ -0,0 +1,844 @@
+@import "style-colors.css";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+}
+
+.section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu {
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px
+  background-color: var(--color-dark);
+}
+
+.header {
+  border: none;
+  border-spacing: 0px;
+  width: 100%;
+  height: 8%;
+  margin: 0px;
+  padding: 0px;
+  background-color: var(--color-light);
+}
+
+.title {
+  font-size: 2em;
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.title_small {
+  font-size: 0em;
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.header_menu {
+  font-size: 1em;
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.content {
+  background-color: var(--color-light);
+}
+
+.responsive_image {
+  width: 100%;
+  max-width: 80%;
+  height: auto;
+}
+
+.visited {
+  color: var(--color-visited);
+}
+
+.search_result {
+  color: var(--color-highlight); 
+}
+
+.theme_listbox {
+  border: none;
+  padding: 0.2em;
+  width: 200px !important;
+  background-color: var(--color-medium);
+  color: var(--color-text);
+}
+
+/* Title */
+.np_title {
+  text-decoration: none;
+  color: var(--color-text);
+  font-size: 1.5em;
+}
+
+/* Header frame */
+.np_frame_header {
+  width: 100%;
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px;
+  background: var(--color-dark);
+}
+
+/* Menu frame */
+.np_frame_menu {
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 2px;
+  background: var(--color-dark);
+}
+
+/* Content frame */
+.np_frame_content {
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 2px;
+  background: var(--color-dark);
+}
+
+/* Header table */
+.header_table {
+  border: none;
+  padding: 2px;
+  background: var(--color-dark);
+}
+
+.np_button_hidden {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: 1px solid var(--color-text);
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+}
+/* Header buttons */
+.np_header_button_link {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  font-size: 1.8em;
+}
+
+/* Mail buttons */
+.np_mail_button_link {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  font-size: 1.2em;
+}
+
+.np_mail_button_read {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  font-size: 1em;
+}
+
+ 
+.np_mail_button_link:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+.np_mail_button_read:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+/* Filename buttons */
+.np_filename_button_link {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  font-size: 0.8em;
+}
+
+.np_filename_button_link:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+/* Username buttons */
+.np_username_button_link {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  font-size: 0.9em;
+}
+
+.np_header_button_link:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+.np_username_button_link:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+.np_header_bar_large {
+  background: var(--color-dark);
+  padding: 1px;
+  margin-bottom: 1px;
+  color: black;
+  font-size: 0.5em;
+}
+
+.np_header_bar_small {
+  background: var(--color-dark);
+  padding: 1px;
+  margin-bottom: 1px;
+  color: black;
+  font-size: 0.6em;
+}
+
+.display_headers:active .display_headers_on {
+   display:block;
+}
+
+#trigger_headers:checked + .display_headers_on {
+   display:block;
+}
+
+.display_headers_on {
+    display: none;  /* NEW */
+    background: var(--color-dark);;
+    padding: 3px;
+    border: solid 1px var(--color-link);
+    word-wrap: break-word;
+    position: absolute;
+    z-index: 1000;
+    width:98%;
+    height: auto;
+}
+
+.display_headers_on:hover {
+    display:block;
+}
+
+.display_headers {
+//   margin:100px;
+}
+
+div.ellipsis {
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+}
+
+input {
+  background-color: var(--color-medium);
+  border: none;
+  color: var(--color-text);
+}
+
+textarea.postbody {
+  background-color: var(--color-medium);
+  border: none;
+  color: var(--color-text);
+  height: calc(1em * 1.5 * 20);
+  width: calc(1em * 1.5 * 40);
+}
+
+textarea.configuration {
+  background-color: var(--color-medium);
+  border: none;
+  color: var(--color-text);
+  resize: none;
+}
+
+/* Mobile Styles */
+@media only screen and (max-device-width: 480px) {
+  body {
+    color: var(--color-text);
+    background: var(--color-light);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: calc(1em + 2vw);
+  }
+    .header {
+      margin: 5px;
+      height: 10%; 
+    } 
+    .menu {
+      margin: 0px; 
+      width: 0%;
+      height: 0%
+    }
+    .content {
+      margin: 10px;
+      width: 100%;
+      height: 89%;
+    }
+    .title {
+      font-size: 0em;
+    }
+    .title_small {
+      font-size: 1.2em;
+    }
+    .header_menu {
+      font-size: 0.7em;
+    }
+    .np_header_button_link {
+      font-size: 1em;
+    }
+    .np_header_bar_large {
+      display: none;
+    }
+    .np_title {
+      font-size: 1em;
+    }
+    textarea.postbody {
+      height: calc(1em *1.5 * 10);
+      width: 100%;
+    }
+    input.post {
+      width: 90%;
+    }
+}
+
+/* Tablet Styles */
+@media only screen and (min-device-width: 481px) and (max-device-width: 820px) {
+  body {
+    color: var(--color-text);
+    background: var(--color-light);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: calc(1em + 1vw);
+  }
+    .header {
+      margin: 5px;
+      height: 10%;
+    }
+    .menu {
+      margin: 0px;
+      width: 0%;
+      height: 0%
+    }
+    .content {
+      margin: 10px;
+      width: 100%;
+      height: 89%;
+    }
+    .title {
+      font-size: 1.2em;
+    }
+    .header_menu {
+      font-size: 0.8em;
+    }
+    .np_header_button_link {
+      font-size: 1.5em;
+    }
+    .np_header_bar_large {
+      display: none;
+    }
+}
+
+/* Desktop Styles */
+@media only screen and (min-device-width: 821px) {
+  body {
+    margin-left: 10px;
+    margin-right: 10px;
+    color: var(--color-text);
+    background: var(--color-light);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: calc(1em + 1vw);
+    }
+    .header {
+      margin: 0px;
+      height: 8%;
+    }
+    .menu {
+      width: 20%;
+      height: 92%
+    }
+    .content {
+      width: 80%;
+      height: 92%;
+    }
+    .title {
+      font-size: 1.5em;
+    }
+    .header_menu {
+      font-size: 0.8em;
+    }
+    .np_button_hidden {
+      padding-left: 0px;
+      padding-right: 0px;
+      border: none;
+      color: transparent;
+      font-size: 0em;
+    }
+    .np_header_bar_small {
+      display: none;
+    }
+}
+
+/* =========== Index Layout ============== */
+
+/* headline */
+h1.np_index_headline {
+  font-size: 0.8em;
+}
+
+/* Table around the groups */
+table.np_groups_table {
+  width: 100%;
+  table-layout: fixed;
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px;
+  font-size: 0.5em;
+}
+
+/* border around all groups */
+.np_index_groups {
+  background: var(--color-dark);
+  padding: 0px;
+  border: solid 1px var(--color-link);
+}
+
+/* a block of groups */
+.np_index_groupblock {
+  margin-bottom: 20px;
+  background: var(--color-dark);
+}
+
+/* headline of a group of blocks */
+.np_index_grouphead {
+  border: solid 1px var(--color-link);
+  background: var(--color-dark);
+  color: var(--color-text);
+  font-size: 0.7em;
+  font-style: italic;
+}
+
+/* a single group */
+.np_index_group {
+  margin-left: 10px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+}
+
+/* Text inside a Line */
+span.np_group_line_text {
+  font-size: 1.2em;
+  font-weight: bold;
+  font-family: Arial, Helvetica, sans-serif;
+  color: var(--color-visited) !important;
+}
+
+/* =========== Thread Layout ============== */
+
+/* Headline */
+h1.np_thread_headline {
+  font-size: 0.6em;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+
+/* Table around the thread */
+table.np_thread_table {
+  width: 100%;
+  table-layout: fixed;
+  border: solid 1px var(--color-visited);
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px;
+  font-size: 0.5em;
+}
+
+/* Head of the table */
+tr.np_thread_head,td.np_thread_head {
+  color: var(--color-visited);
+  background: var(--color-light);
+  margin: 0px;
+}
+
+
+
+/* Even line numbers in the thread */
+tr.np_thread_line1,td.np_thread_line1 {
+  padding-left:   3px;
+  padding-top:    3px;
+  padding-right:  0px;
+  padding-bottom: 3px;
+  background: var(--color-dark);
+  border-right: 1px solid var(--color-row-border);
+  margin: 0px;
+}
+
+/* Odd line numbers in the thread */
+tr.np_thread_line2,td.np_thread_line2 {
+  padding-left: 3px;
+  padding-top:    3px;
+  padding-right:  0px;
+  padding-bottom: 3px;
+  background: var(--color-light);
+  border-top: 1px solid var(--color-row-border);
+  border-bottom: 1px solid var(--color-row-border);
+  border-right: 1px solid var(--color-row-border);
+  margin: 0px;
+}
+
+/* Text inside a Line */
+span.np_thread_line_text {
+  font-size: 1em;
+  font-weight: bold;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* The small images, a thread consists of */
+img.thread_image {
+  vertical-align: bottom;
+}
+
+/* =========== Article Layout ============= */
+
+/* headline */
+h1.np_article_headline {
+  font-size: 0.6em;
+}
+
+
+/* Head of an article */
+div.np_article_header {
+  background: var(--color-dark);
+  padding: 3px;
+  border: solid 1px var(--color-link);
+  font-size: 0.55em;
+}
+
+/* Layout of the Text-Body */
+div.np_article_body {
+  background: var(--color-light);
+  margin-top: 20px;
+/*  font-family: "Lucida Console", "Courier New", Courier, "Andale Mono", monospace; */
+  font-size: 0.55em;
+}
+
+/* Layout of the Text-Body for Synchronet (to display ASCII art etc.*/
+div.np_article_body_synch {
+  background: var(--color-light);
+  margin-top: 20px;
+  font-family: "Lucida Console", "Courier New", Courier, "Andale Mono", monospace;
+  font-size: 0.55em;
+}
+
+/* Layout of quoted text / graphic layout */
+blockquote.np_article_quote {
+  border-left: var(--color-link) solid 1px;
+  padding-left: 5px;
+  color: var(--color-text-quote);
+  margin: 0px;
+}
+
+/* =========== Post layout =========== */
+
+/* headline */
+h1.np_post_headline {
+  font-size: 1em;
+}
+
+
+/* Head with the input fields for subject, name and email  */
+.np_post_header {
+  background: var(--color-dark);
+  padding: 3px;
+  border: solid 1px var(--color-link);
+}
+
+/* Body with the message-field and the post-button in it */
+.np_post_body {
+  background: var(--color-light);
+  padding: 3px;
+  border: solid 1px var(--color-link);
+  margin-top: 10px;
+}
+
+/* =========== specifically for rocksolid overboard =========== */
+
+/* results table */
+table.np_results_table {
+  width: 100%;
+  table-layout: fixed;
+  border: none;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px;
+  font-size: 0.5em;
+}
+
+/* overboard posted_date */
+.np_ob_posted_date {
+  margin-top: 0;
+  margin-bottom: 0;
+  text-decoration: none;
+  color: var(--color-highlight);
+  text-align: left;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+}
+
+/* posted_date */
+.np_posted_date {
+  float: right;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 10;
+  text-decoration: none;
+  color: var(--color-highlight);
+  text-align: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+  width:50%;
+}
+
+/* posted_date left */
+.np_posted_date_left {
+  float: left;
+  margin-top: 5;
+  margin-bottom: 0;
+  margin-right: 10;
+  margin-left: 10;
+  text-decoration: none;
+  color: var(--color-highlight);
+  text-align: left;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+//  width:50%;
+}
+
+#datebox {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* last posted_date */
+.np_last_posted_date {
+  margin-top: 10;
+  margin-bottom: 10;
+  margin-right: 10;
+  text-decoration: none;
+  color: var(--color-highlight);
+  text-align: left;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.9em;
+}
+
+/* group description */
+.np_group_desc {
+  margin-top: 2;
+  margin-bottom: 10;
+  margin-right: 10;
+  text-decoration: none;
+  color: var(--color-highlight) !important;
+  text-align: left;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+}
+
+.np_ob_group {
+  margin-top: 0;
+  margin-bottom: 0;
+  text-decoration: none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+}
+
+.np_ob_body {
+  margin-top: 0;
+  margin-bottom: 0;
+  text-decoration: none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+}
+
+.np_ob_subject {
+  margin-top: 0;
+  margin-bottom: 0;
+  text-decoration: none;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.1em;
+}
+
+/* Even line numbers in the thread */
+.np_result_line1 {
+  padding-left:   3px;
+  padding-top:    6px;
+  padding-right:  0px;
+  padding-bottom: 6px;
+  background: var(--color-dark);
+  margin: 0px;
+}
+
+/* Odd line numbers in the thread */
+.np_result_line2 {
+  padding-left: 3px;
+  padding-top:    6px;
+  padding-right:  0px;
+  padding-bottom: 6px;
+  background: var(--color-light);
+  border-top: 1px solid var(--color-row-border);
+  border-bottom: 1px solid var(--color-row-border); 
+  margin: 0px;
+}
+
+.np_ob_tail {
+  font-size: 0.7em;
+}
+/* =========== navigation buttons on top of every page =========== */
+.np_buttonbar {
+  background: var(--color-dark);
+  padding: 1px;
+  margin-bottom: 1px;
+  width: 100%;
+  color: black;
+  font-size: 0.6em;
+}
+
+.np_button_link {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: none;
+  margin-right: 10px;
+  color: var(--color-visited);
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--color-dark);
+  border-radius: 5px;
+  border: 1px solid var(--color-highlight);
+  font-size: 1em;
+}
+
+.np_button_link:hover {
+  color: var(--color-dark);
+  background: var(--color-visited);
+}
+
+td.np_button {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-right: solid white 1px;
+  color: white;
+  white-space: nowrap;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+a.np_button {
+  color: white;
+  text-decoration: underline;
+}
+
+.button_container {
+  text-align:center;
+}
+
+.np_pages {
+  color: var(--color-visited);
+}
+
+.np_pages_selected {
+  color: var(--color-highlight) !important;
+  text-weight: bold;
+  margin-left: 5px;
+  font-size: 110%;
+}
+
+.np_pages_unselected {
+  color: var(--color-visited) !important;
+  text-decoration: underline;
+  margin-left: 5px;
+}
+
+input[type=submit] {
+    padding:5px; 
+    border:1px solid var(--color-text); 
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+input[type=submit]:hover {
+    color: var(--color-medium);
+    background: var(--color-text);
+}
+
+input[type=button] {
+    padding:5px;
+    border:1px solid var(--color-text);
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+input[type=button]:hover {
+    color: var(--color-medium);
+    background: var(--color-text);
+}
+
+a:link {
+    text-decoration: none;
+    color: var(--color-link);
+    font-size: inherit;
+}
+
+a:visited {
+    text-decoration: none;
+    color: var(--color-visited);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:active {
+    text-decoration: underline;
+}