forked from extern/the-glorious-startpage
Cleanups (#20)
* centedbox css * add font-weight to the css * some cleanup
This commit is contained in:
parent
9e6703134b
commit
84727755db
@ -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%);
|
||||
}
|
@ -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;
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
@ -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 {
|
||||
|
@ -1,5 +1,6 @@
|
||||
.searchEngine {
|
||||
font-family: roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
|
@ -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');
|
||||
|
@ -1,5 +1,6 @@
|
||||
.themeEngine {
|
||||
font-family: roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
.weatherSettings {
|
||||
font-family: roboto, sans-serif;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;;
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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
|
||||
|
@ -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() ||
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user