Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new custom/default css

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/css/master.css
View File

@ -6,7 +6,7 @@ body {
user-select: none; user-select: none;
cursor: default; cursor: default;
height: 100vh; height: 100vh;
color: var(--color); color: var(--text);
} }
html { html {
font-size: 13px; font-size: 13px;
@ -14,9 +14,9 @@ html {
.titlebar, .titlebar,
.menubar-menu-container, .menubar-menu-container,
.action-menu-item { .action-menu-item {
background-color: var(--notfbox) !important; background-color: var(--subcolor) !important;
filter: brightness(110%) !important; filter: brightness(110%) !important;
color: var(--color) !important; color: var(--text) !important;
} }
.action-menu-item:hover { .action-menu-item:hover {
filter: brightness(80%) !important; filter: brightness(80%) !important;
@ -232,7 +232,7 @@ blockquote:before,
height: calc(100vh - 3rem); height: calc(100vh - 3rem);
background-color: var(--bg); background-color: var(--bg);
filter: brightness(50%); filter: brightness(50%);
color: var(--color); color: var(--text);
z-index: 99999; z-index: 99999;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -243,7 +243,7 @@ blockquote:before,
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--bg); background-color: var(--bg);
color: var(--color); color: var(--text);
z-index: 99999; z-index: 99999;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -254,7 +254,7 @@ blockquote:before,
#pip { #pip {
z-index: 504; z-index: 504;
width: 418px; width: 418px;
background-color: var(--subcolor); background-color: var(--thirdColor);
position: absolute; position: absolute;
} }
.pip-bottom { .pip-bottom {
@ -315,10 +315,10 @@ blockquote:before,
} }
.collapsible-header, .collapsible-header,
.tabs { .tabs {
background-color: var(--subcolor); background-color: var(--thirdColor);
} }
.collapsible-header:focus { .collapsible-header:focus {
background-color: var(--subcolor) !important; background-color: var(--thirdColor) !important;
} }
.modal-footer { .modal-footer {
background-color: var(--modalfooter) !important; background-color: var(--modalfooter) !important;
@ -332,12 +332,13 @@ blockquote:before,
} }
.release-do { .release-do {
border: solid 2px; border: solid 2px;
border-color: var(--color); border-color: var(--text);
padding: 5px; padding: 5px;
} }
#pickers { #pickers {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column;
} }
#menu { #menu {
position: fixed; position: fixed;
@ -367,7 +368,7 @@ blockquote:before,
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: var(--color); color: var(--text);
} }
#left-menu a:hover { #left-menu a:hover {
background-color: var(--beforehover); background-color: var(--beforehover);
@ -398,7 +399,7 @@ blockquote:before,
width: 13rem; width: 13rem;
height: 3.1rem; height: 3.1rem;
cursor: pointer; cursor: pointer;
color: var(--color); color: var(--text);
} }
#tltype .type span { #tltype .type span {
width: calc(100% - 2.3rem); width: calc(100% - 2.3rem);
@ -425,7 +426,7 @@ blockquote:before,
text-align: center; text-align: center;
width: calc(100% + 0.8rem); width: calc(100% + 0.8rem);
border-radius: 5px; border-radius: 5px;
background-color: var(--box); background-color: var(--subcolor);
filter: brightness(80%); filter: brightness(80%);
margin-left: -0.4rem; margin-left: -0.4rem;
margin-right: -0.4rem; margin-right: -0.4rem;
@ -446,7 +447,7 @@ blockquote:before,
position: fixed; position: fixed;
bottom: -300px; bottom: -300px;
width: 100vw; width: 100vw;
background-color: var(--box); background-color: var(--subcolor);
z-index: 9999; z-index: 9999;
padding: 0.8rem; padding: 0.8rem;
display: grid; display: grid;
@ -472,16 +473,16 @@ blockquote:before,
} }
input, input,
textarea { textarea {
color: var(--color); color: var(--text);
font-size: 1rem !important; font-size: 1rem !important;
font-family: inherit; font-family: inherit;
} }
.swal2-popup { .swal2-popup {
background-color: var(--notfbox) !important; background-color: var(--subcolor) !important;
} }
.swal2-title, .swal2-title,
.swal2-content { .swal2-content {
color: var(--color) !important; color: var(--text) !important;
} }
#src-contents svg { #src-contents svg {
margin-right: 0.4rem; margin-right: 0.4rem;
@ -530,7 +531,7 @@ textarea {
left: calc(50vw - 11.53rem); left: calc(50vw - 11.53rem);
width: 23rem; width: 23rem;
max-width: 100%; max-width: 100%;
background-color: var(--box); background-color: var(--subcolor);
z-index: 501; z-index: 501;
padding: 0.4rem; padding: 0.4rem;
} }

6
app/css/post.css
View File

@ -86,7 +86,7 @@ textarea {
max-height: 7.7rem; max-height: 7.7rem;
} }
#default-emoji a { #default-emoji a {
color: var(--color); color: var(--text);
margin-right: 0.15rem; margin-right: 0.15rem;
} }
.character-counter { .character-counter {
@ -126,8 +126,8 @@ textarea {
} }
#posttgl, #posttgl,
#toot-post-btn { #toot-post-btn {
background-color: var(--accentbtn); background-color: var(--active);
color: var(--color); color: var(--text);
} }
/*mini*/ /*mini*/
.mini-post .mize { .mini-post .mize {

2
app/css/sort.css
View File

@ -5,7 +5,7 @@
background-color: var(--modalfooter); background-color: var(--modalfooter);
margin: 0.4rem; margin: 0.4rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color); color: var(--text);
padding: 3px; padding: 3px;
display: grid; display: grid;
grid-template-columns: 3.3rem 1fr 4.6rem; grid-template-columns: 3.3rem 1fr 4.6rem;

192
app/css/themes.css
View File

@ -1,192 +0,0 @@
:root {
--bg: white;
--drag: rgba(255, 255, 255, 0.8);
--color: black;
--beforehover: #757575;
--modal: white;
--subcolor: #e0e0e0;
--box: white;
--sidebar: #eeeeee;
--shared: #cfd8dc;
--notfbox: white;
--emphasized: #81c784;
--his-data: rgba(255, 255, 255, 0.9);
--active: #e6ee9c;
--postbox: white;
--modalfooter: #fafafa;
--accentbtn: #009688;
--selected: #c0c0c0;
--selectedWithShare: #b2babd;
--gray: #757575;
}
#imagemodal {
background: url("../img/pixel.white.svg");
}
.blacktheme {
--bg: #212121;
--drag: rgba(0, 0, 0, 0.8);
--color: white;
--beforehover: #9e9e9e;
--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;
--accentbtn: #3f51b5;
--selected: #3f3f3f;
--selectedWithShare: #003a30;
--gray: #cccccc;
}
.blacktheme #imagemodal {
background: url("../img/pixel.svg");
}
.indigotheme {
--bg: #031833;
--drag: rgba(0, 0, 0, 0.8);
--color: white;
--beforehover: #9e9e9e;
--modal: #0d1351;
--subcolor: #0d1351;
--shared: #004d40;
--box: #0d1351;
--sidebar: #0d1351;
--notfbox: #0d47a1;
--emphasized: #4e342e;
--his-data: rgba(13, 19, 81, 0.8);
--active: #757575;
--postbox: #1a237e;
--modalfooter: #031833;
--accentbtn: #00acc1;
--selected: #214f8a;
--selectedWithShare: #003a30;
--gray: #cccccc ;
}
.indigotheme #imagemodal {
background: url("../img/pixel.svg");
}
.browntheme {
--bg: #261411;
--drag: rgba(0, 0, 0, 0.8);
--color: white;
--beforehover: #9e9e9e;
--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;
--accentbtn: #827717;
--selected: #6d352b;
--selectedWithShare: #003a30;
--gray: #cccccc;
}
.browntheme #imagemodal {
background: url("../img/pixel.svg");
}
.greentheme {
--bg: #c8e6c9;
--drag: rgba(255, 255, 255, 0.8);
--color: black;
--beforehover: #757575;
--modal: #81c784;
--subcolor: #a5d6a7;
--box: #81c784;
--sidebar: #c5e1a5;
--shared: #ffcc80;
--notfbox: #a5d6a7;
--emphasized: #9e9d24;
--his-data: rgba(255, 255, 255, 0.9);
--active: #e6ee9c;
--postbox: #a5d6a7;
--modalfooter: #81c784;
--accentbtn: #33691e;
--selected: #78c17a;
--selectedWithShare: #caa266;
--gray: #757575;
}
.greentheme #imagemodal {
background: url("../img/pixel.white.svg");
}
.bluetheme {
--bg: #c9e1ec;
--drag: rgba(255, 255, 255, 0.8);
--color: black;
--beforehover: #757575;
--modal: #b2ebf2;
--subcolor: #90caf9;
--box: #90caf9;
--sidebar: #b6e6f5;
--shared: #e0ffe4;
--notfbox: #90caf9;
--emphasized: #c5e1a5;
--his-data: rgba(255, 255, 255, 0.9);
--active: #b39ddb;
--postbox: #dff1ff;
--modalfooter: #2196f3;
--accentbtn: #2f7bb7;
--selected: #9dcade;
--selectedWithShare: #c1dac4;
--gray: #757575;
}
.bluetheme #imagemodal {
background: url("../img/pixel.white.svg");
}
.polartheme {
--bg: #2e3440;
--drag: rgba(0, 0, 0, 0.8);
--color: white;
--beforehover: #8d94a0;
--modal: #3b4252;
--subcolor: #434c5e;
--box: #4c566a;
--sidebar: #3b4252;
--shared: #2d3b58;
--notfbox: #2a3857;
--emphasized: #2f4b86;
--his-data: rgba(0, 0, 0, 0.8);
--active: #2a3857;
--postbox: #434c5e;
--modalfooter: #485166;
--accentbtn: #2f4b86;
--selected: #464f61;
--selectedWithShare: #3e527e;
--gray: #cccccc;
}
.polartheme #imagemodal {
background: url("../img/pixel.svg");
}
.snowtheme {
--bg: #eceff4;
--drag: rgba(255, 255, 255, 0.8);
--color: #36425a;
--beforehover: #344058;
--modal: #e5e9f0;
--subcolor: #d8dee9;
--box: #c0c8d6;
--sidebar: #eeeeee;
--shared: #c3d4e6;
--notfbox: #d8dee9;
--emphasized: #88c0d0;
--his-data: rgba(255, 255, 255, 0.9);
--active: #8fbcbb;
--postbox: #d8dee9;
--modalfooter: #b2bed4;
--accentbtn: #81a1c1;
--selected: #b4bdd0;
--selectedWithShare: #a3afbb;
--gray: #5c6c8c;
}
.snowtheme #imagemodal {
background: url("../img/pixel.white.svg");
}

30
app/css/tl.css
View File

@ -18,7 +18,7 @@
padding: 0.23rem; padding: 0.23rem;
padding-right: 0; padding-right: 0;
padding-left: 3rem; padding-left: 3rem;
background-color: var(--sidebar); background-color: var(--bottom);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
@ -62,7 +62,7 @@
} }
#bottom a, #bottom a,
#demogroup a { #demogroup a {
color: var(--color); color: var(--text);
} }
#bottom i { #bottom i {
font-size: 2.3rem; font-size: 2.3rem;
@ -436,7 +436,7 @@ iframe,
} }
.btn-flat { .btn-flat {
color: var(--color); color: var(--text);
} }
.area-side i { .area-side i {
margin-left: 0.75rem; margin-left: 0.75rem;
@ -455,7 +455,7 @@ iframe,
color: var(--beforehover); color: var(--beforehover);
} }
.actct:hover { .actct:hover {
color: var(--color); color: var(--text);
transition: 0.5s; transition: 0.5s;
} }
.contextMenu.dropdown-content { .contextMenu.dropdown-content {
@ -502,7 +502,7 @@ iframe,
user-select: none; user-select: none;
} }
.cbadge-hover { .cbadge-hover {
color: var(--color); color: var(--text);
background-color: transparent; background-color: transparent;
} }
.cbadge-hover:hover { .cbadge-hover:hover {
@ -518,7 +518,7 @@ p:not(:last-child) {
margin-bottom: 0.76rem; margin-bottom: 0.76rem;
} }
.shared { .shared {
background-color: var(--shared); background-color: var(--accent);
} }
.emphasized { .emphasized {
background-color: var(--emphasized); background-color: var(--emphasized);
@ -528,7 +528,7 @@ p:not(:last-child) {
} }
.notice-box { .notice-box {
top: 0; top: 0;
background-color: var(--notfbox); background-color: var(--subcolor);
filter: brightness(110%); filter: brightness(110%);
position: relative; position: relative;
margin-right: 0.7rem; margin-right: 0.7rem;
@ -597,7 +597,7 @@ p:not(:last-child) {
.notf-box { .notf-box {
position: fixed; position: fixed;
right: 5.4rem; right: 5.4rem;
background-color: var(--box); background-color: var(--subcolor);
border: thin solid gray; border: thin solid gray;
z-index: 501; z-index: 501;
width: 30rem; width: 30rem;
@ -653,10 +653,10 @@ p:not(:last-child) {
display: none; display: none;
} }
.modal-footer { .modal-footer {
background-color: var(--box); background-color: var(--subcolor);
} }
.ballons { .ballons {
background-color: var(--box); background-color: var(--subcolor);
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
@ -714,11 +714,11 @@ p:not(:last-child) {
transition-duration: 0.5s; transition-duration: 0.5s;
} }
.votebtn:hover { .votebtn:hover {
background-color: var(--color); background-color: var(--text);
} }
.leadPoll { .leadPoll {
position: absolute; position: absolute;
background-color: var(--box); background-color: var(--subcolor);
height: 1.5rem; height: 1.5rem;
border-radius: 0.23rem; border-radius: 0.23rem;
} }
@ -780,11 +780,11 @@ audio {
.cw_btn { .cw_btn {
margin: 0.23rem; margin: 0.23rem;
background-color: var(--emphasized); background-color: var(--emphasized);
color: var(--color); color: var(--text);
padding-left: 0.23rem; padding-left: 0.23rem;
padding-right: 0.23rem; padding-right: 0.23rem;
border-radius: 0.23rem; border-radius: 0.23rem;
border: 1px solid var(--color); border: 1px solid var(--text);
user-select: none; user-select: none;
} }
.vis-data { .vis-data {
@ -874,7 +874,7 @@ audio {
cursor: pointer; cursor: pointer;
border: solid 1px; border: solid 1px;
padding-left: 0.15rem; padding-left: 0.15rem;
background-color: var(--notfbox); background-color: var(--subcolor);
border-radius: 0.15rem; border-radius: 0.15rem;
} }
.announReaction img { .announReaction img {

35
app/js/platform/first.js
View File

@ -1,11 +1,11 @@
$.strip_tags = function(str, allowed) { $.strip_tags = function (str, allowed) {
if (!str) { if (!str) {
return '' return ''
} }
allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('') allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('')
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi
return str.replace(commentsAndPhpTags, '').replace(tags, function($0, $1) { return str.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '' return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''
}) })
} }
@ -88,17 +88,18 @@ function formattimeutc(date) {
} }
postMessage(['sendSinmpleIpc', 'custom-css-request'], '*') postMessage(['sendSinmpleIpc', 'custom-css-request'], '*')
function makeCID() { function makeCID() {
return ( let chars = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("")
randomStr(8) + for (let i = 0, len = chars.length; i < len; i++) {
'-' + switch (chars[i]) {
randomStr(4) + case "x":
'-' + chars[i] = Math.floor(Math.random() * 16).toString(16)
randomStr(4) + break
'-' + case "y":
randomStr(4) + chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16)
'-' + break
randomStr(12) }
) }
return chars.join("")
} }
function randomStr(l) { function randomStr(l) {
// 生成する文字列に含める文字セット // 生成する文字列に含める文字セット
@ -147,15 +148,15 @@ function rgbToHex(color) {
console.error(color + ':第1引数はRGB形式で入力') console.error(color + ':第1引数はRGB形式で入力')
} }
/*マルチバイト用切り出し*/ /*マルチバイト用切り出し*/
$.isSurrogatePear = function(upper, lower) { $.isSurrogatePear = function (upper, lower) {
return 0xd800 <= upper && upper <= 0xdbff && 0xdc00 <= lower && lower <= 0xdfff return 0xd800 <= upper && upper <= 0xdbff && 0xdc00 <= lower && lower <= 0xdfff
} }
$.mb_strlen = function(str) { $.mb_strlen = function (str) {
var splitter = new GraphemeSplitter() var splitter = new GraphemeSplitter()
var arr = splitter.splitGraphemes(str) var arr = splitter.splitGraphemes(str)
return arr.length return arr.length
} }
$.mb_substr = function(str, begin, end) { $.mb_substr = function (str, begin, end) {
//配列にする //配列にする
var splitter = new GraphemeSplitter() var splitter = new GraphemeSplitter()
var arr = splitter.splitGraphemes(str) var arr = splitter.splitGraphemes(str)
@ -175,7 +176,7 @@ function object_array_sort(data, key, order, fn) {
num_a = 1 num_a = 1
num_b = -1 num_b = -1
} }
data = data.sort(function(a, b) { data = data.sort(function (a, b) {
var x = a[key] var x = a[key]
var y = b[key] var y = b[key]
if (x > y) return num_a if (x > y) return num_a

1
app/js/platform/preload.js
View File

@ -207,6 +207,7 @@ ipc.on('theme-json-response', function(event, args) {
postMessage(['customConnect', args], '*') postMessage(['customConnect', args], '*')
}) })
ipc.on('theme-json-create-complete', function(event, args) { ipc.on('theme-json-create-complete', function(event, args) {
if(args != '') alert(args)
postMessage(['clearCustomImport', ''], '*') postMessage(['clearCustomImport', ''], '*')
postMessage(['ctLoad', ''], '*') postMessage(['ctLoad', ''], '*')
}) })

282
app/js/ui/settings.js
View File

@ -167,10 +167,10 @@ function load() {
var font = '' var font = ''
} }
$('#font').val(font) $('#font').val(font)
$('#c1-file').text(localStorage.getItem('custom1')!= 'null' ? localStorage.getItem('custom1') : '') $('#c1-file').text(localStorage.getItem('custom1') != 'null' ? localStorage.getItem('custom1') : '')
$('#c2-file').text(localStorage.getItem('custom2')!= 'null' ? localStorage.getItem('custom2') : '') $('#c2-file').text(localStorage.getItem('custom2') != 'null' ? localStorage.getItem('custom2') : '')
$('#c3-file').text(localStorage.getItem('custom3')!= 'null' ? localStorage.getItem('custom3') : '') $('#c3-file').text(localStorage.getItem('custom3') != 'null' ? localStorage.getItem('custom3') : '')
$('#c4-file').text(localStorage.getItem('custom4')!= 'null' ? localStorage.getItem('custom4') : '') $('#c4-file').text(localStorage.getItem('custom4') != 'null' ? localStorage.getItem('custom4') : '')
var cvol = localStorage.getItem('customVol') var cvol = localStorage.getItem('customVol')
if (cvol) { if (cvol) {
$('#soundvol').val(cvol * 100) $('#soundvol').val(cvol * 100)
@ -508,35 +508,39 @@ function fontList(arg) {
function insertFont(name) { function insertFont(name) {
$('#font').val(name) $('#font').val(name)
} }
$('.color-picker').each(function (i, elem) { function copyColor(from, to) {
pickerDefine(i, 'fff') let props = [
}) 'background', 'subcolor', 'text', 'accent',
function pickerDefine(i, color) { 'modal', 'modalFooter', 'third', 'forth',
var pickr = new Pickr({ 'bottom', 'emphasized', 'postbox', 'active',
el: '#color-picker' + i, 'selected', 'selectedWithShared'
default: color, ]
showAlways: true, let i = 0
appendToBody: true, let color
closeWithKey: 'Escape', for (tag of props) {
comparison: false, if(tag == from) {
components: { let used = $(`#use-color_${i}`).prop('checked')
preview: true, // Left side color comparison if(!used) {
opacity: false, // Opacity slider Swal.fire({
hue: true, // Hue slider type: 'error',
interaction: { title: 'Not checked',
rgba: false, // rgba option (red green blue and alpha) })
input: true, // input / output element break
}, }
}, color = $(`#color-picker${i}_value`).val()
strings: { break
save: 'Save', // Default for save button }
clear: 'Clear', // Default for clear button i++
}, }
}) if(!color) return false
pickr.on('change', (...args) => { for (tag of props) {
var rgb = 'rgb(' + args[0].toRGBA()[0] + ',' + args[0].toRGBA()[1] + ',' + args[0].toRGBA()[2] + ')' if(tag == to) {
$('#color-picker' + i + '_value').val(rgb) $(`#color-picker${i}_value`).val(color)
}) $(`#use-color_${i}`).prop('checked', true)
break
}
i++
}
} }
function customComp() { function customComp() {
var nameC = $('#custom_name').val() var nameC = $('#custom_name').val()
@ -544,59 +548,32 @@ function customComp() {
return false return false
} }
var descC = $('#custom_desc').val() var descC = $('#custom_desc').val()
var primaryC = $('#color-picker0_value').val() var bgC = $('#color-picker0_value').val()
if (!primaryC) { var subcolorC = $('#color-picker2_value').val()
primaryC = 'rgb(255,255,255)' var textC = $('#color-picker1_value').val()
} var accentC = $('#color-picker3_value').val()
var secondaryC = $('#color-picker1_value').val()
if (!secondaryC) {
secondaryC = 'rgb(255,255,255)'
}
var textC = $('#color-picker2_value').val()
if (!textC) {
textC = 'rgb(255,255,255)'
}
var multi = localStorage.getItem('multi') var multi = localStorage.getItem('multi')
if ($('#pickers').hasClass('advanceTheme')) { let advanced = [
var accentC = $('#color-picker3_value').val() 'modal', 'modalFooter', 'third', 'forth',
if (!accentC) { 'bottom', 'emphasized', 'postbox', 'active',
accentC = null 'selected', 'selectedWithShared'
]
var advanceTheme = {}
let i = 4
for (tag of advanced) {
let used = $(`#use-color_${i}`).prop('checked')
if (used) {
advanceTheme[tag] = $(`#color-picker${i}_value`).val()
} }
var activeC = $('#color-picker4_value').val() i++
if (!activeC) {
activeC = null
}
var modalC = $('#color-picker5_value').val()
if (!modalC) {
modalC = null
}
var bottomC = $('#color-picker6_value').val()
if (!bottomC) {
bottomC = null
}
var postboxC = $('#color-picker7_value').val()
if (!postboxC) {
postboxC = null
}
var subcolorC = $('#color-picker8_value').val()
if (!subcolorC) {
subcolorC = null
}
var advanceTheme = {
TheDeskAccent: accentC,
TheDeskActive: activeC,
TheDeskModal: modalC,
TheDeskBottom: bottomC,
TheDeskPostbox: postboxC,
TheDeskSubcolor: subcolorC,
}
} else {
var advanceTheme = {}
} }
var my = JSON.parse(multi)[0].name var my = JSON.parse(multi)[0].name
var id = $('#custom-edit-sel').val() var id = $('#custom-edit-sel').val()
if (id == 'add_new') { const defaults = [
'black','blue','brown','green','indigo','polar','snow','white'
]
if (id == 'add_new' || defaults.includes(id)) {
id = makeCID() id = makeCID()
} }
localStorage.setItem('customtheme-id', id) localStorage.setItem('customtheme-id', id)
@ -605,26 +582,48 @@ function customComp() {
author: my, author: my,
desc: descC, desc: descC,
base: $('[name=direction]:checked').val(), base: $('[name=direction]:checked').val(),
vars: { primary: {
primary: primaryC, background: bgC,
secondary: secondaryC, subcolor: subcolorC,
text: textC, text: textC,
accent: accentC
}, },
props: advanceTheme, advanced: advanceTheme,
id: id, id: id,
version: '2'
} }
$('#custom_json').val(JSON.stringify(json)) $('#custom_json').val(JSON.stringify(json))
themes('custom') let timerInterval
$('#custom').prop('checked', true) Swal.fire({
$('#custom_name').val('') title: 'Saving...',
$('#custom_desc').val('') html: '',
$('#dark').prop('checked', true) timer: 1000,
$('#custom_json').val('') timerProgressBar: true,
for (var i = 0; i <= 8; i++) { onBeforeOpen: () => {
$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>') Swal.showLoading()
$('#color-picker' + i + '_value').val('') },
pickerDefine(i, 'fff') onClose: () => {
} clearInterval(timerInterval)
}
}).then((result) => {
themes()
ctLoad()
Swal.fire({
title: 'Refreshing...',
html: '',
timer: 1000,
timerProgressBar: true,
onBeforeOpen: () => {
Swal.showLoading()
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
$('#custom-edit-sel').val(id)
$('select').formSelect()
})
})
postMessage(['themeJsonCreate', JSON.stringify(json)], '*') postMessage(['themeJsonCreate', JSON.stringify(json)], '*')
} }
function deleteIt() { function deleteIt() {
@ -633,34 +632,34 @@ function deleteIt() {
$('#custom_desc').val('') $('#custom_desc').val('')
$('#dark').prop('checked', true) $('#dark').prop('checked', true)
$('#custom_json').val('') $('#custom_json').val('')
for (var i = 0; i <= 8; i++) { for (var i = 0; i <= 13; i++) {
$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>') if (i >= 4) $(`#use-color_${i}`).prop('checked', false)
$('#color-picker' + i + '_value').val('') $('#color-picker' + i + '_value').val('')
pickerDefine(i, 'fff')
} }
postMessage(['themeJsonDelete', id], '*') postMessage(['themeJsonDelete', id + '.thedesktheme'], '*')
} }
function ctLoad() { function ctLoad() {
postMessage(['sendSinmpleIpc', 'theme-json-list'], '*') postMessage(['sendSinmpleIpc', 'theme-json-list'], '*')
} }
function ctLoadCore(args) { function ctLoadCore(args) {
var templete = '' var template = ''
var editTemplate = ''
Object.keys(args).forEach(function (key) { Object.keys(args).forEach(function (key) {
var theme = args[key] var theme = args[key]
var themeid = theme.id var themeid = theme.id
templete = templete + '<option value="' + themeid + '">' + theme.name + '</option>' template = template + `<option value="${themeid}">${theme.name}${theme.compatible ? `(${lang.lang_setting_compat})` : ''}</option>`
if (!theme.compatible) editTemplate = editTemplate + `<option value="${themeid}">${theme.name}</option>`
}) })
if (args[0]) { $('#custom-sel-sel').html(template)
localStorage.setItem('customtheme-id', args[0].id) editTemplate = '<option value="add_new">' + $('#edit-selector').attr('data-add') + '</option>' + editTemplate
} $('#custom-edit-sel').html(editTemplate)
$('#custom-sel-sel').html(templete) $('#custom-sel-sel').val(localStorage.getItem('customtheme-id'))
templete = '<option value="add_new">' + $('#edit-selector').attr('data-add') + '</option>' + templete
$('#custom-edit-sel').html(templete)
$('select').formSelect() $('select').formSelect()
} }
function customSel() { function customSel() {
var id = $('#custom-sel-sel').val() var id = $('#custom-sel-sel').val()
localStorage.setItem('customtheme-id', id) localStorage.setItem('customtheme-id', id)
themes(id)
} }
function custom() { function custom() {
var id = $('#custom-edit-sel').val() var id = $('#custom-edit-sel').val()
@ -669,58 +668,47 @@ function custom() {
$('#custom_desc').val('') $('#custom_desc').val('')
$('#dark').prop('checked', true) $('#dark').prop('checked', true)
$('#custom_json').val('') $('#custom_json').val('')
for (var i = 0; i <= 8; i++) { for (var i = 0; i <= 13; i++) {
$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>') if (i >= 4) $(`#use-color_${i}`).prop('checked', false)
$('#color-picker' + i + '_value').val('') $('#color-picker' + i + '_value').val('')
pickerDefine(i, 'fff')
} }
$('#delTheme').addClass('disabled') $('#delTheme').addClass('disabled')
} else { } else {
$('#delTheme').removeClass('disabled') $('#delTheme').removeClass('disabled')
postMessage(['themeJsonRequest', id], '*') postMessage(['themeJsonRequest', id + '.thedesktheme'], '*')
} }
} }
function customConnect(raw) { function customConnect(raw) {
var args = raw[0] var args = raw[0]
$('#custom_name').val(args.name) $('#custom_name').val(`${args.name} ${args.default ? 'Customed' : ''}`)
$('#custom_desc').val(args.desc) $('#custom_desc').val(args.default ? 'TheDesk default theme with some changes by user' : args.desc)
$('#' + args.base).prop('checked', true) $('#' + args.base).prop('checked', true)
//Primary //Background
$('#color-picker0-wrap').html('<div class="color-picker" id="color-picker0"></div>') $('#color-picker0_value').val(args.primary.background)
pickerDefine(0, rgbToHex(args.vars.primary))
$('#color-picker0_value').val(args.vars.primary)
//Secondary
$('#color-picker1-wrap').html('<div class="color-picker" id="color-picker1"></div>')
pickerDefine(1, rgbToHex(args.vars.secondary))
$('#color-picker1_value').val(args.vars.secondary)
//Text //Text
$('#color-picker2-wrap').html('<div class="color-picker" id="color-picker2"></div>') $('#color-picker1_value').val(args.primary.text)
$('#color-picker2_value').val(args.vars.text) //Subcolor
pickerDefine(2, rgbToHex(args.vars.text)) $('#color-picker2_value').val(args.primary.subcolor)
//TheDesk Only //Accent
advancedConncet(args, 'TheDeskAccent', 'secondary', 3) $('#color-picker3_value').val(args.primary.accent)
advancedConncet(args, 'TheDeskActive', 'primary', 4) let advanced = [
advancedConncet(args, 'TheDeskModal', 'secondary', 5) 'modal', 'modalFooter', 'third', 'forth',
advancedConncet(args, 'TheDeskBottom', 'primary', 6) 'bottom', 'emphasized', 'postbox', 'active',
advancedConncet(args, 'TheDeskPostbox', 'primary', 7) 'selected', 'selectedWithShared'
advancedConncet(args, 'TheDeskSubcolor', 'primary', 8) ]
$('#custom_json').val(raw[1]) let i = 4
} for (tag of advanced) {
function advancedConncet(args, tar, sub, i) { if (args.advanced[tag]) {
if (args.props) { $(`#color-picker${i}_value`).val(args.advanced[tag])
if (args.props[tar]) {
var color = args.props[tar]
$('#pickers').addClass('advanceTheme')
$('.advanced').removeClass('hide')
} else {
var color = args.vars[sub]
} }
} else { $(`#use-color_${i}`).prop('checked', true)
var color = args.vars[sub] i++
}
$('#custom_json').val(raw[1])
if(args.default) {
$('#delTheme').addClass('disabled')
} }
$('#color-picker' + i + '-wrap').html('<div class="color-picker" id="color-picker' + i + '"></div>')
$('#color-picker' + i + '_value').val(color)
pickerDefine(i, rgbToHex(color))
} }
function customImp() { function customImp() {
var json = $('#custom_import').val() var json = $('#custom_import').val()
@ -832,3 +820,5 @@ function lastFmSet() {
} }
M.toast({ html: 'Complete: last.fm', displayLength: 3000 }) M.toast({ html: 'Complete: last.fm', displayLength: 3000 })
} }
function stopVideo() { return false }

28
app/js/ui/theme.js
View File

@ -1,35 +1,13 @@
//テーマ適用 //テーマ適用
function themes(theme) { function themes(theme) {
if (!theme) { if (!theme) {
var theme = localStorage.getItem('theme') var theme = localStorage.getItem('customtheme-id')
if (!theme) { if (!theme) {
var theme = 'black' localStorage.setItem('customtheme-id', 'black')
localStorage.setItem('theme', 'black')
} }
} }
postMessage(['themeCSSRequest', theme + '.thedesktheme'], '*')
var el = document.getElementsByTagName('html')[0] var el = document.getElementsByTagName('html')[0]
el.classList.remove('indigotheme')
el.classList.remove('greentheme')
el.classList.remove('browntheme')
el.classList.remove('blacktheme')
el.classList.remove('bluetheme')
el.classList.remove('polartheme')
el.classList.remove('snowtheme')
el.classList.remove('customtheme')
el.classList.add(theme + 'theme')
var font = localStorage.getItem('font')
if (font) {
font = font.replace(/"(.+)"/, '$1')
el.style.fontFamily = '"' + font + '"'
} else {
el.style.fontFamily = ''
}
if (theme == 'custom') {
if (localStorage.getItem('customtheme-id')) {
postMessage(['themeCSSRequest', localStorage.getItem('customtheme-id')], '*')
}
}
el.style.backgroundColor = 'var(--bg)' el.style.backgroundColor = 'var(--bg)'
} }
themes() themes()

299
app/main/css.js
View File

@ -31,119 +31,246 @@ function css(mainWindow) {
} }
}) })
ipc.on('theme-json-delete', function (e, arg) { ipc.on('theme-json-delete', function (e, arg) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme"); try{
console.log(themecss); var themecss = join(app.getPath("userData"), arg);
fs.unlink(themecss, function (err) { console.log(themecss);
e.sender.webContents.send('theme-json-delete-complete', ""); fs.unlink(themecss, function (err) {
}); e.sender.webContents.send('theme-json-delete-complete', "");
});
} catch {
e.sender.webContents.send('theme-json-delete-complete', 'cannot delete');
}
}) })
ipc.on('theme-json-request', function (e, arg) { ipc.on('theme-json-request', function (e, arg) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme"); try {
var raw = fs.readFileSync(themecss, 'utf8') var themecss = join('./source/themes', arg)
var json = JSON5.parse(raw); var raw = fs.readFileSync(themecss, 'utf8')
var json = JSON5.parse(raw)
} catch {
var themecss = join(app.getPath("userData"), arg)
var raw = fs.readFileSync(themecss, 'utf8')
var json = JSON5.parse(raw)
}
e.sender.webContents.send('theme-json-response', [json, raw]); e.sender.webContents.send('theme-json-response', [json, raw]);
}) })
ipc.on('theme-css-request', function (e, arg) { ipc.on('theme-css-request', function (e, arg) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
try { try {
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); var themecss = join('./source/themes', arg)
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
} catch {
var themecss = join(app.getPath("userData"), arg)
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'))
}
var primary = json.vars.primary; try {
var secondary = json.vars.secondary; var css
var text = json.vars.text; if (json.version) {
if (json.base == "light") { var bg = json.primary.background
var drag = "rgba(255, 255, 255, 0.8)"; var subcolor = json.primary.subcolor
var beforehover = "#757575"; var text = json.primary.text
var selected = "#3f3f3f" var accent = json.primary.accent
var selectedWithShare = "#b2babd" if (json.base == "light") {
var gray = "#757575" var drag = "rgba(255, 255, 255, 0.8)";
} else { var beforehover = "#757575";
var drag = "rgba(0, 0, 0, 0.8)"; var selected = "#3f3f3f"
var beforehover = "#9e9e9e"; var selectedWithShare = "#b2babd"
var selected = "#c0c0c0" var gray = "#757575"
var selectedWithShare = "#003a30" var hisData = 'rgba(255, 255, 255, 0.9)'
var gray = "#cccccc"
}
if (json.props) {
if (json.props.TheDeskAccent) {
var emphasized = json.props.TheDeskAccent
} else { } else {
var emphasized = secondary var drag = "rgba(0, 0, 0, 0.8)";
var beforehover = "#9e9e9e";
var selected = "#c0c0c0"
var selectedWithShare = "#003a30"
var gray = "#cccccc"
var hisData = 'rgba(0, 0, 0, 0.8)'
} }
if (json.props.TheDeskActive) { if (!json.advanced) {
var active = json.props.TheDeskActive json.advanced = {}
}
if (json.advanced.modal) {
var modal = json.advanced.modal
} else { } else {
var active = primary var modal = bg
} }
if (json.props.TheDeskModal) { if (json.advanced.modalFooter) {
var modal = json.props.TheDeskModal var modalFooter = json.advanced.modalFooter
} else { } else {
var modal = secondary var modalFooter = bg
if (modal != bg) modalFooter = modal
} }
if (json.props.TheDeskBottom) { if (json.advanced.thirdColor) {
var bottom = json.props.TheDeskBottom var thirdColor = json.advanced.thirdColor
} else { } else {
var bottom = primary var thirdColor = subcolor
} }
if (json.props.TheDeskPostbox) { if (json.advanced.forthColor) {
var postbox = json.props.TheDeskPostbox var forthColor = json.advanced.forthColor
} else { } else {
var postbox = primary var forthColor = subcolor
if (thirdColor != subcolor) forthColor = thirdColor
} }
if (json.props.TheDeskSubcolor) { if (json.advanced.bottom) {
var subcolor = json.props.TheDeskSubcolor var bottom = json.advanced.bottom
} else { } else {
var subcolor = primary var bottom = subcolor
}
if (json.advanced.emphasized) {
var emphasized = json.advanced.emphasized
} else {
var emphasized = accent
}
if (json.advanced.postbox) {
var postbox = json.advanced.postbox
} else {
var postbox = subcolor
}
if (json.advanced.active) {
var active = json.advanced.active
} else {
var active = accent
}
if (json.advanced.selected) {
var selected = json.advanced.selected
}
if (json.advanced.selectedWithShare) {
var selectedWithShare = json.advanced.selectedWithShare
} }
} else {
var emphasized = primary
var acs = secondary
var active = primary
var modal = secondary
var bottom = primary
var postbox = primary
var subcolor = primary
}
var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" + var css = ":root {--bg:" + bg + ";--drag:" + drag + ";" +
"--color:" + text + ";--beforehover:" + beforehover + ";--modal:" + "--text:" + text + ";--beforehover:" + beforehover + ";--modal:" +
modal + ";--subcolor:" + subcolor + ";--box:" + subcolor + modal + ";--thirdColor:" + thirdColor + ";--subcolor:" + forthColor +
";--sidebar:" + bottom + ";--shared:" + emphasized + ";" + ";--bottom:" + bottom + ";--accent:" + accent + ";" + ";--emphasized:" + emphasized + ";--his-data:" +
"--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" + hisData +
secondary + ";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" + modalFooter + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" +
primary + "--gray:" + gray + ";" +
";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+ ".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
"--gray:" + gray + ";"+ } else {
".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}"; var css = compatibleTheme(json)
}
e.sender.webContents.send('theme-css-response', css); e.sender.webContents.send('theme-css-response', css);
} catch (e) { } catch (e) {
var css = ""; var css = "";
} }
}) })
ipc.on('theme-json-list', function (e, arg) { function compatibleTheme(json) {
fs.readdir(app.getPath("userData"), function (err, files) { var primary = json.vars.primary;
if (err || !files) throw err; var secondary = json.vars.secondary;
var fileList = files.filter(function (file) { var text = json.vars.text;
if(file.match(/\.thedesktheme$/)){ if (json.base == "light") {
var tfile = join(app.getPath("userData"), file) var drag = "rgba(255, 255, 255, 0.8)";
return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile) var beforehover = "#757575";
}else{ var selected = "#3f3f3f"
return null var selectedWithShare = "#b2babd"
} var gray = "#757575"
}) } else {
var themes = []; var drag = "rgba(0, 0, 0, 0.8)";
for (var i = 0; i < fileList.length; i++) { var beforehover = "#9e9e9e";
var themecss = join(app.getPath("userData"), fileList[i]); var selected = "#c0c0c0"
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8')); var selectedWithShare = "#003a30"
themes.push({ var gray = "#cccccc"
name: json.name, }
id: json.id if (json.advanced) {
}) if (json.advanced.TheDeskAccent) {
var emphasized = json.advanced.TheDeskAccent
} else {
var emphasized = secondary
} }
e.sender.webContents.send('theme-json-list-response', themes); if (json.advanced.TheDeskActive) {
}); var active = json.advanced.TheDeskActive
} else {
var active = primary
}
if (json.advanced.TheDeskModal) {
var modal = json.advanced.TheDeskModal
} else {
var modal = secondary
}
if (json.advanced.TheDeskBottom) {
var bottom = json.advanced.TheDeskBottom
} else {
var bottom = primary
}
if (json.advanced.TheDeskPostbox) {
var postbox = json.advanced.TheDeskPostbox
} else {
var postbox = primary
}
if (json.advanced.TheDeskSubcolor) {
var subcolor = json.advanced.TheDeskSubcolor
} else {
var subcolor = primary
}
} else {
var emphasized = primary
var acs = secondary
var active = primary
var modal = secondary
var bottom = primary
var postbox = primary
var subcolor = primary
}
var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" +
"--text:" + text + ";--beforehover:" + beforehover + ";--modal:" +
modal + ";--thirdColor:" + subcolor + ";--subcolor:" + subcolor +
";--bottom:" + bottom + ";--accent:" + emphasized + ";" +
"--subcolor:" + secondary + ";--emphasized:" + active + ";--his-data:" +
secondary +
";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
primary +
";--active:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" +
"--gray:" + gray + ";" +
".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
return css
}
ipc.on('theme-json-list', function (e, arg) {
var files1 = fs.readdirSync('./source/themes')
var file1List = files1.filter(function (file) {
if (file.match(/\.thedesktheme$/)) {
var tfile = join('./source/themes', file)
return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
} else {
return null
}
})
var themes = [];
for (var i = 0; i < file1List.length; i++) {
var themecss = join('./source/themes', file1List[i]);
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
let compat = true
if (json.version) compat = false
themes.push({
name: json.name,
id: json.id,
compatible: compat,
default: true
})
}
var files2 = fs.readdirSync(app.getPath("userData"))
var file2List = files2.filter(function (file) {
if (file.match(/\.thedesktheme$/)) {
var tfile = join(app.getPath("userData"), file)
return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
} else {
return null
}
})
for (var i = 0; i < file2List.length; i++) {
var themecss = join(app.getPath("userData"), file2List[i]);
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
let compat = true
if (json.version) compat = false
themes.push({
name: json.name,
id: json.id,
compatible: compat,
default: false
})
}
e.sender.webContents.send('theme-json-list-response', themes);
}) })
} }
exports.css = css; exports.css = css;

4
app/nano.html
View File

@ -16,7 +16,7 @@
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
color: var(--color) !important; color: var(--text) !important;
} }
body { body {
@ -45,7 +45,7 @@
textarea { textarea {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
color: var(--color) !important; color: var(--text) !important;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

27
app/source/themes/black.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Black',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'dark',
primary: {
background: '#212121',
subcolor: '#424242',
text: '#fff',
accent: '#004d40',
},
advanced: {
modal: '#000',
modalFooter: '#212121',
third: '#212121',
forth: '#333333',
bottom: '#424242',
emphasized: '#4e342e',
postbox: '#424242',
active: '#3f51b5',
selected: '#3f3f3f',
selectedWithShared: '#003a30',
},
id: 'black',
version: '2',
default: true
}

27
app/source/themes/blue.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Blue',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'light',
primary: {
background: '#c9e1ec',
subcolor: '#dff1ff',
text: '#000',
accent: '#e0ffe4',
},
advanced: {
modal: '#b2ebf2',
modalFooter: '#2196f3',
third: '#90caf9',
forth: '#90caf9',
bottom: '#b6e6f5',
emphasized: '#c5e1a5',
postbox: '#dff1ff',
active: '#2f7bb7',
selected: '#9dcade',
selectedWithShared: '#c1dac4',
},
id: 'blue',
version: '2',
default: true
}

27
app/source/themes/brown.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Brown',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'dark',
primary: {
background: '#261411',
subcolor: '#4e342e',
text: '#fff',
accent: '#004d40',
},
advanced: {
modal: '#261411',
modalFooter: '#261411',
third: '#4e342e',
forth: '#4e342e',
bottom: '#4e342e',
emphasized: '#0d47a1',
postbox: '#4e342e',
active: '#827717',
selected: '#6d352b',
selectedWithShared: '#003a30',
},
id: 'brown',
version: '2',
default: true
}

27
app/source/themes/green.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Green',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'light',
primary: {
background: '#c8e6c9',
subcolor: '#a5d6a7',
text: '#000',
accent: '#ffcc80',
},
advanced: {
modal: '#81c784',
modalFooter: '#81c784',
third: '#a5d6a7',
forth: '#81c784',
bottom: '#c5e1a5',
emphasized: '#9e9d24',
postbox: '#a5d6a7',
active: '#33691e',
selected: '#78c17a',
selectedWithShared: '#caa266',
},
id: 'green',
version: '2',
default: true
}

27
app/source/themes/indigo.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Indigo',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'dark',
primary: {
background: '#031833',
subcolor: '#1a237e',
text: '#fff',
accent: '#004d40',
},
advanced: {
modal: '#0d1351',
modalFooter: '#031833',
third: '#0d1351',
forth: '#0d47a1',
bottom: '#0d1351',
emphasized: '#4e342e',
postbox: '#1a237e',
active: '#00acc1',
selected: '#214f8a',
selectedWithShared: '#003a30',
},
id: 'indigo',
version: '2',
default: true
}

27
app/source/themes/polar.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Polar Night',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'dark',
primary: {
background: '#2e3440',
subcolor: '#434c5e',
text: '#ffffff',
accent: '#2d3b58',
},
advanced: {
modal: '#3b4252',
modalFooter: '#485166',
third: '#434c5e',
forth: '#4c566a',
bottom: '#3b4252',
emphasized: '#2f4b86',
postbox: '#434c5e',
active: '#2f4b86',
selected: '#464f61',
selectedWithShared: '#3e527e',
},
id: 'polar',
version: '2',
default: true
}

27
app/source/themes/snow.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'Snow Storm',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'light',
primary: {
background: '#eceff4',
subcolor: '#d8dee9',
text: '#36425a',
accent: '#c3d4e6',
},
advanced: {
modal: '#e5e9f0',
modalFooter: '#b2bed4',
third: '#d8dee9',
forth: '#4c566a',
bottom: '#eeeeee',
emphasized: '#88c0d0',
postbox: '#d8dee9',
active: '#81a1c1',
selected: '#b4bdd0',
selectedWithShared: '#a3afbb',
},
id: 'snow',
version: '2',
default: true
}

27
app/source/themes/white.thedesktheme Normal file
View File

@ -0,0 +1,27 @@
{
name: 'White',
author: 'TheDesk',
desc: 'TheDesk Default Theme',
base: 'light',
primary: {
background: '#fff',
subcolor: '#fff',
text: '#000',
accent: '#cfd8dc',
},
advanced: {
modal: '#fff',
modalFooter: '#fafafa',
third: '#e0e0e0',
forth: '#fff',
bottom: '#eeeeee',
emphasized: '#81c784',
postbox: '#fff',
active: '#009688',
selected: '#c0c0c0',
selectedWithShared: '#b2babd',
},
id: 'white',
version: '2',
default: true
}

1
app/view/make/acct.sample.html
View File

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

3
app/view/make/index.sample.html
View File

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="@@lang@@"> <html lang="@@lang@@">
<head> <head>
<link href="../../css/themes.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../js/ui/theme.js"></script> <script type="text/javascript" src="../../js/ui/theme.js"></script>
<meta content="width=device-width,initial-scale=1.0" name="viewport" /> <meta content="width=device-width,initial-scale=1.0" name="viewport" />
<link <link
@ -69,7 +68,7 @@
<div id="demobottom"> <div id="demobottom">
<button <button
class="btn waves-effect" 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 <i
class="material-icons" class="material-icons"

1
app/view/make/language/en/main.json
View File

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

27
app/view/make/language/en/setting.json
View File

@ -44,19 +44,26 @@
"srcUrl": "Search engine", "srcUrl": "Search engine",
"srcUrlWarn": "{q} will be replaced to query.", "srcUrlWarn": "{q} will be replaced to query.",
"themeSel": "Select theme", "themeSel": "Select theme",
"customtheme": "Edit and add custom themes", "customtheme": "Edit and add themes",
"customthemeDirection": "Color scheme", "customthemeDirection": "Color scheme",
"advanced":"Advanced options(6 additional colors)", "advanced":"Advanced options",
"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.", "advancedWarn":"",
"active": "Background of Show or CW buttons, selected options...", "use": "Use this",
"modal": "Background of modals", "copyFrom": "Copy from",
"bottom":"Background of bottom bar", "bg": "Background color",
"postbox":"Background of post box and menu", "subcolor":"Distinguishable from background",
"subcolor":"Subcolor, has harmony with secondary color",
"primary": "Background color",
"secondarycolor": "Background of components",
"text": "Text color", "text": "Text color",
"accent": "Background of boosts", "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", "add_new": "Add new",
"name": "Name", "name": "Name",
"desc": "About this theme", "desc": "About this theme",

1
app/view/make/language/ja-KS/main.json
View File

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

21
app/view/make/language/ja-KS/setting.json
View File

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

1
app/view/make/language/ja/main.json
View File

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

21
app/view/make/language/ja/setting.json
View File

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

2
app/view/make/make.js
View File

@ -58,7 +58,7 @@ function main(ver, basefile, pwa) {
langstr + langstr +
'<a onclick="changelang(\'' + '<a onclick="changelang(\'' +
lang + 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] + langsh[n] +
'</a>' '</a>'
let mainJson = JSON.parse( let mainJson = JSON.parse(

239
app/view/make/setting.sample.html
View File

@ -12,7 +12,6 @@
@@comment-end@@ @@comment-end@@
<meta content="width=device-width,initial-scale=1.0" name="viewport"> <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="../../@@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/pickr.css" type="text/css" rel="stylesheet">
<link href="../../css/master.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"> <link href="../../@@node_base@@/@fortawesome/fontawesome-free/css/all.min.css" type="text/css" rel="stylesheet">
@ -25,6 +24,7 @@
.pcr-result { .pcr-result {
height: 1rem !important; height: 1rem !important;
} }
.container-after-titlebar { .container-after-titlebar {
padding: 20px; padding: 20px;
} }
@ -37,7 +37,7 @@
<script type="text/javascript" src="../../js/platform/first.js"></script> <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="../../@@node_base@@/materialize-css/dist/js/materialize.js"></script>
<script type="text/javascript" src="main.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 src="../../@@node_base@@/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="setting.vue.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> <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> style="width:100%; max-width:15rem;">@@export@@</button>
<button onclick="importSettings()" class="btn waves-effect cyan darken-3" <button onclick="importSettings()" class="btn waves-effect cyan darken-3"
style="width:100%; max-width:15rem;">@@import@@</button><br> style="width:100%; max-width:15rem;">@@import@@</button><br>
@@backupWarn@@<br> @@backupWarn@@<br>
<input type="text" id="imp-exp" style="width: 22rem"> <input type="text" id="imp-exp" style="width: 22rem">
<div id="envView"> <div id="envView">
<template v-for="(item, i) in config"> <template v-for="(item, i) in config">
<h5>{{item.text.head}}</h5> <h5>{{item.text.head}}</h5>
@ -112,44 +112,6 @@
</div> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<h4>@@themeSel@@</h4> <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"> <div style="width:22rem" id="sel-selector">
<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select> <select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
</div> </div>
@ -174,74 +136,150 @@
<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light" <input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
value="light" /> value="light" />
<span>Light</span> <span>Light</span>
</label><br> </label><br><br />
<button class="btn waves-effect" onclick="advanced()">@@advanced@@</button> <button class="btn waves-effect" onclick="advanced()">@@advanced@@</button>
<span class="advanced hide">@@advancedWarn@@</span> <span class="advanced hide">@@advancedWarn@@</span>
<div id="pickers"> <div id="pickers">
<div> <div>
<h5>Primary</h5>@@secondarycolor@@ <h5>Background</h5>@@bg@@<br />
<div id="color-picker0-wrap"> <label>
<div class="color-picker" id="color-picker0"></div> <input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker0_value"> </label><br />
<input type="color" class="btn waves-effect" id="color-picker0_value">
</div> </div>
<div> <div>
<h5>Secondary</h5>@@primary@@ <h5>Text</h5>@@text@@<br />
<div id="color-picker1-wrap"> <label>
<div class="color-picker" id="color-picker1"></div> <input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker1_value"> </label><br />
<input type="color" class="btn waves-effect" id="color-picker1_value">
</div> </div>
<div> <div>
<h5>Texts</h5>@@text@@ <h5>Subcolor</h5>@@subcolor@@<br />
<div id="color-picker2-wrap"> <label>
<div class="color-picker" id="color-picker2"></div> <input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker2_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Accent</h5>@@accent@@ <h5>Modal Footer</h5>@@modalFooter@@<br />
<div id="color-picker3-wrap"> <label>
<div class="color-picker" id="color-picker3"></div> <input type="checkbox" class="filled-in" id="use-color_5" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker3_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Active</h5>@@active@@ <h5>3rd Color</h5>@@thirdColor@@<br />
<div id="color-picker4-wrap"> <label>
<div class="color-picker" id="color-picker4"></div> <input type="checkbox" class="filled-in" id="use-color_6" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker4_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Modal</h5>@@modal@@ <h5>4th Color</h5>@@forthColor@@<br />
<div id="color-picker5-wrap"> <label>
<div class="color-picker" id="color-picker5"></div> <input type="checkbox" class="filled-in" id="use-color_7" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker5_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Bottom</h5>@@bottom@@ <h5>Bottom</h5>@@bottom@@<br />
<div id="color-picker6-wrap"> <label>
<div class="color-picker" id="color-picker6"></div> <input type="checkbox" class="filled-in" id="use-color_8" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker6_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Postbox</h5>@@postbox@@ <h5>2nd Accent</h5>@@emphasized@@<br />
<div id="color-picker7-wrap"> <label>
<div class="color-picker" id="color-picker7"></div> <input type="checkbox" class="filled-in" id="use-color_9" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker7_value"> </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>
<div class="advanced hide"> <div class="advanced hide">
<h5>Subcolor</h5>@@subcolor@@ <h5>Postbox</h5>@@postbox@@<br />
<div id="color-picker8-wrap"> <label>
<div class="color-picker" id="color-picker8"></div> <input type="checkbox" class="filled-in" id="use-color_10" value="1" />
</div> <span>@@use@@</span>
<input type="hidden" id="color-picker8_value"> </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> <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 <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> 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" <input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
@ -443,15 +481,15 @@
</div> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<h5>@@bouyomi@@</h5> <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> <label>
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes" <input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes"
value="yes" /> value="yes" />
<span>@@yes@@</span> <span>@@yes@@</span>
</label> </label>
<label> <label>
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no" <input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no" value="no" />
value="no" />
<span>@@no@@</span> <span>@@no@@</span>
</label> </label>
<h5>@@speed@@</h5> <h5>@@speed@@</h5>
@ -534,16 +572,19 @@
style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25" 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> style="padding-top:5px;">Main author: Cutls@cutls.com</a>
<br> <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';" TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a
class="pointer pwa">@@checkup@@</a><br> onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
class="pointer pwa">@@checkup@@</a><br>
<br> <br>
Kyash<br> Kyash<br>
<img src="../../img/kyash.png" width="100"><br> <img src="../../img/kyash.png" width="100"><br>
<a href="https://status.cutls.com/"> <a href="https://status.cutls.com/">
<img src="https://status.cutls.com/badge-service?site=thedesk.top"> <img src="https://status.cutls.com/badge-service?site=thedesk.top">
</a><br> </a><br>
<h5>OSS License@@ossJP@@</h5> <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://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> <br>
<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 <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 Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a