mirror of https://github.com/OpenVidu/openvidu.git
337 lines
6.8 KiB
SCSS
337 lines
6.8 KiB
SCSS
// Shared styles for device selectors (video and audio)
|
|
// This file contains common styling for both video-devices and audio-devices components
|
|
|
|
@mixin device-selector-base() {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
// Compact Mode - Unified Button
|
|
&.compact {
|
|
.unified-device-button {
|
|
display: flex;
|
|
background: var(--ov-primary-action-color);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
|
|
.toggle-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 50px;
|
|
width: 50px;
|
|
height: 48px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
transition: all 0.2s ease;
|
|
|
|
&.device-enabled {
|
|
color: var(--ov-text-primary-color);
|
|
|
|
mat-icon {
|
|
color: var(--ov-text-primary-color);
|
|
}
|
|
}
|
|
|
|
&.device-disabled {
|
|
background: var(--ov-error-color);
|
|
color: var(--ov-text-surface-color);
|
|
|
|
mat-icon {
|
|
color: var(--ov-text-surface-color);
|
|
}
|
|
}
|
|
|
|
mat-icon {
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.dropdown-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
width: 30px;
|
|
height: 48px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
color: var(--ov-text-secondary-color, #666);
|
|
transition: all 0.2s ease;
|
|
|
|
mat-icon {
|
|
font-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Normal Mode - Input Style Selector
|
|
&:not(.compact) {
|
|
.normal-device-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
|
|
.device-input-selector {
|
|
flex: 1;
|
|
|
|
&:not(.disabled) {
|
|
.selector-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
background: var(--ov-surface-color, #ffffff);
|
|
border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
|
|
border-radius: 8px;
|
|
color: var(--ov-text-surface-color);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
justify-content: flex-start;
|
|
|
|
&[disabled] {
|
|
background: var(--ov-disabled-background, #f5f5f5);
|
|
color: var(--ov-disabled-text-color, #999);
|
|
cursor: not-allowed;
|
|
border-color: var(--ov-disabled-border-color, #ddd);
|
|
}
|
|
|
|
.device-icon {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--ov-text-secondary-color, #666);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.selected-device-name {
|
|
flex: 1;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-icon {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--ov-text-secondary-color, #666);
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
&[aria-expanded='true'] .dropdown-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
.selector-button.disabled {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
background: var(--ov-disabled-background, #f5f5f5);
|
|
border: 1px solid var(--ov-disabled-border-color, #ddd);
|
|
border-radius: 8px;
|
|
color: var(--ov-disabled-text-color, #999);
|
|
font-size: 14px;
|
|
cursor: not-allowed;
|
|
|
|
.device-icon {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--ov-error-color, #d32f2f);
|
|
}
|
|
|
|
.selected-device-name {
|
|
flex: 1;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-device-message {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
background: var(--ov-primary-action-color);
|
|
border: 1px solid var(--ov-warning-color, #ff9800);
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
color: var(--ov-text-primary-color);
|
|
|
|
.warning-icon {
|
|
color: var(--ov-warning-color, #ff9800);
|
|
font-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Shared device menu styles
|
|
@mixin device-menu-styles() {
|
|
::ng-deep .device-menu.mat-mdc-menu-panel {
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
|
|
overflow: hidden;
|
|
background-color: var(--ov-surface-color);
|
|
|
|
.mat-mdc-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
transition: background-color 0.2s ease;
|
|
font-size: 14px;
|
|
color: var(--ov-text-surface-color);
|
|
|
|
&:hover {
|
|
background-color: var(--ov-hover-color);
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--ov-accent-action-color);
|
|
|
|
mat-icon {
|
|
color: var(--ov-text-surface-color);
|
|
}
|
|
}
|
|
|
|
mat-icon {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Selector button mixin
|
|
@mixin selector-button($icon-class, $name-class, $expand-class) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--ov-surface-color, #ffffff);
|
|
border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
|
|
border-radius: var(--ov-surface-radius, 8px);
|
|
transition: all 0.2s ease;
|
|
color: var(--ov-text-primary-color, #333);
|
|
font-weight: 500;
|
|
min-width: 150px;
|
|
|
|
.#{$name-class} {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1);
|
|
}
|
|
|
|
.#{$icon-class} {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--ov-text-surface-color, #666);
|
|
}
|
|
|
|
.#{$name-class} {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
display: inline-block !important;
|
|
color: var(--ov-text-surface-color) !important;
|
|
}
|
|
|
|
.#{$expand-class} {
|
|
font-size: 16px;
|
|
width: 16px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
min-height: 16px;
|
|
color: var(--ov-text-secondary-color, #666);
|
|
transition: transform 0.2s ease;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
&[aria-expanded='true'] .#{$expand-class} {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
// selector menu mixin
|
|
@mixin selector-menu($option-class, $option-name-class) {
|
|
border-radius: var(--ov-surface-radius, 8px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
border: 1px solid var(--ov-secondary-action-color);
|
|
overflow: hidden;
|
|
background: var(--ov-surface-color);
|
|
|
|
.#{$option-class} {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
transition: background-color 0.2s ease;
|
|
font-size: 14px;
|
|
min-height: 48px;
|
|
color: var(--ov-text-surface-color);
|
|
|
|
&:hover {
|
|
background-color: var(--ov-hover-color);
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--ov-accent-action-color);
|
|
|
|
.check-icon {
|
|
color: var(--ov-text-surface-color);
|
|
}
|
|
}
|
|
|
|
.check-icon {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.#{$option-name-class} {
|
|
text-transform: capitalize;
|
|
|
|
flex: 1;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|