1201 lines
23 KiB
CSS
1201 lines
23 KiB
CSS
/* =====================================================
|
|
Social Posting Modal
|
|
===================================================== */
|
|
|
|
.social-posting-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
/* 마운트 위치의 텍스트 정렬을 상속하지 않는다.
|
|
position:fixed 라도 DOM 상속은 끊기지 않아, 중앙정렬된 부모
|
|
(.ssul-scope.ssul-result 등) 안에서 열면 폼 라벨까지 가운데로 쏠린다. */
|
|
text-align: left;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.social-posting-modal {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
max-height: 90vh;
|
|
background-color: #002224;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(166, 255, 234, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.social-posting-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.social-posting-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin: 0;
|
|
}
|
|
|
|
.social-posting-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.social-posting-close:hover {
|
|
color: #FFFFFF;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.social-posting-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.social-posting-content {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* Video Preview Section */
|
|
.social-posting-preview {
|
|
width: 45%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
background-color: #001a1c;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.social-posting-preview {
|
|
width: 100%;
|
|
height: 80vh;
|
|
border-right: none;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
.social-posting-video-container {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
background-color: #000;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.social-posting-video.horizontal {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.social-posting-video.vertical {
|
|
display: block;
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
/* Form Section */
|
|
.social-posting-form {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
/* .social-posting-video-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.social-posting-label-badge {
|
|
padding: 0.375rem 0.75rem;
|
|
background: rgba(166, 130, 255, 0.15);
|
|
border: 1px solid rgba(166, 130, 255, 0.3);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #a682ff;
|
|
}
|
|
|
|
.social-posting-add-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: 1px dashed rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
} */
|
|
|
|
.social-posting-video-meta {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.social-posting-video-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.social-posting-video-specs {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin: 0;
|
|
}
|
|
|
|
.social-posting-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.social-posting-label {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.social-posting-label .required {
|
|
color: #a6ffea;
|
|
}
|
|
|
|
.social-posting-input,
|
|
.social-posting-select,
|
|
.social-posting-textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-family: 'Pretendard', sans-serif;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.social-posting-input::placeholder,
|
|
.social-posting-textarea::placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* SEO 자동 생성 shimmer 효과 */
|
|
@keyframes seo-shimmer {
|
|
0% { background-position: 200% center; }
|
|
100% { background-position: -200% center; }
|
|
}
|
|
|
|
.seo-input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.seo-input-wrapper .social-posting-input,
|
|
.seo-input-wrapper .social-posting-textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.seo-shimmer-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 12px;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
font-size: 14px;
|
|
font-family: 'Pretendard', sans-serif;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(166, 255, 234, 0.25) 0%,
|
|
#a6ffea 40%,
|
|
rgba(166, 255, 234, 0.25) 80%
|
|
);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: seo-shimmer 3s linear infinite;
|
|
}
|
|
|
|
.seo-input-wrapper:has(.social-posting-textarea) .seo-shimmer-text {
|
|
top: 14px;
|
|
transform: none;
|
|
}
|
|
|
|
.social-posting-input:focus,
|
|
.social-posting-select:focus,
|
|
.social-posting-textarea:focus {
|
|
outline: none;
|
|
border-color: rgba(166, 255, 234, 0.4);
|
|
}
|
|
|
|
.social-posting-select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 1rem center;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.social-posting-select option {
|
|
background-color: #002224;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.social-posting-textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.social-posting-char-count {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.social-posting-loading,
|
|
.social-posting-no-accounts {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.social-posting-no-accounts-hint {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Radio Group */
|
|
.social-posting-radio-group {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.social-posting-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.social-posting-radio input[type="radio"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #a6ffea;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.social-posting-radio .radio-label {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.social-posting-radio .radio-label.disabled {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* =====================================================
|
|
Schedule DateTime Picker
|
|
===================================================== */
|
|
|
|
.schedule-datetime-picker {
|
|
margin-top: 12px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.mini-calendar {
|
|
width: 100%;
|
|
}
|
|
|
|
.mini-calendar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mini-calendar-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.mini-calendar-nav {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
line-height: 1;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.mini-calendar-nav:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.mini-calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.mini-calendar-day-label {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.mini-calendar-cell {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
padding: 5px 2px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.mini-calendar-cell:hover:not(.disabled):not(.selected) {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mini-calendar-cell.other-month {
|
|
color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.mini-calendar-cell.today {
|
|
color: #a6ffea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mini-calendar-cell.selected {
|
|
background: #a65eff;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mini-calendar-cell.disabled {
|
|
color: rgba(255, 255, 255, 0.2);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.schedule-time-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.schedule-time-label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.schedule-time-selects {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.schedule-time-select {
|
|
flex: 1;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 8px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 14px;
|
|
padding: 8px 10px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
appearance: auto;
|
|
}
|
|
|
|
.schedule-time-select:focus {
|
|
border-color: rgba(166, 95, 255, 0.6);
|
|
}
|
|
|
|
.schedule-time-select option {
|
|
background: #1a2a2a;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.schedule-datetime-preview {
|
|
font-size: 12px;
|
|
color: #a65eff;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Footer */
|
|
.social-posting-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.social-posting-footer-note {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin: 0;
|
|
}
|
|
|
|
.social-posting-link {
|
|
color: #a6ffea;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.social-posting-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.social-posting-btn {
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.social-posting-btn.cancel {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.social-posting-btn.cancel:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.social-posting-btn.submit {
|
|
background: linear-gradient(135deg, #a682ff 0%, #8b5cf6 100%);
|
|
border: none;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.social-posting-btn.submit:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #9570f0 0%, #7c4fe0 100%);
|
|
}
|
|
|
|
.social-posting-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Mobile Adjustments */
|
|
@media (max-width: 768px) {
|
|
.social-posting-modal {
|
|
max-height: 95vh;
|
|
}
|
|
|
|
.social-posting-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.social-posting-form {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.social-posting-footer {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.social-posting-footer-note {
|
|
text-align: center;
|
|
}
|
|
|
|
.social-posting-actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.social-posting-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.social-posting-radio-group {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar for Social Posting Modal */
|
|
.social-posting-modal::-webkit-scrollbar,
|
|
.social-posting-content::-webkit-scrollbar,
|
|
.social-posting-form::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.social-posting-modal::-webkit-scrollbar-track,
|
|
.social-posting-content::-webkit-scrollbar-track,
|
|
.social-posting-form::-webkit-scrollbar-track {
|
|
background: #001a1c;
|
|
}
|
|
|
|
.social-posting-modal::-webkit-scrollbar-thumb,
|
|
.social-posting-content::-webkit-scrollbar-thumb,
|
|
.social-posting-form::-webkit-scrollbar-thumb {
|
|
background: #003d40;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.social-posting-modal::-webkit-scrollbar-thumb:hover,
|
|
.social-posting-content::-webkit-scrollbar-thumb:hover,
|
|
.social-posting-form::-webkit-scrollbar-thumb:hover {
|
|
background: #004d50;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
.social-posting-modal,
|
|
.social-posting-content,
|
|
.social-posting-form {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #003d40 #001a1c;
|
|
}
|
|
|
|
/* Custom Channel Dropdown */
|
|
.social-posting-channel-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.social-posting-channel-trigger {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-family: 'Pretendard', sans-serif;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.social-posting-channel-trigger:hover {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.social-posting-channel-trigger.open {
|
|
border-color: rgba(166, 255, 234, 0.4);
|
|
}
|
|
|
|
.social-posting-channel-selected {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
.social-posting-channel-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.social-posting-channel-arrow {
|
|
width: 12px;
|
|
height: 12px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.social-posting-channel-trigger.open .social-posting-channel-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.social-posting-channel-placeholder {
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.social-posting-channel-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-top: 4px;
|
|
background-color: #003538;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.social-posting-channel-option {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-family: 'Pretendard', sans-serif;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.social-posting-channel-option:hover {
|
|
background-color: rgba(166, 255, 234, 0.1);
|
|
}
|
|
|
|
.social-posting-channel-option.selected {
|
|
background-color: rgba(166, 255, 234, 0.15);
|
|
}
|
|
|
|
.social-posting-channel-option-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
Upload Progress Modal Styles
|
|
============================================ */
|
|
|
|
.upload-progress-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1100;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.upload-progress-modal {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
background: linear-gradient(180deg, #003538 0%, #002224 100%);
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.upload-progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.upload-progress-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin: 0;
|
|
}
|
|
|
|
.upload-progress-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
display: flex;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.upload-progress-close:hover {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.upload-progress-content {
|
|
padding: 2rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
/* Spinner */
|
|
.upload-progress-spinner {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.upload-spinner-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: upload-spinner-rotate 1.5s linear infinite;
|
|
}
|
|
|
|
.upload-spinner-svg circle {
|
|
stroke: #a6ffea;
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: 0;
|
|
stroke-linecap: round;
|
|
animation: upload-spinner-dash 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes upload-spinner-rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes upload-spinner-dash {
|
|
0% {
|
|
stroke-dasharray: 1, 150;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -35;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -124;
|
|
}
|
|
}
|
|
|
|
/* Status Icons */
|
|
.upload-progress-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.upload-progress-icon.success {
|
|
background: rgba(166, 255, 234, 0.15);
|
|
color: #a6ffea;
|
|
}
|
|
|
|
.upload-progress-icon.error {
|
|
background: rgba(248, 113, 113, 0.15);
|
|
color: #f87171;
|
|
}
|
|
|
|
/* Status Text */
|
|
.upload-progress-status {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin: 0;
|
|
}
|
|
|
|
.upload-progress-status.completed {
|
|
color: #a6ffea;
|
|
}
|
|
|
|
.upload-progress-status.failed {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.upload-progress-bar-container {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
position: relative;
|
|
}
|
|
|
|
.upload-progress-bar-container::before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.upload-progress-bar-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 8px;
|
|
background: linear-gradient(90deg, #a6ffea 0%, #4fd1c5 100%);
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.upload-progress-percent {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 0.5rem;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* Info Section */
|
|
.upload-progress-info {
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.upload-progress-info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.upload-progress-info-row + .upload-progress-info-row {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.upload-progress-label {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.upload-progress-value {
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
text-align: right;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Error Message */
|
|
.upload-progress-error {
|
|
width: 100%;
|
|
background: rgba(248, 113, 113, 0.1);
|
|
border: 1px solid rgba(248, 113, 113, 0.3);
|
|
border-radius: 8px;
|
|
padding: 0.875rem 1rem;
|
|
}
|
|
|
|
.upload-progress-error p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #f87171;
|
|
text-align: center;
|
|
}
|
|
|
|
/* YouTube Link */
|
|
.upload-progress-youtube-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #f87171;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.upload-progress-youtube-link:hover {
|
|
background: #CC0000;
|
|
}
|
|
|
|
.upload-youtube-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Footer */
|
|
.upload-progress-footer {
|
|
padding: 1.25rem 1.5rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.upload-progress-calendar-link {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.45);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.upload-progress-calendar-link:hover {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.upload-progress-btn {
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.upload-progress-btn.primary {
|
|
background: linear-gradient(135deg, #a6ffea 0%, #4fd1c5 100%);
|
|
border: none;
|
|
color: #002224;
|
|
}
|
|
|
|
.upload-progress-btn.primary:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.upload-progress-note {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Calendar panel scrollbar */
|
|
.calendar-panel-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.calendar-panel-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.calendar-panel-scroll::-webkit-scrollbar-thumb {
|
|
background: #067C80;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.calendar-panel-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: #088a8e;
|
|
}
|
|
|
|
/* Firefox */
|
|
.calendar-panel-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #067C80 transparent;
|
|
/* 패널 끝까지 스크롤해도 뒤의 캘린더/페이지로 스크롤이 전파되지 않게 한다 */
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* BusinessNameInputModal */
|
|
.manual-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.manual-modal {
|
|
background: #1a2a2b;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 16px;
|
|
width: 375px;
|
|
max-width: 92vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.manual-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.manual-modal-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.manual-modal-subtitle {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: rgba(155, 202, 204, 0.7);
|
|
padding: 15px 20px 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.manual-modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.manual-modal-close:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.manual-modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 20px 20px 24px;
|
|
}
|
|
|
|
.manual-modal-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.manual-modal-label {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.manual-modal-input {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(155, 202, 204, 0.25);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.manual-modal-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.manual-modal-input:focus {
|
|
border-color: #9BCACC;
|
|
}
|
|
|
|
.manual-modal-city-btn {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(155, 202, 204, 0.25);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-size: 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: border-color 0.15s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.manual-modal-city-btn.selected {
|
|
color: #fff;
|
|
}
|
|
|
|
.manual-modal-city-btn:hover {
|
|
border-color: #9BCACC;
|
|
}
|
|
|
|
.manual-modal-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.manual-modal-cancel {
|
|
flex: 1;
|
|
padding: 11px 0;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(155, 202, 204, 0.3);
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.manual-modal-cancel:hover {
|
|
background: rgba(155, 202, 204, 0.08);
|
|
}
|
|
|
|
.manual-modal-submit {
|
|
flex: 2;
|
|
padding: 11px 0;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: #9BCACC;
|
|
color: #1a2a2b;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s, opacity 0.15s;
|
|
}
|
|
|
|
.manual-modal-submit:hover:not(:disabled) {
|
|
background: #b0d8da;
|
|
}
|
|
|
|
.manual-modal-submit:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|