CoCalc -- phui-lightbox.css

GitHub Repository: freebsd/phabricator
Path: blob/master/webroot/rsrc/css/phui/phui-lightbox.css
¹²²⁴² views
1
/**
2
 * @provides phui-lightbox-css
3
 */
4

5

6
.lightbox-attached {
7
  overflow: hidden;
8
}
9

10
.lightbox-attachment {
11
  position: fixed;
12
  top: 0;
13
  left: 0;
14
  bottom: 0;
15
  right: 0;
16
  overflow-y: auto;
17
}
18

19
.lightbox-attachment .lightbox-image-frame {
20
  position: absolute;
21
  top: 44px;
22
  right: 0;
23
  bottom: 0;
24
  left: 0;
25
  text-align: center;
26
}
27

28
.lightbox-attachment.comment-panel-open .lightbox-image-frame {
29
  right: 360px;
30
}
31

32
.lightbox-attachment .lightbox-image-frame img {
33
  max-width: calc(100% - 40px);
34
  max-height: calc(100% - 24px);
35
  position: absolute;
36
  top: 0;
37
  bottom: 0;
38
  left: 0;
39
  right: 0;
40
  margin: auto;
41
}
42

43
.lightbox-comment-frame {
44
  position: absolute;
45
  top: -19999px;
46
  right: 0;
47
  opacity: 0;
48
  transition: all 0.3s;
49
}
50

51
.lightbox-attachment .lightbox-icon-frame {
52
  top: 44%;
53
  left: calc(50% - 160px);
54
  position: fixed;
55
  display: block;
56
  height: 120px;
57
  width: 320px;
58
  color: {$darkbluetext};
59
}
60

61
.lightbox-attachment .lightbox-icon-frame:hover,
62
.lightbox-attachment .lightbox-icon-frame:hover .phui-icon-view {
63
  color: {$anchor};
64
  text-decoration: none;
65
}
66

67
.lightbox-attachment.comment-panel-open .lightbox-icon-frame {
68
  left: calc(50% - 340px);
69
}
70

71
.lightbox-attachment .phui-lightbox-file-icon {
72
  font-size: 64px;
73
  color: {$darkbluetext};
74
}
75

76
.comment-panel-open .lightbox-comment-frame {
77
  position: fixed;
78
  top: 44px;
79
  bottom: 0;
80
  right: 0;
81
  width: 360px;
82
  overflow-y: auto;
83
  background: {$page.content};
84
  opacity: 1;
85
}
86

87
.device-phone .comment-panel-open .lightbox-comment-frame {
88
  width: auto;
89
  left: 0;
90
}
91

92
.jx-mask + .lightbox-attachment {
93
  background: {$lightgreybackground};
94
}
95

96
.lightbox-attachment .attachment-name {
97
  line-height: 32px;
98
  font-size: {$biggerfontsize};
99
  text-align: center;
100
}
101

102
.lightbox-attachment .lightbox-status {
103
  background: {$page.content};
104
  position: fixed;
105
  top: 0;
106
  left: 0;
107
  right: 0;
108
  height: 44px;
109
  padding: 0 20px;
110
  line-height: 44px;
111
  border-bottom: 1px solid {$thinblueborder};
112
  color: {$greytext};
113
}
114

115
.device-phone .lightbox-attachment .lightbox-status {
116
  padding: 0 12px;
117
}
118

119
.lightbox-attachment .lightbox-status .lightbox-download {
120
  float: right;
121
}
122

123
.lightbox-attachment .lightbox-status-txt a {
124
  color: {$blacktext};
125
  margin-right: 12px;
126
  font-size: {$biggerfontsize};
127
}
128

129
.lightbox-attachment .lightbox-status .phui-icon-view {
130
  height: 18px;
131
  width: 24px;
132
  font-size: 14px;
133
  line-height: 23px;
134
  display: block;
135
}
136

137
.lightbox-attachment .lightbox-status .lightbox-download
138
  .lightbox-download-form {
139
    display: inline;
140
}
141

142
.lightbox-attachment a.lightbox-download,
143
.lightbox-attachment a.lightbox-comment,
144
.lightbox-attachment a.lightbox-close {
145
  float: right;
146
  margin: 9px 0 0 8px;
147
}
148

149
.lightbox-attachment.comment-panel-open .lightbox-comment.phui-icon-circle,
150
.lightbox-attachment.comment-panel-open .lightbox-comment .phui-icon-view {
151
  color: {$sky};
152
  border-color: {$sky};
153
}
154

155
.lightbox-attachment .lightbox-left {
156
  top: 46%;
157
  left: 12px;
158
  position: fixed;
159
  display: block;
160
  height: 40px;
161
  width: 40px;
162
}
163

164
.lightbox-attachment .lightbox-left .phui-icon-view {
165
  font-size: 40px;
166
}
167

168
.lightbox-attachment .lightbox-left:hover .phui-icon-view {
169
  color: {$sky};
170
}
171

172
.lightbox-attachment .lightbox-right .phui-icon-view {
173
  top: 46%;
174
  right: 12px;
175
  position: fixed;
176
  display: block;
177
  height: 38px;
178
  width: 21px;
179
}
180

181
.lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view {
182
  right: 362px;
183
}
184

185
.lightbox-attachment .lightbox-right .phui-icon-view {
186
  font-size: 40px;
187
}
188

189
.lightbox-attachment .lightbox-right:hover .phui-icon-view {
190
  color: {$sky};
191
}
192

193
Product

Resources

Company
