Ver código fonte

lightbox and theme style edits

tags/1.0.2
Alej 3 anos atrás
pai
commit
73766c001d
2 arquivos alterados com 23 adições e 8 exclusões
  1. 22
    7
      vue-theme/src/sss/_lightbox.sss
  2. 1
    1
      vue-theme/src/sss/variables.sss

+ 22
- 7
vue-theme/src/sss/_lightbox.sss Ver arquivo

1
+@import './variables.sss'
2
+@import './theme.sss'
3
+
1
 .vel-fade
4
 .vel-fade
2
     &-enter-active, &-active
5
     &-enter-active, &-active
3
         transition: all 0.3s ease
6
         transition: all 0.3s ease
4
     &-enter-from, &-leave-to
7
     &-enter-from, &-leave-to
5
-        opacity: 0
8
+        opacity: 1
6
 
9
 
7
 .vel-img
10
 .vel-img
8
     &-swiper
11
     &-swiper
14
         position: absolute
17
         position: absolute
15
         top: 50%
18
         top: 50%
16
         transform: translate(-50% -50%)
19
         transform: translate(-50% -50%)
17
-        transition: 0.3s linear
18
-        will-change: transform opacity
19
-    background-color: rgba(0, 0, 0, 0.7)
20
-    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7)
20
+        /* transition: 0.3s linear */
21
+        /* will-change: transform opacity */
22
+    /* background-color: rgba(0, 0, 0, 0.7) */
23
+    box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
21
     display: block
24
     display: block
22
     max-height: 80vh
25
     max-height: 80vh
23
     max-width: 80vw
26
     max-width: 80vw
25
     transition: transform 0.3s ease-in-out
28
     transition: transform 0.3s ease-in-out
26
 
29
 
27
 .vel-modal
30
 .vel-modal
28
-    background: rgba(0, 0, 0, 0.5)
31
+    background: rgba(255, 255, 255, 0.9)
29
     bottom: 0
32
     bottom: 0
30
     left: 0
33
     left: 0
31
     margin: 0
34
     margin: 0
33
     right: 0
36
     right: 0
34
     top: 0
37
     top: 0
35
     z-index: 10003
38
     z-index: 10003
39
+    img
40
+        transition: none
41
+        &:hover
42
+            filter: grayscale(0%) brightness(100%)
36
 
43
 
37
 .vel-img, .vel-img-wrapper
44
 .vel-img, .vel-img-wrapper
38
     user-select: none
45
     user-select: none
39
 
46
 
40
 .vel-btns-wrapper
47
 .vel-btns-wrapper
41
     .btn__close, .btn__next, .btn__prev
48
     .btn__close, .btn__next, .btn__prev
42
-        color: #fff
49
+        color: $cia_black 
43
         cursor: pointer
50
         cursor: pointer
44
         font-size: 32px
51
         font-size: 32px
45
         opacity: 0.6
52
         opacity: 0.6
94
 
101
 
95
 .vel-modal.is-rtl .vel-img-title
102
 .vel-modal.is-rtl .vel-img-title
96
     direction: rtl
103
     direction: rtl
104
+    display: block
97
 
105
 
98
 .vel-loading
106
 .vel-loading
99
     left: 50%
107
     left: 50%
166
     width: 1em
174
     width: 1em
167
 
175
 
168
 .vel-toolbar
176
 .vel-toolbar
177
+    display: none
169
     border-radius: 4px
178
     border-radius: 4px
170
     bottom: 8px
179
     bottom: 8px
171
     display: flex
180
     display: flex
176
     position: absolute
185
     position: absolute
177
     transform: translate(-50%)
186
     transform: translate(-50%)
178
     .toolbar-btn
187
     .toolbar-btn
188
+        display: none
179
         color: #fff
189
         color: #fff
180
         cursor: pointer
190
         cursor: pointer
181
         flex-shrink: 0
191
         flex-shrink: 0
188
 .vel-toolbar, .vel-toolbar .toolbar-btn
198
 .vel-toolbar, .vel-toolbar .toolbar-btn
189
     background-color: #2d2d2d
199
     background-color: #2d2d2d
190
     user-select: none
200
     user-select: none
201
+
202
+figcaption
203
+    position: inherit
204
+    background: none
205
+    color: $cia_black

+ 1
- 1
vue-theme/src/sss/variables.sss Ver arquivo

1
 @import './_ratios.sss'
1
 @import './_ratios.sss'
2
 
2
 
3
-$transition: 500ms
3
+$transition: 300ms
4
 
4
 
5
 $min-width: 20em
5
 $min-width: 20em
6
 $max-width: 74em
6
 $max-width: 74em

Carregando…
Cancelar
Salvar