-
Notifications
You must be signed in to change notification settings - Fork 37
/
styles.styl
88 lines (72 loc) · 1.86 KB
/
styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@require 'settings/breakpoints.styl'
@require 'settings/z-index.styl'
@require '../vars.styl'
.viewer-imageviewer
.viewer-noviewer
.viewer-audioviewer
.viewer-videoviewer
.viewer-pdfviewer
.viewer-textviewer
.viewer-canceled
position relative
display flex
width 60%
max-height 'calc(100% - %s)' % $toolbarHeight
justify-content center
align-items center
flex-direction column
margin-top $toolbarHeight
h2
max-width 90%
+medium-screen()
margin-left 0
width 100%
max-height 'calc(100% - %s)' % $viewerHeightMedium
margin-top $viewerMarginTopMedium
// rules for specific viewers below
.viewer-videoviewer
video
width 100%
max-width 31.25rem
height auto
.viewer-textviewer
.viewer-textviewer-content
white-space pre-line
width 100%
max-height 70%
overflow auto
a
color var(--azure)
+medium-screen()
width 90%
margin-left 5%
.viewer-filename
max-width 90%
text-overflow ellipsis
overflow hidden
.viewer-pdfviewer-pdf
overflow auto
width 100%
.viewer-pdfviewer-page > *
margin auto
.viewer-pdfviewer-toolbar
position absolute
bottom 2rem
background var(--charcoalGrey)
color var(--white)
border-radius .5rem
.viewer-imageviewer
flex 1 1 100%
width auto
max-width 100%
img
display block
max-width 100%
max-height 100%
box-shadow 0 .375rem 1.5rem 0 rgba(0, 0, 0, .5)
.viewer-pdfMobile
width 100%
height 'calc(100% - %s - var(--flagship-top-height))' % $viewerHeightMedium
margin-top 'calc(var(--flagship-top-height, 0rem) + %s)' % $viewerMarginTopMedium
&--image
width 100%