new custom/default css

This commit is contained in:
cutls
2020-09-08 23:35:30 +09:00
parent 700de676d0
commit 3f7aaa7e99
29 changed files with 816 additions and 631 deletions

View File

@@ -8,7 +8,6 @@
type="text/css"
rel="stylesheet"
/>
<link href="../../css/themes.css" type="text/css" rel="stylesheet" />
<link href="../../css/master.css" type="text/css" rel="stylesheet" />
<link href="../../css/tl.css" rel="stylesheet" type="text/css" />
<link href="../../css/userdata.css" rel="stylesheet" type="text/css" />

View File

@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="@@lang@@">
<head>
<link href="../../css/themes.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../js/ui/theme.js"></script>
<meta content="width=device-width,initial-scale=1.0" name="viewport" />
<link
@@ -69,7 +68,7 @@
<div id="demobottom">
<button
class="btn waves-effect"
style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--accentbtn);"
style="width: 23rem;height: 2.5rem;line-height: 0;margin: 0; background-color: var(--active);"
>
<i
class="material-icons"

View File

@@ -240,6 +240,7 @@
"lang_misskeyparse_reacted": " reacted your following post.",
"lang_setting_time": "Time format:{{set}}",
"lang_setting_theme": "Theme:{{set}}",
"lang_setting_compat": "Compatible",
"lang_setting_nsfw": "Sensitive media:{{set}}",
"lang_setting_cw": "CW:{{set}}",
"lang_setting_cwtext": "Default CW text:{{set}}",

View File

@@ -44,19 +44,26 @@
"srcUrl": "Search engine",
"srcUrlWarn": "{q} will be replaced to query.",
"themeSel": "Select theme",
"customtheme": "Edit and add custom themes",
"customtheme": "Edit and add themes",
"customthemeDirection": "Color scheme",
"advanced":"Advanced options(6 additional colors)",
"advancedWarn":"Advanced options will be <i>null</i> if you set nothing, while basic 3 options will be white(<i>fff</i>). They(adv. options) will be reset if you saved with advanced panel closed.",
"active": "Background of Show or CW buttons, selected options...",
"modal": "Background of modals",
"bottom":"Background of bottom bar",
"postbox":"Background of post box and menu",
"subcolor":"Subcolor, has harmony with secondary color",
"primary": "Background color",
"secondarycolor": "Background of components",
"advanced":"Advanced options",
"advancedWarn":"",
"use": "Use this",
"copyFrom": "Copy from",
"bg": "Background color",
"subcolor":"Distinguishable from background",
"text": "Text color",
"accent": "Background of boosts",
"modal": "Background of modal window",
"modalFooter": "Background of modal window's footer",
"thirdColor": "Backgroud of tag buttons, etc(near to Background)",
"forthColor": "Title bar(same scheme to Background)",
"bottom":"Background of menu-bar at bottom of window",
"emphasized": "Emphasized toot's background",
"postbox":"Background of post-box and menu",
"active": "Background of 'active' elements",
"selected": "Background of selected with arrow keys",
"selectedWithShare": "Background of selected with arrow keys(boosted toots)",
"add_new": "Add new",
"name": "Name",
"desc": "About this theme",

View File

@@ -234,6 +234,7 @@
"lang_misskeyparse_quoted": "が引用",
"lang_misskeyparse_reacted": "がリアクション",
"lang_setting_time": "時間設定を{{set}}に設定したで。",
"lang_setting_compat": "互換テーマ",
"lang_setting_theme": "テーマ設定を{{set}}に設定したで。",
"lang_setting_nsfw": "画像表示設定を{{set}}に設定したで。",
"lang_setting_cw": "テキスト表示設定を{{set}}に設定したで。",

View File

@@ -43,19 +43,26 @@
"srcUrl": "検索エンジン",
"srcUrlWarn": "{q}が検索文字列になるで。",
"themeSel": "テーマの選択",
"customtheme": "カスタムテーマの作成・編集",
"customtheme": "テーマの作成・編集",
"customthemeDirection": "色の系統",
"advanced":"拡張項目(6つ)を開く",
"advancedWarn":"拡張項目は設定せんと「指定なし」に、基本3項目は白(fff)になるで。拡張項目を閉じた状態で「変更」すると拡張項目は消してまうで。",
"primary": "全体の背景色など",
"secondarycolor": "補助要素に使われる背景色",
"advanced":"拡張項目を開く",
"advancedWarn":"",
"use": "使用",
"copyFrom": "設定をコピー",
"bg": "全体の背景色など",
"subcolor":"各要素に使われる背景と区別できる色",
"text": "テキストの色",
"accent": "ブーストの背景色など",
"active": "CWボタンやメニュー選択時の背景色",
"modal": "モーダルウィンドウの背景色",
"modalFooter": "モーダルウィンドウのフッターの背景色",
"thirdColor": "タブボタンの背景色等(ほぼ背景色)",
"forthColor": "リアクションボタンやタイトルバーの色等(背景色と同系)",
"bottom":"下のメニューバーの背景色",
"emphasized": "強調されたトゥートの背景色",
"postbox":"投稿ボックスやメニューの色",
"subcolor":"背景に準ずる色",
"active": "CWボタンやメニュー選択時の背景色",
"selected": "矢印キーでトゥートを選択したときの背景色",
"selectedWithShare": "矢印キーでBTされたトゥートを選択したときの背景色",
"add_new": "新規作成",
"name": "名前",
"desc": "説明",

View File

@@ -241,6 +241,7 @@
"lang_misskeyparse_reacted": "がリアクション",
"lang_setting_time": "時間設定を{{set}}に設定しました。",
"lang_setting_theme": "テーマ設定を{{set}}に設定しました。",
"lang_setting_compat": "互換テーマ",
"lang_setting_nsfw": "画像表示設定を{{set}}に設定しました。",
"lang_setting_cw": "テキスト表示設定を{{set}}に設定しました。",
"lang_setting_cwtext": "デフォルトの警告文を「{{set}}」に設定しました。",

View File

@@ -44,19 +44,26 @@
"srcUrl": "検索エンジン",
"srcUrlWarn": "{q}が検索文字列に置換されます。",
"themeSel": "テーマの選択",
"customtheme": "カスタムテーマの作成・編集",
"customtheme": "テーマの作成・編集",
"customthemeDirection": "色の系統",
"advanced":"拡張項目(6つ)を開く",
"advancedWarn":"拡張項目は設定しないと「指定なし」に、基本3項目は白(fff)になります。拡張項目を閉じた状態で「変更」すると拡張項目はすべてリセットされます。",
"primary": "全体の背景色など",
"secondarycolor": "補助要素に使われる背景色",
"advanced":"拡張項目を開く",
"advancedWarn":"",
"use": "使用",
"copyFrom": "設定をコピー",
"bg": "全体の背景色など",
"subcolor":"各要素に使われる背景と区別できる色",
"text": "テキストの色",
"accent": "ブーストの背景色など",
"active": "CWボタンやメニュー選択時の背景色",
"modal": "モーダルウィンドウの背景色",
"modalFooter": "モーダルウィンドウのフッターの背景色",
"thirdColor": "タブボタンの背景色等(ほぼ背景色)",
"forthColor": "リアクションボタンやタイトルバーの色等(背景色と同系)",
"bottom":"下のメニューバーの背景色",
"emphasized": "強調されたトゥートの背景色",
"postbox":"投稿ボックスやメニューの色",
"subcolor":"背景に準ずる色",
"active": "CWボタンやメニュー選択時の背景色",
"selected": "矢印キーでトゥートを選択したときの背景色",
"selectedWithShare": "矢印キーでBTされたトゥートを選択したときの背景色",
"add_new": "新規作成",
"name": "名前",
"desc": "説明",

View File

@@ -58,7 +58,7 @@ function main(ver, basefile, pwa) {
langstr +
'<a onclick="changelang(\'' +
lang +
'\')" class="pointer" style="margin:4px;border: 1px solid var(--color); padding: 3px">' +
'\')" class="pointer" style="margin:4px;border: 1px solid var(--text); padding: 3px">' +
langsh[n] +
'</a>'
let mainJson = JSON.parse(

View File

@@ -12,7 +12,6 @@
@@comment-end@@
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="../../@@node_base@@/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet">
<link href="../../css/themes.css" type="text/css" rel="stylesheet">
<link href="../../css/pickr.css" type="text/css" rel="stylesheet">
<link href="../../css/master.css" type="text/css" rel="stylesheet">
<link href="../../@@node_base@@/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet">
@@ -25,6 +24,7 @@
.pcr-result {
height: 1rem !important;
}
.container-after-titlebar {
padding: 20px;
}
@@ -37,7 +37,7 @@
<script type="text/javascript" src="../../js/platform/first.js"></script>
<script type="text/javascript" src="../../@@node_base@@/materialize-css/dist/js/materialize.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="../../@@node_base@@/json5/dist/index.min.js"></script>
<script src="../../@@node_base@@/json5/dist/index.min.js"></script>
<script src="../../@@node_base@@/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="setting.vue.js"></script>
<script type="text/javascript" src="../../@@node_base@@/sweetalert2/dist/sweetalert2.all.min.js"></script>
@@ -57,8 +57,8 @@
style="width:100%; max-width:15rem;">@@export@@</button>
<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
style="width:100%; max-width:15rem;">@@import@@</button><br>
@@backupWarn@@<br>
<input type="text" id="imp-exp" style="width: 22rem">
@@backupWarn@@<br>
<input type="text" id="imp-exp" style="width: 22rem">
<div id="envView">
<template v-for="(item, i) in config">
<h5>{{item.text.head}}</h5>
@@ -112,44 +112,6 @@
</div>
<div class="collapsible-body">
<h4>@@themeSel@@</h4>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
<span data-ct="black">Black</span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
<span data-ct="white">White</span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
value="indigo" />
<span data-ct="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
<span data-ct="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
<span data-ct="green">Green<span class="imas hide">(ユースフルロマンス)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="blue" value="blue" />
<span data-ct="blue">Blue<span class="imas hide">(渚の花嫁)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="polar" value="polar" />
<span data-ct="polar">Polar Night<span class="imas hide">(ひみつの小夜曲)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="snow" value="snow" />
<span data-ct="snow">Snow Storm<span class="imas hide">(極光のしらべ)</span></span>
</label>
<label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
value="custom" />
<span data-ct="custom">custom</span>
</label>
<div style="width:22rem" id="sel-selector">
<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
</div>
@@ -174,74 +136,150 @@
<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
value="light" />
<span>Light</span>
</label><br>
</label><br><br />
<button class="btn waves-effect" onclick="advanced()">@@advanced@@</button>
<span class="advanced hide">@@advancedWarn@@</span>
<div id="pickers">
<div>
<h5>Primary</h5>@@secondarycolor@@
<div id="color-picker0-wrap">
<div class="color-picker" id="color-picker0"></div>
</div>
<input type="hidden" id="color-picker0_value">
<h5>Background</h5>@@bg@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker0_value">
</div>
<div>
<h5>Secondary</h5>@@primary@@
<div id="color-picker1-wrap">
<div class="color-picker" id="color-picker1"></div>
</div>
<input type="hidden" id="color-picker1_value">
<h5>Text</h5>@@text@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker1_value">
</div>
<div>
<h5>Texts</h5>@@text@@
<div id="color-picker2-wrap">
<div class="color-picker" id="color-picker2"></div>
</div>
<input type="hidden" id="color-picker2_value">
<h5>Subcolor</h5>@@subcolor@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker2_value">
</div>
<div>
<h5>Accent</h5>@@accent@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker3_value">
</div>
<div class="advanced hide">
<h5>Modal</h5>@@modal@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_4" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('background','modal')">Background</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker4_value">
</div>
<div class="advanced hide">
<h5>Accent</h5>@@accent@@
<div id="color-picker3-wrap">
<div class="color-picker" id="color-picker3"></div>
</div>
<input type="hidden" id="color-picker3_value">
<h5>Modal Footer</h5>@@modalFooter@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_5" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/
<a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker5_value">
</div>
<div class="advanced hide">
<h5>Active</h5>@@active@@
<div id="color-picker4-wrap">
<div class="color-picker" id="color-picker4"></div>
</div>
<input type="hidden" id="color-picker4_value">
<h5>3rd Color</h5>@@thirdColor@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_6" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker6_value">
</div>
<div class="advanced hide">
<h5>Modal</h5>@@modal@@
<div id="color-picker5-wrap">
<div class="color-picker" id="color-picker5"></div>
</div>
<input type="hidden" id="color-picker5_value">
<h5>4th Color</h5>@@forthColor@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_7" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/
<a class="pointer" onclick="copyColor('third','forth')">3rd Color</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker7_value">
</div>
<div class="advanced hide">
<h5>Bottom</h5>@@bottom@@
<div id="color-picker6-wrap">
<div class="color-picker" id="color-picker6"></div>
</div>
<input type="hidden" id="color-picker6_value">
<h5>Bottom</h5>@@bottom@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_8" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker8_value">
</div>
<div class="advanced hide">
<h5>Postbox</h5>@@postbox@@
<div id="color-picker7-wrap">
<div class="color-picker" id="color-picker7"></div>
</div>
<input type="hidden" id="color-picker7_value">
<h5>2nd Accent</h5>@@emphasized@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_9" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker9_value">
</div>
<div class="advanced hide">
<h5>Subcolor</h5>@@subcolor@@
<div id="color-picker8-wrap">
<div class="color-picker" id="color-picker8"></div>
</div>
<input type="hidden" id="color-picker8_value">
<h5>Postbox</h5>@@postbox@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_10" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker10_value">
</div>
</div>
<div class="advanced hide">
<h5>Active</h5>@@active@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_11" value="1" />
<span>@@use@@</span>
</label><br />
@@copyFrom@@:
<a class="pointer" onclick="copyColor('accent','active')">Accent</a>
<br />
<input type="color" class="btn waves-effect" id="color-picker11_value">
</div>
<div class="advanced hide">
<h5>Selected</h5>@@selected@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_12" value="1" />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker12_value">
</div>
<div class="advanced hide">
<h5>Selected with shared</h5>@@selectedWithShare@@<br />
<label>
<input type="checkbox" class="filled-in" id="use-color_13" value="1" />
<span>@@use@@</span>
</label><br />
<input type="color" class="btn waves-effect" id="color-picker13_value">
</div>
</div><br /><br />
<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
<input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
@@ -443,15 +481,15 @@
</div>
<div class="collapsible-body">
<h5>@@bouyomi@@</h5>
@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin" target="_blank">GitHub</a><br>
@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin"
target="_blank">GitHub</a><br>
<label>
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes"
value="yes" />
<span>@@yes@@</span>
</label>
<label>
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no"
value="no" />
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no" value="no" />
<span>@@no@@</span>
</label>
<h5>@@speed@@</h5>
@@ -534,16 +572,19 @@
style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25"
style="padding-top:5px;">Main author: Cutls@cutls.com</a>
<br>
TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
class="pointer pwa">@@checkup@@</a><br>
TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a
onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
class="pointer pwa">@@checkup@@</a><br>
<br>
Kyash<br>
<img src="../../img/kyash.png" width="100"><br>
<a href="https://status.cutls.com/">
<img src="https://status.cutls.com/badge-service?site=thedesk.top">
</a><br>
<h5>OSS License@@ossJP@@</h5>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small"/></a>
<a href="https://status.cutls.com/">
<img src="https://status.cutls.com/badge-service?site=thedesk.top">
</a><br>
<h5>OSS License@@ossJP@@</h5>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@"
alt="FOSSA Status"><img
src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
<br>
<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018
Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a