Added dark/light theme option.

This commit is contained in:
Jared Goodwin 2019-12-10 10:28:03 -08:00
parent 3d7cfcdf90
commit 995f1cf22a
15 changed files with 502 additions and 64 deletions

View File

@ -9,8 +9,8 @@
<div class="text-info col-sm-12 pl-0 mb-2">
Instant desktop sharing. No account required.
</div>
<div class="col-sm-6">
<h6 class="font-weight-bold">Windows (64/32-Bit)</h6>
<div class="col-sm-6 mb-3">
<h6>Windows (64/32-Bit)</h6>
<p>
<strong>Download:</strong>
<br />
@ -18,15 +18,15 @@
</p>
</div>
@*<div class="col-sm-6">
<h6 class="font-weight-bold">Windows (32-Bit)</h6>
<h6>Windows (32-Bit)</h6>
<p>
<strong>Download:</strong>
<br />
<a href="~/Downloads/Remotely_Desktop_Installer_x86.msi">Windows Installer</a>
</p>
</div>*@
<div class="col-sm-6">
<h6 class="font-weight-bold">Linux 64-Bit</h6>
<div class="col-sm-6 mb-3">
<h6>Linux 64-Bit</h6>
<p>
<strong>Download:</strong>
<br />
@ -42,8 +42,8 @@
</div>
@if (User.Identity.IsAuthenticated)
{
<div class="col-sm-6">
<h6 class="font-weight-bold">Windows 10 64-Bit</h6>
<div class="col-sm-6 mb-3">
<h6>Windows 10 64-Bit</h6>
<p>
<strong>Download:</strong>
<br />
@ -70,8 +70,8 @@
</p>
</div>
<div class="col-sm-6 ">
<h6 class="font-weight-bold">Windows 10 32-Bit</h6>
<div class="col-sm-6 mb-3">
<h6>Windows 10 32-Bit</h6>
<p>
<strong>Download:</strong>
<br />
@ -96,8 +96,8 @@
<span class="label label-default code">powershell -f [path]\Install-Win10-x86.ps1 -uninstall</span>
</p>
</div>
<div class="col-sm-6 ">
<h6 class="font-weight-bold">Linux 64-Bit</h6>
<div class="col-sm-6 mb-3">
<h6>Linux 64-Bit</h6>
<p>
<strong>Download:</strong>
<br />
@ -125,8 +125,8 @@
}
else
{
<div class="col-sm-6 ">
<h6 class="font-weight-bold">Resident clients are available after logging in.</h6>
<div class="col-sm-6 mb-3">
<h6>Resident clients are available after logging in.</h6>
</div>
}

View File

@ -1,4 +1,5 @@
@page
@inject Remotely.Server.Services.ApplicationConfig AppConfig
@model Remotely.Server.Pages.RemoteControlModel
@{
Layout = null;
@ -17,7 +18,14 @@
<link href="~/manifest-rc.json" rel="manifest" />
<meta name="description" content="Remote access tools designed to get things done quickly." />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link href="~/css/remote-control.css" rel="stylesheet" asp-append-version="true" />
@if (AppConfig.Theme == "Light")
{
<link href="~/css/remote-control-light.css" rel="stylesheet" asp-append-version="true" />
}
else
{
<link href="~/css/remote-control-dark.css" rel="stylesheet" asp-append-version="true" />
}
<link href="~/lib/fontawesome/css/all.min.css" rel="stylesheet" />
<environment include="Development">

View File

@ -1,4 +1,5 @@
<!DOCTYPE html>
@inject Remotely.Server.Services.ApplicationConfig AppConfig;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
@ -12,8 +13,17 @@
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/fontawesome/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/Themes/cyborg.min.css" />
<link rel="stylesheet" href="~/css/Themes/cyborg.custom.css" asp-append-version="true" />
@if (AppConfig.Theme == "Light")
{
<link rel="stylesheet" href="~/css/Themes/yeti.min.css" />
<link rel="stylesheet" href="~/css/Themes/yeti.custom.css" asp-append-version="true" />
}
else
{
<link rel="stylesheet" href="~/css/Themes/cyborg.min.css" />
<link rel="stylesheet" href="~/css/Themes/cyborg.custom.css" asp-append-version="true" />
}
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>

View File

@ -14,28 +14,27 @@ namespace Remotely.Server.Services
{
Config = config;
}
public string DefaultPrompt => Config["ApplicationOptions:DefaultPrompt"];
public string DBProvider => Config["ApplicationOptions:DBProvider"];
public bool EnableWindowsEventLog => bool.Parse(Config["ApplicationOptions:EnableWindowsEventLog"]);
public bool AllowApiLogin => bool.Parse(Config["ApplicationOptions:AllowApiLogin"]);
public bool AllowSelfRegistration => bool.Parse(Config["ApplicationOptions:AllowSelfRegistration"]);
public double DataRetentionInDays => double.Parse(Config["ApplicationOptions:DataRetentionInDays"]);
public bool RemoteControlRequiresAuthentication => bool.Parse(Config["ApplicationOptions:RemoteControlRequiresAuthentication"]);
public double RemoteControlSessionLimit => double.Parse(Config["ApplicationOptions:RemoteControlSessionLimit"]);
public string DBProvider => Config["ApplicationOptions:DBProvider"];
public string DefaultPrompt => Config["ApplicationOptions:DefaultPrompt"];
public bool EnableWindowsEventLog => bool.Parse(Config["ApplicationOptions:EnableWindowsEventLog"]);
public string[] KnownProxies => Config.GetSection("ApplicationOptions:KnownProxies").Get<string[]>();
public bool RecordRemoteControlSessions => bool.Parse(Config["ApplicationOptions:RecordRemoteControlSessions"]);
public bool RedirectToHTTPS => bool.Parse(Config["ApplicationOptions:RedirectToHTTPS"]);
public bool AllowApiLogin => bool.Parse(Config["ApplicationOptions:AllowApiLogin"]);
public bool UseHSTS => bool.Parse(Config["ApplicationOptions:RedirectToHTTPS"]);
public string[] TrustedCorsOrigins => Config.GetSection("ApplicationOptions:TrustedCorsOrigins").Get<string[]>();
public string[] KnownProxies => Config.GetSection("ApplicationOptions:KnownProxies").Get<string[]>();
public bool RemoteControlRequiresAuthentication => bool.Parse(Config["ApplicationOptions:RemoteControlRequiresAuthentication"]);
public double RemoteControlSessionLimit => double.Parse(Config["ApplicationOptions:RemoteControlSessionLimit"]);
public string SmtpDisplayName => Config["ApplicationOptions:SmtpDisplayName"];
public string SmtpEmail => Config["ApplicationOptions:SmtpEmail"];
public bool SmtpEnableSsl => bool.Parse(Config["ApplicationOptions:SmtpEnableSsl"]);
public string SmtpHost => Config["ApplicationOptions:SmtpHost"];
public string SmtpPassword => Config["ApplicationOptions:SmtpPassword"];
public int SmtpPort => int.Parse(Config["ApplicationOptions:SmtpPort"]);
public string SmtpUserName => Config["ApplicationOptions:SmtpUserName"];
public string SmtpPassword => Config["ApplicationOptions:SmtpPassword"];
public string SmtpEmail => Config["ApplicationOptions:SmtpEmail"];
public string SmtpDisplayName => Config["ApplicationOptions:SmtpDisplayName"];
public bool SmtpEnableSsl => bool.Parse(Config["ApplicationOptions:SmtpEnableSsl"]);
public string Theme => Config["ApplicationOptions:Theme"];
public string[] TrustedCorsOrigins => Config.GetSection("ApplicationOptions:TrustedCorsOrigins").Get<string[]>();
public bool UseHSTS => bool.Parse(Config["ApplicationOptions:RedirectToHTTPS"]);
private IConfiguration Config { get; set; }
}
}

View File

@ -10,25 +10,26 @@
}
},
"ApplicationOptions": {
"DefaultPrompt": "~>",
"DBProvider": "SQLite",
"EnableWindowsEventLog": false,
"AllowApiLogin": false,
"AllowSelfRegistration": true,
"DataRetentionInDays": 90,
"DBProvider": "SQLite",
"DefaultPrompt": "~>",
"EnableWindowsEventLog": false,
"KnownProxies": [],
"RecordRemoteControlSessions": false,
"RedirectToHTTPS": false,
"UseHSTS": false,
"DataRetentionInDays": 90,
"RemoteControlSessionLimit": 1,
"RemoteControlRequiresAuthentication": true,
"AllowApiLogin": false,
"TrustedCorsOrigins": [],
"KnownProxies": [],
"UseHSTS": false,
"SmtpHost": "",
"SmtpPort": 25,
"SmtpUserName": "",
"SmtpPassword": "",
"SmtpEmail": "",
"SmtpDisplayName": "",
"SmtpEnableSsl": true
"SmtpEnableSsl": true,
"TrustedCorsOrigins": [],
"Theme": "Dark"
}
}

View File

@ -23,6 +23,15 @@ table, .table {
color: #fff;
}
.table tbody tr td {
font-size: .9em;
}
.logo-subtitle {
font-size: .5em;
}
.navbar .navbar-header .navbar-brand {

View File

@ -0,0 +1,116 @@
body {
}
nav.navbar.navbar-dark.bg-dark {
background-color: #008cba !important
}
hr {
border-top: 1px solid #282828;
}
.console-prompt {
color: slategray;
}
.console-output {
color: forestgreen;
}
table, .table {
color: #303030;
}
.table tbody tr td {
padding: .5rem;
font-size: 14px;
}
.navbar .navbar-header .navbar-brand {
color: white;
}
.navbar .btn {
font-size: unset !important;
}
button.navbar-toggler:hover {
background-color: rgb(100,100,100);
transition: .2s background-color ease;
}
.logo-subtitle {
color: lightgray;
font-weight: 400;
font-size: .7em;
}
.table-hover > tbody > .record-row.row-selected {
color: #008cba;
}
#consoleStatusDiv select {
background-color: transparent;
}
.console-status-value {
color: #008cba;
}
#qrCode img {
border-color: white;
}
.help-wrapper {
color: rgb(20,20,20);
}
.extended-help {
color: gray;
}
.console-input-prompt {
color: slategray;
}
.console-input-prompt select {
background-color: transparent;
}
.console-block textarea {
background-color: transparent;
color: rgb(20,20,20);
}
.echo-input {
color:gray;
}
.device-tag {
color: black;
}
#commandCompletionDiv {
color: rgb(20,20,20);
background-color: whitesmoke;
}
#commandInfoDiv {
color: rgb(20,20,20);
background-color: whitesmoke;
}
.command-completion-item.selected {
background-color: rgba(20,20,20,0.2);
}
.command-completion-item:hover {
background-color: rgba(20,20,20,0.2);
}
.command-harness-title {
color: rgb(20,20,20);
}
.fa-check-circle {
color: forestgreen;
}
.fa-times {
color: red;
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,293 @@
body {
background-color: rgb(225,225,225);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: rgb(25,25,25);
margin: 0;
padding: 0;
}
button {
cursor: pointer;
/*background-color: #008cba;*/
background-color: #017ea7;
color: white;
border-radius: 5px;
border: none;
}
button:hover {
background-color: #7dc7e0;
}
button:active {
background-color: #95d5ea;
}
button.toggled {
background-color: #60d8ff;
}
button[disabled] {
background-color: rgb(90,90,90);
color: gray;
}
.center-aligned {
text-align: center;
}
.option-button {
position: relative;
height: 40px;
margin: 5px 0;
width: 90%;
}
.horizontal-bar-button {
height: 35px;
margin: 5px;
}
.menu-options-header {
text-align: center;
color: lightgray;
margin: 20px 0 5px 0;
font-family: monospace;
font-size: .9em;
}
#menuButton {
position: absolute;
top: 50%;
left: 0;
color: gray;
transform: translateY(-50%);
background-color: rgb(50,50,50);
font-size: 1.5em;
padding: 20px 5px;
border-radius: 0 3px 3px 0;
pointer-events: all;
cursor: pointer;
z-index: 3;
transition: .5s ease left;
}
#menuButton:hover {
color: white;
}
#menuButton:focus {
outline: none;
}
#menuButton.open {
left: 150px;
transform: translateY(-50%) rotateY(180deg);
border-radius: 3px 0 0 3px;
transition: .5s ease left;
}
#menuFrame {
position: absolute;
color: white;
left: 0;
top: 0;
height: 100%;
background-color: rgb(50,50,50);
width: 0;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
opacity: 0;
z-index: 3;
transition: .5s ease all;
}
#menuFrame.open {
width: 150px;
opacity: 1;
transition: .5s ease all;
}
.horizontal-button-bar {
position: fixed;
background-color: rgb(90, 90, 90);
height: 0;
padding: 0;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
transition: all 250ms;
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.horizontal-button-bar.open {
height: auto;
min-height: 40px;
padding: 10px;
transition: all 250ms;
}
#screenViewer {
max-width: 99vw;
max-height: 99vh;
z-index: 1;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
#connectBox {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
border-radius: 5px;
background-color: rgb(60, 60, 60);
width: 300px;
color: white;
z-index: 2;
padding: 0 20px 20px 20px;
}
#connectBox button {
height: 30px;
}
#connectBox input {
width: 100%;
}
.remotely-header {
position: fixed;
top: 15px;
left: 15px;
animation: fadeout 3s ease 2s forwards;
z-index: -1;
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: .1;
}
}
.logo-subtitle {
font-size: .6em;
color: steelblue;
}
.logo-title {
font-size: 18px;
color: rgb(20,20,20);
}
footer {
position: fixed;
bottom: 0;
width: 100vw;
text-align: center;
pointer-events: none;
z-index: -1;
}
footer a {
color: deepskyblue;
}
.footer-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: .9em;
}
.right-aligned {
text-align: right;
}
.form-block {
margin-bottom: 10px;
}
.status-message {
color: deepskyblue;
font-size: .9em;
}
.float-message {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0);
padding: 10px;
font-size: 1.25em;
font-weight: bold;
background-color: rgba(0, 0, 0, .75);
opacity: 1;
color: white;
z-index: 4;
border-radius: 5px;
user-select: none;
pointer-events: none;
animation-name: float-message;
animation-delay: 2s;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}
@keyframes float-message {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-50%, calc(-100% - 25px));
}
}
.modal-prompt {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: rgb(60, 60, 60);
border: 2px solid white;
border-radius: 5px;
box-shadow: 10px 10px 5px rgba(50,50,50,0.9);
z-index: 3;
min-height: 100px;
color: white;
}
.modal-prompt input {
margin-top: 15px;
width: 100%;
}
.buttons-footer {
text-align: right;
margin-top: 10px
}
.buttons-footer button {
height: 30px;
width: 60px;
margin-left: 10px;
}
#touchKeyboardTextArea {
position: fixed;
top: -100%;
}

View File

@ -20,10 +20,6 @@ h6 {
}
.logo-subtitle {
font-size: .5em;
}
.login-frame {
display: inline-block;
margin-bottom: 150px;
@ -65,9 +61,9 @@ h6 {
.record-row {
cursor: pointer;
}
.table tbody tr td {
padding: .5rem;
font-size: .9em;
}

View File

@ -23,25 +23,27 @@
"msgpack5": "^4.0.2"
}
},
"@types/bootstrap": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-n7Zv7Y+C98Yv4oqbyqGn3alCvNRCya2xMYzOdVEnmnFlu04MXQk1ntVrBhXzDkiwhZZYNkNfBZn2yhTnEh/mHQ==",
"requires": {
"@types/jquery": "*",
"popper.js": "^1.14.1"
}
},
"@types/jquery": {
"version": "3.3.31",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.31.tgz",
"integrity": "sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/node": {
"version": "12.12.14",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.14.tgz",
"integrity": "sha512-u/SJDyXwuihpwjXy7hOOghagLEV1KdAST6syfnOk6QZAMzZuWZqXy5aYYZbh8Jdpd4escVFP0MvftHNDb9pruA=="
},
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
"dev": true
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
},
"ajv": {
"version": "6.10.2",
@ -312,6 +314,11 @@
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
},
"popper.js": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
"integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

View File

@ -2,13 +2,11 @@
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@types/jquery": "^3.3.31"
},
"dependencies": {
"@microsoft/signalr": "^3.1.0",
"@microsoft/signalr-protocol-msgpack": "^3.1.0",
"@types/node": "^12.12.14",
"@types/bootstrap": "^4.3.1",
"@types/jquery": "^3.3.31",
"msgpack5": "^4.2.1"
}
}

View File

@ -122,7 +122,7 @@ export function ShowModal(title: string, modalBodyHtml: string, buttonsHTML: str
(ev.currentTarget as HTMLElement).parentElement.remove();
}
});
$("#" + modalID)["modal"]();
$("#" + modalID).modal("show");
return wrapperDiv;
};

View File

@ -5,8 +5,9 @@
"removeComments": false,
"sourceMap": true,
"target": "es2017",
"module": "es2015",
"allowJs": false
"module": "ESNext",
"allowJs": false,
"moduleResolution": "node"
},
"exclude": [
"node_modules",