loading up the forgejo repo on tangled to test page performance
Remove fomantic segment module (#30042)
Another CSS-only module. Also, I re-ordered the imports based on
[original fomantic
order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less).
(cherry picked from commit 8d93cea2969730fc8f3bdeb3704a3b89db0bbcc0)
authored by
silverwind
and committed by
Earl Warren
c5eae64e
c82bef51
+207
-720
+1
-44
web_src/css/base.css
+1
-44
web_src/css/base.css
···
371
371
.ui.vertical.menu {
372
372
background: var(--color-menu);
373
373
border-color: var(--color-secondary);
374
+
box-shadow: none;
374
375
}
375
376
376
377
.ui.menu .item {
···
585
586
.visible.transition {
586
587
display: block !important;
587
588
visibility: visible !important;
588
-
}
589
-
590
-
.ui.error.segment {
591
-
border-color: var(--color-error-border) !important;
592
-
}
593
-
594
-
.ui.warning.segment {
595
-
border-color: var(--color-warning-border) !important;
596
589
}
597
590
598
591
.ui.selection.active.dropdown,
···
941
934
background-color: transparent;
942
935
}
943
936
944
-
.ui.menu,
945
-
.ui.vertical.menu,
946
-
.ui.segment {
947
-
box-shadow: none;
948
-
}
949
-
950
937
/* replace fomantic popover box shadows */
951
938
.ui.dropdown .menu,
952
939
.ui.upward.dropdown > .menu,
···
1040
1027
vertical-align: middle;
1041
1028
}
1042
1029
1043
-
.ui .info.segment.top h3,
1044
-
.ui .info.segment.top h4 {
1045
-
margin-top: 0;
1046
-
}
1047
-
1048
-
.ui .info.segment.top h3:last-child {
1049
-
margin-top: 4px;
1050
-
}
1051
-
1052
-
.ui .info.segment.top > :last-child {
1053
-
margin-bottom: 0;
1054
-
}
1055
-
1056
1030
.ui .form .autofill-dummy {
1057
1031
position: absolute;
1058
1032
width: 1px;
···
1687
1661
1688
1662
.ui.label > .color-icon {
1689
1663
margin-left: 0;
1690
-
}
1691
-
1692
-
.ui.segment,
1693
-
.ui.segments,
1694
-
.ui.attached.segment {
1695
-
background: var(--color-box-body);
1696
-
color: var(--color-text);
1697
-
border-color: var(--color-secondary);
1698
-
}
1699
-
1700
-
.ui.segments > .segment {
1701
-
border-color: var(--color-secondary);
1702
-
}
1703
-
1704
-
.ui.secondary.segment {
1705
-
background: var(--color-secondary-bg);
1706
-
color: var(--color-text-light);
1707
1664
}
1708
1665
1709
1666
.rss-icon {
+11
-7
web_src/css/index.css
+11
-7
web_src/css/index.css
···
1
1
@import "./modules/normalize.css";
2
2
@import "./modules/animations.css";
3
+
4
+
/* fomantic replacements */
5
+
@import "./modules/button.css";
6
+
@import "./modules/container.css";
7
+
@import "./modules/divider.css";
8
+
@import "./modules/header.css";
9
+
@import "./modules/segment.css";
3
10
@import "./modules/grid.css";
4
-
@import "./modules/button.css";
11
+
@import "./modules/message.css";
12
+
@import "./modules/card.css";
13
+
@import "./modules/modal.css";
14
+
5
15
@import "./modules/select.css";
6
16
@import "./modules/tippy.css";
7
-
@import "./modules/modal.css";
8
17
@import "./modules/breadcrumb.css";
9
-
@import "./modules/card.css";
10
18
@import "./modules/comment.css";
11
19
@import "./modules/navbar.css";
12
20
@import "./modules/toast.css";
13
-
@import "./modules/divider.css";
14
21
@import "./modules/svg.css";
15
22
@import "./modules/flexcontainer.css";
16
-
@import "./modules/message.css";
17
-
@import "./modules/container.css";
18
-
@import "./modules/header.css";
19
23
20
24
@import "./shared/flex-list.css";
21
25
@import "./shared/milestone.css";
+195
web_src/css/modules/segment.css
+195
web_src/css/modules/segment.css
···
1
+
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
2
+
unused rules here after refactoring, please remove them. */
3
+
4
+
.ui.segment {
5
+
position: relative;
6
+
margin: 1rem 0;
7
+
padding: 1em;
8
+
border-radius: 0.28571429rem;
9
+
border: 1px solid var(--color-secondary);
10
+
background: var(--color-box-body);
11
+
color: var(--color-text);
12
+
}
13
+
.ui.segment:first-child {
14
+
margin-top: 0;
15
+
}
16
+
.ui.segment:last-child {
17
+
margin-bottom: 0;
18
+
}
19
+
20
+
.ui.grid.segment {
21
+
margin: 1rem 0;
22
+
border-radius: 0.28571429rem;
23
+
}
24
+
25
+
.ui.segment.tab:last-child {
26
+
margin-bottom: 1rem;
27
+
}
28
+
29
+
.ui.segments {
30
+
flex-direction: column;
31
+
position: relative;
32
+
margin: 1rem 0;
33
+
border: 1px solid var(--color-secondary);
34
+
border-radius: 0.28571429rem;
35
+
background: var(--color-box-body);
36
+
color: var(--color-text);
37
+
}
38
+
.ui.segments:first-child {
39
+
margin-top: 0;
40
+
}
41
+
.ui.segments:last-child {
42
+
margin-bottom: 0;
43
+
}
44
+
45
+
.ui.segments > .segment {
46
+
top: 0;
47
+
bottom: 0;
48
+
border-radius: 0;
49
+
margin: 0;
50
+
width: auto;
51
+
box-shadow: none;
52
+
border: none;
53
+
border-top: 1px solid var(--color-secondary);
54
+
}
55
+
.ui.segments:not(.horizontal) > .segment:first-child {
56
+
top: 0;
57
+
bottom: 0;
58
+
border-top: none;
59
+
margin-top: 0;
60
+
margin-bottom: 0;
61
+
border-radius: 0.28571429rem 0.28571429rem 0 0;
62
+
}
63
+
64
+
.ui.segments:not(.horizontal) > .segment:last-child {
65
+
top: 0;
66
+
bottom: 0;
67
+
margin-top: 0;
68
+
margin-bottom: 0;
69
+
border-radius: 0 0 0.28571429rem 0.28571429rem;
70
+
}
71
+
72
+
.ui.segments:not(.horizontal) > .segment:only-child {
73
+
border-radius: 0.28571429rem;
74
+
}
75
+
76
+
.ui.segments > .ui.segments {
77
+
border-top: 1px solid var(--color-secondary);
78
+
margin: 1rem;
79
+
}
80
+
.ui.segments > .segments:first-child {
81
+
border-top: none;
82
+
}
83
+
.ui.segments > .segment + .segments:not(.horizontal) {
84
+
margin-top: 0;
85
+
}
86
+
87
+
.ui.horizontal.segments {
88
+
display: flex;
89
+
flex-direction: row;
90
+
background-color: transparent;
91
+
padding: 0;
92
+
margin: 1rem 0;
93
+
border-radius: 0.28571429rem;
94
+
border: 1px solid var(--color-secondary);
95
+
}
96
+
97
+
.ui.horizontal.segments > .segment {
98
+
margin: 0;
99
+
min-width: 0;
100
+
border-radius: 0;
101
+
border: none;
102
+
box-shadow: none;
103
+
border-left: 1px solid var(--color-secondary);
104
+
}
105
+
106
+
.ui.segments > .horizontal.segments:first-child {
107
+
border-top: none;
108
+
}
109
+
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
110
+
border-left: none;
111
+
}
112
+
.ui.horizontal.segments > .segment:first-child {
113
+
border-radius: 0.28571429rem 0 0 0.28571429rem;
114
+
}
115
+
.ui.horizontal.segments > .segment:last-child {
116
+
border-radius: 0 0.28571429rem 0.28571429rem 0;
117
+
}
118
+
119
+
.ui.clearing.segment::after {
120
+
content: "";
121
+
display: block;
122
+
clear: both;
123
+
}
124
+
125
+
.ui[class*="left aligned"].segment {
126
+
text-align: left;
127
+
}
128
+
.ui[class*="center aligned"].segment {
129
+
text-align: center;
130
+
}
131
+
132
+
.ui.secondary.segment {
133
+
background: var(--color-secondary-bg);
134
+
color: var(--color-text-light);
135
+
}
136
+
137
+
.ui.attached.segment {
138
+
top: 0;
139
+
bottom: 0;
140
+
border-radius: 0;
141
+
margin: 0 -1px;
142
+
width: calc(100% + 2px);
143
+
max-width: calc(100% + 2px);
144
+
box-shadow: none;
145
+
border: 1px solid var(--color-secondary);
146
+
background: var(--color-box-body);
147
+
color: var(--color-text);
148
+
}
149
+
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
150
+
border-top: none;
151
+
}
152
+
153
+
.ui[class*="top attached"].segment {
154
+
bottom: 0;
155
+
margin-bottom: 0;
156
+
top: 0;
157
+
margin-top: 1rem;
158
+
border-radius: 0.28571429rem 0.28571429rem 0 0;
159
+
}
160
+
.ui.segment[class*="top attached"]:first-child {
161
+
margin-top: 0;
162
+
}
163
+
164
+
.ui.segment[class*="bottom attached"] {
165
+
bottom: 0;
166
+
margin-top: 0;
167
+
top: 0;
168
+
margin-bottom: 1rem;
169
+
border-radius: 0 0 0.28571429rem 0.28571429rem;
170
+
}
171
+
.ui.segment[class*="bottom attached"]:last-child {
172
+
margin-bottom: 1rem;
173
+
}
174
+
175
+
.ui.fitted.segment:not(.horizontally) {
176
+
padding-top: 0;
177
+
padding-bottom: 0;
178
+
}
179
+
.ui.fitted.segment:not(.vertically) {
180
+
padding-left: 0;
181
+
padding-right: 0;
182
+
}
183
+
184
+
.ui.segments .segment,
185
+
.ui.segment {
186
+
font-size: 1rem;
187
+
}
188
+
189
+
.ui.error.segment {
190
+
border-color: var(--color-error-border) !important;
191
+
}
192
+
193
+
.ui.warning.segment {
194
+
border-color: var(--color-warning-border) !important;
195
+
}
-668
web_src/fomantic/build/semantic.css
-668
web_src/fomantic/build/semantic.css
···
13396
13396
Site Overrides
13397
13397
*******************************/
13398
13398
/*!
13399
-
* # Fomantic-UI - Segment
13400
-
* http://github.com/fomantic/Fomantic-UI/
13401
-
*
13402
-
*
13403
-
* Released under the MIT license
13404
-
* http://opensource.org/licenses/MIT
13405
-
*
13406
-
*/
13407
-
13408
-
/*******************************
13409
-
Segment
13410
-
*******************************/
13411
-
13412
-
.ui.segment {
13413
-
position: relative;
13414
-
background: #FFFFFF;
13415
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
13416
-
margin: 1rem 0;
13417
-
padding: 1em 1em;
13418
-
border-radius: 0.28571429rem;
13419
-
border: 1px solid rgba(34, 36, 38, 0.15);
13420
-
}
13421
-
13422
-
.ui.segment:first-child {
13423
-
margin-top: 0;
13424
-
}
13425
-
13426
-
.ui.segment:last-child {
13427
-
margin-bottom: 0;
13428
-
}
13429
-
13430
-
/* Vertical */
13431
-
13432
-
.ui.vertical.segment {
13433
-
margin: 0;
13434
-
padding-left: 0;
13435
-
padding-right: 0;
13436
-
background: none transparent;
13437
-
border-radius: 0;
13438
-
box-shadow: none;
13439
-
border: none;
13440
-
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
13441
-
}
13442
-
13443
-
.ui.vertical.segment:last-child {
13444
-
border-bottom: none;
13445
-
}
13446
-
13447
-
/*-------------------
13448
-
Loose Coupling
13449
-
--------------------*/
13450
-
13451
-
/* Label */
13452
-
13453
-
.ui[class*="bottom attached"].segment > [class*="top attached"].label {
13454
-
border-top-left-radius: 0;
13455
-
border-top-right-radius: 0;
13456
-
}
13457
-
13458
-
.ui[class*="top attached"].segment > [class*="bottom attached"].label {
13459
-
border-bottom-left-radius: 0;
13460
-
border-bottom-right-radius: 0;
13461
-
}
13462
-
13463
-
.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
13464
-
border-top-left-radius: 0;
13465
-
border-top-right-radius: 0;
13466
-
}
13467
-
13468
-
.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
13469
-
border-bottom-left-radius: 0;
13470
-
border-bottom-right-radius: 0;
13471
-
}
13472
-
13473
-
/* Grid */
13474
-
13475
-
.ui.page.grid.segment,
13476
-
.ui.grid > .row > .ui.segment.column,
13477
-
.ui.grid > .ui.segment.column {
13478
-
padding-top: 2em;
13479
-
padding-bottom: 2em;
13480
-
}
13481
-
13482
-
.ui.grid.segment {
13483
-
margin: 1rem 0;
13484
-
border-radius: 0.28571429rem;
13485
-
}
13486
-
13487
-
/* Table */
13488
-
13489
-
.ui.basic.table.segment {
13490
-
background: #FFFFFF;
13491
-
border: 1px solid rgba(34, 36, 38, 0.15);
13492
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
13493
-
}
13494
-
13495
-
.ui[class*="very basic"].table.segment {
13496
-
padding: 1em 1em;
13497
-
}
13498
-
13499
-
/* Tab */
13500
-
13501
-
.ui.segment.tab:last-child {
13502
-
margin-bottom: 1rem;
13503
-
}
13504
-
13505
-
/*******************************
13506
-
Types
13507
-
*******************************/
13508
-
13509
-
/*-------------------
13510
-
Placeholder
13511
-
--------------------*/
13512
-
13513
-
.ui.placeholder.segment {
13514
-
display: flex;
13515
-
flex-direction: column;
13516
-
justify-content: center;
13517
-
align-items: stretch;
13518
-
max-width: initial;
13519
-
animation: none;
13520
-
overflow: visible;
13521
-
padding: 1em 1em;
13522
-
min-height: 18rem;
13523
-
background: #F9FAFB;
13524
-
border-color: rgba(34, 36, 38, 0.15);
13525
-
box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
13526
-
}
13527
-
13528
-
.ui.placeholder.segment .button,
13529
-
.ui.placeholder.segment textarea {
13530
-
display: block;
13531
-
}
13532
-
13533
-
.ui.placeholder.segment .field,
13534
-
.ui.placeholder.segment textarea,
13535
-
.ui.placeholder.segment > .ui.input,
13536
-
.ui.placeholder.segment .button {
13537
-
max-width: 15rem;
13538
-
margin-left: auto;
13539
-
margin-right: auto;
13540
-
}
13541
-
13542
-
.ui.placeholder.segment .column .button,
13543
-
.ui.placeholder.segment .column .field,
13544
-
.ui.placeholder.segment .column textarea,
13545
-
.ui.placeholder.segment .column > .ui.input {
13546
-
max-width: 15rem;
13547
-
margin-left: auto;
13548
-
margin-right: auto;
13549
-
}
13550
-
13551
-
.ui.placeholder.segment > .inline {
13552
-
align-self: center;
13553
-
}
13554
-
13555
-
.ui.placeholder.segment > .inline > .button {
13556
-
display: inline-block;
13557
-
width: auto;
13558
-
margin: 0 0.35714286rem 0 0;
13559
-
}
13560
-
13561
-
.ui.placeholder.segment > .inline > .button:last-child {
13562
-
margin-right: 0;
13563
-
}
13564
-
13565
-
/*-------------------
13566
-
Padded
13567
-
--------------------*/
13568
-
13569
-
.ui.padded.segment {
13570
-
padding: 1.5em;
13571
-
}
13572
-
13573
-
.ui[class*="very padded"].segment {
13574
-
padding: 3em;
13575
-
}
13576
-
13577
-
/* Padded vertical */
13578
-
13579
-
.ui.padded.segment.vertical.segment,
13580
-
.ui[class*="very padded"].vertical.segment {
13581
-
padding-left: 0;
13582
-
padding-right: 0;
13583
-
}
13584
-
13585
-
/*-------------------
13586
-
Compact
13587
-
--------------------*/
13588
-
13589
-
.ui.compact.segment {
13590
-
display: table;
13591
-
}
13592
-
13593
-
/* Compact Group */
13594
-
13595
-
.ui.compact.segments {
13596
-
display: inline-flex;
13597
-
}
13598
-
13599
-
.ui.compact.segments .segment,
13600
-
.ui.segments .compact.segment {
13601
-
display: block;
13602
-
flex: 0 1 auto;
13603
-
}
13604
-
13605
-
/*-------------------
13606
-
Circular
13607
-
--------------------*/
13608
-
13609
-
.ui.circular.segment {
13610
-
display: table-cell;
13611
-
padding: 2em;
13612
-
text-align: center;
13613
-
vertical-align: middle;
13614
-
border-radius: 500em;
13615
-
}
13616
-
13617
-
/*-------------------
13618
-
Raised
13619
-
--------------------*/
13620
-
13621
-
.ui.raised.raised.segments,
13622
-
.ui.raised.raised.segment {
13623
-
box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
13624
-
}
13625
-
13626
-
/*******************************
13627
-
Groups
13628
-
*******************************/
13629
-
13630
-
/* Group */
13631
-
13632
-
.ui.segments {
13633
-
flex-direction: column;
13634
-
position: relative;
13635
-
margin: 1rem 0;
13636
-
border: 1px solid rgba(34, 36, 38, 0.15);
13637
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
13638
-
border-radius: 0.28571429rem;
13639
-
}
13640
-
13641
-
.ui.segments:first-child {
13642
-
margin-top: 0;
13643
-
}
13644
-
13645
-
.ui.segments:last-child {
13646
-
margin-bottom: 0;
13647
-
}
13648
-
13649
-
/* Nested Segment */
13650
-
13651
-
.ui.segments > .segment {
13652
-
top: 0;
13653
-
bottom: 0;
13654
-
border-radius: 0;
13655
-
margin: 0;
13656
-
width: auto;
13657
-
box-shadow: none;
13658
-
border: none;
13659
-
border-top: 1px solid rgba(34, 36, 38, 0.15);
13660
-
}
13661
-
13662
-
.ui.segments:not(.horizontal) > .segment:first-child {
13663
-
top: 0;
13664
-
bottom: 0;
13665
-
border-top: none;
13666
-
margin-top: 0;
13667
-
margin-bottom: 0;
13668
-
border-radius: 0.28571429rem 0.28571429rem 0 0;
13669
-
}
13670
-
13671
-
/* Bottom */
13672
-
13673
-
.ui.segments:not(.horizontal) > .segment:last-child {
13674
-
top: 0;
13675
-
bottom: 0;
13676
-
margin-top: 0;
13677
-
margin-bottom: 0;
13678
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
13679
-
border-radius: 0 0 0.28571429rem 0.28571429rem;
13680
-
}
13681
-
13682
-
/* Only */
13683
-
13684
-
.ui.segments:not(.horizontal) > .segment:only-child {
13685
-
border-radius: 0.28571429rem;
13686
-
}
13687
-
13688
-
/* Nested Group */
13689
-
13690
-
.ui.segments > .ui.segments {
13691
-
border-top: 1px solid rgba(34, 36, 38, 0.15);
13692
-
margin: 1rem 1rem;
13693
-
}
13694
-
13695
-
.ui.segments > .segments:first-child {
13696
-
border-top: none;
13697
-
}
13698
-
13699
-
.ui.segments > .segment + .segments:not(.horizontal) {
13700
-
margin-top: 0;
13701
-
}
13702
-
13703
-
/* Horizontal Group */
13704
-
13705
-
.ui.horizontal.segments {
13706
-
display: flex;
13707
-
flex-direction: row;
13708
-
background-color: transparent;
13709
-
padding: 0;
13710
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
13711
-
margin: 1rem 0;
13712
-
border-radius: 0.28571429rem;
13713
-
border: 1px solid rgba(34, 36, 38, 0.15);
13714
-
}
13715
-
13716
-
.ui.stackable.horizontal.segments {
13717
-
flex-wrap: wrap;
13718
-
}
13719
-
13720
-
/* Nested Horizontal Group */
13721
-
13722
-
.ui.segments > .horizontal.segments {
13723
-
margin: 0;
13724
-
background-color: transparent;
13725
-
border-radius: 0;
13726
-
border: none;
13727
-
box-shadow: none;
13728
-
border-top: 1px solid rgba(34, 36, 38, 0.15);
13729
-
}
13730
-
13731
-
/* Horizontal Segment */
13732
-
13733
-
.ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
13734
-
flex: 1 1 auto;
13735
-
-ms-flex: 1 1 0;
13736
-
/* Solves #2550 MS Flex */
13737
-
}
13738
-
13739
-
.ui.horizontal.segments > .segment {
13740
-
margin: 0;
13741
-
min-width: 0;
13742
-
border-radius: 0;
13743
-
border: none;
13744
-
box-shadow: none;
13745
-
border-left: 1px solid rgba(34, 36, 38, 0.15);
13746
-
}
13747
-
13748
-
/* Border Fixes */
13749
-
13750
-
.ui.segments > .horizontal.segments:first-child {
13751
-
border-top: none;
13752
-
}
13753
-
13754
-
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
13755
-
border-left: none;
13756
-
}
13757
-
13758
-
.ui.horizontal.segments > .segment:first-child {
13759
-
border-radius: 0.28571429rem 0 0 0.28571429rem;
13760
-
}
13761
-
13762
-
.ui.horizontal.segments > .segment:last-child {
13763
-
border-radius: 0 0.28571429rem 0.28571429rem 0;
13764
-
}
13765
-
13766
-
/*******************************
13767
-
States
13768
-
*******************************/
13769
-
13770
-
/*--------------
13771
-
Disabled
13772
-
---------------*/
13773
-
13774
-
.ui.disabled.segment {
13775
-
opacity: var(--opacity-disabled);
13776
-
color: rgba(40, 40, 40, 0.3);
13777
-
}
13778
-
13779
-
/*--------------
13780
-
Loading
13781
-
---------------*/
13782
-
13783
-
.ui.loading.segment {
13784
-
position: relative;
13785
-
cursor: default;
13786
-
pointer-events: none;
13787
-
text-shadow: none !important;
13788
-
transition: all 0s linear;
13789
-
}
13790
-
13791
-
.ui.loading.segment:before {
13792
-
position: absolute;
13793
-
content: '';
13794
-
top: 0;
13795
-
left: 0;
13796
-
background: rgba(255, 255, 255, 0.8);
13797
-
width: 100%;
13798
-
height: 100%;
13799
-
border-radius: 0.28571429rem;
13800
-
z-index: 100;
13801
-
}
13802
-
13803
-
.ui.loading.segment:after {
13804
-
position: absolute;
13805
-
content: '';
13806
-
top: 50%;
13807
-
left: 50%;
13808
-
margin: -1.5em 0 0 -1.5em;
13809
-
width: 3em;
13810
-
height: 3em;
13811
-
animation: loader 0.6s infinite linear;
13812
-
border: 0.2em solid #767676;
13813
-
border-radius: 500rem;
13814
-
box-shadow: 0 0 0 1px transparent;
13815
-
visibility: visible;
13816
-
z-index: 101;
13817
-
}
13818
-
13819
-
/*******************************
13820
-
Variations
13821
-
*******************************/
13822
-
13823
-
/*-------------------
13824
-
Basic
13825
-
--------------------*/
13826
-
13827
-
.ui.basic.segment,
13828
-
.ui.segments .ui.basic.segment,
13829
-
.ui.basic.segments {
13830
-
background: none transparent;
13831
-
box-shadow: none;
13832
-
border: none;
13833
-
border-radius: 0;
13834
-
}
13835
-
13836
-
/*-------------------
13837
-
Clearing
13838
-
--------------------*/
13839
-
13840
-
.ui.clearing.segment:after {
13841
-
content: "";
13842
-
display: block;
13843
-
clear: both;
13844
-
}
13845
-
13846
-
/*-------------------
13847
-
Colors
13848
-
--------------------*/
13849
-
13850
-
.ui.red.segment.segment.segment.segment.segment:not(.inverted) {
13851
-
border-top: 2px solid #DB2828;
13852
-
}
13853
-
13854
-
.ui.orange.segment.segment.segment.segment.segment:not(.inverted) {
13855
-
border-top: 2px solid #F2711C;
13856
-
}
13857
-
13858
-
.ui.yellow.segment.segment.segment.segment.segment:not(.inverted) {
13859
-
border-top: 2px solid #FBBD08;
13860
-
}
13861
-
13862
-
.ui.olive.segment.segment.segment.segment.segment:not(.inverted) {
13863
-
border-top: 2px solid #B5CC18;
13864
-
}
13865
-
13866
-
.ui.green.segment.segment.segment.segment.segment:not(.inverted) {
13867
-
border-top: 2px solid #21BA45;
13868
-
}
13869
-
13870
-
.ui.teal.segment.segment.segment.segment.segment:not(.inverted) {
13871
-
border-top: 2px solid #00B5AD;
13872
-
}
13873
-
13874
-
.ui.blue.segment.segment.segment.segment.segment:not(.inverted) {
13875
-
border-top: 2px solid #2185D0;
13876
-
}
13877
-
13878
-
.ui.violet.segment.segment.segment.segment.segment:not(.inverted) {
13879
-
border-top: 2px solid #6435C9;
13880
-
}
13881
-
13882
-
.ui.purple.segment.segment.segment.segment.segment:not(.inverted) {
13883
-
border-top: 2px solid #A333C8;
13884
-
}
13885
-
13886
-
.ui.pink.segment.segment.segment.segment.segment:not(.inverted) {
13887
-
border-top: 2px solid #E03997;
13888
-
}
13889
-
13890
-
.ui.brown.segment.segment.segment.segment.segment:not(.inverted) {
13891
-
border-top: 2px solid #A5673F;
13892
-
}
13893
-
13894
-
.ui.grey.segment.segment.segment.segment.segment:not(.inverted) {
13895
-
border-top: 2px solid #767676;
13896
-
}
13897
-
13898
-
.ui.black.segment.segment.segment.segment.segment:not(.inverted) {
13899
-
border-top: 2px solid #1B1C1D;
13900
-
}
13901
-
13902
-
/*-------------------
13903
-
Aligned
13904
-
--------------------*/
13905
-
13906
-
.ui[class*="left aligned"].segment {
13907
-
text-align: left;
13908
-
}
13909
-
13910
-
.ui[class*="right aligned"].segment {
13911
-
text-align: right;
13912
-
}
13913
-
13914
-
.ui[class*="center aligned"].segment {
13915
-
text-align: center;
13916
-
}
13917
-
13918
-
/*-------------------
13919
-
Floated
13920
-
--------------------*/
13921
-
13922
-
.ui.floated.segment,
13923
-
.ui[class*="left floated"].segment {
13924
-
float: left;
13925
-
margin-right: 1em;
13926
-
}
13927
-
13928
-
.ui[class*="right floated"].segment {
13929
-
float: right;
13930
-
margin-left: 1em;
13931
-
}
13932
-
13933
-
/*-------------------
13934
-
Emphasis
13935
-
--------------------*/
13936
-
13937
-
/* Secondary */
13938
-
13939
-
.ui.secondary.segment {
13940
-
background: #F3F4F5;
13941
-
color: rgba(0, 0, 0, 0.6);
13942
-
}
13943
-
13944
-
/* Tertiary */
13945
-
13946
-
.ui.tertiary.segment {
13947
-
background: #DCDDDE;
13948
-
color: rgba(0, 0, 0, 0.6);
13949
-
}
13950
-
13951
-
/*-------------------
13952
-
Attached
13953
-
--------------------*/
13954
-
13955
-
/* Middle */
13956
-
13957
-
.ui.attached.segment {
13958
-
top: 0;
13959
-
bottom: 0;
13960
-
border-radius: 0;
13961
-
margin: 0 -1px;
13962
-
width: calc(100% + 2px);
13963
-
max-width: calc(100% + 2px);
13964
-
box-shadow: none;
13965
-
border: 1px solid #D4D4D5;
13966
-
}
13967
-
13968
-
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
13969
-
border-top: none;
13970
-
}
13971
-
13972
-
/* Top */
13973
-
13974
-
.ui[class*="top attached"].segment {
13975
-
bottom: 0;
13976
-
margin-bottom: 0;
13977
-
top: 0;
13978
-
margin-top: 1rem;
13979
-
border-radius: 0.28571429rem 0.28571429rem 0 0;
13980
-
}
13981
-
13982
-
.ui.segment[class*="top attached"]:first-child {
13983
-
margin-top: 0;
13984
-
}
13985
-
13986
-
/* Bottom */
13987
-
13988
-
.ui.segment[class*="bottom attached"] {
13989
-
bottom: 0;
13990
-
margin-top: 0;
13991
-
top: 0;
13992
-
margin-bottom: 1rem;
13993
-
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
13994
-
border-radius: 0 0 0.28571429rem 0.28571429rem;
13995
-
}
13996
-
13997
-
.ui.segment[class*="bottom attached"]:last-child {
13998
-
margin-bottom: 1rem;
13999
-
}
14000
-
14001
-
/*--------------
14002
-
Fitted
14003
-
---------------*/
14004
-
14005
-
.ui.fitted.segment:not(.horizontally) {
14006
-
padding-top: 0;
14007
-
padding-bottom: 0;
14008
-
}
14009
-
14010
-
.ui.fitted.segment:not(.vertically) {
14011
-
padding-left: 0;
14012
-
padding-right: 0;
14013
-
}
14014
-
14015
-
/*-------------------
14016
-
Size
14017
-
--------------------*/
14018
-
14019
-
.ui.segments .segment,
14020
-
.ui.segment {
14021
-
font-size: 1rem;
14022
-
}
14023
-
14024
-
.ui.mini.segments .segment,
14025
-
.ui.mini.segment {
14026
-
font-size: 0.78571429rem;
14027
-
}
14028
-
14029
-
.ui.tiny.segments .segment,
14030
-
.ui.tiny.segment {
14031
-
font-size: 0.85714286rem;
14032
-
}
14033
-
14034
-
.ui.small.segments .segment,
14035
-
.ui.small.segment {
14036
-
font-size: 0.92857143rem;
14037
-
}
14038
-
14039
-
.ui.large.segments .segment,
14040
-
.ui.large.segment {
14041
-
font-size: 1.14285714rem;
14042
-
}
14043
-
14044
-
.ui.big.segments .segment,
14045
-
.ui.big.segment {
14046
-
font-size: 1.28571429rem;
14047
-
}
14048
-
14049
-
.ui.huge.segments .segment,
14050
-
.ui.huge.segment {
14051
-
font-size: 1.42857143rem;
14052
-
}
14053
-
14054
-
.ui.massive.segments .segment,
14055
-
.ui.massive.segment {
14056
-
font-size: 1.71428571rem;
14057
-
}
14058
-
14059
-
/*******************************
14060
-
Theme Overrides
14061
-
*******************************/
14062
-
14063
-
/*******************************
14064
-
Site Overrides
14065
-
*******************************/
14066
-
/*!
14067
13399
* # Fomantic-UI - Tab
14068
13400
* http://github.com/fomantic/Fomantic-UI/
14069
13401
*