mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
frontend fix
This commit is contained in:
@@ -150,8 +150,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen size
|
||||
.small {
|
||||
@media only screen and (max-width: 690px) {
|
||||
.popup-wrapper {
|
||||
padding: 40px 20px 20px;
|
||||
left: 15px;
|
||||
@@ -160,11 +159,9 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
@media only screen and (max-width: 690px) {
|
||||
.actions {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
@@ -34,8 +34,4 @@
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,15 +18,13 @@
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.popup-content {
|
||||
|
||||
&.height-limited {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.popup-content {
|
||||
top: 57px;
|
||||
bottom: 72px;
|
||||
@@ -37,10 +35,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
@keyframes popup-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
|
||||
import {CornerDownRightIcon, LinkIcon, XIcon} from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
@@ -80,30 +80,26 @@
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
@media only screen and (max-width: 690px) {
|
||||
.popup-header {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-header {
|
||||
|
||||
.label {
|
||||
.close-icon {
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,6 @@
|
||||
|
||||
// Desktop, tablet
|
||||
.medium, .large {
|
||||
|
||||
// Animations
|
||||
.popup-enter-active {
|
||||
animation: popup-in 0.35s 0.15s ease both;
|
||||
@@ -84,33 +83,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
.popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(0) scale(1);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
// Animations
|
||||
.popup-enter-active {
|
||||
animation: popup-slide-in 0.35s 0.15s ease both;
|
||||
}
|
||||
|
||||
.popup-leave-active {
|
||||
animation: popup-slide-in 0.15s ease reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -121,6 +93,7 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup-slide-in {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
@@ -131,11 +104,26 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
.popup-wrapper {
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(0) scale(1);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
}
|
||||
// Animations
|
||||
.popup-enter-active {
|
||||
animation: popup-slide-in 0.35s 0.15s ease both;
|
||||
}
|
||||
.popup-leave-active {
|
||||
animation: popup-slide-in 0.15s ease reverse;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
@media only screen and (max-width: 690px) {
|
||||
.file-item {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
@@ -162,11 +162,8 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2F3C54;
|
||||
@@ -174,7 +171,6 @@
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
@@ -190,9 +186,7 @@
|
||||
|
||||
@media (max-width: 690px) and (prefers-color-scheme: dark) {
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user