Add new theme and change default.

This commit is contained in:
Retro_Guy 2023-05-21 06:10:53 -07:00
parent 56214f2bd7
commit 182aabfc42
7 changed files with 860 additions and 0 deletions

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1 @@
Light Theme

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -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;
}

View File

@ -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;
}