new custom/default css
This commit is contained in:
cutls
parent
700de676d0
commit
3f7aaa7e99
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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', ''], '*')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 bgC = $('#color-picker0_value').val()
|
||||
var subcolorC = $('#color-picker2_value').val()
|
||||
var textC = $('#color-picker1_value').val()
|
||||
var accentC = $('#color-picker3_value').val()
|
||||
var multi = localStorage.getItem('multi')
|
||||
if ($('#pickers').hasClass('advanceTheme')) {
|
||||
var accentC = $('#color-picker3_value').val()
|
||||
if (!accentC) {
|
||||
accentC = null
|
||||
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()
|
||||
}
|
||||
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 advanceTheme = {}
|
||||
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)
|
||||
$('#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]
|
||||
$('#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])
|
||||
|
||||
}
|
||||
} else {
|
||||
var color = args.vars[sub]
|
||||
$(`#use-color_${i}`).prop('checked', true)
|
||||
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() {
|
||||
var json = $('#custom_import').val()
|
||||
|
|
@ -832,3 +820,5 @@ function lastFmSet() {
|
|||
}
|
||||
M.toast({ html: 'Complete: last.fm', displayLength: 3000 })
|
||||
}
|
||||
|
||||
function stopVideo() { return false }
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
299
app/main/css.js
299
app/main/css.js
|
|
@ -31,119 +31,246 @@ function css(mainWindow) {
|
|||
}
|
||||
})
|
||||
ipc.on('theme-json-delete', function (e, arg) {
|
||||
var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
|
||||
console.log(themecss);
|
||||
fs.unlink(themecss, function (err) {
|
||||
e.sender.webContents.send('theme-json-delete-complete', "");
|
||||
});
|
||||
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");
|
||||
var raw = fs.readFileSync(themecss, 'utf8')
|
||||
var json = JSON5.parse(raw);
|
||||
try {
|
||||
var themecss = join('./source/themes', arg)
|
||||
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]);
|
||||
})
|
||||
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'))
|
||||
}
|
||||
|
||||
var primary = json.vars.primary;
|
||||
var secondary = json.vars.secondary;
|
||||
var text = json.vars.text;
|
||||
if (json.base == "light") {
|
||||
var drag = "rgba(255, 255, 255, 0.8)";
|
||||
var beforehover = "#757575";
|
||||
var selected = "#3f3f3f"
|
||||
var selectedWithShare = "#b2babd"
|
||||
var gray = "#757575"
|
||||
} else {
|
||||
var drag = "rgba(0, 0, 0, 0.8)";
|
||||
var beforehover = "#9e9e9e";
|
||||
var selected = "#c0c0c0"
|
||||
var selectedWithShare = "#003a30"
|
||||
var gray = "#cccccc"
|
||||
}
|
||||
if (json.props) {
|
||||
if (json.props.TheDeskAccent) {
|
||||
var emphasized = json.props.TheDeskAccent
|
||||
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 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) {
|
||||
var active = json.props.TheDeskActive
|
||||
if (!json.advanced) {
|
||||
json.advanced = {}
|
||||
}
|
||||
if (json.advanced.modal) {
|
||||
var modal = json.advanced.modal
|
||||
} else {
|
||||
var active = primary
|
||||
var modal = bg
|
||||
}
|
||||
if (json.props.TheDeskModal) {
|
||||
var modal = json.props.TheDeskModal
|
||||
if (json.advanced.modalFooter) {
|
||||
var modalFooter = json.advanced.modalFooter
|
||||
} else {
|
||||
var modal = secondary
|
||||
var modalFooter = bg
|
||||
if (modal != bg) modalFooter = modal
|
||||
}
|
||||
if (json.props.TheDeskBottom) {
|
||||
var bottom = json.props.TheDeskBottom
|
||||
if (json.advanced.thirdColor) {
|
||||
var thirdColor = json.advanced.thirdColor
|
||||
} else {
|
||||
var bottom = primary
|
||||
var thirdColor = subcolor
|
||||
}
|
||||
if (json.props.TheDeskPostbox) {
|
||||
var postbox = json.props.TheDeskPostbox
|
||||
if (json.advanced.forthColor) {
|
||||
var forthColor = json.advanced.forthColor
|
||||
} else {
|
||||
var postbox = primary
|
||||
var forthColor = subcolor
|
||||
if (thirdColor != subcolor) forthColor = thirdColor
|
||||
}
|
||||
if (json.props.TheDeskSubcolor) {
|
||||
var subcolor = json.props.TheDeskSubcolor
|
||||
if (json.advanced.bottom) {
|
||||
var bottom = json.advanced.bottom
|
||||
} 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 + ";" +
|
||||
"--color:" + text + ";--beforehover:" + beforehover + ";--modal:" +
|
||||
modal + ";--subcolor:" + subcolor + ";--box:" + subcolor +
|
||||
";--sidebar:" + bottom + ";--shared:" + emphasized + ";" +
|
||||
"--notfbox:" + secondary + ";--emphasized:" + active + ";--his-data:" +
|
||||
secondary +
|
||||
";--active:" + active + ";--postbox:" + postbox + ";--modalfooter:" +
|
||||
primary +
|
||||
";--accentbtn:" + subcolor + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}"+
|
||||
"--gray:" + gray + ";"+
|
||||
".customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
|
||||
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 = "";
|
||||
}
|
||||
|
||||
})
|
||||
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)
|
||||
return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
})
|
||||
var themes = [];
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
var themecss = join(app.getPath("userData"), fileList[i]);
|
||||
var json = JSON5.parse(fs.readFileSync(themecss, 'utf8'));
|
||||
themes.push({
|
||||
name: json.name,
|
||||
id: json.id
|
||||
})
|
||||
function compatibleTheme(json) {
|
||||
var primary = json.vars.primary;
|
||||
var secondary = json.vars.secondary;
|
||||
var text = json.vars.text;
|
||||
if (json.base == "light") {
|
||||
var drag = "rgba(255, 255, 255, 0.8)";
|
||||
var beforehover = "#757575";
|
||||
var selected = "#3f3f3f"
|
||||
var selectedWithShare = "#b2babd"
|
||||
var gray = "#757575"
|
||||
} else {
|
||||
var drag = "rgba(0, 0, 0, 0.8)";
|
||||
var beforehover = "#9e9e9e";
|
||||
var selected = "#c0c0c0"
|
||||
var selectedWithShare = "#003a30"
|
||||
var gray = "#cccccc"
|
||||
}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
27
app/source/themes/black.thedesktheme
Normal file
27
app/source/themes/black.thedesktheme
Normal 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
27
app/source/themes/blue.thedesktheme
Normal 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
27
app/source/themes/brown.thedesktheme
Normal 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
27
app/source/themes/green.thedesktheme
Normal 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
27
app/source/themes/indigo.thedesktheme
Normal 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
27
app/source/themes/polar.thedesktheme
Normal 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
27
app/source/themes/snow.thedesktheme
Normal 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
27
app/source/themes/white.thedesktheme
Normal 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
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}}",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}}に設定したで。",
|
||||
|
|
|
|||
|
|
@ -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": "説明",
|
||||
|
|
|
|||
|
|
@ -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}}」に設定しました。",
|
||||
|
|
|
|||
|
|
@ -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": "説明",
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -57,8 +57,8 @@
|
|||
style="width:100%; max-width:15rem;">@@export@@</button>
|
||||
<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
|
||||
style="width:100%; max-width:15rem;">@@import@@</button><br>
|
||||
@@backupWarn@@<br>
|
||||
<input type="text" id="imp-exp" style="width: 22rem">
|
||||
@@backupWarn@@<br>
|
||||
<input type="text" id="imp-exp" style="width: 22rem">
|
||||
<div id="envView">
|
||||
<template v-for="(item, i) in config">
|
||||
<h5>{{item.text.head}}</h5>
|
||||
|
|
@ -112,44 +112,6 @@
|
|||
</div>
|
||||
<div class="collapsible-body">
|
||||
<h4>@@themeSel@@</h4>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
|
||||
<span data-ct="black">Black</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
|
||||
<span data-ct="white">White</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
|
||||
value="indigo" />
|
||||
<span data-ct="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
|
||||
<span data-ct="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
|
||||
<span data-ct="green">Green<span class="imas hide">(ユースフルロマンス)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="blue" value="blue" />
|
||||
<span data-ct="blue">Blue<span class="imas hide">(渚の花嫁)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="polar" value="polar" />
|
||||
<span data-ct="polar">Polar Night<span class="imas hide">(ひみつの小夜曲)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="snow" value="snow" />
|
||||
<span data-ct="snow">Snow Storm<span class="imas hide">(極光のしらべ)</span></span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
|
||||
value="custom" />
|
||||
<span data-ct="custom">custom</span>
|
||||
</label>
|
||||
<div style="width:22rem" id="sel-selector">
|
||||
<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
|
||||
</div>
|
||||
|
|
@ -174,74 +136,150 @@
|
|||
<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
|
||||
value="light" />
|
||||
<span>Light</span>
|
||||
</label><br>
|
||||
</label><br><br />
|
||||
<button class="btn waves-effect" onclick="advanced()">@@advanced@@</button>
|
||||
<span class="advanced hide">@@advancedWarn@@</span>
|
||||
<div id="pickers">
|
||||
<div>
|
||||
<h5>Primary</h5>@@secondarycolor@@
|
||||
<div id="color-picker0-wrap">
|
||||
<div class="color-picker" id="color-picker0"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker0_value">
|
||||
<h5>Background</h5>@@bg@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker0_value">
|
||||
</div>
|
||||
<div>
|
||||
<h5>Secondary</h5>@@primary@@
|
||||
<div id="color-picker1-wrap">
|
||||
<div class="color-picker" id="color-picker1"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker1_value">
|
||||
<h5>Text</h5>@@text@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker1_value">
|
||||
</div>
|
||||
<div>
|
||||
<h5>Texts</h5>@@text@@
|
||||
<div id="color-picker2-wrap">
|
||||
<div class="color-picker" id="color-picker2"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker2_value">
|
||||
<h5>Subcolor</h5>@@subcolor@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker2_value">
|
||||
</div>
|
||||
<div>
|
||||
<h5>Accent</h5>@@accent@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker3_value">
|
||||
</div>
|
||||
|
||||
<div class="advanced hide">
|
||||
<h5>Modal</h5>@@modal@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_4" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('background','modal')">Background</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker4_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Accent</h5>@@accent@@
|
||||
<div id="color-picker3-wrap">
|
||||
<div class="color-picker" id="color-picker3"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker3_value">
|
||||
<h5>Modal Footer</h5>@@modalFooter@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_5" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/
|
||||
<a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker5_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Active</h5>@@active@@
|
||||
<div id="color-picker4-wrap">
|
||||
<div class="color-picker" id="color-picker4"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker4_value">
|
||||
<h5>3rd Color</h5>@@thirdColor@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_6" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker6_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Modal</h5>@@modal@@
|
||||
<div id="color-picker5-wrap">
|
||||
<div class="color-picker" id="color-picker5"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker5_value">
|
||||
<h5>4th Color</h5>@@forthColor@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_7" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/
|
||||
<a class="pointer" onclick="copyColor('third','forth')">3rd Color</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker7_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Bottom</h5>@@bottom@@
|
||||
<div id="color-picker6-wrap">
|
||||
<div class="color-picker" id="color-picker6"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker6_value">
|
||||
<h5>Bottom</h5>@@bottom@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_8" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker8_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Postbox</h5>@@postbox@@
|
||||
<div id="color-picker7-wrap">
|
||||
<div class="color-picker" id="color-picker7"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker7_value">
|
||||
<h5>2nd Accent</h5>@@emphasized@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_9" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker9_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Subcolor</h5>@@subcolor@@
|
||||
<div id="color-picker8-wrap">
|
||||
<div class="color-picker" id="color-picker8"></div>
|
||||
</div>
|
||||
<input type="hidden" id="color-picker8_value">
|
||||
<h5>Postbox</h5>@@postbox@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_10" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker10_value">
|
||||
</div>
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Active</h5>@@active@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_11" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
@@copyFrom@@:
|
||||
<a class="pointer" onclick="copyColor('accent','active')">Accent</a>
|
||||
<br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker11_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Selected</h5>@@selected@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_12" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker12_value">
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<h5>Selected with shared</h5>@@selectedWithShare@@<br />
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="use-color_13" value="1" />
|
||||
<span>@@use@@</span>
|
||||
</label><br />
|
||||
<input type="color" class="btn waves-effect" id="color-picker13_value">
|
||||
</div>
|
||||
</div><br /><br />
|
||||
<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button> <button
|
||||
class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
|
||||
<input type="text" style="width:22rem;height:40px;" id="custom_json" class="materialize-textarea"
|
||||
|
|
@ -443,15 +481,15 @@
|
|||
</div>
|
||||
<div class="collapsible-body">
|
||||
<h5>@@bouyomi@@</h5>
|
||||
@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin" target="_blank">GitHub</a><br>
|
||||
@@bouyomiWarn@@<a href="https://github.com/xztaityozx/BouyomiChan-WebSocket-Plugin"
|
||||
target="_blank">GitHub</a><br>
|
||||
<label>
|
||||
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_yes"
|
||||
value="yes" />
|
||||
<span>@@yes@@</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no"
|
||||
value="no" />
|
||||
<input class="with-gap" onchange="voiceSettings()" name="bym" type="radio" id="bym_no" value="no" />
|
||||
<span>@@no@@</span>
|
||||
</label>
|
||||
<h5>@@speed@@</h5>
|
||||
|
|
@ -534,16 +572,19 @@
|
|||
style="width:100%; max-width:40rem;"><img src="../../img/desk_full.svg" class="left" width="25"
|
||||
style="padding-top:5px;">Main author: Cutls@cutls.com</a>
|
||||
<br>
|
||||
TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
|
||||
class="pointer pwa">@@checkup@@</a><br>
|
||||
TheDesk @ <a href="https://github.com/cutls/TheDesk/commits/@@gitHash@@">@@gitHash@@</a> - <a
|
||||
onclick="checkupd(); return localStorage.removeItem('new-ver-skip'); location.href='index.html';"
|
||||
class="pointer pwa">@@checkup@@</a><br>
|
||||
<br>
|
||||
Kyash<br>
|
||||
<img src="../../img/kyash.png" width="100"><br>
|
||||
<a href="https://status.cutls.com/">
|
||||
<img src="https://status.cutls.com/badge-service?site=thedesk.top">
|
||||
</a><br>
|
||||
<h5>OSS License@@ossJP@@</h5>
|
||||
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small"/></a>
|
||||
<a href="https://status.cutls.com/">
|
||||
<img src="https://status.cutls.com/badge-service?site=thedesk.top">
|
||||
</a><br>
|
||||
<h5>OSS License@@ossJP@@</h5>
|
||||
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fcutls%2FTheDesk/refs/branch/master/@@gitHash@@"
|
||||
alt="FOSSA Status"><img
|
||||
src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcutls%2FTheDesk.svg?type=small" /></a>
|
||||
<br>
|
||||
<span style="font-family:Open Sans;">Copyright © TheDesk 2018
|
||||
Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user