native dark theme initial checkin

1 files changed, 90 insertions, 133 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 9069500d9..ce791720c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -6,14 +6,33 @@
  */
 
 
-/* bootstrap variable */
+/* bootstrap variables */
 
 :root {
 	--bs-border-radius: $radius;
-	--bs-link-color: $link_colour;
-	--bs-link-hover-color: $link_hover_colour;
-	--bs-body-bg: $bgcolour;
-	--bs-highlight-bg: yellow;
+	--bs-highlight-bg: var(--bs-warning);
+}
+
+[data-bs-theme=light] {
+	--bs-link-color: $link_color;
+	--bs-link-hover-color: $link_hover_color;
+	--hz-body-bg: $bgcolor;
+	--hz-body-bg-image: url('$background_image');
+}
+
+[data-bs-theme=dark] {
+	--bs-link-color: $link_color_dark;
+	--bs-link-hover-color: $link_hover_color_dark;
+	--hz-body-bg: $bgcolor_dark;
+	--hz-body-bg-image: url('$background_image_dark');
+}
+
+[data-bs-theme=light] .navbar-dark.bg-dark {
+	background-color: $nav_bg !important;
+}
+
+[data-bs-theme=dark] .navbar-dark.bg-dark {
+	background-color: $nav_bg_dark !important;
 }
 
 .nav-tabs {
@@ -41,12 +60,12 @@ html {
 
 body {
 	font-size: 0.9rem;
-	background-color: var(--bs-body-bg);
-	background-image: url('$background_image');
+	background-color: var(--hz-body-bg);
+	background-image: var(--hz-body-bg-image);
 	background-attachment: fixed;
 	background-size: cover;
-	color: $font_colour;
-	margin: 0px;
+	color: var(--bs-body-color);
+	margin: 0;
 }
 
 aside#region_1 {
@@ -108,7 +127,6 @@ h6, .h6 {
 }
 
 #banner {
-	color: $banner_colour;
 	font-weight: bold;
 	white-space: nowrap;
 	overflow: hidden;
@@ -154,8 +172,8 @@ input, optgroup, select, textarea {
 
 input[type=text], textarea {
 	resize: vertical;
-	background-color: $comment_item_colour;
-	color: $font_colour;
+	background-color: var(--bs-body-bg);
+	color: var(--bs-body-color);
 }
 
 .selected-doco-nav {
@@ -176,11 +194,6 @@ input[type=text], textarea {
 	color: #FF0000;
 }
 
-nav {
-	opacity: $nav_float_min_opacity;
-	filter:alpha(opacity=$nav_percent_min_opacity);
-}
-
 #powered-by {
 	font-size: 0.5rem;
 	position: absolute;
@@ -217,7 +230,7 @@ nav {
 	left: 0px;
 	width: 100%;
 	max-height: 50%;
-	background: $comment_item_colour;
+	background: var(--bs-body-bg);
 	padding: 1rem;
 	border-bottom: #e0e0e0 1px solid;
 	overflow: auto;
@@ -243,7 +256,6 @@ nav {
 }
 
 .contextual-help-tool i {
-	color: $font_colour;
 	font-size: 1.05rem;
 }
 
@@ -279,10 +291,10 @@ nav {
 	-moz-animation: rotation 1s infinite linear;
 	-o-animation: rotation 1s infinite linear;
 	animation: rotation 1s infinite linear;
-	border-left: .2rem solid rgba(77, 77, 77, .15);
-	border-right: .2rem solid rgba(77, 77, 77, .15);
-	border-bottom: .2rem solid rgba(77, 77, 77, .15);
-	border-top: .2rem solid rgba(77, 77, 77, .5);
+	border-left: .2rem solid var(--bs-border-color);
+	border-right: .2rem solid var(--bs-border-color);
+	border-bottom: .2rem solid var(--bs-border-color);
+	border-top: .2rem solid var(--bs-tertiary-color);
 	border-radius: 100%;
 }
 
@@ -410,7 +422,7 @@ footer {
 }
 
 .vcard-card {
-	background-color: rgba(254,254,254,0.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 }
 
 .vcard {
@@ -465,7 +477,7 @@ footer {
 .pager-prev,
 .pager-next,
 .pager_n {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	background: transparent;
 	padding: 4px;
 }
@@ -479,7 +491,6 @@ footer {
 .photo,
 .contact-block-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 #side-bar-photos-albums {
@@ -493,7 +504,6 @@ footer {
 .profile-match-photo img,
 .directory-photo-img {
 	border-radius: $radius;
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .profile-match-photo img {
@@ -502,7 +512,7 @@ footer {
 }
 
 #photo-view-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .pmenu.horizontal {
@@ -573,10 +583,6 @@ footer {
 	margin-left: 15px;
 }
 
-.wall-item-conv {
-	background-color: $comment_item_colour;
-}
-
 #nav-notifications-template,
 #nav-notifications-forums-template {
 	display: none;
@@ -631,7 +637,7 @@ nav .acpopup {
 
 #cboxContent {
 	padding: 3px;
-	border: 0px solid #fff;
+	border: 0px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	background-color: #fff;
 	z-index: 1052;
@@ -682,7 +688,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 250px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-separator {
@@ -694,7 +700,7 @@ nav .acpopup {
 	padding: 10px;
 	height: 450px;
 	overflow: auto;
-	border: 1px solid #ddd;
+	border: 1px solid var(--bs-border-color);
 }
 
 #prof-edit-desc {
@@ -774,10 +780,6 @@ div.jGrowl div.jGrowl-notification {
 	text-align: center;
 }
 
-.conv-participants {
-	color: $font_colour;
-}
-
 .contactname {
 	display: block;
 	overflow: hidden;
@@ -797,7 +799,6 @@ div.jGrowl div.jGrowl-notification {
 
 .notification.notification-forum {
 	font-size: 0.9rem;
-	color: $font_colour;
 }
 
 #acl-search::-webkit-input-placeholder {
@@ -920,20 +921,11 @@ margin-right: 50px;
 a .generic-icons {
 	font-size: 1rem;
 	margin-right: 0.5rem;
-	color: $font_colour;
 }
 
 .generic-icons-right {
 	font-size: 1rem;
 	margin-left: 0.5rem;
-	color: $font_colour;
-}
-
-.generic-icons:hover,
-a .generic-icons:hover,
-.generic-icons-right:hover,
-a .generic-icons-right:hover {
-	color: $font_colour;
 }
 
 .generic-icons-nav {
@@ -949,7 +941,6 @@ a .generic-icons-right:hover {
 .drop-icons,
 a .drop-icons {
 	font-size: 1rem;
-	color: $font_colour;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -1018,8 +1009,8 @@ img.mail-conv-sender-photo {
 }
 
 #profile-jot-wrapper {
-	background-color: rgba(254, 254, 254, 1);
-	border: 1px solid rgba(0, 0, 0, .2);
+	background-color: var(--bs-body-bg);
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 
 }
@@ -1079,19 +1070,19 @@ img.mail-conv-sender-photo {
 }
 
 .wall-item-content-wrapper {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-right-radius: var(--bs-border-radius);
 	border-top-left-radius: var(--bs-border-radius);
 }
 
 .wall-item-content-wrapper.comment {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-right-radius: 0px;
 	border-top-left-radius: 0px;
 }
 
 .hide-comments-outer {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-top-color: #e0e0e0;
 	border-style: solid;
 	border-top-style: dashed;
@@ -1106,15 +1097,15 @@ img.mail-conv-sender-photo {
 
 .wall-item-comment-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-radius: 0px;
 	border-bottom-right-radius: var(--bs-border-radius);
 	border-bottom-left-radius: var(--bs-border-radius);
-	border-top: 3px solid $comment_item_colour;
+	border-top: 3px solid var(--bs-body-bg);
 }
 
 .wall-item-comment-wrapper-wc {
-	border-top: 0px solid $comment_item_colour;
+	border-top: 0px solid var(--bs-body-bg);
 }
 
 
@@ -1123,7 +1114,6 @@ img.mail-conv-sender-photo {
 	height: $top_photo;
 	border: none;
 	border-radius: var(--bs-border-radius);
-	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
 .comment .wall-item-photo {
@@ -1146,7 +1136,7 @@ img.mail-conv-sender-photo {
 
 
 .comment-edit-text {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1161,13 +1151,13 @@ img.mail-conv-sender-photo {
 }
 
 .directory-item .divgrow-showmore {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 }
 
 /* widgets */
 
 .widget {
-	background-color: rgba(254,254,254,.5);
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1186,7 +1176,7 @@ img.mail-conv-sender-photo {
 }
 
 #datebrowse-sidebar select {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }
 
@@ -1215,7 +1205,7 @@ img.mail-conv-sender-photo {
 .chat-item-title,
 .chat-item-title-self {
 	border-radius: var(--bs-border-radius);
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #chatMembers img {
@@ -1271,17 +1261,17 @@ img.mail-conv-sender-photo {
 }
 
 .generic-content-wrapper {
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	margin-bottom: 1.5rem;
 }
 
 .section-title-wrapper {
 	padding: 7px 10px;
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 	border-top-left-radius: var(--bs-border-radius);
 	border-top-right-radius: var(--bs-border-radius);
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-title-wrapper h2,
@@ -1299,21 +1289,21 @@ img.mail-conv-sender-photo {
 
 .section-subtitle-wrapper {
 	padding: 4px 10px;
-	background-color: $item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-tertiary-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-tools-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
-	border-bottom: 3px solid $comment_item_colour;
+	background-color: var(--bs-body-bg);
+	border-bottom: 3px solid var(--bs-body-bg);
 }
 
 .section-content-success-wrapper {
 	padding: 21px 10px;
 	color: #155724;
 	background-color: #d4edda;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1321,7 +1311,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #0c5460;
 	background-color: #d1ecf1;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1329,7 +1319,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #856404;
 	background-color: #fff3cd;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 
@@ -1337,7 +1327,7 @@ img.mail-conv-sender-photo {
 	padding: 21px 10px;
 	color: #721c24;
 	background-color: #f8d7da;
-	border-bottom: 3px solid $comment_item_colour;
+	border-bottom: 3px solid var(--bs-body-bg);
 	text-align: center;
 }
 .section-content-tools-wrapper .section-content-success-wrapper,
@@ -1356,14 +1346,14 @@ img.mail-conv-sender-photo {
 
 .section-content-wrapper {
 	padding: 7px 10px;
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
 }
 
 .section-content-wrapper-np {
-	background-color: $comment_item_colour;
+	background-color: var(--bs-body-bg);
 	border-bottom-left-radius: var(--bs-border-radius);
 	border-bottom-right-radius: var(--bs-border-radius);
 	word-wrap: break-word;
@@ -1408,7 +1398,7 @@ main.fullscreen .section-content-wrapper-np {
 .locs-index-row:hover td,
 [id^="cloud-index-"]:hover td,
 .cloud-index-active {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 [id^="webpage-list-item-"]:hover td,
@@ -1416,15 +1406,15 @@ main.fullscreen .section-content-wrapper-np {
 [id^="layout-list-item-"]:hover td,
 [id^="menu-list-item-"]:hover td,
 [id^="mitem-list-item-"]:hover td {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 #perms-tool-table .highlight:hover {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 .notify-seen {
-	background-color: $item_colour;
+	background-color: var(--bs-tertiary-bg);
 }
 
 /* bootstrap overrides */
@@ -1436,30 +1426,11 @@ main.fullscreen .section-content-wrapper-np {
 blockquote {
 	font-size: 1rem;
 	font-style: italic;
-	border-left: 3px solid #e0e0e0;
+	border-left: 3px solid var(--bs-border-color);
 	padding: 1em 0px 1em 1.5em;
 	margin: 0px;
 }
 
-.dropdown-menu {
-	color: $font_colour;
-}
-
-.dropdown-item {
-	color: $font_colour;
-}
-
-.dropdown-item:active,
-.dropdown-item:focus,
-.dropdown-item:hover,
-.textcomplete-item:focus .dropdown-item,
-.textcomplete-item:hover .dropdown-item,
-.textcomplete-item.active .dropdown-item,
-.textcomplete-item:active .dropdown-item {
-	color: $font_colour;
-	background-color: $item_colour;
-}
-
 .textcomplete-dropdown {
 	max-height: 300px;
 	max-width: 250px;
@@ -1471,25 +1442,11 @@ blockquote {
 	background-color: #007bff;
 }
 
-.bg-dark {
-	background-color: $nav_bg !important;
-}
-
 .navbar {
 	z-index:1030;
 }
 
-.navbar-dark .navbar-nav .nav-link,
-.usermenu i {
-	color: $nav_icon_colour;
-}
 
-.navbar-dark .navbar-nav .nav-link:focus,
-.navbar-dark .navbar-nav .nav-link:hover,
-.usermenu:focus i,
-.usermenu:hover i {
-	color: $nav_active_icon_colour;
-}
 
 @media screen and (max-width: 992px) {
 
@@ -1578,8 +1535,9 @@ dl.bb-dl > dd > li {
 	display: inline-block;
 	border-radius: var(--bs-border-radius);
 	cursor: text;
-	padding: 0px 10px;
-	width: 100%;
+	border-radius: 0px;
+	background-color: var(--bs-body-bg);
+
 }
 
 .bootstrap-tagsinput .label {
@@ -1588,6 +1546,12 @@ dl.bb-dl > dd > li {
 
 .bootstrap-tagsinput input {
 	height: 2.5rem;
+	margin: 0;
+	max-width: 30%;
+}
+
+.bootstrap-tagsinput {
+	padding: 0 .5rem;
 }
 
 /* Abusing theme-green is less work than makeing a new new one */
@@ -1610,27 +1574,22 @@ dl.bb-dl > dd > li {
 
 .onoffswitch.checkbox > div label {
 	display: block; overflow: hidden; cursor: pointer;
-	border: 1px solid #e0e0e0;
+	border: 1px solid var(--bs-border-color);
 	border-radius: 12px;
 	margin:0px;
-	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 	font-weight: normal;
 }
 
 .onoffswitch.checkbox:hover label {
-	color: var(--bs-link-color);
+	color: var(--bs-primary);
 }
 
 .onoffswitch.checkbox:hover > div label {
-	border-color: var(--bs-link-color);
+	border-color: var(--bs-primary);
 }
 
 .onoffswitch-inner {
     display: block; width: 200%; margin-left: -100%;
-    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
 }
 
 .onoffswitch-inner:before, .onoffswitch-inner:after {
@@ -1641,25 +1600,23 @@ dl.bb-dl > dd > li {
 .onoffswitch-inner:before {
     content: attr(data-on);
     padding-right: 21px;
-    background-color: $item_colour;
-	color: $font_colour;
+    background-color: rgba(var(--bs-body-color-rgb), 0);
     text-align: right;
 }
 
 .onoffswitch-inner:after {
     content: attr(data-off);
     padding-left: 21px;
-    background-color: $item_colour; color: #e0e0e0;
+    background-color: rgba(var(--bs-body-color-rgb), 0);
+    color: var(--bs-border-color);
     text-align: left;
 }
 
 .onoffswitch-switch {
     display: block; width: 15px; margin:4px;
-    background: #e0e0e0;
+    background: var(--bs-secondary-bg);
     border-radius: 10px;
     position: absolute; top: 0; bottom: 0; right: 36px;
-    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
 }
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-inner {
@@ -1668,7 +1625,7 @@ dl.bb-dl > dd > li {
 
 .onoffswitch.checkbox > div > input:checked + label .onoffswitch-switch {
     right: 0px;
-    background-color: var(--bs-link-color);
+    background-color: var(--bs-primary);
 }
 
 
@@ -1747,7 +1704,7 @@ dl.bb-dl > dd > li {
 .cloud-icon-container {
 	width: 64px;
 	height: 64px;
-	border: 1px solid #eee;
+	border: 1px solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 }