| @use 'constants' as *; | |
| .wrapper { | |
| .configuration-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 1.25rem; | |
| width: 680px; | |
| margin: 1rem; | |
| padding: 1.25rem; | |
| border-radius: 8px; | |
| border: 1px solid $color-border-light; | |
| background-color: $color-white; | |
| box-shadow: 0 1px 3px rgba(60, 64, 67, 0.1); | |
| position: relative; | |
| .header { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 36px; | |
| .title { | |
| font-size: 20px; | |
| font-weight: 500; | |
| color: $color-text-primary; | |
| } | |
| .edit-icon { | |
| display: inline-block; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| padding: 6px; | |
| cursor: pointer; | |
| color: $color-text-secondary; | |
| &:hover { | |
| background-color: $color-bg-hover; | |
| } | |
| } | |
| } | |
| // Status Banner | |
| .auth-status-card { | |
| padding: 0.75rem 1rem; | |
| border-radius: 6px; | |
| background-color: $color-bg-light; | |
| border-left: 4px solid $color-border-unauth; | |
| &.authenticated { | |
| background-color: $color-google-light-green; | |
| border-left-color: $color-google-green; | |
| .status-icon { | |
| color: $color-google-green; | |
| } | |
| .status-title { | |
| color: $color-google-green; | |
| } | |
| } | |
| .status-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 500; | |
| .status-icon { | |
| font-size: 20px; | |
| height: 20px; | |
| width: 20px; | |
| color: $color-text-secondary; | |
| } | |
| .status-title { | |
| font-size: 14px; | |
| } | |
| } | |
| .status-desc { | |
| margin: 0.25rem 0 0 1.75rem; | |
| font-size: 13px; | |
| color: $color-text-body; | |
| } | |
| } | |
| // Google Sign-In Card | |
| .google-auth-card { | |
| border: 1px solid $color-border-divider; | |
| border-radius: 8px; | |
| box-shadow: none; | |
| background-color: $color-bg-light; | |
| mat-card-header { | |
| margin-bottom: 0.75rem; | |
| } | |
| .authenticated-setup-content .input-box-container { | |
| margin-top: 1rem; | |
| } | |
| .user-account-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background-color: $color-google-light-blue; | |
| color: $color-google-blue; | |
| padding: 6px 12px; | |
| border-radius: 16px; | |
| font-size: 13px; | |
| margin-bottom: 0.75rem; | |
| mat-icon { | |
| font-size: 18px; | |
| height: 18px; | |
| width: 18px; | |
| } | |
| strong { | |
| color: $color-google-dark-blue; | |
| } | |
| } | |
| .google-title-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 16px; | |
| font-weight: 500; | |
| } | |
| mat-card-subtitle { | |
| font-size: 13px; | |
| color: $color-text-secondary; | |
| margin-top: 4px; | |
| line-height: 1.4; | |
| } | |
| .google-card-actions { | |
| padding: 0 16px 16px 16px; | |
| margin: 0; | |
| .google-signin-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0 1.25rem 0 0.65rem; | |
| height: 40px; | |
| font-weight: 500; | |
| .google-g-badge { | |
| position: relative; | |
| z-index: 1; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background-color: $color-white; | |
| margin-right: 0.6rem; | |
| flex-shrink: 0; | |
| } | |
| &:disabled .google-g-badge { | |
| opacity: 0.55; | |
| } | |
| } | |
| } | |
| } | |
| // BOTO Credentials Panel | |
| .boto-panel { | |
| border: 1px solid $color-border-light; | |
| box-shadow: none !important; | |
| background-color: $color-bg-panel; | |
| border-radius: 8px !important; | |
| overflow: hidden; | |
| mat-expansion-panel-header { | |
| min-height: 48px !important; | |
| height: auto !important; | |
| padding: 8px 16px; | |
| ::ng-deep .mat-content { | |
| align-items: center; | |
| display: flex; | |
| flex-wrap: nowrap; | |
| gap: 16px; | |
| } | |
| } | |
| .boto-panel-title { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 0 0 auto; | |
| margin: 0; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: $color-text-body; | |
| } | |
| .boto-panel-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| flex: 1 1 auto; | |
| margin: 0; | |
| .edit-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| color: $color-text-secondary; | |
| transition: background-color 0.2s; | |
| &:hover { | |
| background-color: $color-border-divider; | |
| } | |
| } | |
| } | |
| .deprecated-content { | |
| display: flex; | |
| flex-direction: column; | |
| row-gap: 1rem; | |
| padding: 1rem 0 0.5rem 0; | |
| } | |
| } | |
| .input-box-container { | |
| width: 100%; | |
| p { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: $color-text-body; | |
| margin-bottom: 4px; | |
| } | |
| .input-box { | |
| width: 100%; | |
| span[matPrefix], | |
| span[matSuffix] { | |
| color: $color-text-secondary; | |
| font-size: 14px; | |
| line-height: inherit; | |
| vertical-align: middle; | |
| margin-right: 2px; | |
| } | |
| .bucket-wrapper { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| column-gap: 0.5rem; | |
| .link-icon { | |
| scale: 0.8; | |
| } | |
| } | |
| } | |
| } | |
| .btn-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| column-gap: 1rem; | |
| margin-top: 0.5rem; | |
| } | |
| } | |
| } | |
| // OAuth Modal Backdrop | |
| .oauth-modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: rgba(0, 0, 0, 0.4); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| .oauth-modal { | |
| width: 480px; | |
| background-color: $color-white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| .oauth-modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 1.25rem; | |
| border-bottom: 1px solid $color-border-divider; | |
| h3 { | |
| margin: 0; | |
| font-size: 18px; | |
| font-weight: 500; | |
| color: $color-text-primary; | |
| } | |
| } | |
| .oauth-body { | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| &.centered { | |
| align-items: center; | |
| padding: 2.5rem 1.5rem; | |
| .loading-msg { | |
| margin-top: 1rem; | |
| color: $color-text-secondary; | |
| } | |
| } | |
| .oauth-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: $color-text-primary; | |
| .step-num { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| background-color: $color-google-blue; | |
| color: $color-white; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| } | |
| .verify-link-box { | |
| margin-left: 1.75rem; | |
| .verify-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| color: $color-google-blue; | |
| font-size: 15px; | |
| font-weight: 500; | |
| text-decoration: underline; | |
| .external-icon { | |
| font-size: 16px; | |
| height: 16px; | |
| width: 16px; | |
| } | |
| } | |
| } | |
| .code-box-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-left: 1.75rem; | |
| background-color: $color-bg-hover; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| width: fit-content; | |
| .user-code { | |
| font-family: monospace; | |
| font-size: 22px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| color: $color-text-primary; | |
| } | |
| } | |
| .polling-status { | |
| margin-top: 0.5rem; | |
| .polling-text { | |
| margin-top: 0.5rem; | |
| font-size: 13px; | |
| color: $color-text-secondary; | |
| text-align: center; | |
| } | |
| } | |
| .error-text { | |
| color: $color-error; | |
| font-size: 13px; | |
| margin: 0; | |
| } | |
| } | |
| } | |
| } | |
| ::ng-deep .mat-mdc-form-field-text-prefix, | |
| ::ng-deep .mat-mdc-form-field-text-suffix { | |
| align-self: center !important; | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| } |