diff --git a/dashboard/src/setup.css b/dashboard/src/setup.css index 67e1888df..a2c7bc5c8 100644 --- a/dashboard/src/setup.css +++ b/dashboard/src/setup.css @@ -22,3 +22,38 @@ h1 { background-color: transparent; cursor: copy; } + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes color { + 0% { + background-position: 0% 0%; + } + 100% { + background-position: 100% 100%; + } +} + +.gradient { + --blob-size: 200px; + --speed: 6s; + --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); + + width: var(--blob-size); + height: var(--blob-size); + filter: blur(calc(var(--blob-size) / 5)); + animation: rotate var(--speed) var(--easing) alternate infinite, color 5s var(--easing) alternate infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + margin-top: 60px; + margin-bottom: 80px; + + background-size: 200% 200%; + background-image: linear-gradient(#096dbd, #c340ff, #ffa240); +} diff --git a/dashboard/src/setup.js b/dashboard/src/setup.js index 95e60b878..ee50c3d15 100644 --- a/dashboard/src/setup.js +++ b/dashboard/src/setup.js @@ -7,6 +7,7 @@ import SetupView from './views/SetupView.vue'; import './style.css'; import './setup.css'; +import './starfall.css'; (async function init() { const app = createApp(SetupView); diff --git a/dashboard/src/style.css b/dashboard/src/style.css index 7db576cf0..50ef44c52 100644 --- a/dashboard/src/style.css +++ b/dashboard/src/style.css @@ -295,3 +295,17 @@ fieldset > * { opacity: 0; transform: translateY(-30px); } + +.fade-scale-enter-active { + transition: all 0.2s ease-out; +} + +.fade-scale-leave-active { + transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); +} + +.fade-scale-enter-from, +.fade-scale-leave-to { + transform: scale(0.95); + opacity: 0; +} diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue index b14d7e6eb..6f8e4a3e9 100644 --- a/dashboard/src/views/SetupView.vue +++ b/dashboard/src/views/SetupView.vue @@ -146,18 +146,13 @@ onMounted(async () => {
- -
-
+ +
+
+

Please wait while Cloudron is setting up the dashboard

- -

{{ progressMessage }}

-
-
- If setup appears stuck, it can be restarted by running systemctl restart box and reloading this page. -
-
- You can follow the logs on the server at /home/yellowtent/platformdata/logs/box.log +

{{ progressMessage }}

+ You can follow the logs on the server at /home/yellowtent/platformdata/logs/box.log