Add dark theme for main desktop client window
Signed-off-by: Chris Cavalluzzi <chriscavalluzzi@gmail.com>
This commit is contained in:
Chris Cavalluzzi
parent
eb71b6ad79
commit
a5d4cad5b7
@ -471,7 +471,7 @@ class SessionList: Reactor.Component {
|
||||
}
|
||||
}
|
||||
msgbox("custom-rename", "Rename", "<div .form> \
|
||||
<div><input name='name' .outline-focus style='width: *; height: 23px', value='" + old_name + "' /></div> \
|
||||
<div><input|text name='name' .outline-focus style='width: *; height: 23px', value='" + old_name + "' /></div> \
|
||||
</div> \
|
||||
", function(res=null) {
|
||||
if (!res) return;
|
||||
|
||||
@ -9,6 +9,7 @@ html {
|
||||
var(placeholder): #aaa;
|
||||
var(lighter-text): #888;
|
||||
var(light-text): #666;
|
||||
var(menu-hover): #D7E4F2;
|
||||
var(dark-red): #A72145;
|
||||
var(dark-yellow): #FBC732;
|
||||
var(dark-blue): #2E2459;
|
||||
@ -20,6 +21,18 @@ html {
|
||||
var(blood-red): #F82600;
|
||||
}
|
||||
|
||||
html.darktheme {
|
||||
var(bg): #252525;
|
||||
var(gray-bg): #141414;
|
||||
var(menu-hover): #2D3033;
|
||||
var(border): #555;
|
||||
|
||||
var(text): white;
|
||||
var(light-text): #999;
|
||||
var(lighter-text): #777;
|
||||
var(placeholder): #555;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: color(text);
|
||||
@ -62,8 +75,9 @@ input[type=text], input[type=password], input[type=number] {
|
||||
font-size: 1.5em;
|
||||
border-color: color(border);
|
||||
border-radius: 0;
|
||||
color: black;
|
||||
color: color(text);
|
||||
padding-left: 0.5em;
|
||||
background: color(bg);
|
||||
}
|
||||
|
||||
input:empty {
|
||||
@ -74,6 +88,15 @@ input.outline-focus:focus {
|
||||
outline: color(button) solid 3px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: color(bg);
|
||||
color: color(text);
|
||||
}
|
||||
|
||||
textarea:empty {
|
||||
color: color(placeholder);
|
||||
}
|
||||
|
||||
@set my-scrollbar
|
||||
{
|
||||
.prev { display:none; }
|
||||
@ -287,6 +310,10 @@ progress {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
menu {
|
||||
background: color(bg);
|
||||
}
|
||||
|
||||
menu div.separator {
|
||||
height: 1px;
|
||||
width: *;
|
||||
@ -296,6 +323,7 @@ menu div.separator {
|
||||
}
|
||||
|
||||
menu li {
|
||||
color: color(text);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -319,7 +347,12 @@ menu li.selected span:nth-child(1) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
menu li.line-through {
|
||||
menu li:hover {
|
||||
background: color(menu-hover);
|
||||
color: color(text);
|
||||
}
|
||||
|
||||
menu li.line-through, menu li.line-through :hover {
|
||||
text-decoration-line: line-through;
|
||||
color: red;
|
||||
}
|
||||
@ -366,7 +399,7 @@ div#msgbox .caption {
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: color(bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -80,8 +80,8 @@ div.sessions-tab svg {
|
||||
div.sessions-tab span.active {
|
||||
cursor: default;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
color: black;
|
||||
background: color(bg);
|
||||
color: color(text);
|
||||
}
|
||||
|
||||
div.search-id {
|
||||
@ -256,7 +256,7 @@ div.remote-session .platform svg {
|
||||
}
|
||||
|
||||
div.remote-session-list {
|
||||
background: white;
|
||||
background: color(bg);
|
||||
width: 220px;
|
||||
flow: horizontal;
|
||||
}
|
||||
@ -290,7 +290,7 @@ div.remote-session-list .name .username {
|
||||
}
|
||||
|
||||
div.remote-session .text {
|
||||
background: white;
|
||||
background: color(bg);
|
||||
position: absolute;
|
||||
height: 3em;
|
||||
width: 100%;
|
||||
@ -318,13 +318,13 @@ svg#menu {
|
||||
}
|
||||
|
||||
svg#menu:hover {
|
||||
color: black;
|
||||
color: color(text);
|
||||
border-radius: 1em;
|
||||
background: color(gray-bg);
|
||||
}
|
||||
|
||||
svg#edit:hover {
|
||||
color: black;
|
||||
color: color(text);
|
||||
}
|
||||
|
||||
svg#edit {
|
||||
@ -401,4 +401,5 @@ div.remote-session svg#menu {
|
||||
border-color: white;
|
||||
border: 1px;
|
||||
background: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -172,6 +172,17 @@ function getUserName() {
|
||||
return '';
|
||||
}
|
||||
|
||||
function updateTheme() {
|
||||
var root_element = self;
|
||||
if (handler.get_option("allow-darktheme") == "Y") {
|
||||
// enable dark theme
|
||||
root_element.attributes.toggleClass("darktheme", true);
|
||||
} else {
|
||||
// disable dark theme
|
||||
root_element.attributes.toggleClass("darktheme", false);
|
||||
}
|
||||
}
|
||||
|
||||
class MyIdMenu: Reactor.Component {
|
||||
function this() {
|
||||
myIdMenu = this;
|
||||
@ -210,6 +221,8 @@ class MyIdMenu: Reactor.Component {
|
||||
<li #login>{translate('Login')}</li>}
|
||||
{handler.is_ok_change_id() && key_confirmed ? <li #change-id>{translate('Change ID')}</li> : ""}
|
||||
<div .separator />
|
||||
<li #allow-darktheme><span>{svg_checkmark}</span>{translate('Dark Theme')}</li>
|
||||
<div .separator />
|
||||
<li #about>{translate('About')} {" "}{handler.get_app_name()}</li>
|
||||
</menu>
|
||||
</popup>;
|
||||
@ -303,10 +316,10 @@ class MyIdMenu: Reactor.Component {
|
||||
var old_id = configOptions["custom-rendezvous-server"] || "";
|
||||
var old_key = configOptions["key"] || "";
|
||||
msgbox("custom-server", "ID/Relay Server", "<div .form .set-password> \
|
||||
<div><span>" + translate("ID Server") + ": </span><input .outline-focus name='id' value='" + old_id + "' /></div> \
|
||||
<div><span>" + translate("Relay Server") + ": </span><input name='relay' value='" + old_relay + "' /></div> \
|
||||
<div><span>" + translate("API Server") + ": </span><input name='api' value='" + old_api + "' /></div> \
|
||||
<div><span>" + translate("Key") + ": </span><input name='key' value='" + old_key + "' /></div> \
|
||||
<div><span>" + translate("ID Server") + ": </span><input|text .outline-focus name='id' value='" + old_id + "' /></div> \
|
||||
<div><span>" + translate("Relay Server") + ": </span><input|text name='relay' value='" + old_relay + "' /></div> \
|
||||
<div><span>" + translate("API Server") + ": </span><input|text name='api' value='" + old_api + "' /></div> \
|
||||
<div><span>" + translate("Key") + ": </span><input|text name='key' value='" + old_key + "' /></div> \
|
||||
</div> \
|
||||
", function(res=null) {
|
||||
if (!res) return;
|
||||
@ -340,8 +353,8 @@ class MyIdMenu: Reactor.Component {
|
||||
var old_username = socks5[1] || "";
|
||||
var old_password = socks5[2] || "";
|
||||
msgbox("custom-server", "Socks5 Proxy", <div .form .set-password>
|
||||
<div><span>{translate("Hostname")}:</span><input .outline-focus name='proxy' value={old_proxy} /></div>
|
||||
<div><span>{translate("Username")}:</span><input name='username' value={old_username} /></div>
|
||||
<div><span>{translate("Hostname")}:</span><input|text .outline-focus name='proxy' value={old_proxy} /></div>
|
||||
<div><span>{translate("Username")}:</span><input|text name='username' value={old_username} /></div>
|
||||
<div><span>{translate("Password")}:</span><PasswordComponent value={old_password} /></div>
|
||||
</div>
|
||||
, function(res=null) {
|
||||
@ -361,9 +374,9 @@ class MyIdMenu: Reactor.Component {
|
||||
} else if (me.id == "stop-rendezvous-service") {
|
||||
handler.set_option("stop-rendezvous-service", rendezvous_service_stopped ? "" : "Y");
|
||||
} else if (me.id == "change-id") {
|
||||
msgbox("custom-id", translate("Change ID"), "<div .form> \
|
||||
msgbox("custom-id", translate("Change ID"), "<div .form .set-password> \
|
||||
<div>" + translate('id_change_tip') + " </div> \
|
||||
<div><span style='width: 100px; display:inline-block'>ID: </span><input .outline-focus style='width: 250px' name='id' /></div> \
|
||||
<div><span style='width: 100px; display:inline-block'>ID: </span><input|text .outline-focus style='width: 250px' name='id' /></div> \
|
||||
</div> \
|
||||
", function(res=null, show_progress) {
|
||||
if (!res) return;
|
||||
@ -383,6 +396,8 @@ class MyIdMenu: Reactor.Component {
|
||||
check_status();
|
||||
return " ";
|
||||
});
|
||||
} else if (me.id == "allow-darktheme") {
|
||||
updateTheme();
|
||||
} else if (me.id == "about") {
|
||||
this.showAbout()
|
||||
}
|
||||
@ -867,6 +882,7 @@ function self.ready() {
|
||||
view.focus = $(#remote_id);
|
||||
}
|
||||
refreshCurrentUser();
|
||||
updateTheme();
|
||||
}
|
||||
|
||||
function showAbout() {
|
||||
|
||||
@ -106,7 +106,7 @@ class MsgboxComponent: Reactor.Component {
|
||||
self.timer(3ms, msgboxTimerFunc);
|
||||
return (<div><div style="position: absolute; size:*; background:black; opacity:0.5;" />
|
||||
<div style="size: *; position: absolute;">
|
||||
<div style={"border: " + color + " solid 1px; background: white; margin: *; width:" + (this.width) + "px; min-height:" + (this.height) + "px"}>
|
||||
<div style={"border: " + color + " solid 1px; background: color(bg); margin: *; width:" + (this.width) + "px; min-height:" + (this.height) + "px"}>
|
||||
<div .caption style={"background: " + color}>
|
||||
{translate(this.title)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user