İmport page design

This commit is contained in:
Merve Karaman
2023-07-25 18:09:06 +03:00
parent dc6d942e32
commit 2fb2006c22
12 changed files with 628 additions and 61 deletions

107
public/css/app.css vendored
View File

@@ -319,7 +319,8 @@
border-radius: .375rem;
}
.dz-message {
.dz-message,
.dz-preview-message {
padding: 5rem 1rem;
display: -webkit-box;
display: -ms-flexbox;
@@ -331,8 +332,9 @@
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
border: 1px dashed #C7C9D9;
border: 2px dashed #C7C9D9;
border-radius: .375rem;
font-weight: 500;
text-align: center;
color: #595959;
-webkit-transition: all .15s ease;
@@ -341,30 +343,37 @@
-ms-flex-order: -1;
order: -1;
cursor: pointer;
}
.dz-message {
z-index: 9;
}
.dz-message:hover {
border-color: #424242;
.dz-message:hover,
.dz-preview-message:hover {
border-color: #918b8b;
}
.dropzone-multiple .dz-message {
.dropzone-multiple .dz-message,
.dropzone-multiple .dz-preview-message {
height: 5rem;
padding: 0;
}
.dropzone-single .dz-message {
.dropzone-single .dz-message,
.dropzone-single .dz-preview-message {
height: 100%;
padding: 0.5rem 1rem;
padding: 1rem 0;
}
.dropzone-column .dz-message {
.dropzone-column .dz-message,
.dropzone-column .dz-preview-message {
height: 100%;
padding: 0;
}
.dropzone-single.dz-max-files-reached .dz-message {
background-color: rgba(0,0,0,.2);
/* background-color: rgba(0,0,0,.2); */
color: #fff;
opacity: 0;
}
@@ -373,7 +382,8 @@
opacity:1
}
.dz-message .dz-button {
.dz-message .dz-button,
.dz-preview-message .dz-button {
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
@@ -388,7 +398,7 @@
}
.dropzone-single.dz-max-files-reached .dz-message {
background-color: rgba(0,0,0,.9);
/* background-color: rgba(0,0,0,.9); */
color: #fff;
opacity: 0;
}
@@ -415,6 +425,32 @@
bottom: 7px;
z-index: 99;
}
.dz-import-text {
color: #6B7280;
font-weight: 600;
}
.dz-import-upload {
color: #6B7280;
font-weight: 500;
}
.dz-import-icon {
font-size: 38px;
outline: none;
}
.dz-import {
padding: 20px;
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
}
.dz-import-width {
width: 120%;
}
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
@@ -1543,13 +1579,16 @@ button, input, optgroup, select, textarea{
.change-log-modal .badge{
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(110 161 82 / var(--tw-bg-opacity));
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1.2rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
font-weight: 500;
--tw-text-opacity: 1;
color: #6ea152;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.change-log-modal h2{
@@ -1559,50 +1598,42 @@ button, input, optgroup, select, textarea{
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(85 88 139 / var(--tw-text-opacity));
}
}
.change-log-modal h3{
margin-bottom: 0.5rem;
margin-top: 40px;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: #55588B;
color: rgb(85 88 139 / var(--tw-text-opacity));
}
.change-log-modal ul{
margin-bottom: 0.5rem;
list-style-position: inside;
list-style-type: disc;
border: 2px solid #eaeaea;
padding: 10px 20px;
border-radius: 8px;
}
.change-log-modal li:last-child {
margin-bottom: 13px;
}
.change-log-modal li{
font-size: 1rem;
line-height: 1.5rem;
margin-top: 13px;
--tw-text-opacity: 1;
color: rgb(85 88 139 / var(--tw-text-opacity));
}
.change-log-modal a{
--tw-text-opacity: 1;
color: rgb(110 161 82 / var(--tw-text-opacity));
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
/* changelog modal styling for update center */
#button-monthly {
margin-left: unset !important;
}
margin-left: unset !important;
}
/* width of container, custom choose */
@@ -62781,6 +62812,10 @@ body{
display: flex;
}
.group:hover .group-hover\:hidden{
display: none;
}
.group:hover .group-hover\:translate-x-1{
--tw-translate-x: 0.25rem;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -63496,6 +63531,10 @@ body{
margin: 1px;
}
:is([dir="ltr"] .ltr\:-ml-10){
margin-left: -2.5rem;
}
:is([dir="ltr"] .ltr\:-ml-7){
margin-left: -1.75rem;
}
@@ -63520,6 +63559,10 @@ body{
margin-right: 0.25rem;
}
:is([dir="ltr"] .ltr\:mr-10){
margin-right: 2.5rem;
}
:is([dir="ltr"] .ltr\:mr-2){
margin-right: 0.5rem;
}
@@ -64513,6 +64556,10 @@ body{
margin: 1px;
}
:is([dir="rtl"] .rtl\:-mr-10){
margin-right: -2.5rem;
}
:is([dir="rtl"] .rtl\:-mr-7){
margin-right: -1.75rem;
}
@@ -64521,6 +64568,10 @@ body{
margin-left: 0.25rem;
}
:is([dir="rtl"] .rtl\:ml-10){
margin-left: 2.5rem;
}
:is([dir="rtl"] .rtl\:ml-2){
margin-left: 0.5rem;
}

View File

@@ -20,43 +20,52 @@
border-radius: .375rem;
}
.dz-message {
.dz-message,
.dz-preview-message {
padding: 5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1px dashed #C7C9D9;
border: 2px dashed #C7C9D9;
border-radius: .375rem;
font-weight: 500;
text-align: center;
color: #595959;
transition: all .15s ease;
order: -1;
cursor: pointer;
}
.dz-message {
z-index: 9;
}
.dz-message:hover {
border-color: #424242;
.dz-message:hover,
.dz-preview-message:hover {
border-color: #918b8b;
}
.dropzone-multiple .dz-message {
.dropzone-multiple .dz-message,
.dropzone-multiple .dz-preview-message {
height: 5rem;
padding: 0;
}
.dropzone-single .dz-message {
.dropzone-single .dz-message,
.dropzone-single .dz-preview-message {
height: 100%;
padding: 0.5rem 1rem;
padding: 1rem 0;
}
.dropzone-column .dz-message {
.dropzone-column .dz-message,
.dropzone-column .dz-preview-message {
height: 100%;
padding: 0;
}
.dropzone-single.dz-max-files-reached .dz-message {
background-color: rgba(0,0,0,.2);
/* background-color: rgba(0,0,0,.2); */
color: #fff;
opacity: 0;
}
@@ -65,7 +74,8 @@
opacity:1
}
.dz-message .dz-button {
.dz-message .dz-button,
.dz-preview-message .dz-button {
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
@@ -79,7 +89,7 @@
}
.dropzone-single.dz-max-files-reached .dz-message {
background-color: rgba(0,0,0,.9);
/* background-color: rgba(0,0,0,.9); */
color: #fff;
opacity: 0;
}
@@ -99,4 +109,30 @@
.form-file [data-dz-remove] {
bottom: 7px;
z-index: 99;
}
.dz-import-text {
color: #6B7280;
font-weight: 600;
}
.dz-import-upload {
color: #6B7280;
font-weight: 500;
}
.dz-import-icon {
font-size: 38px;
outline: none;
}
.dz-import {
padding: 20px;
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
}
.dz-import-width {
width: 120%;
}