@@ -44,12 +45,16 @@
justify-content: center;
align-items: center;
flex-grow: 1;
+ transition: all 0.15s var(--timing-main);
.logo {
position: relative;
- &::after {
+ &::after,
+ &::before {
position: absolute;
content: '';
transform: translate(-50%, -50%);
+ }
+ &::after {
width: 63px;
height: 79px;
}
@@ -60,9 +65,6 @@
background: center url('../../img/logo-dark.svg');
}
&::before {
- position: absolute;
- content: '';
- transform: translate(-50%, -50%);
width: 16rem;
height: 16rem;
border: 1.8px solid var(--caption-color);
@@ -72,6 +74,7 @@
}
}
.slogan {
+ transition: all 0.15s var(--timing-main);
margin-bottom: 60px;
p {
margin: 0;
@@ -82,5 +85,52 @@
opacity: 0.8;
}
}
+
+ &.landscape {
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ min-width: 20rem;
+ min-height: 10rem;
+ margin-bottom: 1.25rem;
+
+ .content .logo::after,
+ .content .logo::before {
+ transform: translate(-50%, -50%) scale(0.5);
+ }
+ .content {
+ max-width: 8rem;
+ max-height: 10rem;
+ margin: 0 1rem 0 0;
+ }
+ .slogan {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 0 0 1rem;
+ }
+
+ &.mini {
+ min-width: 16rem;
+ min-height: 8rem;
+
+ .content .logo::after,
+ .content .logo::before {
+ transform: translate(-50%, -50%) scale(0.35);
+ }
+ .content {
+ max-width: 5.5rem;
+ max-height: 8rem;
+ margin: 0 0.5rem 0 0;
+ }
+ .slogan {
+ margin: 0 0 0 0.5rem;
+ p {
+ font-size: 0.6rem;
+ }
+ }
+ }
+ }
}
diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte
index 77f041d3b6..c423cc370f 100644
--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/plugins/login-resources/src/components/LoginApp.svelte
@@ -47,9 +47,11 @@
768}
style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
>
+
{#if page === 'login'}
{:else if page === 'signup'}
@@ -62,7 +64,7 @@
{/if}
-
+
@@ -71,11 +73,14 @@
position: relative;
display: flex;
flex-direction: column;
- min-height: 100%;
- height: max-content;
+ height: 100%;
background: var(--popup-bg-color);
box-shadow: var(--popup-aside-shadow);
+ &.minHeight {
+ min-height: 40rem;
+ }
+
$circle-size: calc(1vh + 1vw);
$r1: 23;
$r2: 17;
@@ -87,16 +92,18 @@
z-index: -1;
}
&::before {
- top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 4);
- left: calc(-1 * $circle-size * $r1 / 2);
+ top: calc(-1 * $circle-size * $r1 / 2 + $circle-size * 5);
+ left: auto;
+ right: calc(-1 * $circle-size * $r1 / 2);
width: calc($circle-size * $r1);
height: calc($circle-size * $r1);
border: 1px solid var(--content-color);
opacity: 0.05;
}
&::after {
- top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 4);
- left: calc(-1 * $circle-size * $r2 / 2);
+ top: calc(-1 * $circle-size * $r2 / 2 + $circle-size * 5);
+ left: auto;
+ right: calc(-1 * $circle-size * $r2 / 2);
width: calc($circle-size * $r2);
height: calc($circle-size * $r2);
background: var(--dark-color);
@@ -106,6 +113,14 @@
&.landscape {
margin-right: 1.25rem;
width: 41.75rem;
+ &::before {
+ left: calc(-1 * $circle-size * $r1 / 2);
+ right: auto;
+ }
+ &::after {
+ left: calc(-1 * $circle-size * $r2 / 2);
+ right: auto;
+ }
}
}
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index 0694fc684e..282e422a91 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -22,7 +22,9 @@
Label,
Location,
navigate,
- setMetadataLocalStorage
+ setMetadataLocalStorage,
+ deviceOptionsStore as deviceInfo,
+ Scroller
} from '@hcengineering/ui'
import { workbenchId } from '@hcengineering/workbench'
import login from '../plugin'
@@ -84,28 +86,30 @@
}
-