diff --git a/src/app/[locale]/pages/marking-audio/page.tsx b/src/app/[locale]/pages/marking-audio/page.tsx
index 17774ed..02a3364 100644
--- a/src/app/[locale]/pages/marking-audio/page.tsx
+++ b/src/app/[locale]/pages/marking-audio/page.tsx
@@ -51,12 +51,12 @@ export default async function Page() {
description="multi-layered-protection-for-your-audios"
/>
+ {/*
{t('or')} +
*/} + + {fileType === "image" && ( ++ {t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')} +
+ )} ++ {t('file-format')}: {acceptString}
++ {t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')} +
+ - {fileType === "image" && ( -- {t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')} -
- )} -- {t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')} -
-- {t('file-format')}: {acceptString} -
- {error && ({error}
diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index c25c771..d0b89cb 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -458,6 +458,86 @@ } } +.dropdown-wrapper { + position: relative; + width: 100%; + + .dropdown-button { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + padding: 8px 16px; + + font-size: 14px; + font-weight: 500; + line-height: 1.25; + + background-color: #ffffff; + border: 2px solid #e2e8f0; + border-radius: 12px; + + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: #f9fafb; + } + + &:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53); + outline: 2px solid transparent; + outline-offset: 2px; + } + } + + .dropdown-list { + position: absolute; + right: 0; + z-index: 10; + width: 100%; + margin-top: 8px; + + transform-origin: top right; + + background-color: #ffffff; + border: 2px solid #e2e8f0; + border-radius: 12px; + + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + &:focus { + outline: none; + } + } + + .dropdown-item { + display: flex; + align-items: center; + + width: 100%; + padding: 8px 16px; + + font-size: 14px; + text-align: left; + + cursor: pointer; + user-select: none; + + &:hover { + background-color: #dbeafe; + } + + &.current { + font-weight: 700; + } + } +} + .yaPreloadingSuggestBlockContainer { height: 52px !important; } \ No newline at end of file diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index b917c06..0be16f0 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -329,12 +329,23 @@ .drag-drop-zone { border: 3px dashed v.$p-color; - border-radius: 15px; - padding: 40px 20px; + border-radius: .75rem; + padding: 2rem; text-align: center; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); margin-bottom: 20px; - transition: all 0.3s ease; + transition: all .2s ease-in-out; + + &.dragging { + border-color: #3b82f6; + background-color: #eff6ff; + } + + &:hover { + border-color: #764ba2; + background: linear-gradient(135deg, #e0f2fe, #ddd6fe); + transform: scale(1.01); + } .icon { width: 70px; @@ -352,12 +363,13 @@ .description { color: v.$text-s; margin-bottom: 5px; - text-align: start; + text-align: center; } .btn-primary { background: v.$p-color; - margin-bottom: 40px; + margin-bottom: 10px; + margin-top: 20px; } } @@ -529,8 +541,10 @@ padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border: 1px solid; - border-radius: 0.375rem; + border: 2px solid #e2e8f0; + border-radius: 10px; + box-shadow: 0 1px 2px #0000000d; + /* */ &:hover { background-color: v.$bg-light; @@ -548,12 +562,12 @@ gap: 0.25rem; button { - border: 1px solid v.$p-color; + border: 2px solid v.$p-color; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border-radius: 0.375rem; + border-radius: 10px; &.current { background-color: v.$p-color;