CoCalc -- phui-two-column-view.css

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

5
.phui-launcher-view {
6
  max-width: 1140px;
7
  margin: 0 auto;
8
}
9

10
.phui-two-column-fixed {
11
  max-width: 1140px;
12
  margin: 0 auto;
13
}
14

15
.phui-two-column-view .phui-two-column-header {
16
  background-color: {$page.content};
17
  border-bottom: 1px solid rgba({$alphagrey}, .12);
18
  margin-bottom: 24px;
19
}
20

21
.phui-two-column-view.without-header {
22
  margin-top: 24px;
23
}
24

25
.device .phui-two-column-view .phui-two-column-header {
26
  margin-bottom: 12px;
27
}
28

29
.phui-two-column-view.with-tabs .phui-two-column-header,
30
.phui-two-column-view.with-subheader .phui-two-column-header {
31
  margin-bottom: 0;
32
}
33

34
.phui-two-column-header .phui-header-header {
35
  font-size: 20px;
36
  color: {$blacktext};
37
}
38

39
.device-phone .phui-two-column-header .phui-header-header {
40
  font-size: 16px;
41
}
42

43
.phui-two-column-view .phui-two-column-header .phui-header-shell {
44
  padding: 24px 32px 28px;
45
  border: none;
46
}
47

48
.phui-two-column-view .phui-two-column-header
49
  .phui-profile-header.phui-header-shell {
50
    padding-bottom: 20px;
51
}
52

53
.device .phui-two-column-view .phui-two-column-header .phui-header-shell {
54
  padding: 12px 12px 16px;
55
}
56

57
.phui-two-column-header .phui-header-subheader {
58
  margin-top: 8px;
59
}
60

61
.phui-two-column-subheader {
62
  padding: 12px 32px;
63
}
64

65
.device .phui-two-column-subheader {
66
  padding: 12px 16px;
67
}
68

69
.device-desktop .phui-two-column-content {
70
  padding: 0 32px;
71
}
72

73
.device .phui-two-column-content {
74
  padding: 0 12px;
75
}
76

77
.device-desktop .phui-two-column-view .phui-main-column {
78
  float: left;
79
  width: calc(100% - 320px);
80
}
81

82
.device-desktop .phui-two-column-view .phui-side-column {
83
  float: right;
84
  width: 300px;
85
}
86

87
!print .phui-two-column-view .phui-main-column {
88
  float: unset;
89
  width: unset;
90
  margin-bottom: 20px;
91
}
92

93
!print .phui-two-column-view .phui-side-column {
94
  float: unset;
95
  width: unset;
96
  margin-bottom: 20px;
97
}
98

99
!print .device-desktop .phui-two-column-view .phui-main-column {
100
  float: unset;
101
  width: unset;
102
  margin-bottom: 20px;
103
}
104

105
!print .device-desktop .phui-two-column-view .phui-side-column {
106
  float: unset;
107
  width: unset;
108
  margin-bottom: 20px;
109
}
110

111
.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
112
  float: right;
113
  width: calc(100% - 280px);
114
}
115

116
.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
117
  float: left;
118
  width: 260px;
119
}
120

121
.device .phui-side-column {
122
  margin-bottom: 20px;
123
}
124

125
.phui-two-column-view .phui-two-column-content
126
  .phui-object-box {
127
    margin: 0 0 20px 0;
128
}
129

130
/* Timeline */
131

132
.phui-two-column-view .phui-timeline-view {
133
  padding: 0;
134
  background-position: 80px;
135
}
136

137
.phui-two-column-view .phui-main-column .phui-object-box + .phui-timeline-view {
138
  margin-top: -20px;
139
}
140

141
.device .phui-two-column-view .phui-timeline-view {
142
  background-position: 16px;
143
  padding: 0;
144
}
145

146
.device-phone .phui-two-column-view .phui-timeline-event-view {
147
  margin: 0;
148
}
149

150
.phui-main-column > .phui-timeline-view:first-child {
151
  border-top: 1px solid {$thinblueborder};
152
}
153

154
.device-phone .phui-main-column .phui-timeline-older-transactions-are-hidden {
155
  margin: 0;
156
}
157

158
/* Main Column Properties */
159

160
.device-desktop .phui-main-column .phui-property-list-key {
161
  margin-left: 0;
162
  width: 180px;
163
}
164

165
.device-desktop .phui-main-column .phui-property-list-value {
166
  margin-left: 8px;
167
  width: calc(100% - 200px);
168
}
169

170

171
/* Property / Action List */
172

173
.phui-two-column-properties .phabricator-action-list-view {
174
  padding-top: 4px;
175
  padding-bottom: 12px;
176
}
177

178
.device-desktop .phui-two-column-view .phui-property-list-container {
179
  padding: 16px 0;
180
}
181

182
.device-desktop .phui-two-column-view
183
  .phui-property-list-properties-wrap.phui-property-list-stacked {
184
  padding: 0 16px;
185
}
186

187
.device .phui-two-column-view .phui-property-list-container {
188
  padding: 12px 8px;
189
}
190

191
.phui-two-column-view .phui-property-list-container
192
  .keyboard-shortcuts-available {
193
    display: none;
194
}
195

196
.device .phui-two-column-content .phui-two-column-properties.phui-object-box {
197
  padding: 0 12px;
198
}
199

200
.phui-two-column-view .phui-property-list-section-header,
201
.phui-two-column-view .phui-property-list-text-content {
202
  margin: 0 16px;
203
}
204

205
.device .phui-two-column-view .phui-property-list-section-header,
206
.device .phui-two-column-view .phui-property-list-text-content {
207
  margin: 0 8px;
208
}
209

210
.phui-two-column-tabs {
211
  padding: 0 32px;
212
  margin-bottom: 32px;
213
  background: {$page.content};
214
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
215
}
216

217
.device-phone .phui-two-column-tabs {
218
  padding: 0 12px;
219
}
220

221
.device-phone .phui-two-column-tabs .phui-list-view.phui-list-tabbar {
222
  text-align: center;
223
}
224

225
.device-phone .phui-two-column-tabs .phui-list-view.phui-list-tabbar > li {
226
  float: none;
227
  display: inline-block;
228
}
229

230
/* Info View */
231

232
.phui-two-column-view .phui-info-view {
233
  margin: 0 0 20px 0;
234
  padding: 16px;
235
}
236

237
.device .phui-two-column-view .phui-info-view {
238
  margin: 0 0 20px 0;
239
  padding: 12px;
240
}
241

242
.phui-two-column-view .phui-oi-empty .phui-info-view {
243
  margin: 0;
244
}
245

246
.phui-two-column-view .phui-side-column .phui-oi-empty
247
  .phui-info-view {
248
   margin-bottom: 0;
249
}
250

251

252
.phui-two-column-view .phui-box-blue-property
253
  .phui-header-shell + .phui-info-view {
254
    margin: 16px;
255
}
256

257
.device .phui-two-column-view .phui-box-blue-property
258
  .phui-header-shell + .phui-info-view {
259
    margin: 8px;
260
}
261

262
/* Navigation */
263

264
.phui-two-column-view .side-has-nav .phabricator-nav-local {
265
  width: auto;
266
  position: static;
267
  margin: 0;
268
}
269

270
.device .phui-two-column-view .side-has-nav {
271
  display: none;
272
}
273

274
/* Document View */
275

276
.phui-two-column-view .phui-two-column-content .phui-document-fluid
277
  .phui-document-view {
278
    margin: 0 0 20px 0;
279
}
280

281
/*- Fixed Styles with Navigation -------------------------------------------- */
282

283
.phui-two-column-fixed.phui-two-column-view .phui-two-column-header {
284
  background: transparent;
285
  border: none;
286
  margin-bottom: 0;
287
}
288

289
.phui-two-column-fixed.phui-two-column-view .phui-side-column
290
  .phui-box-border {
291
    background: transparent;
292
    border: none;
293
    padding: 0;
294
    width: 180px;
295
}
296

297
.device-desktop
298
  .phui-two-column-fixed.phui-two-column-view.phui-side-column-left
299
  .phui-side-column {
300
    width: 200px;
301
}
302

303
.device-desktop
304
  .phui-two-column-fixed.phui-two-column-view.phui-side-column-left
305
  .phui-main-column {
306
    width: calc(100% - 200px)
307
}
308

309
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
310
  .phabricator-side-menu {
311
    background: transparent;
312
}
313

314
.phui-two-column-fixed.phui-two-column-view
315
  .phui-basic-nav .phabricator-side-menu .phui-list-item-selected {
316
    border-radius: 3px;
317
    background-color: {$sky};
318
}
319

320
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
321
  .phabricator-side-menu .phui-list-item-href {
322
    border-radius: 3px;
323
}
324

325
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
326
  .phabricator-side-menu .phui-list-item-selected a {
327
    color: #fff;
328
}
329

330
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
331
  .phabricator-side-menu .phui-list-item-selected a .phui-icon-view {
332
    color: #fff;
333
}
334

335
.phui-two-column-fixed.phui-two-column-view .phui-header-action-links
336
  .phui-mobile-menu {
337
    display: block;
338
}
339

340
!print .phabricator-side-menu {
341
  display: none !important;
342
}
343

344
Product

Resources

Company
