approvebg, back to development

version 1.2.10
add readme
2025-09-24 10:03:24 -05:00 · 2025-09-10 00:23:35 -05:00 · 2025-09-10 00:22:33 -05:00 · 2025-09-10 00:22:21 -05:00 · 2025-09-09 23:47:12 -05:00 · 2025-09-02 13:17:53 -05:00
19 changed files with 348 additions and 107 deletions
--- a/README.MD
+++ b/README.MD
@@ -0,0 +1,12 @@
+# Artix ElkArte Theme
+
+A theme for Artix Linux's ElkArte forum. Based off of the [Silence](https://themes.elkarte.net//variant/Silence.html) theme, this theme features dark and light mode variants.
+
+![Preview screenshot of the Artix dark theme applied to an ElkArte forum](/screenshots/preview.png)
+
+A live version can be demo'd [here](https://forum.artixlinux.org/index.php?theme=10).
+
+Screenshots:
+
+* [Dark variant](/screenshots/dark_screenie.png)
+* [Light variant](/screenshots/light_screenie.png)
--- a/css/_auto/custom_auto.css
+++ b/css/_auto/custom_auto.css
@@ -2,22 +2,22 @@
    :root {
        --is-dark-theme: false;
        --color-header-bg: var(--color-box-header);
-        --color-primary: #4183c4;
+        --color-primary: #0081CC;
        --color-primary-contrast: #ffffff;
-        --color-primary-dark-1: #3876b3;
-        --color-primary-dark-2: #31699f;
-        --color-primary-dark-3: #2b5c8b;
-        --color-primary-dark-4: #254f77;
-        --color-primary-dark-5: #193450;
-        --color-primary-dark-6: #0c1a28;
-        --color-primary-dark-7: #04080c;
-        --color-primary-light-1: #548fca;
-        --color-primary-light-2: #679cd0;
-        --color-primary-light-3: #7aa8d6;
-        --color-primary-light-4: #8db5dc;
-        --color-primary-light-5: #b3cde7;
-        --color-primary-light-6: #d9e6f3;
-        --color-primary-light-7: #f4f8fb;
+        --color-primary-dark-1: #0067a3;
+        --color-primary-dark-2: #0067a3;
+        --color-primary-dark-3: #005a8f;
+        --color-primary-dark-4: #004e7a;
+        --color-primary-dark-5: #004166;
+        --color-primary-dark-6: #003452;
+        --color-primary-dark-7: #000d14;
+        --color-primary-light-1: #008ee0;
+        --color-primary-light-2: #009bf5;
+        --color-primary-light-3: #47bcff;
+        --color-primary-light-4: #5cc3ff;
+        --color-primary-light-5: #70cbff;
+        --color-primary-light-6: #99daff;
+        --color-primary-light-7: #d6f0ff;
        --color-primary-hover: var(--color-primary-dark-1);
        --color-primary-active: var(--color-primary-dark-2);
        --color-secondary: #d0d7de;
@@ -115,6 +115,23 @@
        --color-pink-subtle: var(--color-pink-light);
        --color-brown-subtle: var(--color-brown-light);
        --color-black-subtle: var(--color-black-light);
+        /* contrasty colors */
+        --color-red-contrast: var(--color-red-dark-2);
+        --color-orange-contrast: var(--color-orange-dark-2);
+        --color-yellow-contrast: var(--color-yellow-dark-2);
+        --color-olive-contrast: var(--color-olive-dark-2);
+        --color-green-contrast: var(--color-green-dark-2);
+        --color-teal-contrast: var(--color-teal-dark-2);
+        --color-blue-contrast: var(--color-blue-dark-2);
+        --color-violet-contrast: var(--color-violet-dark-2);
+        --color-purple-contrast: var(--color-purple-dark-2);
+        --color-pink-contrast: var(--color-pink-dark-2);
+        --color-brown-contrast: var(--color-brown-dark-2);
+        --color-black-contrast: var(--color-black-dark-2);
+        --color-white-contrast: #bcbcbc;
+        --color-beige-contrast: #a0a084;
+        --color-navy-contrast: #000080;
+        --color-maroon-contrast: #800000;
        /* ansi colors used for actions console and console files */
        --color-ansi-black: #1e2327;
        --color-ansi-red: #cc4848;
@@ -209,6 +226,11 @@
        --color-highlight-fg: #eed200;
        --color-highlight-bg: #fffbdd;
        --color-overlay-backdrop: #080808c0;
+        --color-sceditor-button: #dddddd;
+        --color-sceditor-button-hover: #bbbbbb;
+	    --color-sceditor-button-active: #aaaaaa;
+        --color-sceditor-button-border: #777777;
+        --color-sceditor-button-border-bottom: #666666;
        accent-color: var(--color-accent);
        color-scheme: light;
    }
@@ -225,4 +247,12 @@
    .i-rss::before {
        filter: initial;
    }
+
+    .i-upload::before {
+        filter: brightness(0);
+    }
+
+    .approvebg {
+        background: #ffa4a4;
+    }
 }
--- a/css/_dark/custom_dark.css
+++ b/css/_dark/custom_dark.css
@@ -1,3 +1,10 @@
 body {
    background-color: #141414;
+}
+
+.i-sort-alpha-up::before,
+.i-sort-alpha-down::before,
+.i-sort-numeric-up::before,
+.i-sort-numeric-down::before {
+    filter: brightness(100);
 }
--- a/css/_dark/index_dark.css
+++ b/css/_dark/index_dark.css
@@ -160,6 +160,23 @@
 	--color-pink-subtle: var(--color-pink-dark-2);
 	--color-brown-subtle: var(--color-brown-dark-2);
 	--color-black-subtle: var(--color-black-dark-2);
+	/* contrasty colors */
+	--color-red-contrast: var(--color-red-light);
+	--color-orange-contrast: var(--color-orange-light);
+	--color-yellow-contrast: var(--color-yellow-light);
+	--color-olive-contrast: var(--color-olive-light);
+	--color-green-contrast: var(--color-green-light);
+	--color-teal-contrast: var(--color-teal-light);
+	--color-blue-contrast: var(--color-blue-light);
+	--color-violet-contrast: var(--color-violet-light);
+	--color-purple-contrast: var(--color-purple-light);
+	--color-pink-contrast: var(--color-pink-light);
+	--color-brown-contrast: var(--color-brown-light);
+	--color-black-contrast: var(--color-black-light);
+	--color-white-contrast: #ffffff;
+	--color-beige-contrast: #f5f5dc;
+	--color-navy-contrast: #3535b4;
+	--color-maroon-contrast: #973333;
 	/* ansi colors used for actions console and console files */
 	--color-ansi-black: #1e2327;
 	--color-ansi-red: #cc4848;
@@ -254,6 +271,11 @@
 	--color-highlight-fg: #87651e;
 	--color-highlight-bg: #352c1c;
 	--color-overlay-backdrop: #080808c0;
+	--color-sceditor-button: #999999;
+	--color-sceditor-button-hover: #bbbbbb;
+	--color-sceditor-button-active: #eeeeee;
+	--color-sceditor-button-border: #dfdfdf;
+	--color-sceditor-button-border-bottom: #dddddd;
 	accent-color: var(--color-accent);
 	color-scheme: dark;
 }
@@ -325,13 +347,13 @@ button:focus,
 select:focus,
 .editor:focus {
 	border-color: #999999;
-	margin-top: 1px;
 }

 /* Give disabled text input elements a different background color. */
 input[disabled].input_text,
 input[disabled].input_password {
 	background: var(--color-input-text-disabled);
+	color: var(--color-text-light-2);
 }

 /* The OpenID login form */
@@ -646,8 +668,9 @@ div.bbc_footnotes {
 	border-top-color: var(--color-secondary-dark-9);
 }

-.bbc_footnotes .target:target {
-	background-color: var(--color-primary-dark-6);
+.target:target {
+	color: var(--color-text-dark);
+	background-color: var(--color-primary-light-4);
 }

 sup.bbc_footnotes,
@@ -1235,7 +1258,7 @@ div.bbc_footnotes .meaction {}
 }

 .board_stats {
-	color: var(--color-secondary);
+	color: var(--color-secondary-dark-6);
 }

 .lastpost_link>a {
@@ -1252,7 +1275,7 @@ div.bbc_footnotes .meaction {}

 .childboard_row h4,
 .board_new_posts {
-	color: var(--color-secondary);
+	color: var(--color-secondary-dark-6);
 }

 /* Styles for the info center on the board index. */
@@ -1261,7 +1284,7 @@ div.bbc_footnotes .meaction {}
 }

 .ic_section_header>a {
-	color: var(--color-text-light-3);
+	color: var(--color-text-light-1);
 }

 #ic_recentposts td,
@@ -1341,7 +1364,7 @@ div.bbc_footnotes .meaction {}

 .sticky_row .topic_name h4 a,
 .locked_row.sticky_row .topic_name h4 a {
-	color: #585858;
+	color: var(--color-secondary-dark-6);
 }

 .locked_row .topic_name h4 a {
@@ -1356,7 +1379,7 @@ div.bbc_footnotes .meaction {}
 }

 .topic_stats {
-	color: var(--color-secondary);
+	color: var(--color-secondary-dark-6);
 }

 .qaction_row {
@@ -1372,17 +1395,6 @@ div.bbc_footnotes .meaction {}
 	background: #FFF5CD;
 }

-.sticky_row,
-.locked_row.sticky_row {
-	background: #222222;
-	border-color: #1A1A1A;
-}
-
-.locked_row,
-.locked_row.core_posts {
-	background: #222222;
-}
-
 #topic_icons {
 	border-color: var(--color-secondary);
 	background: var(--color-body);
@@ -1443,7 +1455,7 @@ div.bbc_footnotes .meaction {}

 /* Colors for background of posts requiring approval */
 .approvebg {
-	background: #FFF5CD;
+	background: #220505;
 }

 .poster .name {
@@ -1500,7 +1512,7 @@ div.bbc_footnotes .meaction {}
 /* attachment details below thumbnails */
 .attachment_name,
 .attachment_details {
-	color: var(--color-secondary) !important;
+	color: var(--color-secondary-dark-6) !important;
 	border: solid 1px var(--color-secondary);
 	background: transparent !important;
 }
@@ -1588,13 +1600,13 @@ div.bbc_footnotes .meaction {}

 #postAdditionalOptionsHeader,
 #postDraftOptionsHeader {
-	border-color: #2F2F2F;
-	background: var(--color-body) linear-gradient(to bottom, #1A1A1A 0%, #222222 100%);
+	border-color: var(--color-secondary-dark-3);
+	background: var(--color-card);
 }

 #postAdditionalOptions,
 #postDraftOptions {
-	border-color: #2F2F2F;
+	border-color: var(--color-secondary-dark-3);
 	border-top-color: transparent;
 	background: var(--color-body);
 }
@@ -1605,13 +1617,13 @@ div.bbc_footnotes .meaction {}
 }

 .drop_area {
-	color: #444444;
-	border-color: #CCCCCC;
-	background-color: rgb(230, 230, 230);
+	color: var(--color-text-dark);
+	border-color: var(--color-text);
+	background-color: var(--color-secondary-light-1);
 }

 .drop_area>a {
-	color: #000000;
+	color: var(--color-primary-contrast);
 }

 .statusbar {
@@ -1665,7 +1677,7 @@ div.bbc_footnotes .meaction {}
 }

 #postMoreOptions {
-	border-top-color: var(--color-secondary);
+	border-top-color: var(--color-secondary-dark-3);
 	background: var(--color-card);
 }

@@ -1986,14 +1998,14 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 .whos_online dd:nth-child(odd) div {
 	border-top-color: var(--color-secondary);
 	border-bottom-color: var(--color-secondary);
-	background-color: #1A1A1A;
+	background-color: var(--color-body-alternate);
 }

 .mlist li.alternate_row div,
 .whos_online dd:nth-child(even) div {
 	border-top-color: var(--color-secondary);
 	border-bottom-color: var(--color-secondary);
-	background-color: #222222;
+	background-color: var(--color-body);
 }

 .mlist li div:first-child {
@@ -2006,7 +2018,7 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {

 .letter_row>h3 {
 	border-color: var(--color-secondary);
-	background: #1A1A1A linear-gradient(to bottom, #1A1A1A, #222222);
+	background: var(--color-body-alternate) linear-gradient(to bottom, var(--color-body-alternate), var(--color-body));
 }

 /* -------------------------------------------------------
@@ -2014,17 +2026,17 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 * -------------------------------------------------------
 */
 .coppa_contact {
-	color: #585858;
-	border-color: #585858;
-	background: #1A1A1A;
+	color: var(--color-text-light-2);
+	border-color: var(--color-body-border);
+	background: var(--color-body);
 }

 .valid_input {
-	background: #F5FFF0;
+	border-color: var(--color-success-border);
 }

 .invalid_input {
-	background: #FFF0F0;
+	background: var(--color-error-bg);
 }

 /* -------------------------------------------------------
@@ -2062,7 +2074,7 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 .successbox {
 	border-color: var(--color-success-border);
 	color: var(--color-success-text);
-	background: var(--color-success-bg) url(../../images/icons/field_valid.png) 10px 50% no-repeat;
+	background: var(--color-success-bg) url(../../images/post/check.png) 10px 50% no-repeat;
 }

 .infobox {
@@ -2141,7 +2153,7 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {

 /* Absolute positioning stops these breaking the bars on narrow screens. */
 .statsbar .righttext {
-	background: #1A1A1A;
+	background: var(--color-body);
 }

 #stats {
@@ -2172,6 +2184,119 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {

 .floating_error .error_btn:hover {}

+/* -------------------------------------------------------
+ * Mentions
+ * -------------------------------------------------------
+ */
+.atwho-view.atwho-view {
+	background-color: var(--color-body-alternate);
+	border-color: var(--color-secondary);
+}
+.atwho-view.atwho-view strong {
+	color: var(--color-box-header-border);
+}
+
+.atwho-view.atwho-view .cur {
+	background-color: var(--color-box-header);
+	color: var(--color-text-light-1);
+ }
+
+.atwho-view.atwho-view .cur strong {
+	color: var(--color-text);
+}
+
+.atwho-view.atwho-view ul li {
+	border-bottom-color: var(--color-secondary);
+}
+
+.atwho-view.atwho-view ul li:last-child {
+	border-bottom: none;
+}
+
+/* -------------------------------------------------------
+ * Font colors
+ * -------------------------------------------------------
+ */
+.bbc_color[style="color: red;"] {
+	color: var(--color-red-contrast) !important;
+}
+
+.bbc_color[style="color: yellow;"] {
+	color: var(--color-yellow-contrast) !important;
+}
+
+.bbc_color[style="color: pink;"] {
+	color: var(--color-pink-contrast) !important;
+}
+
+.bbc_color[style="color: green;"] {
+	color: var(--color-green-contrast) !important;
+}
+
+.bbc_color[style="color: orange;"] {
+	color: var(--color-orange-contrast) !important;
+}
+
+.bbc_color[style="color: purple;"] {
+	color: var(--color-purple-contrast) !important;
+}
+
+.bbc_color[style="color: blue;"] {
+	color: var(--color-blue-contrast) !important;
+}
+
+.bbc_color[style="color: brown;"] {
+	color: var(--color-brown-contrast) !important;
+}
+
+.bbc_color[style="color: teal;"] {
+	color: var(--color-teal-contrast) !important;
+}
+
+.bbc_color[style="color: limegreen;"] {
+	color: var(--color-olive-contrast) !important;
+}
+
+.bbc_color[style="color: beige;"] {
+	color: var(--color-beige-contrast) !important;
+}
+
+.bbc_color[style="color: navy;"] {
+	color: var(--color-navy-contrast) !important;
+}
+
+.bbc_color[style="color: maroon;"] {
+	color: var(--color-maroon-contrast) !important;
+}
+
+.bbc_color[style="color: black;"] {
+	color: var(--color-secondary-dark-11) !important;
+}
+
+.bbc_color[style="color: white;"] {
+	color: var(--color-secondary-dark-1) !important;
+}
+
+/* -------------------------------------------------------
+ * Cookie
+ * -------------------------------------------------------
+ */
+#cookieChoiceInfo {
+	border-color: var(--color-info-border) !important;
+	color: var(--color-info-text) !important;
+	background-color: var(--color-info-bg) !important;
+}
+
+#cookieChoiceInfo #cookieChoiceDismiss {
+	background-color: var(--color-info-text) !important;
+	color: var(--color-info-bg) !important;
+  	border: 1px solid var(--color-info-text) !important;
+}
+
+#cookieChoiceInfo #cookieChoiceDismiss:hover {
+	border-color: var(--color-text-dark) !important;
+}
+
 /* -------------------------------------------------------
 *	$ICONS
 * -------------------------------------------------------
@@ -2286,11 +2411,14 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 		box-shadow: none;
 	}

-	.poster:after,
 	.posterarea:before {
 		border-bottom: 1px solid var(--color-code-border);
 	}

+	.post_separator:not(:has(+ a#new)) {
+		display: block;
+	}
+
 	.whos_online dd:nth-child(even),
 	.whos_online dd:nth-child(odd) {
 		border-top-color: var(--color-code-border);
--- a/css/_dark/jquery.sceditor.elk_dark.css
+++ b/css/_dark/jquery.sceditor.elk_dark.css
@@ -57,7 +57,7 @@
 }

 /* Necessary for stabilising font-size in source mode! */
-.sceditor-container textarea, .sceditor-container textarea:focus {
+.sceditor-container.sceditor-container textarea, .sceditor-container.sceditor-container textarea:focus {
 	font-size: 1em;

 	background: var(--color-primary-contrast);
@@ -102,10 +102,10 @@

 	margin: 22px 0 0 0;

-	color: #444444;
-	border: 1px solid #CCCCCC;
+	color: var(--color-text);
+	border: 1px solid var(--color-box-body-border);
 	border-radius: 0 0 2px 2px;
-	background: #222222;
+	background: var(--color-body);
 	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);;
 }

@@ -238,6 +238,66 @@
 	border: 2px solid #333333;
 }

+.sceditor-color-option[style="background-color: red"] {
+	background-color: var(--color-red-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: yellow"] {
+	background-color: var(--color-yellow-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: pink"] {
+	background-color: var(--color-pink-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: green"] {
+	background-color: var(--color-green-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: orange"] {
+	background-color: var(--color-orange-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: purple"] {
+	background-color: var(--color-purple-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: blue"] {
+	background-color: var(--color-blue-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: brown"] {
+	background-color: var(--color-brown-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: teal"] {
+	background-color: var(--color-teal-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: limegreen"] {
+	background-color: var(--color-olive-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: beige"] {
+	background-color: var(--color-beige-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: navy"] {
+	background-color: var(--color-navy-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: maroon"] {
+	background-color: var(--color-maroon-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: black"] {
+	background-color: var(--color-secondary-dark-11) !important;
+}
+
+.sceditor-color-option[style="background-color: white"] {
+	background-color: var(--color-secondary-dark-1) !important;
+}
+
 .sceditor-toolbar {
 	overflow: hidden;

@@ -270,12 +330,16 @@

 	cursor: pointer;

-	color: #222222;
-	border: 1px solid #BBBBBB;
+	color: var(--color-text);
+	border: 1px solid var(--color-sceditor-button-border);
 	border-right: none;
-	border-bottom: 1px solid #AAAAAA;
-	background: #999999;
-	box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.15) inset;
+	border-bottom: 1px solid var(--color-sceditor-button-border-bottom);
+	background: var(--color-sceditor-button);
+	box-shadow: none;
+}
+
+.sceditor-button:has(+.sceditor-button-space) {
+	border-right: 1px solid var(--color-sceditor-button-border);
 }

 .sceditor-button.disabled div {
@@ -285,7 +349,8 @@
 .sceditor-button.disabled:hover {
 	cursor: default;

-	background: inherit;
+	background: var(--color-sceditor-button);
+	box-shadow: none;
 }

 .sceditor-button div, .sceditor-button {
@@ -303,13 +368,13 @@
 }

 .sceditor-button:hover {
-	background: #FAFAFA;
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
+	background: var(--color-sceditor-button-hover);
+	box-shadow: none;
 }

 .sceditor-button.active {
-	background: #DFFFBF;
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
+	background: var(--color-sceditor-button-active);
+	box-shadow: none;
 }

 .sceditor-button-emoticon {
@@ -334,7 +399,8 @@ a.sceditor-button-space, .sceditor-button-space div {
 	padding: 4px 0;

 	border: none;
-	border-left: 1px solid #BBBBBB;
+	border-left: 1px solid transparent;
+	visibility: hidden;
 	background: transparent;
 	box-shadow: none;
 }
@@ -351,7 +417,7 @@ a.sceditor-button-space, .sceditor-button-space div {
 }

 .sceditor-button-source.active {
-	background: #FAFAFA;
+	background: var(--color-sceditor-button-active);
 	box-shadow: none;
 }

--- a/css/_dark/jquery.sceditor.elk_wiz_dark.css
+++ b/css/_dark/jquery.sceditor.elk_wiz_dark.css
@@ -1,7 +1,8 @@
 html, body, p, code:before, table {
 	margin: 0;
 	padding: 0;
-	color: #afafaf;
+	color: #181c21;
+	background-color: #ffffff;
 }
 html {
 	overflow: auto;
--- a/css/icons_svg.css
+++ b/css/icons_svg.css
@@ -259,7 +259,7 @@
 }

 .i-upload::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 32 32'%3E%3Cpath d='M15 22H0v8h30v-8H15zm13 4h-4v-2h4v2zM7 10l8-8 8 8h-5v10h-6V10z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M15 22H0v8h30v-8H15zm13 4h-4v-2h4v2zM7 10l8-8 8 8h-5v10h-6V10z'/%3E%3C/svg%3E");
 }

 .i-support::before {
@@ -271,7 +271,7 @@
 }

 .i-menu::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 32 32'%3E%3Cpath d='M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777777' viewBox='0 0 32 32'%3E%3Cpath d='M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z'/%3E%3C/svg%3E");
 }

 /* From Font Awesome */
@@ -303,11 +303,11 @@

 /* Sorting icons */
 .i-sort-alpha-up::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm19 8h-8c-.37 0-.708-.203-.882-.528s-.155-.72.05-1.027L27.13 20H21c-.552 0-1-.448-1-1s.448-1 1-1h8c.37 0 .708.203.882.528s.155.72-.05 1.027L22.87 30H29c.552 0 1 .448 1 1s-.448 1-1 1zm2.894-19.447l-6-12C25.724.213 25.378 0 25 0s-.725.214-.895.553l-6 12c-.247.494-.047 1.095.447 1.342.144.072.296.106.447.106.364 0 .72-.2.892-.55L21.618 10h6.764l1.724 3.448c.247.494.848.694 1.342.447s.694-.848.447-1.342zM22.618 8L25 3.236 27.382 8h-4.764z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777777' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm19 8h-8c-.37 0-.708-.203-.882-.528s-.155-.72.05-1.027L27.13 20H21c-.552 0-1-.448-1-1s.448-1 1-1h8c.37 0 .708.203.882.528s.155.72-.05 1.027L22.87 30H29c.552 0 1 .448 1 1s-.448 1-1 1zm2.894-19.447l-6-12C25.724.213 25.378 0 25 0s-.725.214-.895.553l-6 12c-.247.494-.047 1.095.447 1.342.144.072.296.106.447.106.364 0 .72-.2.892-.55L21.618 10h6.764l1.724 3.448c.247.494.848.694 1.342.447s.694-.848.447-1.342zM22.618 8L25 3.236 27.382 8h-4.764z'/%3E%3C/svg%3E");
 }

 .i-sort-alpha-down::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm19-10h-8c-.37 0-.708-.203-.882-.528s-.155-.72.05-1.027L27.13 2H21c-.552 0-1-.448-1-1s.448-1 1-1h8c.37 0 .708.203.882.528s.155.72-.05 1.027L22.87 12H29c.552 0 1 .448 1 1s-.448 1-1 1zm2.894 16.553l-6-12c-.17-.34-.516-.553-.894-.553s-.725.214-.895.553l-6 12c-.247.494-.047 1.095.447 1.342.144.072.296.106.447.106.364 0 .72-.2.892-.55L21.618 28h6.764l1.724 3.448c.247.494.848.694 1.342.447s.694-.848.447-1.342zM22.618 26L25 21.236 27.382 26h-4.764z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777777' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm19-10h-8c-.37 0-.708-.203-.882-.528s-.155-.72.05-1.027L27.13 2H21c-.552 0-1-.448-1-1s.448-1 1-1h8c.37 0 .708.203.882.528s.155.72-.05 1.027L22.87 12H29c.552 0 1 .448 1 1s-.448 1-1 1zm2.894 16.553l-6-12c-.17-.34-.516-.553-.894-.553s-.725.214-.895.553l-6 12c-.247.494-.047 1.095.447 1.342.144.072.296.106.447.106.364 0 .72-.2.892-.55L21.618 28h6.764l1.724 3.448c.247.494.848.694 1.342.447s.694-.848.447-1.342zM22.618 26L25 21.236 27.382 26h-4.764z'/%3E%3C/svg%3E");
 }

 .i-sort-amount-up::before, .i-sortup::before {
@@ -319,11 +319,11 @@
 }

 .i-sort-numeric-up::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm17-10c-.552 0-1-.448-1-1V2h-1c-.552 0-1-.448-1-1s.448-1 1-1h2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1zm2 4h-6c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h5v4h-5c-.552 0-1 .448-1 1s.448 1 1 1h6c.552 0 1-.448 1-1V19c0-.552-.448-1-1-1zm-5 2h4v4h-4v-4z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777777' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm17-10c-.552 0-1-.448-1-1V2h-1c-.552 0-1-.448-1-1s.448-1 1-1h2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1zm2 4h-6c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h5v4h-5c-.552 0-1 .448-1 1s.448 1 1 1h6c.552 0 1-.448 1-1V19c0-.552-.448-1-1-1zm-5 2h4v4h-4v-4z'/%3E%3C/svg%3E");
 }

 .i-sort-numeric-down::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm17 8c-.552 0-1-.448-1-1V20h-1c-.552 0-1-.448-1-1s.448-1 1-1h2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1zm2-32h-6c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h5v4h-5c-.552 0-1 .448-1 1s.448 1 1 1h6c.552 0 1-.448 1-1V1c0-.552-.448-1-1-1zm-5 2h4v4h-4V2z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777777' viewBox='0 0 32 32'%3E%3Cpath d='M10 24V0H6v24H1l7 7 7-7h-5zm17 8c-.552 0-1-.448-1-1V20h-1c-.552 0-1-.448-1-1s.448-1 1-1h2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1zm2-32h-6c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h5v4h-5c-.552 0-1 .448-1 1s.448 1 1 1h6c.552 0 1-.448 1-1V1c0-.552-.448-1-1-1zm-5 2h4v4h-4V2z'/%3E%3C/svg%3E");
 }

 /* Gender icons are all from Font Awesome */
--- a/css/index.css
+++ b/css/index.css
@@ -4122,24 +4122,15 @@ dl.merge_topic dd {
 	overflow: auto;
 	margin: 0 0 18px 0;
 	padding: 0 0 15px 0;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: .25em;
 }

 #detailedinfo dt, #tracking dt, .profileblock dt {
-	float: left;
-	clear: both;
-	margin: 0 0 3px 0;
-	padding: 0;
-	width: 35%;
 	font-weight: bold;
 }

-#detailedinfo dd, #tracking dd, .profileblock dd {
-	float: left;
-	margin: 0 0 3px 0;
-	padding: 0;
-	width: 65%;
-}
-
 .profileblock_signature dd {
 	width: auto;
 	word-wrap: break-word;
@@ -6611,7 +6602,7 @@ a > i {
 		display: none;
 	}

-	.poster:after, .posterarea:before {
+	.posterarea:before {
 		display: block;
 		clear: both;
 		padding-bottom: 3px;
@@ -6827,6 +6818,10 @@ a > i {
 		display: none;
 	}

+	#detailedinfo dl, #tracking dl, .profileblock dl {
+		display: block;
+	}
+
 	dt, dd, dd label, .login dt, #advanced_search dt {
 		width: 100% !important;
 		margin: 0 !important;
--- a/css/prettify.css
+++ b/css/prettify.css
@@ -8,31 +8,31 @@

@media screen {
  /* string content */
-  .str {color: #b5bd68;}
+  .str {color: var(--color-olive-contrast);}
  /* keyword */
-  .kwd {color: #b294bb;}
+  .kwd {color: var(--color-violet-contrast);}
  /* comment */
-  .com {color: #969896;}
+  .com {color: var(--color-text-light-3);}
  /* type name */
-  .typ {color: #81a2be;}
+  .typ {color: var(--color-teal-contrast);}
  /* literal value */
-  .lit {color: #de935f;}
+  .lit {color: var(--color-orange-contrast);}
  /* punctuation */
-  .pun {color: #c5c8c6;}
+  .pun {color: var(--color-text-light-2);}
  /* lisp open bracket */
-  .opn {color: #c5c8c6;}
+  .opn {color: var(--color-text-dark);}
  /* lisp close bracket */
-  .clo {color: #c5c8c6;}
+  .clo {color: var(--color-text-dark);}
  /* markup tag name */
-  .tag {color: #cc6666;}
+  .tag {color: var(--color-red-contrast);}
  /* markup attribute name */
-  .atn {color: #de935f;}
+  .atn {color: var(--color-yellow-contrast);}
  /* markup attribute value */
-  .atv {color: #8abeb7;}
+  .atv {color: var(--color-green-contrast);}
  /* declaration */
-  .dec {color: #de935f;}
+  .dec {color: var(--color-pink-contrast);}
  /* variable name */
-  .var {color: #cc6666;}
+  .var {color: var(--color-blue-contrast);}
  /* function name */
-  .fun {color: #81a2be;}
+  .fun {color: var(--color-brown-contrast);}
 }
--- a/images/mobile.png
+++ b/images/mobile.png
--- a/images/mobile.png.apple.144.png
+++ b/images/mobile.png.apple.144.png
--- a/images/post/check.png
+++ b/images/post/check.png
--- a/images/post/solved.png
+++ b/images/post/solved.png
@@ -0,0 +1 @@
+./check.png
--- a/images/thumbnail.png
+++ b/images/thumbnail.png
--- a/index.template.php
+++ b/index.template.php
@@ -172,8 +172,9 @@ function template_html_above()

 	// Show all the relative links, such as help, search, contents, and the like.
 	echo '
-	<link rel="shortcut icon" sizes="196x196" href="' . $context['favicon'] . '" />
+	<link rel="apple-touch-icon" sizes="144x144" href="' . $context['favicon'] . '.apple.144.png" />
 	<link rel="apple-touch-icon" sizes="180x180" href="' . $context['favicon'] . '.apple.png" />
+	<link rel="shortcut icon" sizes="196x196" href="' . $context['favicon'] . '" />
 	<link rel="help" href="', $scripturl, '?action=help" />
 	<link rel="contents" href="', $scripturl, '" />', ($context['allow_search'] ? '
 	<link rel="search" href="' . $scripturl . '?action=search" />' : '');
--- a/screenshots/dark_screenie.png
+++ b/screenshots/dark_screenie.png
--- a/screenshots/light_screenie.png
+++ b/screenshots/light_screenie.png
--- a/screenshots/preview.png
+++ b/screenshots/preview.png
--- a/theme_info.xml
+++ b/theme_info.xml
@@ -2,7 +2,7 @@
 	<theme-info xmlns="https://www.elkarte.net/site/theme-info" xmlns:elk="https://www.elkarte.net/">
 		<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
 		<id>artix:Artix</id>
-		<version>1.2.2</version>
+		<version>1.2.11</version>
 		<!-- Theme name, used purely for aesthetics. -->
 		<name>Artix</name>
 		<!-- Author: your email address or contact information. The name attribute is optional. -->
Author	SHA1	Message	Date
Cory Sanin	549ea8f263	approvebg, back to development	2025-09-24 10:03:24 -05:00
Cory Sanin	01127016ee	version 1.2.10 All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 5s Details	2025-09-10 00:23:35 -05:00
Cory Sanin	1d2e5a941b	add readme	2025-09-10 00:22:33 -05:00
Cory Sanin	ce7413ad89	update/add images	2025-09-10 00:22:21 -05:00
Cory Sanin	a9e216eff0	rearrange icons, attempt ??? at influencing firefox icon	2025-09-09 23:47:12 -05:00
Cory Sanin	f18a957c89	force font colors All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 37s Details	2025-09-02 13:17:53 -05:00
Cory Sanin	6e2bd1738f	colors for code block: light theme All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 36s Details	2025-08-31 13:24:22 -05:00
Cory Sanin	4e9d9d67b6	1.2.7 All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 6s Details	2025-08-26 14:45:13 -05:00
Cory Sanin	a8a54c4371	colors for rich text editor buttons	2025-08-26 14:43:29 -05:00
Cory Sanin	3ae34e31d3	fix upload area	2025-08-26 14:13:06 -05:00
Cory Sanin	f72837b781	adjust icons to influence what firefox picks for the new tab page icon	2025-08-17 20:00:36 -05:00
Cory Sanin	fc822247af	More color fixes pointed out by clappingsnowdrop All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 35s Details	2025-08-11 23:08:24 -05:00
Cory Sanin	685fa04854	grid layout for profile info	2025-08-11 00:31:20 -05:00
Cory Sanin	c3b78ff2ce	add OTHER solved checkmark All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 6s Details	2025-08-10 19:05:55 -05:00
Cory Sanin	7f07b28c4c	read topics	2025-08-10 15:35:53 -05:00
Cory Sanin	4ca660d6c3	fix for seldom-used footnotes feature	2025-08-10 02:28:03 -05:00
Cory Sanin	528b9a73a7	fix rich text editor menus and live preview mode	2025-08-10 02:27:26 -05:00
Cory Sanin	ec2f903063	fix textarea margin jiggle All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 37s Details	2025-08-10 01:39:12 -05:00
Cory Sanin	cd9d68c419	better mobile experience	2025-08-10 01:29:57 -05:00
Cory Sanin	8bc45940fa	styles for cookie notice	2025-08-10 01:06:57 -05:00
Cory Sanin	996f2fdfbd	better contrast for sort icons	2025-08-10 01:06:31 -05:00
Cory Sanin	b86f0c25ca	more contrast fixes, requested by the forum community	2025-08-10 00:44:53 -05:00
Cory Sanin	77bb482e1f	start fixing contrast	2025-08-09 19:02:07 -05:00
Cory Sanin	ba0523ad84	fix post textarea font size changing on focus	2025-08-09 18:59:21 -05:00
Cory Sanin	7a9b555c93	solved topic icon	2025-08-09 00:01:13 -05:00
Cory Sanin	c759c98029	fix mentions and member list All checks were successful Zip and attach installable zip to release / zip-and-attach (release) Successful in 39s Details	2025-08-08 16:47:15 -05:00