mirror of
https://github.com/booklore-app/booklore.git
synced 2026-02-18 00:17:53 +01:00
Refactor common dialog header and footer components (#2318)
Co-authored-by: acx10 <acx10@users.noreply.github.com>
This commit is contained in:
ACX
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.shelf-assigner {
|
||||
width: 550px;
|
||||
max-width: 550px;
|
||||
@@ -11,81 +13,8 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.panel-header;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
|
||||
.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shelves-container {
|
||||
@@ -339,31 +268,6 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.shelf-creator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10,80 +12,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
@@ -306,88 +235,10 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.validation-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.validation-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgb(239, 68, 68);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: rgb(34, 197, 94);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(34, 197, 94);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@include panel.validation-message;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.shelf-form {
|
||||
width: 550px;
|
||||
max-width: 550px;
|
||||
@@ -11,80 +13,8 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.panel-header;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
|
||||
.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shelf-container {
|
||||
@@ -173,31 +103,6 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.dashboard-settings {
|
||||
width: 1000px;
|
||||
max-width: 1000px;
|
||||
@@ -11,81 +13,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.settings-controls {
|
||||
@@ -267,36 +195,17 @@ label {
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.footer-left {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -306,8 +215,6 @@ label {
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
|
||||
::ng-deep .p-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<div class="library-creator">
|
||||
<div class="main-header">
|
||||
<div class="main-header-icon">
|
||||
<i class="pi pi-book"></i>
|
||||
<div class="header-icon-wrapper">
|
||||
<i class="header-icon pi pi-book"></i>
|
||||
</div>
|
||||
<div class="main-header-content">
|
||||
<h1 class="main-header-title">
|
||||
<div class="header-text">
|
||||
<h1 class="panel-title">
|
||||
{{ mode === 'edit' ? 'Edit Library' : 'Create New Library' }}
|
||||
</h1>
|
||||
<p class="main-header-subtitle">Set up a new library to organize and manage your book collection</p>
|
||||
<p class="panel-description">Set up a new library to organize and manage your book collection</p>
|
||||
</div>
|
||||
<p-button
|
||||
icon="pi pi-times"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.library-creator {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
@@ -24,129 +26,26 @@
|
||||
}
|
||||
|
||||
.main-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
@include panel.panel-header;
|
||||
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
|
||||
background: var(--overlay-background);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.main-header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
.header-icon-wrapper {
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.main-header-content {
|
||||
flex: 1;
|
||||
|
||||
.main-header-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 1.25rem;
|
||||
|
||||
.main-header-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
i {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header-content {
|
||||
.main-header-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 1.25rem;
|
||||
gap: 1rem;
|
||||
|
||||
.main-header-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header-content {
|
||||
.main-header-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.main-header-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header-content {
|
||||
.main-header-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.main-header-subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -267,81 +166,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--overlay-background);
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.375rem;
|
||||
color: dodgerblue;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text .panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0.5rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text .panel-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
@@ -994,86 +819,13 @@
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
@include panel.dialog-footer;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
.validation-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.validation-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0.75rem 0.5rem 0;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-right {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgb(239, 68, 68);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: rgb(34, 197, 94);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
@include panel.validation-message;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.magic-shelf-container {
|
||||
width: 75rem;
|
||||
max-width: 75rem;
|
||||
@@ -11,87 +13,8 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.panel-header;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
|
||||
.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.magic-shelf-content {
|
||||
@@ -257,31 +180,7 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.dialog-footer-end;
|
||||
}
|
||||
|
||||
.save-button-section {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.font-upload-dialog {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
@@ -11,86 +13,8 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.panel-header;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
|
||||
::ng-deep .p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
@@ -424,20 +348,10 @@
|
||||
|
||||
// ==================== Dialog Footer ====================
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
@include panel.dialog-footer-end;
|
||||
border-top: 1px solid var(--border-color);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
|
||||
::ng-deep .p-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.email-provider-form {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
@@ -17,80 +19,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
@@ -273,90 +202,12 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.validation-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.validation-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgb(239, 68, 68);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: rgb(34, 197, 94);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(34, 197, 94);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@include panel.validation-message;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.email-recipient-creator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -10,80 +12,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
@@ -248,89 +177,11 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.validation-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.validation-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgb(239, 68, 68);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: rgb(34, 197, 94);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(34, 197, 94);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@include panel.validation-message;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.create-user-dialog {
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
@@ -11,81 +13,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
@@ -349,16 +277,8 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-info {
|
||||
display: flex;
|
||||
@@ -372,25 +292,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.footer-info {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../../shared/styles/panel-shared' as panel;
|
||||
|
||||
.user-profile-dialog {
|
||||
width: 500px;
|
||||
max-width: 650px;
|
||||
@@ -11,85 +13,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
|
||||
.p-button {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem 3rem 1rem 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../styles/panel-shared' as panel;
|
||||
|
||||
.book-uploader {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
@@ -11,86 +13,8 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.panel-header;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
|
||||
::ng-deep .p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use '../../styles/panel-shared' as panel;
|
||||
|
||||
.responsive-table {
|
||||
min-width: 50rem;
|
||||
|
||||
@@ -20,70 +22,7 @@
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include panel.panel-header;
|
||||
}
|
||||
|
||||
.picker-controls {
|
||||
@@ -539,53 +478,25 @@
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
@include panel.dialog-footer;
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-info {
|
||||
flex: 1;
|
||||
|
||||
.selection-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-secondary-color);
|
||||
font-size: 0.9rem;
|
||||
|
||||
i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
.selection-info {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-secondary-color);
|
||||
font-size: 0.9rem;
|
||||
|
||||
i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-info {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
190
booklore-ui/src/app/shared/styles/_panel-shared.scss
Normal file
190
booklore-ui/src/app/shared/styles/_panel-shared.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
// Shared mixins for panel headers and dialog footers
|
||||
// This file provides consistent styling for dialog/panel components
|
||||
|
||||
@mixin panel-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem 1.5rem;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button,
|
||||
::ng-deep .close-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
|
||||
.header-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
.panel-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button,
|
||||
::ng-deep .close-button {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--card-background);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.footer-info,
|
||||
.validation-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-actions,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
.footer-info,
|
||||
.validation-status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-actions,
|
||||
.footer-right {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Variant for footers that only need right-aligned actions
|
||||
@mixin dialog-footer-end {
|
||||
@include dialog-footer;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation message styles commonly used in footers
|
||||
@mixin validation-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgb(239, 68, 68);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: rgb(34, 197, 94);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
|
||||
i {
|
||||
color: rgb(34, 197, 94);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user