first commit
This commit is contained in:
AD2025
@@ -0,0 +1,468 @@
|
||||
.guest-settings-edit-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
// Header Section
|
||||
.settings-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1rem;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
|
||||
.header-title {
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0.25rem 0 0 0;
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Loading State
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
gap: 1.5rem;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Error State
|
||||
.error-card {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
mat-icon {
|
||||
font-size: 3rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
flex: 1;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #d32f2f;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Settings Form
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
// Form Section Card
|
||||
.form-section {
|
||||
mat-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.section-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
|
||||
mat-icon {
|
||||
font-size: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&.access {
|
||||
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
|
||||
}
|
||||
|
||||
&.limits {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
|
||||
}
|
||||
|
||||
&.session {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
}
|
||||
|
||||
&.message {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
&.changes {
|
||||
background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
mat-card-subtitle {
|
||||
margin: 0.25rem 0 0 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Field
|
||||
.toggle-field {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: #f5f5f5;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.toggle-info {
|
||||
flex: 1;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.field-description {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warning Banner
|
||||
.warning-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
|
||||
mat-icon {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #856404;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Fields
|
||||
.form-row {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
mat-icon[matPrefix] {
|
||||
margin-right: 0.5rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// Message Preview
|
||||
.message-preview {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #3f51b5;
|
||||
|
||||
.preview-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #3f51b5;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
// Changes Preview
|
||||
.changes-preview {
|
||||
border: 2px solid #ffa726;
|
||||
|
||||
.changes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
.change-item {
|
||||
padding: 1rem;
|
||||
background: #fff3e0;
|
||||
border-radius: 8px;
|
||||
|
||||
.change-label {
|
||||
font-weight: 500;
|
||||
color: #e65100;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.change-values {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
.old-value {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: #ff9800;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.new-value {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
color: #4caf50;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form Actions
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 0;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
gap: 1rem;
|
||||
|
||||
.actions-left,
|
||||
.actions-right {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
button {
|
||||
mat-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: 768px) {
|
||||
.guest-settings-edit-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
.header-left {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-title h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-field {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.actions-left,
|
||||
.actions-right {
|
||||
width: 100%;
|
||||
justify-content: stretch;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.changes-preview {
|
||||
.change-item .change-values {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.form-section {
|
||||
mat-card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Mode Support
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.settings-header .header-title h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.settings-header .subtitle {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.loading-container p {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.error-card .error-content .error-text p {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.toggle-field {
|
||||
background: #2a2a2a;
|
||||
|
||||
label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.field-description {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-banner {
|
||||
background: #4a3f2a;
|
||||
|
||||
span {
|
||||
color: #ffd54f;
|
||||
}
|
||||
}
|
||||
|
||||
mat-form-field mat-icon[matPrefix] {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.message-preview {
|
||||
background: #2a2a2a;
|
||||
|
||||
.preview-content {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.changes-preview {
|
||||
.changes-list .change-item {
|
||||
background: #3a3a2a;
|
||||
|
||||
.change-label {
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
.change-values {
|
||||
.old-value,
|
||||
.new-value {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
border-top-color: #444;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user