parent
2822a2e110
commit
d90b8b0b05
|
|
@ -1,128 +1,132 @@
|
|||
:root {
|
||||
--nav-width: 48px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: var(--nav-width);
|
||||
}
|
||||
|
||||
#navigation > :not(#service-buttons) {
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#service-buttons {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
|
||||
overflow: hidden auto;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
#service-selector {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#service-selector::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#service-selector [draggable] {
|
||||
user-select: none;
|
||||
background-color: rgb(43, 43, 43);
|
||||
user-select: none;
|
||||
background-color: rgb(43, 43, 43);
|
||||
}
|
||||
|
||||
#service-selector [draggable] img {
|
||||
-webkit-user-drag: none;
|
||||
user-drag: none;
|
||||
-webkit-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
#service-selector .drag-target button::after,
|
||||
#service-last-drag-position.drag-target {
|
||||
content: "";
|
||||
height: 4px;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
background: #fff9;
|
||||
content: "";
|
||||
height: 4px;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
background: #fff9;
|
||||
}
|
||||
|
||||
#service-selector .drag-target-self button::after {
|
||||
height: 48px;
|
||||
border: 1px dashed #fff;
|
||||
transform: none;
|
||||
height: var(--nav-width);
|
||||
border: 1px dashed #fff;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#service-selector .drag-target button::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#service-selector .drag-target::after {
|
||||
top: 75% !important;
|
||||
top: 75% !important;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-color: rgb(118, 93, 176);
|
||||
outline-color: rgb(118, 93, 176);
|
||||
}
|
||||
|
||||
#navigation button {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--nav-width);
|
||||
height: var(--nav-width);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#navigation button:focus {
|
||||
outline: none;
|
||||
background: #fff3 !important;
|
||||
outline: none;
|
||||
background: #fff3 !important;
|
||||
}
|
||||
|
||||
#navigation button img {
|
||||
width: 24px;
|
||||
width: calc(var(--nav-width) / 2);
|
||||
}
|
||||
|
||||
#navigation button i {
|
||||
font-size: 24px;
|
||||
font-size: calc(var(--nav-width) / 2);
|
||||
}
|
||||
|
||||
#service-selector li {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#service-selector li button,
|
||||
#navigation > button {
|
||||
border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#service-selector li.active button {
|
||||
background-color: #fff2;
|
||||
background-color: #fff2;
|
||||
}
|
||||
|
||||
#service-selector li.loaded button::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 75%;
|
||||
border-right: 4px solid #ffffff3e;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 75%;
|
||||
border-right: 4px solid #ffffff3e;
|
||||
}
|
||||
|
||||
/*#service-selector li.loaded::after {*/
|
||||
|
|
@ -139,206 +143,206 @@ body {
|
|||
/*}*/
|
||||
|
||||
#navigation button:hover {
|
||||
background-color: #fff3;
|
||||
background-color: #fff3;
|
||||
}
|
||||
|
||||
#history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#history button,
|
||||
#history .status {
|
||||
display: inline;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 2px;
|
||||
padding: initial;
|
||||
font-size: 12px;
|
||||
display: inline;
|
||||
width: calc(var(--nav-width) / 2);
|
||||
height: calc(var(--nav-width) / 2);
|
||||
margin: 2px;
|
||||
padding: initial;
|
||||
font-size: calc(var(--nav-width) / 4);
|
||||
|
||||
background: #fff1;
|
||||
background: #fff1;
|
||||
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#history button i {
|
||||
font-size: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
#history button.disabled {
|
||||
color: #888;
|
||||
border: transparent;
|
||||
background: transparent;
|
||||
cursor: initial;
|
||||
color: #888;
|
||||
border: transparent;
|
||||
background: transparent;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
#history button:focus,
|
||||
#history button:hover {
|
||||
outline: none;
|
||||
border-color: #fff9;
|
||||
outline: none;
|
||||
border-color: #fff9;
|
||||
}
|
||||
|
||||
#history button:hover:not(.disabled) {
|
||||
outline: none;
|
||||
background-color: #fff2;
|
||||
outline: none;
|
||||
background-color: #fff2;
|
||||
}
|
||||
|
||||
#history button:active:not(.disabled) {
|
||||
background-color: #fff4;
|
||||
background-color: #fff4;
|
||||
}
|
||||
|
||||
#history #status {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#history #status .unknown,
|
||||
#history #status .file {
|
||||
color: #888;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#history #status .https {
|
||||
color: #009800;
|
||||
color: #009800;
|
||||
}
|
||||
|
||||
#history #status .http {
|
||||
color: #e20000;
|
||||
color: #e20000;
|
||||
}
|
||||
|
||||
#history #status > :not(.active) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#history #status > * .tip {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
margin-left: 8px;
|
||||
|
||||
background-color: #000;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
text-transform: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
background-color: #000;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
text-transform: none;
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#history #status > * .tip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid transparent;
|
||||
border-top-width: 4px;
|
||||
border-bottom-width: 4px;
|
||||
border-right: 7px solid black;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid transparent;
|
||||
border-top-width: 4px;
|
||||
border-bottom-width: 4px;
|
||||
border-right: 7px solid black;
|
||||
}
|
||||
|
||||
#history #status:focus > * .tip {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#navigation #add-button:not(:hover) {
|
||||
opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#services {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#services > *:not(.loader):not(#url-preview) {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#services > :not(.active):not(.loader):not(#url-preview):not(webview) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#services > webview {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background-color: rgb(43, 43, 43);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background-color: rgb(43, 43, 43);
|
||||
}
|
||||
|
||||
#services > webview.active {
|
||||
z-index: 20;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#services > .loader {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#url-preview {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 2px 5px 1px 5px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 2px 5px 1px 5px;
|
||||
|
||||
max-width: 48%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 48%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-family: monospace;
|
||||
font-family: monospace;
|
||||
|
||||
border-width: 1px 1px 0 0;
|
||||
border-color: #232323;
|
||||
border-style: solid;
|
||||
border-radius: 0 5px 0 0;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-color: #232323;
|
||||
border-style: solid;
|
||||
border-radius: 0 5px 0 0;
|
||||
|
||||
background: #2b2b2b;
|
||||
background: #2b2b2b;
|
||||
|
||||
opacity: 1;
|
||||
transition: 100ms ease opacity;
|
||||
transition-delay: 200ms;
|
||||
opacity: 1;
|
||||
transition: 100ms ease opacity;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
#url-preview.right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
border-width: 1px 0 0 1px;
|
||||
border-radius: 5px 0 0 0;
|
||||
border-width: 1px 0 0 1px;
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
|
||||
#url-preview.hidden {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#services > #empty-message {
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#services > .loader:not(.hidden) ~ #empty-message {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -35,6 +35,12 @@
|
|||
<label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="form-header">Appearance</h2>
|
||||
|
||||
<label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="form-header">History navigation buttons</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -207,6 +207,9 @@ ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUr
|
|||
|
||||
// Other elements
|
||||
serviceSelector = document.getElementById('service-selector');
|
||||
|
||||
// Navbar size
|
||||
document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px');
|
||||
});
|
||||
|
||||
function removeServiceFeatures(id: number): HTMLElement | null {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ let config: any;
|
|||
|
||||
let startMinimizedField: HTMLInputElement | null;
|
||||
|
||||
let bigNavBarField: HTMLInputElement | null;
|
||||
|
||||
let securityButtonField: HTMLInputElement | null,
|
||||
homeButtonField: HTMLInputElement | null,
|
||||
backButtonField: HTMLInputElement | null,
|
||||
|
|
@ -22,6 +24,8 @@ ipcRenderer.on('config', (e, c) => {
|
|||
config = c;
|
||||
if (startMinimizedField) startMinimizedField.checked = config.startMinimized;
|
||||
|
||||
if (bigNavBarField) bigNavBarField.checked = config.bigNavBar;
|
||||
|
||||
if (securityButtonField) securityButtonField.checked = config.securityButton;
|
||||
if (homeButtonField) homeButtonField.checked = config.homeButton;
|
||||
if (backButtonField) backButtonField.checked = config.backButton;
|
||||
|
|
@ -47,6 +51,8 @@ function save() {
|
|||
|
||||
config.startMinimized = formData.get('start-minimized') === 'on';
|
||||
|
||||
config.bigNavBar = formData.get('big-nav-bar') === 'on';
|
||||
|
||||
config.securityButton = formData.get('security-button') === 'on';
|
||||
config.homeButton = formData.get('home-button') === 'on';
|
||||
config.backButton = formData.get('back-button') === 'on';
|
||||
|
|
@ -55,7 +61,7 @@ function save() {
|
|||
|
||||
ipcRenderer.send('save-config', config);
|
||||
remote.getCurrentWindow().close();
|
||||
};
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
currentVersion = document.getElementById('current-version');
|
||||
|
|
@ -68,6 +74,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized');
|
||||
|
||||
bigNavBarField = <HTMLInputElement>document.getElementById('big-nav-bar');
|
||||
|
||||
securityButtonField = <HTMLInputElement>document.getElementById('security-button');
|
||||
homeButtonField = <HTMLInputElement>document.getElementById('home-button');
|
||||
backButtonField = <HTMLInputElement>document.getElementById('back-button');
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ export default class Config {
|
|||
|
||||
public startMinimized: boolean = false;
|
||||
|
||||
public bigNavBar: boolean = false;
|
||||
|
||||
public securityButton: boolean = true;
|
||||
public homeButton: boolean = false;
|
||||
public backButton: boolean = true;
|
||||
|
|
@ -50,6 +52,8 @@ export default class Config {
|
|||
|
||||
this.defineProperty('startMinimized', data);
|
||||
|
||||
this.defineProperty('bigNavBar', data);
|
||||
|
||||
this.defineProperty('securityButton', data);
|
||||
this.defineProperty('homeButton', data);
|
||||
this.defineProperty('backButton', data);
|
||||
|
|
|
|||
Loading…
Reference in New Issue