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

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

View File

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

View File

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

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");
}

View File

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

View File

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

View File

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

View File

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

View File

@ -1,35 +1,13 @@
//テーマ適用
function themes(theme) {
if (!theme) {
var theme = localStorage.getItem('theme')
var theme = localStorage.getItem('customtheme-id')
if (!theme) {
var theme = 'black'
localStorage.setItem('theme', 'black')
localStorage.setItem('customtheme-id', 'black')
}
}
postMessage(['themeCSSRequest', theme + '.thedesktheme'], '*')
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)'
}
themes()

View File

@ -31,23 +31,131 @@ function css(mainWindow) {
}
})
ipc.on('theme-json-delete', function (e, arg) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
try{
var themecss = join(app.getPath("userData"), arg);
console.log(themecss);
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) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
try {
var themecss = join('./source/themes', arg)
var raw = fs.readFileSync(themecss, 'utf8')
var json = JSON5.parse(raw);
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]);
})
ipc.on('theme-css-request', function (e, arg) {
var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
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'))
}
try {
var css
if (json.version) {
var bg = json.primary.background
var subcolor = json.primary.subcolor
var text = json.primary.text
var accent = json.primary.accent
if (json.base == "light") {
var drag = "rgba(255, 255, 255, 0.8)";
var beforehover = "#757575";
var selected = "#3f3f3f"
var selectedWithShare = "#b2babd"
var gray = "#757575"
var hisData = 'rgba(255, 255, 255, 0.9)'
} else {
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.advanced) {
json.advanced = {}
}
if (json.advanced.modal) {
var modal = json.advanced.modal
} else {
var modal = bg
}
if (json.advanced.modalFooter) {
var modalFooter = json.advanced.modalFooter
} else {
var modalFooter = bg
if (modal != bg) modalFooter = modal
}
if (json.advanced.thirdColor) {
var thirdColor = json.advanced.thirdColor
} else {
var thirdColor = subcolor
}
if (json.advanced.forthColor) {
var forthColor = json.advanced.forthColor
} else {
var forthColor = subcolor
if (thirdColor != subcolor) forthColor = thirdColor
}
if (json.advanced.bottom) {
var bottom = json.advanced.bottom
} else {
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
}
var css = ":root {--bg:" + bg + ";--drag:" + drag + ";" +
"--text:" + text + ";--beforehover:" + beforehover + ";--modal:" +
modal + ";--thirdColor:" + thirdColor + ";--subcolor:" + forthColor +
";--bottom:" + bottom + ";--accent:" + accent + ";" + ";--emphasized:" + emphasized + ";--his-data:" +
hisData +
";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
modalFooter + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" +
"--gray:" + gray + ";" +
".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
} else {
var css = compatibleTheme(json)
}
e.sender.webContents.send('theme-css-response', css);
} catch (e) {
var css = "";
}
})
function compatibleTheme(json) {
var primary = json.vars.primary;
var secondary = json.vars.secondary;
var text = json.vars.text;
@ -64,34 +172,34 @@ function css(mainWindow) {
var selectedWithShare = "#003a30"
var gray = "#cccccc"
}
if (json.props) {
if (json.props.TheDeskAccent) {
var emphasized = json.props.TheDeskAccent
if (json.advanced) {
if (json.advanced.TheDeskAccent) {
var emphasized = json.advanced.TheDeskAccent
} else {
var emphasized = secondary
}
if (json.props.TheDeskActive) {
var active = json.props.TheDeskActive
if (json.advanced.TheDeskActive) {
var active = json.advanced.TheDeskActive
} else {
var active = primary
}
if (json.props.TheDeskModal) {
var modal = json.props.TheDeskModal
if (json.advanced.TheDeskModal) {
var modal = json.advanced.TheDeskModal
} else {
var modal = secondary
}
if (json.props.TheDeskBottom) {
var bottom = json.props.TheDeskBottom
if (json.advanced.TheDeskBottom) {
var bottom = json.advanced.TheDeskBottom
} else {
var bottom = primary
}
if (json.props.TheDeskPostbox) {
var postbox = json.props.TheDeskPostbox
if (json.advanced.TheDeskPostbox) {
var postbox = json.advanced.TheDeskPostbox
} else {
var postbox = primary
}
if (json.props.TheDeskSubcolor) {
var subcolor = json.props.TheDeskSubcolor
if (json.advanced.TheDeskSubcolor) {
var subcolor = json.advanced.TheDeskSubcolor
} else {
var subcolor = primary
}
@ -106,44 +214,63 @@ function css(mainWindow) {
}
var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" +
"--color:" + text + ";--beforehover:" + beforehover + ";--modal:" +
modal + ";--subcolor:" + subcolor + ";--box:" + subcolor +
";--sidebar:" + bottom + ";--shared:" + emphasized + ";" +
"--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" +
"--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 +
";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
"--gray:" + gray + ";"+
";--active:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}" +
"--gray:" + gray + ";" +
".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
e.sender.webContents.send('theme-css-response', css);
} catch (e) {
var css = "";
return css
}
})
ipc.on('theme-json-list', function (e, arg) {
fs.readdir(app.getPath("userData"), function (err, files) {
if (err || !files) throw err;
var fileList = files.filter(function (file) {
if(file.match(/\.thedesktheme$/)){
var tfile = join(app.getPath("userData"), file)
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{
} else {
return null
}
})
var themes = [];
for (var i = 0; i < fileList.length; i++) {
var themecss = join(app.getPath("userData"), fileList[i]);
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
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;

View File

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

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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
}

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;
}
@ -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>
<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>
<input type="hidden" id="color-picker2_value">
<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>
<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>
<input type="hidden" id="color-picker8_value">
<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,7 +572,8 @@
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';"
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>
@ -543,7 +582,9 @@
<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://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