diff --git a/LATEST.md b/LATEST.md
index 2aad7774..5aae8b5a 100644
--- a/LATEST.md
+++ b/LATEST.md
@@ -1,29 +1,19 @@
## For Astarte(kirishima.cloud), My Primary Instance
-TheDesk :thedesk: Mio (ver.7)
-・公開範囲情報の記録がインスタンスごとに(これにより一度記録がリセットされます。)
-・インスタンスのユーザー設定に従った公開範囲指定(アカウント設定より情報更新をしてください。)
-・インスタンスカラーを設定できるように(アカウント設定から)
-・スクリーンショット(魚拓)機能の高速化
-・Integrated TLのバグ修正
-・キーボードショートカットのバグ修正
-・コピペのバグ改善(ただし、ワンクリックコピーで複数の絵文字があるトゥートをコピーするとバグが発生します)
-・CWのバグ改善
-・[b]DTP鯖(dtp-mstdn.jp)( #dtp )とtheboss.tech( #theboss_tech )をサポート[/b]タグ付きトゥート時、デフォルトタグがないとき確認ダイアログが表示されます。
+TheDesk :thedesk: Mio (ver.8)
+・Glance TLの不具合解消
+・フォントが変更可能に
+・同一インスタンスで複数垢ログインに対応
+・カラーテーマの追加
ほか
https://thedesk.top
:github: https://github.com/cutls/TheDesk #Desk #DeskUpdate
## For Other Instances
-PCクライアントTheDesk Mio (ver.7)
-・公開範囲情報の記録がインスタンスごとに(これにより一度記録がリセットされます。)
-・インスタンスのユーザー設定に従った公開範囲指定(アカウント設定より情報更新をしてください。)
-・インスタンスカラーを設定できるように(アカウント設定から)
-・スクリーンショット(魚拓)機能の高速化
-・Integrated TLのバグ修正
-・キーボードショートカットのバグ修正
-・コピペのバグ改善(ただし、ワンクリックコピーで複数の絵文字があるトゥートをコピーするとバグが発生します)
-・CWのバグ改善
-・DTP鯖(dtp-mstdn.jp)( #dtp )とtheboss.tech( #theboss_tech )をサポート。タグ付きトゥート時、デフォルトタグがないとき確認ダイアログが表示されます。
+PCクライアントTheDesk Mio (ver.8)
+・Glance TLの不具合解消
+・フォントが変更可能に
+・同一インスタンスで複数垢ログインに対応
+・カラーテーマの追加
https://thedesk.top
\ No newline at end of file
diff --git a/app/about.html b/app/about.html
index f4582aa4..b48c3e01 100644
--- a/app/about.html
+++ b/app/about.html
@@ -5,6 +5,7 @@
+
diff --git a/app/acct.html b/app/acct.html
index 477d0b26..1e6003eb 100644
--- a/app/acct.html
+++ b/app/acct.html
@@ -4,8 +4,8 @@
Account Manager - TheDesk
+
-
diff --git a/app/adobe.html b/app/adobe.html
index f14c11ca..d016c1bb 100644
--- a/app/adobe.html
+++ b/app/adobe.html
@@ -4,6 +4,7 @@
Adobe Photo Editor - TheDesk
+
diff --git a/app/css/master.css b/app/css/master.css
index 860df449..08f5de3b 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -1,5 +1,5 @@
/*共通CSS*/
-html,body{overflow:hidden; user-select: none; cursor:default; font-size:13px;height: 100vh;}
+html,body{overflow:hidden; user-select: none; cursor:default; font-size:13px;height: 100vh; background-color: var(--bg); color: var(--color);}
.btn {
margin: 5px;
text-transform: none;
@@ -33,12 +33,12 @@ option {
max-width: 100vw;
max-height: 100vh;
top:0;
- background-color: white;
+ background-color: var(--modal);
position: fixed;
z-index: 9;
}
#imagemodal, #videomodal, #tootmodal {
- background-color: white;
+ background-color: var(--modal);
}
#imagemodal .modal-content {
overflow: hidden;
@@ -128,7 +128,8 @@ blockquote:before, .quote:before {
position: fixed;
width: 100vw;
height: 100vh;
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: var(--bg);
+ color: var(--color);
z-index: 99999;
justify-content: center;
align-items: center;
@@ -142,7 +143,7 @@ blockquote:before, .quote:before {
#pip{
z-index:504;
width:418px;
- background-color: white;
+ background-color: var(--subcolor);
position:absolute;
}
.pip-bottom{
@@ -163,6 +164,9 @@ blockquote:before, .quote:before {
.big-text{
font-size:1.2rem;
}
+#releasenote {
+ background-color: var(--modal);
+}
#releasenote li{
list-style-type: disc
}
@@ -186,70 +190,13 @@ blockquote:before, .quote:before {
opacity: 1;
}
}
+.collapsible-header,.tabs{
+ background-color: var(--subcolor);
+}
+.modal-footer{
+ background-color: var(--modalfooter) !important;
+}
-/*black theme*/
-.blacktheme body {
- color: white;
- background-color: #212121;
-}
-.blacktheme #drag {
- color: white;
- background-color: rgba(0, 0, 0, 0.8);
- position: fixed;
- width: 100vw;
- height: 100vh;
- z-index: 99999;
- justify-content: center;
- align-items: center;
-}
-.blacktheme #imagemodal,.blacktheme #videomodal,.blacktheme #tootmodal,.blacktheme #releasenote {
- background-color: black;
-}
-.blacktheme .collapsible-header,.blacktheme .tabs,.blacktheme #pip {
- background-color: #212121;
-}
-/*indigo theme*/
-.indigotheme body {
- color: white;
- background-color: #031833;
-}
-.indigotheme #drag {
- color: white;
- background-color: rgba(0, 0, 0, 0.8);
- position: fixed;
- width: 100vw;
- height: 100vh;
- z-index: 99999;
- justify-content: center;
- align-items: center;
-}
-.indigotheme #imagemodal,.indigotheme #videomodal,.indigotheme #tootmodal,.indigotheme #releasenote {
- background-color: #0d1351;
-}
-.indigotheme .collapsible-header,.indigotheme .tabs,.indigotheme #pip {
- background-color: #0d1351;
-}
-/*brown theme*/
-.browntheme body {
- color: white;
- background-color: #261411;
-}
-.browntheme #drag {
- color: white;
- background-color: rgba(0, 0, 0, 0.8);
- position: fixed;
- width: 100vw;
- height: 100vh;
- z-index: 99999;
- justify-content: center;
- align-items: center;
-}
-.browntheme #imagemodal,.browntheme #videomodal,.browntheme #tootmodal,.browntheme #releasenote {
- background-color: #261411;
-}
-.browntheme .collapsible-header,.browntheme .tabs,.browntheme #pip {
- background-color: #4e342e;
-}
/*スクロールバー*/
::-webkit-scrollbar {
diff --git a/app/css/post.css b/app/css/post.css
index d2d6365f..a835fa92 100644
--- a/app/css/post.css
+++ b/app/css/post.css
@@ -3,7 +3,7 @@
position: fixed;
right: 78px;
bottom: 3px;
- background-color: white;
+ background-color: var(--postbox);
border: thin solid gray;
z-index: 500;
width: 300px;
@@ -25,8 +25,6 @@
#drag {
width: 100%;
height: 100px;
- background-color: #e0e0e0;
- color: black;
}
#post-btn {
display: none;
@@ -70,27 +68,6 @@
}
-/*black theme*/
-.blacktheme #post-box {
- background-color: #424242;
-}
-/*indigo theme*/
-.indigotheme #post-box {
- background-color: #1a237e ;
-}
-/*brown theme*/
-.browntheme #post-box {
- background-color: #4e342e;
-}
-/*
-.blacktheme #drag {
- width: 100%;
- height: 100px;
- background-color: #004d40;
- color: white;
- padding: 3px;
-}
-*/
/*mini*/
diff --git a/app/css/themes.css b/app/css/themes.css
new file mode 100644
index 00000000..1bcd5c62
--- /dev/null
+++ b/app/css/themes.css
@@ -0,0 +1,80 @@
+:root{
+ --bg:white;
+ --drag:rgba(255, 255, 255, 0.8);
+ --color:black;
+ --modal:white;
+ --subcolor:#e0e0e0;
+ --box:white;
+ --sidebar:#e0e0e0;
+ --shared:#cfd8dc;
+ --notfbox:white;
+ --emphasized:#81c784;
+ --his-data:rgba(255, 255, 255, 0.9);
+ --active:#e6ee9c;
+ --postbox:white;
+ --modalfooter:#fafafa;
+}
+.blacktheme {
+ --bg:#212121;
+ --drag:rgba(0, 0, 0, 0.8);
+ --color:white;
+ --modal:black;
+ --subcolor:#212121;
+ --box:#424242;
+ --sidebar:#424242;
+ --shared:#004d40;
+ --notfbox:#333333;
+ --emphasized:#4e342e;
+ --his-data:rgba(0, 0, 0, 0.8);
+ --active:#757575;
+ --postbox:#424242;
+ --modalfooter:#212121;
+}
+.indigotheme {
+ --bg:#031833;
+ --drag:rgba(0, 0, 0, 0.8);
+ --color:white;
+ --modal:#0d1351;
+ --subcolor:#0d1351;
+ --shared:#004d40;
+ --box:#0d1351;
+ --sidebar:#0d1351;
+ --notfbox:#0d47a1;
+ --emphasized:#4e342e;
+ --his-data:rgba(13, 19, 81,0.8);
+ --active:#757575;
+ --post-box:#1a237e;
+ --modalfooter:#031833;
+}
+.browntheme {
+ --bg:#261411;
+ --drag:rgba(0, 0, 0, 0.8);
+ --color:white;
+ --modal:#261411;
+ --subcolor:#4e342e;
+ --shared:#004d40;
+ --box:#4e342e;
+ --sidebar:#4e342e;
+ --notfbox:#4e342e;
+ --emphasized:#0d47a1;
+ --his-data:rgba(62, 39, 35,0.8);
+ --active:#757575;
+ --postbox:#4e342e;
+ --modalfooter:#261411;
+}
+.greentheme{
+ --bg:#c8e6c9;
+ --drag:rgba(255, 255, 255, 0.8);
+ --color:black;
+ --modal:#81c784;
+ --subcolor:#a5d6a7;
+ --box:#81c784;
+ --sidebar:#81c784;
+ --shared:#ffcc80;
+ --notfbox:#a5d6a7;
+ --emphasized:#9e9d24;
+ --his-data:rgba(255, 255, 255, 0.9);
+ --active:#e6ee9c;
+ --postbox:#a5d6a7;
+ --modalfooter:#81c784;
+}
\ No newline at end of file
diff --git a/app/css/tl.css b/app/css/tl.css
index a9ee43ac..c898997d 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -14,7 +14,7 @@
width:75px;
min-width:75px;
height:100vh;
- background-color:#e0e0e0;
+ background-color:var(--sidebar);
display:flex;
flex-wrap:wrap;
}
@@ -37,7 +37,7 @@
vertical-align:text-bottom;
}
#sidebar a{
- color:black;
+ color:var(--color);
}
#sidebar .big-menu{
text-align:center;
@@ -218,7 +218,7 @@ font-size:1rem;
height:calc(0.8em + 8px);
}
.cbadge-hover {
- color: #000;
+ color: var(--color);
background-color: transparent;
}
.cbadge-hover:hover {
@@ -233,17 +233,17 @@ p:not(:last-child){
margin-bottom: 10px;
}
.shared {
- background-color: #cfd8dc;
+ background-color: var(--shared);
}
.emphasized {
- background-color: #81c784;
+ background-color: var(--emphasized);
}
.udg {
cursor: pointer;
}
.notice-box {
top: 0;
- background-color:white;
+ background-color:var(--notfbox);
position: relative;
margin-right: 10px;
width:100%;
@@ -306,7 +306,7 @@ p:not(:last-child){
.notf-box {
position: fixed;
right: 70px;
- background-color: white;
+ background-color: var(--box);
border: thin solid gray;
z-index: 501;
width: 400px;
@@ -329,59 +329,15 @@ p:not(:last-child){
overflow-y: scroll;
}
.u-url {
- color: black;
+ color: var(--color);
cursor: text;
}
.type-b{
display:none;
}
-
-/*black theme*/
-.blacktheme .cbadge-hover,.browntheme .cbadge-hover,.indigotheme .cbadge-hover { color: #fff;}
-.blacktheme .notf-box,.blacktheme .modal-footer,.blacktheme #sidebar {
- background-color: #424242;
+.modal-footer{
+ background-color:var(--box);
}
-.blacktheme .btn-flat,.blacktheme .u-url ,.blacktheme #sidebar a {
- color: white
-}
-.blacktheme .shared {
- background-color: #004d40;
-}
-.blacktheme .notice-box {
- background-color: #333333;
-}
-.blacktheme .emphasized {
- background-color: #4e342e;
-}
-/*indigo theme*/
-.indigotheme .notf-box,.indigotheme .modal-footer,.indigotheme #sidebar {
- background-color: #0d1351;
-}
-.indigotheme .btn-flat,.indigotheme .u-url ,.indigotheme #sidebar a {
- color: white
-}
-.indigotheme .shared {
- background-color: #004d40;
-}
-.indigotheme .notice-box {
- background-color: #0d47a1;
-}
-.indigotheme .emphasized {
- background-color: #4e342e;
-}
-/*brown theme*/
-.browntheme .notf-box,.browntheme .modal-footer,.browntheme #sidebar {
- background-color: #4e342e;
-}
-.browntheme .btn-flat,.browntheme .u-url ,.browntheme #sidebar a {
- color: white
-}
-.browntheme .shared {
- background-color: #004d40;
-}
-.browntheme .notice-box {
- background-color: #4e342e;
-}
-.browntheme .emphasized {
- background-color: #0d47a1;
+.btn-flat{
+ color:var(--color);
}
\ No newline at end of file
diff --git a/app/css/userdata.css b/app/css/userdata.css
index 77e9f53e..3b4f83fa 100644
--- a/app/css/userdata.css
+++ b/app/css/userdata.css
@@ -17,7 +17,7 @@
}
#his-data-show {
margin: 50px;
- background-color:rgba(255, 255, 255, 0.9);
+ background-color:var(--his-data);
width: calc(100% - 50px);
height: calc(100% - 50px);
margin-bottom: 0;
@@ -31,31 +31,8 @@
width: 10%;
}
.active-back{
- background-color: #e6ee9c;
+ background-color: var(--active);
}
#his-name .emojione,#his-name .emoji-img{
width: 20px;
}
-
-
-/*black theme*/
-.blacktheme #his-data-show {
- background-color: rgba(0, 0, 0, 0.8);
-}
-.blacktheme .active-back{
- background-color:#757575;
-}
-/*indigo theme*/
-.indigotheme #his-data-show {
- background-color: rgba(13, 19, 81,0.8);
-}
-.indigotheme .active-back{
- background-color:#757575;
-}
-/*brown theme*/
-.browntheme #his-data-show {
- background-color: rgba(62, 39, 35,0.8);
-}
-.browntheme .active-back{
- background-color:#757575;
-}
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 9987bda6..2143dbfd 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,6 +5,7 @@
+
@@ -24,7 +25,7 @@