Cleanups (#20)

* centedbox css

* add font-weight to the css

* some cleanup
This commit is contained in:
Gerome Matilla 2020-06-10 14:47:04 +08:00 committed by GitHub
parent 9e6703134b
commit 84727755db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 36 additions and 22 deletions

View File

@ -1,8 +1,7 @@
#centeredBoxOverlay {
background: transparent;
opacity: 0;
backdrop-filter: blur(0);
filter: brightness(70%);
backdrop-filter: blur(0) brightness(100%);
position: absolute;
top: 0;
@ -21,5 +20,5 @@
#centeredBoxOverlay.showOverlay {
opacity: 1;
z-index: 0;
backdrop-filter: blur(var(--blur-strength))
backdrop-filter: blur(var(--blur-strength)) brightness(70%);
}

View File

@ -2,6 +2,7 @@
color: var(--base-color);
font-size: 11pt;
font-family: roboto-bold, sans-serif;
font-weight: 700;
/*Center lock*/
text-align: center;

View File

@ -1,5 +1,10 @@
@font-face {
font-family: 'fantasque-sans-mono';
font-style: normal;
src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
}
/* roboto-300 - latin */
/*Roboto light*/
@font-face {
font-family: 'roboto-light';
font-style: normal;
@ -12,7 +17,8 @@
url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
/*Roboto normal*/
@font-face {
font-family: 'roboto';
font-style: normal;
@ -26,7 +32,7 @@
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
/*Roboto bold*/
@font-face {
font-family: 'roboto-bold';
font-style: normal;
@ -39,9 +45,3 @@
url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'fantasque-sans-mono';
font-style: normal;
src: url('../fonts/fantasque-sans-mono-bold-italic-nerd-font-complete.ttf');
}

View File

@ -2,6 +2,7 @@
color: var(--base-color);
font-size: 32pt;
font-family: roboto-light, sans-serif;
font-weight: 300;
margin: 5px;
}
@ -9,5 +10,6 @@
color: #f2f2f2;
font-size: 12pt;
font-family: roboto, sans-serif;
font-weight: 400;
margin: 5px;
}

View File

@ -32,6 +32,7 @@
color: var(--base-color);
text-align: center;
font-family: roboto-bold, sans-serif;
font-weight: 700;
border: none;
border-radius: 24px;
@ -41,6 +42,7 @@
#searchBox::placeholder {
font-family: roboto-bold, fantasque-sans-mono, sans-serif;
font-weight: 700;
}
.showSearchBox {

View File

@ -1,5 +1,6 @@
.searchEngine {
font-family: roboto, sans-serif;
font-weight: 400;
width: 100%;
height: auto;
position: relative;;

View File

@ -1,7 +1,7 @@
/*Load all CSS*/
@import url('normalize.css');
@import url('base.css');
@import url('font-face.css');
@import url('normalize.css');
@import url('body-background.css');
@import url('bar.css');
@import url('top-panel.css');

View File

@ -1,5 +1,6 @@
.themeEngine {
font-family: roboto, sans-serif;
font-weight: 400;
width: 100%;
height: auto;
position: relative;;

View File

@ -73,6 +73,7 @@
#weatherTodayLocation {
color: var(--base-color);
font-family: roboto, sans-serif;
font-weight: 400;
font-size: 16pt;
text-align: center;
position: relative;
@ -81,6 +82,7 @@
#weatherTodayDescription {
color: var(--base-color);
font-family: roboto-bold, sans-serif;
font-weight: 700;
font-size: 20pt;
text-align: center;
position: relative;
@ -105,6 +107,7 @@
.hourDataLabel {
color: var(--base-color);
font-family: roboto, sans-serif;
font-weight: 400;
font-size: 14pt;
text-align: center;
}
@ -178,6 +181,7 @@
.weatherForecastDayDate {
color: var(--base-color);
font-family: roboto, sans-serif;
font-weight: 400;
font-size: 11pt;
text-align: center;
}

View File

@ -1,5 +1,6 @@
.weatherSettings {
font-family: roboto, sans-serif;
font-weight: 400;
width: 100%;
height: auto;
position: relative;;

View File

@ -70,6 +70,7 @@
text-align: center;
font-family: roboto-bold, sans-serif;
font-weight: 700;
color: var(--panel-color);
border: none;
@ -82,6 +83,7 @@
#webMenuSearchBox::placeholder {
font-family: roboto-bold, fantasque-sans-mono, sans-serif;
font-weight: 700;
}
@media screen and (max-width: 580px) {
@ -201,6 +203,7 @@
text-align: center;
font-size: 11pt;
font-family: roboto, sans-serif;
font-weight: 400;
word-wrap: break-word;
color: var(--base-color);

View File

@ -17,12 +17,12 @@ class BodyBackground {
_lazyLoadBackground = fileName => {
// Set a low quality background image
this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`);
// Add a class to blur it
this._bodyBackground.classList.add('blurFiltered');
// Set a low quality background image
this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`);
this._hqBackground.onload = () => {
// After downloading the HQ image, set it as bg

View File

@ -75,9 +75,9 @@ class KeyBinding {
return;
}
if (searchBoxVisibility === false) {
if (!searchBoxVisibility) {
// Don't show searchbox when web menu, dashboard
// Don't show searchbox if web menu, dashboard
// and weather screen is open
if (dashboard.getRightDashboardVisibility() ||
webMenu.getwebMenuVisibility() ||

View File

@ -317,6 +317,7 @@ class WebMenu {
const getIndexByWindowWidth = () => {
if (window.innerWidth <= 580) { return 1; }
// width of elements in pixels
const menuItemWidth = 138;
const scrollBarWidth = 10;
@ -373,18 +374,18 @@ class WebMenu {
if (key === down) { return changeItemFocus((this._webListIndex <= len), 0) }
}
changeWebListIndex();
if (this._webItemFocus) {
this._removeClass(this._webItemFocus, 'webItemFocus');
changeItemFocusByKey();
this._addClass(this._webItemFocus, 'webItemFocus');
// console.log(webListIndex);
} else {
this._webListIndex = 0;
this._webItemFocus = this._webMenuList.getElementsByTagName('li')[0];
this._addClass(this._webItemFocus, 'webItemFocus');
}
}
_webMenuKeyDownEvent = e => {
@ -396,7 +397,6 @@ class WebMenu {
this._webMenu.addEventListener('keydown', this._webMenuKeyDownEvent, false);
}
_webMenuSearchBoxKeyDownEvent = e => {
// Don't hijack keyboard navigation buttons (up, down, left, right)