MAJ de styles

jitsi-meet/css/custom.css

@@ -5,8 +5,9 @@ html {
 }
 
 body {
-    font-family: 'Quicksand', sans-serif;
-    height: auto
+    font-family: 'Quicksand', sans-serif !important;
+    height: auto;
+    overflow: auto;
 }
 
 .welcome .welcome-watermark {
@@ -15,24 +16,28 @@ body {
 
 .welcome {
     background-color: #7f9cf5;
-    background-image: url(../images/illustration-visio.png);
+    background-image: url(images/illustration-visio.png);
     background-repeat: no-repeat;
     background-position: bottom right;
-    background-size: 650px auto;
+    background-size: 30% auto;
 }
 
 .welcome .welcome-watermark .watermark.leftwatermark {
     width: 270px;
-    height: 80px;
-    max-width: auto !important;
-    max-height: auto !important;
+    height: 87px;
+    max-width: none !important;
+    max-height: none !important;
 }
 
 .welcome .header {
     background: none;
+    align-items: start;
+    padding: 6rem 15rem;
 }
 
 .welcome .welcome-page-settings .jitsi-icon svg {
+    border-radius: 3px;
+    padding: 3px;
     background: #4fd1c5
 }
 
@@ -46,9 +51,13 @@ body {
     padding: 0
 }
 
+.welcome .header .header-text {
+    width: 100%;
+}
+
 .welcome .header .header-text-title {
     text-align: left;
-    font-size: 4rem;
+    font-size: 2rem;
 }
 
 .welcome .header .header-text-subtitle {
@@ -56,11 +65,42 @@ body {
     font-weight: 400;
 }
 
-.welcome .header #enter_room {
-    width: auto;
-    margin: 2rem 0;
+.welcome .header .header-text-description {
+    text-align: left;
+    font-size: 1.5rem;
+    line-height: 38px;
 }
 
+.welcome .header #enter_room {
+    width: 30%;
+    border-radius: 3px;
+    background: #e6fffa;
+    align-items: end;
+}
+
+.welcome .header #enter_room .enter-room-input-container {
+    padding: 0 2rem 0 0;
+}
+
+.welcome .header #enter_room .enter-room-input-container .enter-room-title {
+    margin-bottom: 1rem;
+}
+
+.welcome .header #enter_room .enter-room-input-container .enter-room-input {
+    border-image: none;
+    padding: 1rem
+}
+
+.welcome .welcome-page-button {
+    background: #4c51bf;
+    border-radius: 9999px;
+    padding: 0.5rem 1.3rem;
+    text-transform: uppercase;
+}
+
+.welcome .header .tab-container {
+    background-color: transparent;
+}
 
 .welcome .welcome-cards-container {
     width: 100%;
@@ -93,13 +133,40 @@ body {
     display: none
 }
 
-/* TODO RESPONSIVE */
-@media (min-width: 576px) {}
 
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+    .welcome .header .header-text {
+        max-width: 730px;
+    }
+}
 
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+    .welcome .header .header-text {
+        max-width: 880px;
+    }
 
-@media (min-width: 1200px) {}
+    .welcome .header .header-text-title {
+        font-size: 3rem;
+    }
+}
 
-@media (min-width: 1400px) {}
+@media (min-width: 1200px) {
+    .welcome .header .header-text {
+        max-width: 1080px;
+    }
+
+    .welcome .header .header-text-title {
+        font-size: 3.3rem;
+        max-width: 60rem;
+    }
+}
+
+@media (min-width: 1400px) {
+    .welcome {
+        background-size: 45% auto;
+    }
+    .welcome .header .header-text {
+        max-width: 1350px;
+    }
+    
+}