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 @@
-