157 lines
3.7 KiB
SCSS
157 lines
3.7 KiB
SCSS
// ===== Base Server Selector Styles =====
|
|
#server-selector {
|
|
&.mat-mdc-form-field {
|
|
// Default styles (fill variant)
|
|
&:not(.outlined-variant) {
|
|
mat-form-field {
|
|
width: 96%;
|
|
}
|
|
}
|
|
|
|
// Outlined variant styles (used in login)
|
|
&.outlined-variant {
|
|
.mat-mdc-text-field-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.mat-mdc-form-field-flex {
|
|
align-items: center;
|
|
}
|
|
|
|
.mat-mdc-form-field-infix {
|
|
padding: 12px 0;
|
|
min-height: 48px;
|
|
}
|
|
|
|
// Outlined border styles with Material Design 3
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-outline, #79747e);
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
|
|
// Hover state
|
|
&:hover:not(.mat-form-field-disabled) {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-on-surface, #1a1c1e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Focused state
|
|
&.mat-focused {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-primary, #1074b9);
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-primary, #1074b9);
|
|
}
|
|
}
|
|
|
|
// Select styling
|
|
.mat-mdc-select {
|
|
font-size: 0.875rem;
|
|
color: var(--md-sys-color-on-surface, #1a1c1e);
|
|
}
|
|
|
|
.mat-mdc-select-arrow {
|
|
color: var(--md-sys-color-on-surface-variant, #44474e);
|
|
}
|
|
|
|
// Label styling
|
|
.mat-mdc-floating-label {
|
|
font-size: 0.875rem;
|
|
color: var(--md-sys-color-on-surface-variant, #44474e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark theme support for outlined variant
|
|
.dark-theme {
|
|
#server-selector.outlined-variant {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-outline, #938f99);
|
|
}
|
|
}
|
|
|
|
&:hover:not(.mat-form-field-disabled) {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-on-surface, #e2e2e5);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mat-focused {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-primary, #5ba2ec);
|
|
}
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-primary, #5ba2ec);
|
|
}
|
|
}
|
|
|
|
.mat-mdc-select {
|
|
color: var(--md-sys-color-on-surface, #e2e2e5);
|
|
}
|
|
|
|
.mat-mdc-select-arrow {
|
|
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
|
}
|
|
|
|
.sticky {
|
|
background-color: var(--md-sys-color-surface-container, #2c2f36);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ===== Common Styles =====
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.ml {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky;
|
|
z-index: 1; // appear above mat-option
|
|
top: 0; // fix at the top
|
|
background-color: var(--md-sys-color-surface-container, white); // don't see mat-option when scrolling
|
|
box-shadow: 1px -2px 10px 0 rgb(0 0 0 / 10%); // shadow at the bottom
|
|
}
|
|
|
|
mat-form-field {
|
|
width: 96%;
|
|
}
|