Adding some forum styling

Nu-SCPTheme · Mar 29, 2019 · 140834b · 140834b
1 parent 2383c8c
commit 140834b
Show file tree

Hide file tree

Showing 6 changed files with 1,554 additions and 1,555 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ temp.css-e
 *.json
 modernizr-custom.js
 modernizr.js
+gulpfile.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -41,12 +41,12 @@ gulp.task('rmv', () =>
 
 
 gulp.task('merge', () => 
-	gulp.src('styles/*.css').pipe(
+	gulp.src('themes/dustjacket-theme.css').pipe(
 		postcss([
 			mergerules()
 		])
 	).pipe(
-	gulp.dest('styles')
+	gulp.dest('themes')
 ));
 
 gulp.task('stylefmt', () => 

diff --git a/stable/styles/nuscp.css b/stable/styles/nuscp.css
@@ -919,28 +919,43 @@ div.sexy-box div.image-container img {
 	padding: 0.5em 1em;
 }
 
+.thread-container .post .long {
+	border: 0.0625rem solid rgba(var(--gray-monochrome),0.25);
+	border-radius: .3125rem;
+	padding: 0.5em;
+}
+
 .thread-container .post .head {
 	--box-shadow: rgba(var(--swatch-menubg-black-color), 0.15);
-	background: rgba(244, 244, 244),
-		-webkit-gradient(linear, left top, right top, from(rgba(244, 244, 244)), to(rgba(170, 170, 170)));
-	background: rgba(244, 244, 244),
-		-webkit-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(244, 244, 244),
-		-o-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(244, 244, 244),
-		linear-gradient(to right, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-webkit-gradient(linear, left top, right top, from(rgba(var(--swatch-menubg-light-color))), to(rgba(var(--swatch-menubg-medium-color))));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-webkit-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color)));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-o-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color)));
-	background: rgba(var(--swatch-menubg-light-color)),
+	background: 
+		-webkit-gradient(linear, left top, right top, from(rgba(244, 244, 244)), to(rgba(170, 170, 170))),
+		rgba(244, 244, 244);
+	background: 
+		-webkit-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background: 
+		-o-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background: ,
+		linear-gradient(to right, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background:
+		-webkit-gradient(linear, left top, right top, from(rgba(var(--swatch-menubg-light-color))), to(rgba(var(--swatch-menubg-medium-color)))),
+		rgba(var(--swatch-menubg-light-color));
+	background: 
+		-webkit-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color))),
+		rgba(var(--swatch-menubg-light-color));
+	background: 
+		-o-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color))),
+		rgba(var(--swatch-menubg-light-color));
+	background:
 		linear-gradient(
 			to right,
 			rgba(var(--swatch-menubg-light-color)),
-			rgba(var(--swatch-menubg-medium-color))
-		);
+			rgba(var(--swatch-menubg-medium-color))			
+		),
+		rgba(var(--swatch-menubg-light-color));
+	background-blend-mode: screen;
 	-webkit-box-shadow: inset 0.125rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.15);
 	box-shadow: inset 0.125rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.15);
 	-webkit-box-shadow: inset 0.125rem 0.1875rem 0.375rem var(--box-shadow);
@@ -950,6 +965,57 @@ div.sexy-box div.image-container img {
 	padding: 0.5em 1em;
 }
 
+.thread-container .post .long .content {
+	padding: 0 1em;
+}
+
+.thread-container .post .long .head .title {
+	font-weight: bold;
+	font-size: 1.2em;
+	font-family: var(--title-font);
+	letter-spacing: 0.05em;
+}
+
+.thread-container > .post > div.long > div.options a {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: flex;
+	color: rgb(100, 3, 15);
+	color: rgb(var(--swatch-primary-darkest));
+	-webkit-box-flex: 2;
+	-webkit-flex-grow: 2;
+	-moz-box-flex: 2;
+	-ms-flex-positive: 2;
+	flex-grow: 2;
+	padding: .25rem;
+	-webkit-border-radius: .25rem;
+	border-radius: .25rem;
+	background-color: rgba(178, 210, 180, 0.25);
+	background-color: rgba(var(--swatch-menubg-light-color), 0.25);
+	border: 0.0625rem solid rgba(140, 20, 25, 1);
+	border: 0.0625rem solid rgba(var(--swatch-primary-darker), 1);
+	font-weight: 700;
+	-webkit-box-pack: center;
+	-webkit-justify-content: center;
+	-moz-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+	-o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+	transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.thread-container > .post > div.long > div.options a:hover,
+.thread-container > .post > div.long > div.options a:active {
+	text-decoration: none;
+	background-color: rgba(30, 55, 30, 1);
+	background-color: rgba(var(--swatch-menubg-dark-color), 1);
+	color: rgb(140, 20, 25);
+	color: rgb(var(--swatch-primary-darker));
+}
+
 .ruby {
 	display: inline-table;
 	line-height: 1;

diff --git a/stable/styles/nuscp.min.css b/stable/styles/nuscp.min.css
diff --git a/styles/main.css b/styles/main.css
@@ -394,28 +394,43 @@ div.sexy-box div.image-container img {
 	padding: 0.5em 1em;
 }
 
+.thread-container .post .long {
+	border: 0.0625rem solid rgba(var(--gray-monochrome),0.25);
+	border-radius: .3125rem;
+	padding: 0.5em;
+}
+
 .thread-container .post .head {
 	--box-shadow: rgba(var(--swatch-menubg-black-color), 0.15);
-	background: rgba(244, 244, 244),
-		-webkit-gradient(linear, left top, right top, from(rgba(244, 244, 244)), to(rgba(170, 170, 170)));
-	background: rgba(244, 244, 244),
-		-webkit-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(244, 244, 244),
-		-o-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(244, 244, 244),
-		linear-gradient(to right, rgba(244, 244, 244), rgba(170, 170, 170));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-webkit-gradient(linear, left top, right top, from(rgba(var(--swatch-menubg-light-color))), to(rgba(var(--swatch-menubg-medium-color))));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-webkit-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color)));
-	background: rgba(var(--swatch-menubg-light-color)),
-		-o-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color)));
-	background: rgba(var(--swatch-menubg-light-color)),
+	background: 
+		-webkit-gradient(linear, left top, right top, from(rgba(244, 244, 244)), to(rgba(170, 170, 170))),
+		rgba(244, 244, 244);
+	background: 
+		-webkit-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background: 
+		-o-linear-gradient(left, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background: ,
+		linear-gradient(to right, rgba(244, 244, 244), rgba(170, 170, 170)),
+		rgba(244, 244, 244);
+	background:
+		-webkit-gradient(linear, left top, right top, from(rgba(var(--swatch-menubg-light-color))), to(rgba(var(--swatch-menubg-medium-color)))),
+		rgba(var(--swatch-menubg-light-color));
+	background: 
+		-webkit-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color))),
+		rgba(var(--swatch-menubg-light-color));
+	background: 
+		-o-linear-gradient(left, rgba(var(--swatch-menubg-light-color)), rgba(var(--swatch-menubg-medium-color))),
+		rgba(var(--swatch-menubg-light-color));
+	background:
 		linear-gradient(
 			to right,
 			rgba(var(--swatch-menubg-light-color)),
-			rgba(var(--swatch-menubg-medium-color))
-		);
+			rgba(var(--swatch-menubg-medium-color))			
+		),
+		rgba(var(--swatch-menubg-light-color));
+	background-blend-mode: screen;
 	-webkit-box-shadow: inset 0.125rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.15);
 	box-shadow: inset 0.125rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.15);
 	-webkit-box-shadow: inset 0.125rem 0.1875rem 0.375rem var(--box-shadow);
@@ -425,6 +440,57 @@ div.sexy-box div.image-container img {
 	padding: 0.5em 1em;
 }
 
+.thread-container .post .long .content {
+	padding: 0 1em;
+}
+
+.thread-container .post .long .head .title {
+	font-weight: bold;
+	font-size: 1.2em;
+	font-family: var(--title-font);
+	letter-spacing: 0.05em;
+}
+
+.thread-container > .post > div.long > div.options a {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: flex;
+	color: rgb(100, 3, 15);
+	color: rgb(var(--swatch-primary-darkest));
+	-webkit-box-flex: 2;
+	-webkit-flex-grow: 2;
+	-moz-box-flex: 2;
+	-ms-flex-positive: 2;
+	flex-grow: 2;
+	padding: .25rem;
+	-webkit-border-radius: .25rem;
+	border-radius: .25rem;
+	background-color: rgba(178, 210, 180, 0.25);
+	background-color: rgba(var(--swatch-menubg-light-color), 0.25);
+	border: 0.0625rem solid rgba(140, 20, 25, 1);
+	border: 0.0625rem solid rgba(var(--swatch-primary-darker), 1);
+	font-weight: 700;
+	-webkit-box-pack: center;
+	-webkit-justify-content: center;
+	-moz-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+	-o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+	transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.thread-container > .post > div.long > div.options a:hover,
+.thread-container > .post > div.long > div.options a:active {
+	text-decoration: none;
+	background-color: rgba(30, 55, 30, 1);
+	background-color: rgba(var(--swatch-menubg-dark-color), 1);
+	color: rgb(140, 20, 25);
+	color: rgb(var(--swatch-primary-darker));
+}
+
 .ruby {
 	display: inline-table;
 	line-height: 1;