Merge pull request #250 from Rintan/g+theme

ダークテーマの修正、v2.9.xへの対応など

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss

@@ -29,7 +29,7 @@ $icon-active-color: $active-color;
 
 
 // Background colors
-$base-color: #212121;
+$base-color: #121212;
 $base-lighter1-color: #2d2d2d;
 $base-darker1-color: #000000;
 

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss

@@ -6,9 +6,10 @@
 
 
 .tabs-bar {
-	@include column-shadow;
 	margin: 0;
 	background: $column-header-color;
+	position: relative;
+	z-index: 2;
 
 	.tabs-bar {
 		&__link {
@@ -99,6 +100,7 @@
 	.column-header {
 		@include column-shadow;
 		background: $column-header-color;
+		z-index: 1;
 
 		&.active {
 			.column-header__icon {
@@ -121,9 +123,9 @@
 
 			.column-header {
 				&__back-button {
-					.column-back-button__icon { vertical-align: unset }
+					.column-back-button__icon { vertical-align: bottom }
 				}
-	
+
 				&__button {
 					&.active {
 						color: $icon-active-color;
@@ -143,7 +145,7 @@
 		&__collapsible {
 			color: $secondary-text-color;
 			border-bottom: 1px solid $base-separation-color;
-	
+
 			&-inner { background: $column-header-color }
 		}
 	}
@@ -158,7 +160,10 @@
 
 	.column {
 		&-subheading,
-		&-link__badge { background: $base-color }
+		&-link__badge {
+			background: $base-color;
+			color: $secondary-text-color;
+		}
 	
 		&-link {
 			color: $primary-text-color;
@@ -223,6 +228,60 @@
 	}
 }
 
+// v2.9.0以降
+.column-header {
+	@include column-shadow;
+	background: $column-header-color;
+	z-index: 1;
+
+	&.active {
+		.column-header__icon {
+			color: $icon-active-color;
+			text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+		}
+	}
+
+	* { background: inherit }
+
+	&__icon {
+		@include material-icon-large;
+		color: $icon-color;
+		vertical-align: bottom;
+		margin-right: 10px;
+	}
+
+	&__buttons {
+		height: 50px;
+
+		.column-header {
+			&__back-button {
+				.column-back-button__icon { vertical-align: bottom }
+			}
+
+			&__button {
+				&.active {
+					color: $icon-active-color;
+					background: inherit;
+				}
+	
+				.fa { vertical-align: unset }
+			}
+		}
+	}
+
+	&__button {
+		color: $icon-color;
+		padding: 0 16px;
+	}
+
+	&__collapsible {
+		color: $secondary-text-color;
+		border-bottom: 1px solid $base-separation-color;
+
+		&-inner { background: $column-header-color }
+	}
+}
+
 .getting-started {
 	&__wrapper,
 	& {

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss

@@ -25,7 +25,10 @@
 	@include material-card-radius;
 	background-color: $active-button-color;
 
-	.text-icon-button { color: $primary-lighter1-text-color }
+	.text-icon-button {
+		color: $primary-lighter1-text-color;
+		border-radius: 50%;
+	}
 }
 
 .modal-root {

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/icons.scss

@@ -24,11 +24,13 @@
 
 .icon-button {
 	color: $icon-color;
+	border-radius: 50%;
 
 	&:active,
 	&:focus,
 	&:hover {
 		color: lighten($icon-color, 7%);
+		background-color: $column-header-hover-color;
 	}
 
 	&.star-icon {
@@ -116,7 +118,13 @@
 	&.fa-chevron-down,
 	&.fa-bars,
 	&.fa-navicon,
-	&.fa-reorder {
+	&.fa-reorder,
+	&.fa-desktop,
+	&.fa-code,
+	&.fa-list,
+	&.fa-paperclip,
+	&.fa-plus,
+	&.fa-bullhorn {
 		font-family: "Material Icons Extended";
 	}
 
@@ -167,6 +175,12 @@
 	&.fa-bars::before { content: "menu" } //ハンバーガーボタン
 	&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
 	&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
+	&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
+	&.fa-code::before { content: "code" } //開発アイコン
+	&.fa-list::before { content: "list" } //リストアイコン
+	&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
+	&.fa-plus::before { content: "add" } // 追加ボタン
+	&.fa-bullhorn::before { content: "announcement"} //Adminからのお知らせ(一部サーバーのみ)
 }
 
 .fa {

app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss

@@ -6,9 +6,10 @@
 
 
 .tabs-bar {
-	@include column-shadow;
 	margin: 0;
 	background: $column-header-color;
+	position: relative;
+	z-index: 2;
 
 	.tabs-bar {
 		&__link {
@@ -99,6 +100,7 @@
 	.column-header {
 		@include column-shadow;
 		background: $column-header-color;
+		z-index: 1;
 
 		&.active {
 			.column-header__icon {
@@ -121,9 +123,9 @@
 
 			.column-header {
 				&__back-button {
-					.column-back-button__icon { vertical-align: unset }
+					.column-back-button__icon { vertical-align: bottom }
 				}
-	
+
 				&__button {
 					&.active {
 						color: $icon-active-color;
@@ -143,7 +145,7 @@
 		&__collapsible {
 			color: $secondary-text-color;
 			border-bottom: 1px solid $base-separation-color;
-	
+
 			&-inner { background: $column-header-color }
 		}
 	}
@@ -158,7 +160,10 @@
 
 	.column {
 		&-subheading,
-		&-link__badge { background: darken($base-color, 10%) }
+		&-link__badge {
+			background: $base-color;
+			color: $secondary-text-color;
+		}
 	
 		&-link {
 			color: $primary-text-color;
@@ -223,6 +228,60 @@
 	}
 }
 
+// v2.9.0以降
+.column-header {
+	@include column-shadow;
+	background: $column-header-color;
+	z-index: 1;
+
+	&.active {
+		.column-header__icon {
+			color: $icon-active-color;
+			text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+		}
+	}
+
+	* { background: inherit }
+
+	&__icon {
+		@include material-icon-large;
+		color: $icon-color;
+		vertical-align: bottom;
+		margin-right: 10px;
+	}
+
+	&__buttons {
+		height: 50px;
+
+		.column-header {
+			&__back-button {
+				.column-back-button__icon { vertical-align: bottom }
+			}
+
+			&__button {
+				&.active {
+					color: $icon-active-color;
+					background: inherit;
+				}
+	
+				.fa { vertical-align: unset }
+			}
+		}
+	}
+
+	&__button {
+		color: $icon-color;
+		padding: 0 16px;
+	}
+
+	&__collapsible {
+		color: $secondary-text-color;
+		border-bottom: 1px solid $base-separation-color;
+
+		&-inner { background: $column-header-color }
+	}
+}
+
 .getting-started {
 	&__wrapper,
 	& {

app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss

@@ -25,7 +25,10 @@
 	@include material-card-radius;
 	background-color: $active-button-color;
 
-	.text-icon-button { color: $primary-lighter1-text-color }
+	.text-icon-button {
+		color: $primary-lighter1-text-color;
+		border-radius: 50%;
+	}
 }
 
 .modal-root {

app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss

@@ -24,11 +24,13 @@
 
 .icon-button {
 	color: $icon-color;
+	border-radius: 50%;
 
 	&:active,
 	&:focus,
 	&:hover {
 		color: lighten($icon-color, 7%);
+		background-color: $column-header-hover-color;
 	}
 
 	&.star-icon {
@@ -116,7 +118,13 @@
 	&.fa-chevron-down,
 	&.fa-bars,
 	&.fa-navicon,
-	&.fa-reorder {
+	&.fa-reorder,
+	&.fa-desktop,
+	&.fa-code,
+	&.fa-list,
+	&.fa-paperclip,
+	&.fa-plus,
+	&.fa-bullhorn {
 		font-family: "Material Icons Extended";
 	}
 
@@ -167,6 +175,12 @@
 	&.fa-bars::before { content: "menu" } //ハンバーガーボタン
 	&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
 	&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
+	&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
+	&.fa-code::before { content: "code" } //開発アイコン
+	&.fa-list::before { content: "list" } //リストアイコン
+	&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
+	&.fa-plus::before { content: "add" } // 追加ボタン
+	&.fa-bullhorn::before { content: "announcement"} //Adminからのお知らせ(一部サーバーのみ)
 }
 
 .fa {