From c59d1ec0ec884eaa284f48fe9d3eeb4dc175237f Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Tue, 16 Jun 2020 13:00:55 +0800 Subject: [PATCH] Css (#26) * add screens css * separate dir for screens * separate dir for dashboard and settings * separate dir for centeredbox and its contents * move autosuggestion to centeredbox dir * rename webmenu to webmenuscreen * fix bugs and errors caused by renaming webmenu * fix missing dashboard icons * fix missing weather forecast icons * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * combine bars and panels * bars css cleanup * dashboard missing icon fix and css * decrease the usage of !important * decrease the usage of important --- css/bar.css | 5 - css/bars/bar.css | 13 ++ css/{ => bars}/clock.css | 8 - css/{ => bars}/dock-buttons.css | 38 ++-- css/bars/dock.css | 184 ++++++++++++++++++ css/{ => bars}/top-panel.css | 1 - css/{ => base}/base.css | 17 +- css/{ => base}/dummy-body-background.css | 0 css/{ => base}/font-face.css | 0 css/{ => base}/normalize.css | 0 css/{ => centeredbox}/auto-suggestion.css | 12 +- .../centered-box-overlay.css | 0 css/{ => centeredbox}/centered-box.css | 6 +- css/{ => centeredbox}/profile-image.css | 2 +- css/{ => centeredbox}/search-box.css | 19 +- css/{ => dashboard}/dashboard.css | 39 ++-- css/{ => dashboard}/greeter-date-message.css | 17 +- .../search-engine-settings.css | 27 +-- css/{ => dashboard}/theme-engine.css | 15 +- css/{ => dashboard}/weather-settings.css | 35 ++-- css/dock.css | 184 ------------------ css/screens/screens.css | 25 +++ css/{ => screens}/weather-screen.css | 50 ++--- css/{ => screens}/web-menu.css | 37 +--- css/style.css | 51 +++-- index.html | 12 +- js/dashboard.js | 2 +- js/mobile-swipe-callback.js | 2 +- js/weather-screen.js | 2 +- js/web-menu.js | 10 +- 30 files changed, 391 insertions(+), 422 deletions(-) delete mode 100644 css/bar.css create mode 100644 css/bars/bar.css rename css/{ => bars}/clock.css (54%) rename css/{ => bars}/dock-buttons.css (99%) create mode 100644 css/bars/dock.css rename css/{ => bars}/top-panel.css (68%) rename css/{ => base}/base.css (79%) rename css/{ => base}/dummy-body-background.css (100%) rename css/{ => base}/font-face.css (100%) rename css/{ => base}/normalize.css (100%) rename css/{ => centeredbox}/auto-suggestion.css (91%) rename css/{ => centeredbox}/centered-box-overlay.css (100%) rename css/{ => centeredbox}/centered-box.css (85%) rename css/{ => centeredbox}/profile-image.css (94%) rename css/{ => centeredbox}/search-box.css (79%) rename css/{ => dashboard}/dashboard.css (66%) rename css/{ => dashboard}/greeter-date-message.css (70%) rename css/{ => dashboard}/search-engine-settings.css (77%) rename css/{ => dashboard}/theme-engine.css (90%) rename css/{ => dashboard}/weather-settings.css (77%) delete mode 100644 css/dock.css create mode 100644 css/screens/screens.css rename css/{ => screens}/weather-screen.css (77%) rename css/{ => screens}/web-menu.css (86%) diff --git a/css/bar.css b/css/bar.css deleted file mode 100644 index bb74cad..0000000 --- a/css/bar.css +++ /dev/null @@ -1,5 +0,0 @@ -.bar { - background: var(--panel-bg); - backdrop-filter: blur(var(--blur-strength)); - z-index: 5; -} \ No newline at end of file diff --git a/css/bars/bar.css b/css/bars/bar.css new file mode 100644 index 0000000..31ccfc5 --- /dev/null +++ b/css/bars/bar.css @@ -0,0 +1,13 @@ +.bar { + background: var(--panel-bg); + backdrop-filter: blur(var(--blur-strength)); + z-index: 5; + + /*Make clock unselectable*/ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} \ No newline at end of file diff --git a/css/clock.css b/css/bars/clock.css similarity index 54% rename from css/clock.css rename to css/bars/clock.css index 19dd104..02a970c 100644 --- a/css/clock.css +++ b/css/bars/clock.css @@ -9,12 +9,4 @@ position: relative; top: 50%; transform: translateY(-50%); - - /*Make clock unselectable*/ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } \ No newline at end of file diff --git a/css/dock-buttons.css b/css/bars/dock-buttons.css similarity index 99% rename from css/dock-buttons.css rename to css/bars/dock-buttons.css index f74eaca..1a622ea 100644 --- a/css/dock-buttons.css +++ b/css/bars/dock-buttons.css @@ -1,9 +1,9 @@ /*Dock buttons*/ .dockButton { + background: var(--base-container); width: 36px; height: 36px; position: relative; - background: var(--base-container); border-radius: var(--rounded-radius); margin: 2px; padding: 5px; @@ -12,6 +12,23 @@ transition: transform .2s; } +/*The a href container/main dock button container*/ +.dockLink { + /*Act as div*/ + display: block; + + /*Remove outlines*/ + text-decoration: none; + outline: 0; + border: none; + -moz-outline-style: none; + + /*Disable dragging*/ + user-select: none; + user-drag: none; + -webkit-user-drag: none; +} + .dockButton div { background-size: cover; width: 36px; @@ -48,21 +65,4 @@ .dockButtonImage { background-size: 'cover'; -} - -/*The a href container/main dock button container*/ -.dockLink { - /*Act as div*/ - display: block; - - /*Remove outlines*/ - text-decoration: none; - outline: 0; - border: none; - -moz-outline-style: none; - - /*Disable dragging*/ - user-select: none; - user-drag: none; - -webkit-user-drag: none; -} +} \ No newline at end of file diff --git a/css/bars/dock.css b/css/bars/dock.css new file mode 100644 index 0000000..6f24837 --- /dev/null +++ b/css/bars/dock.css @@ -0,0 +1,184 @@ +.dockContainer { + background: transparent; + position: absolute; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); +} + +#dock { + background: var(--panel-bg); + border-radius: var(--rounded-radius); + + display: flex; + position: relative; + height: auto; + width: auto; + + padding: 5px; + margin: 10px; + + transition: transform var(--transition-speed); + z-index: 1; +} + +/*Translate dock to left side if width <= 470 and height >= 540*/ +@media screen and (max-width: 470px) and (min-height: 490px) { + + .dockContainer { + display: inline-block; + opacity: 1; + + position: relative; + margin:0 auto; + + top: 50%; + left: 0; + bottom: 0; + right: 0; + + -webkit-transform: translateY(-50%); + transition: opacity var(--transition-speed); + } + + #dock { + display: inline-block; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.90); + transition: transform var(--transition-speed); + } +} + + +/*Decrease scale to 0.85 if width is less than 470px*/ +@media screen and (max-width: 469px) and (max-height: 489px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.85); + transition: transform var(--transition-speed); + } + +} + + +/*Decrease scale to 0.75 if width is less than 380px*/ +@media screen and (max-width: 380px) and (max-height: 489px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.75); + transition: transform var(--transition-speed); + } + +} + +/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/ +@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + margin: 5px; + transform: scale(0.70); + transition: transform var(--transition-speed); + } +} + + +/*Scale to 0 if less than 320px*/ +@media screen and (max-width: 319px) and (max-height: 489px) { + + .dockContainer { + position: absolute; + background: transparent; + z-index: 5; + margin: 0 auto; + bottom: 0; + + /*On bottom, center horizontally*/ + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); + + /*Add transition*/ + transition: opacity var(--transition-speed); + } + + #dock { + display: flex; + width: auto; + height: auto; + opacity: 0; + margin: 5px; + transform: scale(0.0); + transition: transform var(--transition-speed), + opacity var(--transition-speed); + } + +} \ No newline at end of file diff --git a/css/top-panel.css b/css/bars/top-panel.css similarity index 68% rename from css/top-panel.css rename to css/bars/top-panel.css index 2f95187..a35531b 100644 --- a/css/top-panel.css +++ b/css/bars/top-panel.css @@ -1,5 +1,4 @@ #topPanel { - background: var(--panel-bg); width: 100vw; height: 32px; position: absolute; diff --git a/css/base.css b/css/base/base.css similarity index 79% rename from css/base.css rename to css/base/base.css index ca7cf42..c284131 100644 --- a/css/base.css +++ b/css/base/base.css @@ -1,13 +1,13 @@ :root { /* Colors */ - --base-body-bg: #1a1a1aff; + --base-body-bg: #1A1A1AFF; --base-bg: #00000060; --base-color: #FEFEFEFF; --base-container: #F2F2F220; --base-hover-bg: #F2F2F230; - --base-focus-bg: #f2f2f245; + --base-focus-bg: #F2F2F245; --base-active-bg: #FEFEFE60; --blur-strength: 6px; @@ -24,10 +24,10 @@ box-sizing: border-box; /*Font rendering*/ - -webkit-font-smoothing: antialiased !important; - -moz-osx-font-smoothing: grayscale !important; - text-rendering: optimizeLegibility !important; - font-variant-ligatures: none !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-variant-ligatures: none; /*Disable tap hightlight color on mobile devices*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -35,7 +35,6 @@ } body { - position: absolute; top: 0; left: 0; width: 100%; @@ -49,8 +48,8 @@ body { html, body { font-family: roboto, sans-serif; - height: 100% !important; - position: fixed !important; + height: 100%; + position: fixed; } /*Placeholder*/ diff --git a/css/dummy-body-background.css b/css/base/dummy-body-background.css similarity index 100% rename from css/dummy-body-background.css rename to css/base/dummy-body-background.css diff --git a/css/font-face.css b/css/base/font-face.css similarity index 100% rename from css/font-face.css rename to css/base/font-face.css diff --git a/css/normalize.css b/css/base/normalize.css similarity index 100% rename from css/normalize.css rename to css/base/normalize.css diff --git a/css/auto-suggestion.css b/css/centeredbox/auto-suggestion.css similarity index 91% rename from css/auto-suggestion.css rename to css/centeredbox/auto-suggestion.css index 9688229..567542a 100644 --- a/css/auto-suggestion.css +++ b/css/centeredbox/auto-suggestion.css @@ -1,5 +1,5 @@ /*Container*/ -#suggestionsContainer { +.phrasesContainer { position: absolute; width: 100vw; @@ -21,8 +21,8 @@ } /*Show suggestion*/ -.suggestionsShow { - opacity: 1 !important; +#suggestionsContainer.suggestionsShow { + opacity: 1; } /*ul*/ @@ -102,7 +102,7 @@ width: auto; text-align: center; - justify-content: space-between !important; + justify-content: space-between; padding: 0; width: 20px; @@ -111,8 +111,8 @@ @media screen and (max-height: 340px) { - #suggestionsContainer { - opacity: 0 !important; + #suggestionsContainer.phrasesContainer { + opacity: 0; } } \ No newline at end of file diff --git a/css/centered-box-overlay.css b/css/centeredbox/centered-box-overlay.css similarity index 100% rename from css/centered-box-overlay.css rename to css/centeredbox/centered-box-overlay.css diff --git a/css/centered-box.css b/css/centeredbox/centered-box.css similarity index 85% rename from css/centered-box.css rename to css/centeredbox/centered-box.css index 96e9978..c890893 100644 --- a/css/centered-box.css +++ b/css/centeredbox/centered-box.css @@ -20,7 +20,7 @@ z-index var(--transition-speed); } -.hiddenBox { - opacity: 0 !important; - z-index: 0 !important; +.centeredBar#centeredBox.hiddenBox { + opacity: 0; + z-index: 0; } \ No newline at end of file diff --git a/css/profile-image.css b/css/centeredbox/profile-image.css similarity index 94% rename from css/profile-image.css rename to css/centeredbox/profile-image.css index 11af593..5e12292 100644 --- a/css/profile-image.css +++ b/css/centeredbox/profile-image.css @@ -18,7 +18,7 @@ } #profileImage { - background-image: url('../assets/user.png') ; + background-image: url('../../assets/user.png') ; height: 128px; width: 128px; border-radius: 50%; diff --git a/css/search-box.css b/css/centeredbox/search-box.css similarity index 79% rename from css/search-box.css rename to css/centeredbox/search-box.css index a1ccc21..db14eed 100644 --- a/css/search-box.css +++ b/css/centeredbox/search-box.css @@ -1,5 +1,4 @@ -#searchBoxContainer { - +.searchBoxContainer { width: 100%; height: auto; top: 40%; @@ -47,10 +46,10 @@ font-weight: 700; } -.showSearchBox { - opacity: 1 !important; - top: 70% !important; - pointer-events: initial !important; +#searchBoxContainer.showSearchBox { + opacity: 1; + top: 70%; + pointer-events: initial; } @media screen and (max-width: 470px) { @@ -58,10 +57,10 @@ width: 50vw; } - .showSearchBox { - opacity: 1 !important; - top: 65% !important; - pointer-events: initial !important; + #searchBoxContainer.showSearchBox { + opacity: 1; + top: 65%; + pointer-events: initial; } } diff --git a/css/dashboard.css b/css/dashboard/dashboard.css similarity index 66% rename from css/dashboard.css rename to css/dashboard/dashboard.css index b12bc3f..3cb5979 100644 --- a/css/dashboard.css +++ b/css/dashboard/dashboard.css @@ -36,10 +36,11 @@ display: none; } -.showRightDashboard { - width: 350px !important; - z-index: 7 !important; - scrollbar-width: none !important; +/*Show dashboard*/ +.dashboard#rightDashboard.showRightDashboard { + width: 350px; + z-index: 7; + scrollbar-width: none; } /*Overlay*/ @@ -61,14 +62,30 @@ z-index var(--transition-speed); } -.showDashboardOverlay { - visibility: visible !important; - z-index: 6 !important; +.dashboardOverlay.showDashboardOverlay { + visibility: visible; + z-index: 6; } @media screen and (max-width: 470px) { - .showRightDashboard { - width: 100vw !important; - margin-right: 0 !important; + .dashboard#rightDashboard.showRightDashboard { + width: 100vw; + margin-right: 0; } -} \ No newline at end of file +} + +.headerIcon { + background-size: cover; + margin-right: 10px; + width: 28px; + height: 28px; +} + +.headerLabel { + font-family: roboto-bold, sans-serif; + font-weight: bold; + font-size: 14pt; + text-align: left; + margin-top: auto; + margin-bottom: auto; +} diff --git a/css/greeter-date-message.css b/css/dashboard/greeter-date-message.css similarity index 70% rename from css/greeter-date-message.css rename to css/dashboard/greeter-date-message.css index 7fcde2b..fff28a5 100644 --- a/css/greeter-date-message.css +++ b/css/dashboard/greeter-date-message.css @@ -1,16 +1,17 @@ -#greeterMessage { +.dashboardMessage { color: var(--base-color); - font-size: 32pt; - font-family: roboto-light, sans-serif; - font-weight: 300; + word-wrap: break-word; margin: 5px; } -#dateMessage { - color: var(--base-color); +.dashboardMessage#greeterMessage { + font-size: 32pt; + font-family: roboto-light, sans-serif; + font-weight: 300; +} + +.dashboardMessage#dateMessage { font-size: 12pt; font-family: roboto, sans-serif; font-weight: 400; - margin: 5px; - word-wrap: break-word; } \ No newline at end of file diff --git a/css/search-engine-settings.css b/css/dashboard/search-engine-settings.css similarity index 77% rename from css/search-engine-settings.css rename to css/dashboard/search-engine-settings.css index 9b784f5..9a59fe1 100644 --- a/css/search-engine-settings.css +++ b/css/dashboard/search-engine-settings.css @@ -25,20 +25,7 @@ } #searchEngineHeaderIcon { - background: url('../assets/ui-icons/internet.svg'); - background-size: cover; - margin-right: 10px; - width: 28px; - height: 28px; -} - -#searchEngineHeaderLabel { - font-family: roboto-bold, sans-serif; - font-weight: bold; - font-size: 14pt; - text-align: left; - margin-top: auto; - margin-bottom: auto; + background-image: url('../../assets/ui-icons/internet.svg'); } #searchEngineContainer { @@ -67,19 +54,19 @@ } #searchEngineSelect:hover { - outline: none !important; + outline: none; cursor: pointer; - background: var(--base-hover-bg) !important; + background: var(--base-hover-bg); } #searchEngineSelect:focus { - outline: none !important; - background: var(--base-focus-bg) !important; + outline: none; + background: var(--base-focus-bg); } #searchEngineSelect:active { - outline: none !important; - background: var(--base-active-bg) !important; + outline: none; + background: var(--base-active-bg); } #searchEngineSelect option { diff --git a/css/theme-engine.css b/css/dashboard/theme-engine.css similarity index 90% rename from css/theme-engine.css rename to css/dashboard/theme-engine.css index c560ceb..5676328 100644 --- a/css/theme-engine.css +++ b/css/dashboard/theme-engine.css @@ -25,20 +25,7 @@ } #themeEngineHeaderIcon { - background: url('../assets/ui-icons/theme.svg'); - background-size: cover; - margin-right: 10px; - width: 28px; - height: 28px; -} - -#themeEngineHeaderLabel { - font-family: roboto-bold, sans-serif; - font-weight: bold; - font-size: 14pt; - text-align: left; - margin-top: auto; - margin-bottom: auto; + background-image: url('../../assets/ui-icons/theme.svg'); } #themeEngineContainer { diff --git a/css/weather-settings.css b/css/dashboard/weather-settings.css similarity index 77% rename from css/weather-settings.css rename to css/dashboard/weather-settings.css index 6920e37..88a24ca 100644 --- a/css/weather-settings.css +++ b/css/dashboard/weather-settings.css @@ -25,20 +25,7 @@ } #weatherSettingsHeaderIcon { - background: url('../assets/ui-icons/weather.svg'); - background-size: cover; - margin-right: 10px; - width: 28px; - height: 28px; -} - -#weatherSettingsHeaderLabel { - font-family: roboto-bold, sans-serif; - font-weight: bold; - font-size: 14pt; - text-align: left; - margin-top: auto; - margin-bottom: auto; + background-image: url('../../assets/ui-icons/weather.svg'); } /*Main settings*/ @@ -98,21 +85,21 @@ #weatherSelectUnits:hover, #weatherSelectLocator:hover { - outline: none !important; + outline: none; cursor: pointer; - background: var(--base-hover-bg) !important; + background: var(--base-hover-bg); } #weatherSelectUnits:focus, #weatherSelectLocator:focus { - outline: none !important; - background: var(--base-focus-bg) !important; + outline: none; + background: var(--base-focus-bg); } #weatherSelectUnits:active, #weatherSelectLocator:active { - outline: none !important; - background: var(--base-active-bg) !important; + outline: none; + background: var(--base-active-bg); } #weatherSelectUnits option, @@ -125,7 +112,7 @@ #weatherSettingsReset { margin-top: 0; border: none; - background: var(--base-container) !important; + background: var(--base-container); } #weatherSettingsApply { @@ -139,17 +126,17 @@ #weatherSettingsApply:hover, #weatherSettingsReset:hover { outline: none; cursor: pointer; - background: var(--base-hover-bg) !important; + background: var(--base-hover-bg); } #weatherSettingsApply:active, #weatherSettingsReset:active { outline: none; - background: var(--base-active-bg) !important; + background: var(--base-active-bg); } #weatherSettingsApply:focus, #weatherSettingsReset:focus { outline: none; - background: var(--base-focus-bg) !important; + background: var(--base-focus-bg); } diff --git a/css/dock.css b/css/dock.css deleted file mode 100644 index 9c4f1c0..0000000 --- a/css/dock.css +++ /dev/null @@ -1,184 +0,0 @@ -.dockContainer { - background: transparent; - position: absolute; - z-index: 5; - margin: 0 auto; - bottom: 0; - - /*On bottom, center horizontally*/ - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); - - /*Add transition*/ - transition: opacity var(--transition-speed); -} - -#dock { - background: var(--panel-bg); - border-radius: var(--rounded-radius); - - display: flex; - position: relative; - height: auto; - width: auto; - - padding: 5px; - margin: 10px; - - transition: transform var(--transition-speed); - z-index: 1 !important; -} - -/*Translate dock to left side if width <= 470 and height >= 540*/ -@media screen and (max-width: 470px) and (min-height: 490px) { - - .dockContainer { - display: inline-block !important; - opacity: 1; - - position: relative !important; - margin:0 auto !important; - - top: 50% !important; - left: 0 !important; - bottom: 0 !important; - right: 0 !important; - - -webkit-transform: translateY(-50%) !important; - transition: opacity var(--transition-speed) !important; - } - - #dock { - display: inline-block !important; - width: auto !important; - height: auto !important; - margin: 5px !important; - transform: scale(0.90) !important; - transition: transform var(--transition-speed) !important; - } -} - - -/*Decrease scale to 0.85 if width is less than 470px*/ -@media screen and (max-width: 469px) and (max-height: 489px) { - - .dockContainer { - position: absolute !important; - background: transparent !important; - z-index: 5 !important; - margin: 0 auto !important; - bottom: 0 !important; - - /*On bottom, center horizontally*/ - left: 50% !important; - -ms-transform: translateX(-50%) !important; - transform: translateX(-50%) !important; - - /*Add transition*/ - transition: opacity var(--transition-speed) !important; - } - - #dock { - display: flex !important; - width: auto !important; - height: auto !important; - margin: 5px !important; - transform: scale(0.85) !important; - transition: transform var(--transition-speed) !important; - } - -} - - -/*Decrease scale to 0.75 if width is less than 380px*/ -@media screen and (max-width: 380px) and (max-height: 489px) { - - .dockContainer { - position: absolute !important; - background: transparent !important; - z-index: 5 !important; - margin: 0 auto !important; - bottom: 0 !important; - - /*On bottom, center horizontally*/ - left: 50% !important; - -ms-transform: translateX(-50%) !important; - transform: translateX(-50%) !important; - - /*Add transition*/ - transition: opacity var(--transition-speed) !important; - } - - #dock { - display: flex !important; - width: auto !important; - height: auto !important; - margin: 5px !important; - transform: scale(0.75) !important; - transition: transform var(--transition-speed) !important; - } - -} - -/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/ -@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 489px) { - - .dockContainer { - position: absolute !important; - background: transparent !important; - z-index: 5 !important; - margin: 0 auto !important; - bottom: 0 !important; - - /*On bottom, center horizontally*/ - left: 50% !important; - -ms-transform: translateX(-50%) !important; - transform: translateX(-50%) !important; - - /*Add transition*/ - transition: opacity var(--transition-speed) !important; - } - - #dock { - display: flex !important; - width: auto !important; - height: auto !important; - margin: 5px !important; - transform: scale(0.70) !important; - transition: transform var(--transition-speed) !important; - } -} - - -/*Scale to 0 if less than 320px*/ -@media screen and (max-width: 319px) and (max-height: 489px) { - - .dockContainer { - position: absolute !important; - background: transparent !important; - z-index: 5 !important; - margin: 0 auto !important; - bottom: 0 !important; - - /*On bottom, center horizontally*/ - left: 50% !important; - -ms-transform: translateX(-50%) !important; - transform: translateX(-50%) !important; - - /*Add transition*/ - transition: opacity var(--transition-speed) !important; - } - - #dock { - display: flex !important; - width: auto !important; - height: auto !important; - opacity: 0 !important; - margin: 5px !important; - transform: scale(0.0) !important; - transition: transform var(--transition-speed), - opacity var(--transition-speed) !important; - } - -} \ No newline at end of file diff --git a/css/screens/screens.css b/css/screens/screens.css new file mode 100644 index 0000000..75fadce --- /dev/null +++ b/css/screens/screens.css @@ -0,0 +1,25 @@ +.screen { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + margin: 0; + background: var(--panel-bg); + + overflow: hidden; + backdrop-filter: blur(var(--blur-strength)); + + /*Disable user touch/select on text elements*/ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + /*Dont increase the geometry by using padding*/ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} \ No newline at end of file diff --git a/css/weather-screen.css b/css/screens/weather-screen.css similarity index 77% rename from css/weather-screen.css rename to css/screens/weather-screen.css index cc59fe9..992fb80 100644 --- a/css/weather-screen.css +++ b/css/screens/weather-screen.css @@ -1,16 +1,4 @@ #weatherScreen { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - margin: 0; - background: var(--panel-bg); - /*z-index: 0;*/ - z-index: 3; - overflow: hidden; - backdrop-filter: blur(var(--blur-strength)); - display:flex; justify-content:center; align-items:center; @@ -20,30 +8,18 @@ padding-left: 12vw; padding-right: 12vw; - /*Dont increase the geometry by using padding*/ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - /*Disable user touch/select on text elements*/ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - opacity: 0; transform: scale(0); + opacity: 0; + z-index: 0; transition: transform var(--transition-speed), - opacity var(--transition-speed), - z-index var(--transition-speed); + opacity var(--transition-speed), + z-index var(--transition-speed); } -.showWeatherScreen{ - transform: scale(1) !important; - opacity: 1 !important; - z-index: 3 !important; +.screen#weatherScreen.showWeatherScreen { + transform: scale(1); + opacity: 1; + z-index: 3; } #weatherScreenContainer { @@ -59,7 +35,7 @@ } #weatherTodayIcon { - background: url('../assets/weather-icons/weather-error.svg'); + background: url('../../assets/weather-icons/weather-error.svg'); background-size: cover; width: 128px; height: 128px; @@ -113,19 +89,19 @@ } #sunriseHourDataIcon { - background: url("../assets/weather-icons/sunrise.svg"); + background: url("../../assets/weather-icons/sunrise.svg"); background-size: cover; } #sunsetHourDataIcon { - background: url("../assets/weather-icons/sunset.svg"); + background: url("../../assets/weather-icons/sunset.svg"); background-size: cover; margin-left: 5px } #updateHourDataIcon { - background: url("../assets/weather-icons/refresh.svg"); + background: url("../../assets/weather-icons/refresh.svg"); background-size: cover; margin-left: 5px } @@ -159,7 +135,7 @@ } .weatherForecastDayIcon { - background: url('../assets/weather-icons/weather-error.svg'); + background: url('../../assets/weather-icons/weather-error.svg'); background-size: cover; width: 48px; height: 48px; diff --git a/css/web-menu.css b/css/screens/web-menu.css similarity index 86% rename from css/web-menu.css rename to css/screens/web-menu.css index d387d70..9cf063f 100644 --- a/css/web-menu.css +++ b/css/screens/web-menu.css @@ -1,28 +1,11 @@ -#webMenu { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - margin: 0; - background: var(--panel-bg); +#webMenuScreen { z-index: 0; - overflow: hidden; - backdrop-filter: blur(var(--blur-strength)); padding-top: 40px; padding-bottom: 6vh; padding-left: 12vw; padding-right: 12vw; - /*Disable user touch/select on text elements*/ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - /*Transitions*/ opacity: 0; transform: scale(0); @@ -32,7 +15,7 @@ } @media screen and (max-width: 470px) { - #webMenu { + #webMenuScreen { padding-top: 6vh; padding-bottom: 0vh; padding-left: 18vw; @@ -41,10 +24,10 @@ } /*Show web menu*/ -.showWebMenu { - transform: scale(1) !important; - opacity: 1 !important; - z-index: 3 !important; +.screen#webMenuScreen.showWebMenu { + transform: scale(1); + opacity: 1; + z-index: 3; } #webMenuContainer { @@ -55,7 +38,7 @@ } #webMenuSearchBox { - background: var(--base-container); + background: var(--base-bg); text-align: center; font-family: roboto-bold, sans-serif; @@ -205,7 +188,7 @@ position: relative; display: flex; justify-content: center; - max-height: 74vh; + max-height: 70vh; overflow-y: auto; /*Fade transparency*/ @@ -236,8 +219,8 @@ } #webMenuListContainer { - scrollbar-width: none !important; - -ms-overflow-style: none !important; + scrollbar-width: none; + -ms-overflow-style: none; } #webMenuListContainer::-webkit-scrollbar { diff --git a/css/style.css b/css/style.css index 77a9dea..8082837 100644 --- a/css/style.css +++ b/css/style.css @@ -1,22 +1,31 @@ /*Load all CSS*/ -@import url('normalize.css'); -@import url('font-face.css'); -@import url('base.css'); -@import url('dummy-body-background.css'); -@import url('bar.css'); -@import url('top-panel.css'); -@import url('clock.css'); -@import url('dock.css'); -@import url('dock-buttons.css'); -@import url('centered-box.css'); -@import url('centered-box-overlay.css'); -@import url('profile-image.css'); -@import url('search-box.css'); -@import url('dashboard.css'); -@import url('greeter-date-message.css'); -@import url('search-engine-settings.css'); -@import url('theme-engine.css'); -@import url('weather-screen.css'); -@import url('weather-settings.css'); -@import url('web-menu.css'); -@import url('auto-suggestion.css'); \ No newline at end of file +@import url('base/normalize.css'); +@import url('base/font-face.css'); +@import url('base/base.css'); +@import url('base/dummy-body-background.css'); + +/*Bars and Panels*/ +@import url('bars/bar.css'); +@import url('bars/top-panel.css'); +@import url('bars/clock.css'); +@import url('bars/dock.css'); +@import url('bars/dock-buttons.css'); + +/*Centered box and Contents*/ +@import url('centeredbox/centered-box.css'); +@import url('centeredbox/centered-box-overlay.css'); +@import url('centeredbox/profile-image.css'); +@import url('centeredbox/search-box.css'); +@import url('centeredbox/auto-suggestion.css'); + +/*Screens*/ +@import url('screens/screens.css'); +@import url('screens/weather-screen.css'); +@import url('screens/web-menu.css'); + +/*Dashboard and Settings*/ +@import url('dashboard/dashboard.css'); +@import url('dashboard/greeter-date-message.css'); +@import url('dashboard/search-engine-settings.css'); +@import url('dashboard/weather-settings.css'); +@import url('dashboard/theme-engine.css'); \ No newline at end of file diff --git a/index.html b/index.html index 8c69054..f06b183 100644 --- a/index.html +++ b/index.html @@ -64,9 +64,9 @@
-
+
-
+
    @@ -201,7 +201,7 @@
    -
    +
    @@ -247,7 +247,7 @@ -
    +
    diff --git a/js/dashboard.js b/js/dashboard.js index 4a399c8..82efe2e 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -9,7 +9,7 @@ class Dashboard { this._dashboardOverlayMouseUpEvent = this._dashboardOverlayMouseUpEvent.bind(this); this._centeredBox = document.querySelector('#centeredBox'); - this._webMenu = document.querySelector('#webMenu'); + this._webMenu = document.querySelector('#webMenuScreen'); this._searchBoxContainer = document.querySelector('#searchBoxContainer'); this._weatherScreen = document.querySelector('#weatherScreen'); diff --git a/js/mobile-swipe-callback.js b/js/mobile-swipe-callback.js index 1507666..d068d92 100644 --- a/js/mobile-swipe-callback.js +++ b/js/mobile-swipe-callback.js @@ -69,7 +69,7 @@ class SwipeEventCallbacks extends SwipeEventManager { this.swipeEvent('centeredBoxOverlay', this._centeredBoxOverlaySwipeEvent); - this.swipeEvent('webMenu', this._webMenuSwipeEvent); + this.swipeEvent('webMenuScreen', this._webMenuSwipeEvent); this.swipeEvent('weatherScreen', this._weatherScreenSwipeEvent); } diff --git a/js/weather-screen.js b/js/weather-screen.js index aa8497d..2ed8e3f 100644 --- a/js/weather-screen.js +++ b/js/weather-screen.js @@ -23,7 +23,7 @@ class WeatherScreen { this._weatherDockImageButton = document.querySelector('#buttonImageWeather'); this._forecastContainer = document.querySelector('#forecastContainer'); - this._webMenu = document.querySelector('#webMenu'); + this._webMenu = document.querySelector('#webMenuScreen'); this._dashboard = document.querySelector('#rightDashboard'); this._searchBoxContainer = document.querySelector('#searchBoxContainer'); } diff --git a/js/web-menu.js b/js/web-menu.js index 868156b..e421965 100644 --- a/js/web-menu.js +++ b/js/web-menu.js @@ -5,7 +5,7 @@ class WebMenu { this._weatherScreen = document.querySelector('#weatherScreen'); this._webSites = config.getWebSites(); - this._webMenu = document.querySelector('#webMenu'); + this._webMenuScreen = document.querySelector('#webMenuScreen'); this._webMenuList = document.querySelector('#webMenuList'); this._webMenuListContainer = document.querySelector('#webMenuListContainer'); this._webMenuSearchBox = document.querySelector('#webMenuSearchBox'); @@ -37,7 +37,7 @@ class WebMenu { // Disable textboxes _disableWebMenuInputs = status => { - const elems = this._webMenu.getElementsByTagName('input'); + const elems = this._webMenuScreen.getElementsByTagName('input'); const len = elems.length; for (let i = 0; i < len; i++) { @@ -187,7 +187,7 @@ class WebMenu { // Show web menu screen showWebMenu = () => { - this._webMenu.classList.add('showWebMenu'); + this._webMenuScreen.classList.add('showWebMenu'); // Enable inputs this._disableWebMenuInputs(false); @@ -218,7 +218,7 @@ class WebMenu { // Get first item this._getFirstItem(); - this._webMenu.classList.remove('showWebMenu'); + this._webMenuScreen.classList.remove('showWebMenu'); // Disable inputs this._disableWebMenuInputs(true); @@ -369,7 +369,7 @@ class WebMenu { } _registerWebMenuKeyDownEvent = () => { - this._webMenu.addEventListener('keydown', this._webMenuKeyDownEvent, false); + this._webMenuScreen.addEventListener('keydown', this._webMenuKeyDownEvent, false); } _webMenuSearchBoxKeyDownEvent = e => {