diff --git a/src/assets/images/moon.png b/src/assets/images/moon.png
index 5907d3f..589cd24 100644
Binary files a/src/assets/images/moon.png and b/src/assets/images/moon.png differ
diff --git a/src/assets/images/sun.png b/src/assets/images/sun.png
index fa2d245..fb77713 100644
Binary files a/src/assets/images/sun.png and b/src/assets/images/sun.png differ
diff --git a/src/components/map/control/ClockControl.vue b/src/components/map/control/ClockControl.vue
index 4628de6..d768fe4 100644
--- a/src/components/map/control/ClockControl.vue
+++ b/src/components/map/control/ClockControl.vue
@@ -1,48 +1,27 @@
-
-
\ No newline at end of file
diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts
index 1ca0e86..d215487 100644
--- a/src/leaflet/control/ClockControl.ts
+++ b/src/leaflet/control/ClockControl.ts
@@ -19,9 +19,8 @@ export class ClockControl extends L.Control {
private _weather?: HTMLElement;
constructor(options: ClockControlOptions) {
- super(options);
+ super(Object.assign(options, {position: 'topcenter'}));
- options.position = 'topleft';
L.Util.setOptions(this, options);
}
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 738b6b5..c2cadb1 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -32,6 +32,7 @@
flex-direction: column;
padding: 1.5rem;
position: relative;
+ box-shadow: 0 0 1.5rem 0 #121212;
h2:first-child {
margin-top: 0;
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 20d2a57..a2b9af9 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -160,6 +160,17 @@
}
}
+.leaflet-center {
+ left: 0;
+ right: 0;
+ justify-content: center;
+ flex-direction: row;
+
+ .leaflet-control {
+ margin: 0;
+ }
+}
+
.leaflet-control-layers-toggle {
width: 5rem;
height: 5rem;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index f379e49..726cba0 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -138,125 +138,87 @@ button {
border-radius: 0 0 3px 3px;
}
-/*******************
- * sidebar panels
- */
-
-
-
-
-/*******************
- * Sidebar clock style
- */
-/*
-.dynmap .clock {
- display: inline-block;
- height: 16px;
- z-index:50;
-
- font-weight: bold;
- background-repeat: no-repeat;
-
- padding-left: 20px;
- margin-left: 8px;
-}
-*/
-.largeclock.digitalclock {
- text-align: center;
- font-size: 50px;
- font-weight: bold;
-}
-
-.digitalclock {
- text-align: center;
- font-size: 20px;
- font-weight:bold;
-}
-
-.digitalclock.night {
- /* background-image: url(../assets/images/clock_night.png); */
- color: #dff;
-}
-
-.digitalclock.day {
- /* background-image: url(../assets/images/clock_day.png); */
- color: #fd3;
-}
-
-.digitalclock.night, .digitalclock.day {
- transition: color 8s 8s linear;
-}
-
-
-/*******************
- * Large clock style
- */
-
.largeclock {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- border-color: rgba(0,0,0,0.5);
- width: 150px;
- height: 60px;
- background: rgba(0,0,0,0.6);
- z-index:50;
-
- margin: auto;
-}
-
-.timeofday {
- background-repeat: no-repeat;
-}
-
-.timeofday.sun {
- background-image: url(../assets/images/sun.png);
-}
-
-.timeofday.moon {
- background-image: url(../assets/images/moon.png);
-}
-
-.timeofday.digitalclock {
+ @extend %panel;
position: relative;
- bottom: 25px;
-}
+ width: 15rem;
+ height: 6rem;
+ z-index: 50;
-/*******************
- * Clock weather style
- */
+ .digitalclock {
+ text-align: center;
+ font-size: 2rem;
+ line-height: 2rem;
+ font-weight: bold;
-.weather {
- position: absolute;
- top: 5px;
- right: 0;
- width: 32px;
- height: 32px;
- display: block;
- background-repeat: no-repeat;
-}
+ &.night {
+ color: #dff;
+ }
-.weather.sunny_day {
- background-image: url(../assets/images/weather_sunny_day.png);
-}
+ &.day {
+ color: #fd3;
+ }
-.weather.stormy_day {
- background-image: url(../assets/images/weather_stormy_day.png);
-}
-.weather.thunder_day {
- background-image: url(../assets/images/weather_thunder_day.png);
-}
+ &.night, &.day {
+ transition: color 8s 8s linear;
+ }
+ }
-.weather.sunny_night {
- background-image: url(../assets/images/weather_sunny_night.png);
-}
+ .timeofday {
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
-.weather.stormy_night {
- background-image: url(../assets/images/weather_stormy_night.png);
-}
-.weather.thunder_night {
- background-image: url(../assets/images/weather_thunder_night.png);
+ &.digitalclock {
+ top: auto;
+ bottom: 0.5rem;
+ }
+
+ &.sun {
+ background-image: url(../assets/images/sun.png);
+ }
+
+ &.moon {
+ background-image: url(../assets/images/moon.png);
+ }
+ }
+
+ .weather {
+ position: absolute;
+ top: 5px;
+ right: 0;
+ width: 32px;
+ height: 32px;
+ display: block;
+ background-repeat: no-repeat;
+
+ &.sunny_day {
+ background-image: url(../assets/images/weather_sunny_day.png);
+ }
+
+ &.stormy_day {
+ background-image: url(../assets/images/weather_stormy_day.png);
+ }
+
+ &.thunder_day {
+ background-image: url(../assets/images/weather_thunder_day.png);
+ }
+
+ &.sunny_night {
+ background-image: url(../assets/images/weather_sunny_night.png);
+ }
+
+ &.stormy_night {
+ background-image: url(../assets/images/weather_stormy_night.png);
+ }
+
+ &.thunder_night {
+ background-image: url(../assets/images/weather_thunder_night.png);
+ }
+ }
}
/*******************