324 lines
6.7 KiB
SCSS
324 lines
6.7 KiB
SCSS
@import '../../../../../../src/assets/styles/design-tokens';
|
|
|
|
// Room Access Container - Main layout using design tokens
|
|
.room-access-container {
|
|
@include ov-container;
|
|
@include ov-page-content;
|
|
padding-top: var(--ov-meet-spacing-xxl);
|
|
background: var(--ov-meet-background-color);
|
|
gap: 0;
|
|
}
|
|
|
|
// Room Header - Clean title section
|
|
.room-header {
|
|
@include ov-flex-center;
|
|
flex-direction: column;
|
|
gap: var(--ov-meet-spacing-md);
|
|
margin-bottom: var(--ov-meet-spacing-xxl);
|
|
text-align: center;
|
|
|
|
.room-icon {
|
|
@include ov-icon(xl);
|
|
color: var(--ov-meet-icon-rooms);
|
|
margin-bottom: var(--ov-meet-spacing-sm);
|
|
}
|
|
|
|
.room-info {
|
|
.room-title {
|
|
margin: 0;
|
|
font-size: var(--ov-meet-font-size-hero);
|
|
font-weight: var(--ov-meet-font-weight-light);
|
|
color: var(--ov-meet-text-primary);
|
|
line-height: var(--ov-meet-line-height-tight);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Action Cards Grid - Responsive layout
|
|
.action-cards-grid {
|
|
@include ov-grid-responsive(320px);
|
|
gap: var(--ov-meet-spacing-xl);
|
|
margin-bottom: var(--ov-meet-spacing-xxl);
|
|
justify-content: center;
|
|
|
|
// When there's only one card, limit its width to maintain visual consistency
|
|
&:has(.action-card:only-child) {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.action-card {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include ov-tablet-down {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--ov-meet-spacing-lg);
|
|
|
|
// On tablets and mobile, single cards should use full width
|
|
&:has(.action-card:only-child) {
|
|
.action-card {
|
|
max-width: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Action Card Base - Consistent card styling
|
|
.action-card {
|
|
@include ov-card;
|
|
@include ov-hover-lift(-4px);
|
|
@include ov-theme-transition;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
min-height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// Card Header
|
|
.card-header {
|
|
padding: var(--ov-meet-spacing-lg);
|
|
border-bottom: 1px solid var(--ov-meet-border-color-light);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ov-meet-spacing-md);
|
|
flex-shrink: 0;
|
|
|
|
.card-icon {
|
|
@include ov-icon(lg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-title-group {
|
|
flex: 1;
|
|
|
|
.mat-mdc-card-title {
|
|
margin: 0;
|
|
font-size: var(--ov-meet-font-size-xl);
|
|
font-weight: var(--ov-meet-font-weight-semibold);
|
|
color: var(--ov-meet-text-primary);
|
|
line-height: var(--ov-meet-line-height-tight);
|
|
}
|
|
|
|
.mat-mdc-card-subtitle {
|
|
margin: var(--ov-meet-spacing-xs) 0 0 0;
|
|
font-size: var(--ov-meet-font-size-sm);
|
|
color: var(--ov-meet-text-secondary);
|
|
line-height: var(--ov-meet-line-height-normal);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card Content
|
|
.card-content {
|
|
padding: var(--ov-meet-spacing-lg);
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
// Primary Card - Join meeting styling
|
|
.primary-card {
|
|
.card-header {
|
|
background: linear-gradient(135deg, var(--ov-meet-surface-color) 0%, var(--ov-meet-color-primary-light) 180%);
|
|
color: var(--ov-meet-text-on-primary);
|
|
}
|
|
|
|
&.room-closed-card {
|
|
.card-header {
|
|
background: linear-gradient(135deg, var(--ov-meet-surface-color) 0%, var(--ov-meet-color-warning) 180%);
|
|
|
|
.mat-icon {
|
|
color: var(--ov-meet-color-warning) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.room-closed-message {
|
|
@include ov-flex-center;
|
|
flex-direction: column;
|
|
gap: var(--ov-meet-spacing-md);
|
|
text-align: center;
|
|
|
|
.warning-icon {
|
|
@include ov-icon(xl);
|
|
color: var(--ov-meet-color-warning);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: var(--ov-meet-font-size-md);
|
|
color: var(--ov-meet-text-secondary);
|
|
line-height: var(--ov-meet-line-height-relaxed);
|
|
}
|
|
}
|
|
|
|
// Secondary Card - Recordings styling
|
|
.secondary-card {
|
|
.card-header {
|
|
background: linear-gradient(135deg, var(--ov-meet-surface-color) 0%, var(--ov-meet-color-accent) 180%);
|
|
}
|
|
|
|
.card-content {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// Join Form - Form styling
|
|
.join-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ov-meet-spacing-lg);
|
|
flex: 1;
|
|
|
|
.name-field {
|
|
width: 100%;
|
|
|
|
.mat-mdc-form-field-icon-suffix {
|
|
color: var(--ov-meet-text-hint);
|
|
}
|
|
}
|
|
|
|
.join-button {
|
|
@include ov-button-base;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--ov-meet-spacing-sm);
|
|
margin-top: auto;
|
|
background-color: var(--ov-meet-color-secondary);
|
|
color: var(--ov-meet-text-on-secondary);
|
|
}
|
|
}
|
|
|
|
// Recordings Info - Content for recordings card
|
|
.recordings-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ov-meet-spacing-lg);
|
|
|
|
.recordings-description {
|
|
margin: 0;
|
|
font-size: var(--ov-meet-font-size-md);
|
|
color: var(--ov-meet-text-secondary);
|
|
line-height: var(--ov-meet-line-height-relaxed);
|
|
}
|
|
}
|
|
|
|
.recordings-button {
|
|
@include ov-button-base;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--ov-meet-spacing-sm);
|
|
margin-top: auto;
|
|
}
|
|
|
|
// Quick Actions - Footer actions
|
|
.quick-actions {
|
|
@include ov-flex-center;
|
|
margin-top: var(--ov-meet-spacing-xl);
|
|
|
|
.quick-action-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ov-meet-spacing-sm);
|
|
color: var(--ov-meet-text-secondary);
|
|
@include ov-theme-transition;
|
|
|
|
&:hover {
|
|
color: var(--ov-meet-text-primary);
|
|
background-color: var(--ov-meet-surface-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-meeting-link-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.main-share-meeting-link-container {
|
|
background-color: var(--ov-meet-surface-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--ov-meet-radius-md);
|
|
}
|
|
|
|
// Responsive adjustments
|
|
@include ov-mobile-down {
|
|
.room-access-container {
|
|
padding: var(--ov-meet-spacing-lg);
|
|
padding-top: var(--ov-meet-spacing-xl);
|
|
}
|
|
|
|
.room-header {
|
|
margin-bottom: var(--ov-meet-spacing-xl);
|
|
|
|
.room-info .room-title {
|
|
font-size: var(--ov-meet-font-size-xxl);
|
|
}
|
|
}
|
|
|
|
.action-card {
|
|
min-height: auto;
|
|
|
|
.card-header {
|
|
padding: var(--ov-meet-spacing-md);
|
|
|
|
.card-title-group {
|
|
.mat-mdc-card-title {
|
|
font-size: var(--ov-meet-font-size-lg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
padding: var(--ov-meet-spacing-md);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom leave button styling (existing functionality)
|
|
::ng-deep {
|
|
#media-buttons-container .custom-leave-btn {
|
|
&:hover {
|
|
background-color: var(--ov-meet-color-error) !important;
|
|
}
|
|
text-align: center;
|
|
background-color: var(--ov-meet-color-error) !important;
|
|
color: var(--ov-meet-text-on-primary);
|
|
border-radius: var(--ov-meet-radius-md) !important;
|
|
width: 65px !important;
|
|
margin: 0px !important;
|
|
}
|
|
}
|
|
|
|
// Custom force disconnect button
|
|
.force-disconnect-btn {
|
|
color: var(--ov-meet-color-error);
|
|
}
|
|
|
|
.make-moderator-btn {
|
|
color: var(--ov-meet-color-warning);
|
|
}
|
|
|
|
.participant-item-container {
|
|
align-items: center;
|
|
|
|
::ng-deep .participant-container {
|
|
padding: 2px 10px !important;
|
|
}
|
|
.moderator-badge {
|
|
color: var(--ov-meet-color-warning);
|
|
margin-right: var(--ov-meet-spacing-xs);
|
|
}
|
|
}
|