jiti-meet/css/_welcome_page.scss

221 lines
6.7 KiB
SCSS
Raw Normal View History

body.welcome-page {
background: inherit;
overflow: auto;
}
.welcome {
2019-10-15 07:33:36 +00:00
background-image: $welcomePageBackground;
display: flex;
flex-direction: column;
font-family: $welcomePageFontFamily;
justify-content: space-between;
min-height: 100vh;
position: relative;
2014-08-26 10:54:43 +00:00
.header {
2019-10-15 07:33:36 +00:00
background-image: $welcomePageHeaderBackground;
background-position: $welcomePageHeaderBackgroundPosition;
background-repeat: $welcomePageHeaderBackgroundRepeat;
background-size: $welcomePageHeaderBackgroundSize;
padding-bottom: $welcomePageHeaderPaddingBottom;
align-items: center;
display: flex;
flex-direction: column;
2020-08-06 14:30:56 +00:00
min-height: $welcomePageHeaderMinHeight;
overflow: hidden;
position: relative;
text-align: center;
.header-text {
2020-08-06 14:30:56 +00:00
display: $welcomePageHeaderTextDisplay;
flex-direction: column;
2019-10-15 07:33:36 +00:00
margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
margin-bottom: $welcomePageHeaderTextMarginBottom;
max-width: calc(100% - 40px);
2020-08-06 14:30:56 +00:00
width: $welcomePageHeaderTextWidth;
z-index: $zindex2;
}
.header-text-title {
color: $welcomePageTitleColor;
2019-10-22 09:53:33 +00:00
font-size: $welcomePageHeaderTextTitleFontSize;
font-weight: $welcomePageHeaderTextTitleFontWeight;
line-height: $welcomePageHeaderTextTitleLineHeight;
2019-10-15 07:33:36 +00:00
margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
2019-10-22 09:53:33 +00:00
opacity: $welcomePageHeaderTextTitleOpacity;
}
.header-text-description {
2019-10-15 07:33:36 +00:00
display: $welcomePageHeaderTextDescriptionDisplay;
color: $welcomePageDescriptionColor;
2019-10-22 09:53:33 +00:00
font-size: $welcomePageHeaderTextDescriptionFontSize;
font-weight: $welcomePageHeaderTextDescriptionFontWeight;
line-height: $welcomePageHeaderTextDescriptionLineHeight;
margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom;
align-self: $welcomePageHeaderTextDescriptionAlignSelf;
}
#enter_room {
2020-08-06 14:30:56 +00:00
display: $welcomePageEnterRoomDisplay;
align-items: center;
max-width: calc(100% - 40px);
2019-10-15 07:33:36 +00:00
width: $welcomePageEnterRoomWidth;
z-index: $zindex2;
background-color: #fff;
2019-10-15 07:33:36 +00:00
padding: $welcomePageEnterRoomPadding;
border-radius: $welcomePageEnterRoomBorderRadius;
.enter-room-input-container {
width: 100%;
2019-10-15 07:33:36 +00:00
padding: $welcomePageEnterRoomInputContainerPadding;
text-align: left;
color: #253858;
height: fit-content;
.enter-room-title {
2019-10-15 07:33:36 +00:00
display: $welcomePageEnterRoomTitleDisplay;
font-size: 18px;
font-weight: bold;
padding-bottom: 5px;
}
.enter-room-input {
2020-05-18 12:07:09 +00:00
border-width: $welcomePageEnterRoomInputContainerBorderWidth;
border-style: $welcomePageEnterRoomInputContainerBorderStyle;
border-image: $welcomePageEnterRoomInputContainerBorderImage;
display: inline-block;
width: 100%;
font-size: 14px;
}
2020-05-18 12:07:09 +00:00
.insecure-room-name-warning {
align-items: center;
color: $defaultWarningColor;
display: flex;
flex-direction: row;
margin-top: 5px;
.jitsi-icon {
margin-right: 15px;
svg {
fill: $defaultWarningColor
}
2020-05-18 12:07:09 +00:00
}
}
::placeholder {
color: #253858;
}
}
}
#moderated-meetings {
max-width: calc(100% - 40px);
padding: 16px 0 39px 0;
width: $welcomePageEnterRoomWidth;
p {
color: $welcomePageDescriptionColor;
text-align: left;
a {
color: inherit;
font-weight: 600;
}
}
}
.tab-container {
font-size: 16px;
position: relative;
text-align: left;
min-height: 354px;
width: 710px;
background: #75A7E7;
2019-10-15 07:33:36 +00:00
display: $welcomePageTabContainerDisplay;
flex-direction: column;
.tab-content{
2019-10-15 07:33:36 +00:00
display: $welcomePageTabContentDisplay;
margin: 5px 0px;
overflow: hidden;
flex-grow: 1;
position: relative;
> * {
position: absolute;
}
}
.tab-buttons {
font-size: 18px;
color: #FFFFFF;
2019-10-15 07:33:36 +00:00
display: $welcomePageTabButtonsDisplay;
flex-grow: 0;
flex-direction: row;
min-height: 54px;
width: 100%;
.tab {
2019-10-15 07:33:36 +00:00
display: $welcomePageTabDisplay;
text-align: center;
background: rgba(9,30,66,0.37);
height: 55px;
line-height: 54px;
flex-grow: 1;
cursor: pointer;
&.selected, &:hover {
background: rgba(9,30,66,0.71);
}
&:last-child {
margin-left: 1px;
}
}
}
}
}
.welcome-page-button {
2019-10-15 07:33:36 +00:00
width: $welcomePageButtonWidth;
2019-10-22 09:53:33 +00:00
min-width: $welcomePageButtonMinWidth;
2019-10-15 07:33:36 +00:00
height: $welcomePageButtonHeight;
2019-10-22 09:53:33 +00:00
font-size: $welcomePageButtonFontSize;
2019-10-15 07:33:36 +00:00
font-weight: $welcomePageButtonFontWeight;
background: #0074E0;
2019-10-15 07:33:36 +00:00
border-radius: $welcomePageButtonBorderRadius;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
2019-10-15 07:33:36 +00:00
line-height: $welcomePageButtonLineHeight;
cursor: pointer;
}
.welcome-page-settings {
color: $welcomePageDescriptionColor;
position: absolute;
top: 32px;
right: 32px;
z-index: $zindex2;
* {
cursor: pointer;
font-size: 32px;
}
}
.welcome-watermark {
position: absolute;
width: 100%;
height: 100%;
.watermark.leftwatermark {
width: $welcomePageWatermarkWidth;
height: $welcomePageWatermarkHeight;
}
}
}