diff --git a/jitsi-meet/css/custom.css b/jitsi-meet/css/custom.css index f7f3f70..1b6d13f 100644 --- a/jitsi-meet/css/custom.css +++ b/jitsi-meet/css/custom.css @@ -15,11 +15,7 @@ body { } .welcome { - background-color: #7f9cf5; - background-image: url(images/illustration-visio.png); - background-repeat: no-repeat; - background-position: bottom right; - background-size: 30% auto; + background: #7f9cf5; } .welcome .welcome-watermark .watermark.leftwatermark { @@ -27,17 +23,18 @@ body { height: 87px; max-width: none !important; max-height: none !important; + top: 20px } .welcome .header { background: none; align-items: start; - padding: 6rem 15rem; + padding: 4rem 2rem; } .welcome .welcome-page-settings .jitsi-icon svg { border-radius: 3px; - padding: 3px; + padding: 0.5rem; background: #4fd1c5 } @@ -53,11 +50,13 @@ body { .welcome .header .header-text { width: 100%; + max-width: 100%; + margin: 6rem 0 2rem 0; } .welcome .header .header-text-title { text-align: left; - font-size: 2rem; + font-size: 1.6rem; } .welcome .header .header-text-subtitle { @@ -69,10 +68,13 @@ body { text-align: left; font-size: 1.5rem; line-height: 38px; + display: none } .welcome .header #enter_room { - width: 30%; + display: block; + width: 100%; + max-width: calc(100% - 60px); border-radius: 3px; background: #e6fffa; align-items: end; @@ -83,6 +85,7 @@ body { } .welcome .header #enter_room .enter-room-input-container .enter-room-title { + font-size: 1.2rem; margin-bottom: 1rem; } @@ -91,14 +94,30 @@ body { padding: 1rem } +.meetings-list .button { + background: transparent; + text-decoration: underline; +} + +.meetings-list .button:hover { + color: #B2F5EA; +} + .welcome .welcome-page-button { background: #4c51bf; border-radius: 9999px; padding: 0.5rem 1.3rem; text-transform: uppercase; + margin-top: 1rem +} + +.welcome .welcome-page-button:hover { + background: #5a67d8; } .welcome .header .tab-container { + width: 100%; + max-width: 710px; background-color: transparent; } @@ -114,6 +133,19 @@ body { padding: 0 } +.welcome .header .tab-container .tab-buttons .tab { + border-radius: 999px; + height: 45px; + line-height: 45px; + margin: 0 1rem; + background: #4c51bf; +} + +.welcome .header .tab-container .tab-buttons .tab:hover, +.welcome .header .tab-container .tab-buttons .tab.selected { + background: #5a67d8; +} + .welcome .welcome-footer { padding-left: 200px; background: #e6fffa; @@ -135,12 +167,30 @@ body { @media (min-width: 768px) { + .welcome .header .header-text-title { + text-align: left; + font-size: 2rem; + } + .welcome .header .header-text { max-width: 730px; } + + .welcome .header .header-text-description { + display: block + } + + } @media (min-width: 992px) { + .welcome { + background-image: url(../images/illustration-visio.png); + background-repeat: no-repeat; + background-position: bottom right; + background-size: 50% auto; + } + .welcome .header .header-text { max-width: 880px; } @@ -148,25 +198,50 @@ body { .welcome .header .header-text-title { font-size: 3rem; } + + .welcome .header #enter_room { + width: 60%; + max-width: 650px; + display: flex; + } + + .welcome .header .tab-container { + width: calc(60% + 60px) + } + + } @media (min-width: 1200px) { + + .welcome .header .header-text { max-width: 1080px; } .welcome .header .header-text-title { - font-size: 3.3rem; + font-size: 3.2rem; max-width: 60rem; } + + .welcome .header #enter_room .enter-room-input-container .enter-room-title { + font-size: 1.3rem; + } + } @media (min-width: 1400px) { + .welcome { background-size: 45% auto; } + + .welcome .header { + padding: 6rem 15rem; + } + .welcome .header .header-text { max-width: 1350px; } - + }