loading up the forgejo repo on tangled to test page performance
Unify `border-radius` behavior (#26770)
## Changes
- no more hardcoded `border-radius`es (apart from `0`)
- no more value inconsistencies
- no more guessing what pixel value you should use
- two new variables:
- `--border-radius-medium` (for elements where the normal border radius
does not suffice)
- `--border-radius-circle` (for displaying circles)
---------
Co-authored-by: silverwind <me@silverwind.io>
authored by
delvh
silverwind
and committed by
GitHub
dca2f937
ac2f8c9a
+41
-42
+8
-6
web_src/css/base.css
+8
-6
web_src/css/base.css
···
16
16
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
17
17
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
18
18
/* non-color variables */
19
-
--border-radius: 0.28571429rem;
19
+
--border-radius: 4px;
20
+
--border-radius-medium: 6px;
21
+
--border-radius-circle: 100%;
20
22
--opacity-disabled: 0.55;
21
23
--height-loading: 16rem;
22
24
--tab-size: 4;
···
309
311
310
312
progress {
311
313
background: var(--color-secondary-dark-1);
312
-
border-radius: 6px;
314
+
border-radius: var(--border-radius);
313
315
border: none;
314
316
overflow: hidden;
315
317
}
···
339
341
::-webkit-scrollbar-thumb {
340
342
box-shadow: inset 0 0 0 6px var(--color-primary);
341
343
border: 2px solid transparent;
342
-
border-radius: 5px !important;
344
+
border-radius: var(--border-radius);
343
345
}
344
346
345
347
::-webkit-scrollbar-thumb:window-inactive {
···
454
456
455
457
.issue-title code {
456
458
padding: 2px 4px;
457
-
border-radius: 6px;
459
+
border-radius: var(--border-radius-medium);
458
460
background-color: var(--color-markup-code-block);
459
461
}
460
462
···
1510
1512
margin-left: 0.4em;
1511
1513
height: 0.67em;
1512
1514
width: 0.67em;
1513
-
border-radius: 0.15em;
1515
+
border-radius: var(--border-radius);
1514
1516
}
1515
1517
1516
1518
.attention-icon {
···
2013
2015
2014
2016
.color-icon {
2015
2017
display: inline-block;
2016
-
border-radius: 100%;
2018
+
border-radius: var(--border-radius-circle);
2017
2019
height: 14px;
2018
2020
width: 14px;
2019
2021
}
+1
-1
web_src/css/dashboard.css
+1
-1
web_src/css/dashboard.css
+4
-4
web_src/css/editor/combomarkdowneditor.css
+4
-4
web_src/css/editor/combomarkdowneditor.css
···
83
83
margin-top: 24px;
84
84
list-style: none;
85
85
background: var(--color-box-body);
86
-
border-radius: 5px;
86
+
border-radius: var(--border-radius);
87
87
border: 1px solid var(--color-secondary);
88
88
box-shadow: 0 .5rem 1rem var(--color-shadow);
89
89
}
···
101
101
}
102
102
103
103
text-expander .suggestions li:first-child {
104
-
border-radius: 4px 4px 0 0;
104
+
border-radius: var(--border-radius) var(--border-radius) 0 0;
105
105
}
106
106
107
107
text-expander .suggestions li:last-child {
108
-
border-radius: 0 0 4px 4px;
108
+
border-radius: 0 0 var(--border-radius) var(--border-radius);
109
109
}
110
110
111
111
text-expander .suggestions li:only-child {
112
-
border-radius: 4px;
112
+
border-radius: var(--border-radius);
113
113
}
114
114
115
115
text-expander .suggestions li:hover {
+1
-1
web_src/css/features/codeeditor.css
+1
-1
web_src/css/features/codeeditor.css
+1
-1
web_src/css/features/console.css
+1
-1
web_src/css/features/console.css
+1
-1
web_src/css/features/dropzone.css
+1
-1
web_src/css/features/dropzone.css
+1
-1
web_src/css/features/tribute.css
+1
-1
web_src/css/features/tribute.css
+1
-1
web_src/css/form.css
+1
-1
web_src/css/form.css
+4
-4
web_src/css/markup/content.css
+4
-4
web_src/css/markup/content.css
···
180
180
appearance: none;
181
181
position: relative;
182
182
border: 1px solid var(--color-secondary);
183
-
border-radius: 2px;
183
+
border-radius: var(--border-radius);
184
184
background: var(--color-input-background);
185
185
height: 14px;
186
186
width: 14px;
···
433
433
font-size: 85%;
434
434
white-space: break-spaces;
435
435
background-color: var(--color-markup-code-block);
436
-
border-radius: 4px;
436
+
border-radius: var(--border-radius);
437
437
}
438
438
439
439
.markup code br,
···
466
466
font-size: 85%;
467
467
line-height: 1.45;
468
468
background-color: var(--color-markup-code-block);
469
-
border-radius: 4px;
469
+
border-radius: var(--border-radius);
470
470
}
471
471
472
472
.markup .highlight pre {
···
504
504
vertical-align: middle;
505
505
background-color: var(--color-markup-code-block);
506
506
border: 1px solid var(--color-secondary);
507
-
border-radius: 3px;
507
+
border-radius: var(--border-radius);
508
508
box-shadow: inset 0 -1px 0 var(--color-secondary);
509
509
}
510
510
+1
-1
web_src/css/modules/animations.css
+1
-1
web_src/css/modules/animations.css
···
26
26
border-width: 4px;
27
27
border-style: solid;
28
28
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
29
-
border-radius: 100%;
29
+
border-radius: var(--border-radius-circle);
30
30
}
31
31
32
32
.is-loading.small-loading-icon::after {
+2
-2
web_src/css/modules/toast.css
+2
-2
web_src/css/modules/toast.css
···
4
4
opacity: 0;
5
5
transition: all .2s ease;
6
6
z-index: 500;
7
-
border-radius: 4px;
7
+
border-radius: var(--border-radius);
8
8
box-shadow: 0 8px 24px var(--color-shadow);
9
9
display: flex;
10
10
max-width: 50vw;
···
25
25
.toast-close,
26
26
.toast-icon {
27
27
color: currentcolor;
28
-
border-radius: 3px;
28
+
border-radius: var(--border-radius);
29
29
background: transparent;
30
30
border: none;
31
31
display: inline-block;
+10
-10
web_src/css/repo.css
+10
-10
web_src/css/repo.css
···
117
117
118
118
.repository .issue-content-right #deadlineForm input {
119
119
width: 12.8rem;
120
-
border-radius: 4px 0 0 4px;
120
+
border-radius: var(--border-radius) 0 0 var(--border-radius);
121
121
border-right: 0;
122
122
white-space: nowrap;
123
123
}
···
141
141
142
142
.repository .filter.menu.labels .label-filter .menu .info code {
143
143
border: 1px solid var(--color-secondary);
144
-
border-radius: 3px;
144
+
border-radius: var(--border-radius);
145
145
padding: 1px 2px;
146
146
font-size: 11px;
147
147
}
···
518
518
margin-bottom: 10px;
519
519
border: 1px solid var(--color-secondary);
520
520
background: var(--color-box-body);
521
-
border-radius: 3px;
521
+
border-radius: var(--border-radius);
522
522
}
523
523
524
524
.repository.file.editor .commit-form-wrapper .commit-form::before,
···
551
551
font: 12px var(--fonts-monospace);
552
552
color: var(--color-text);
553
553
background: var(--color-secondary);
554
-
border-radius: 3px;
554
+
border-radius: var(--border-radius);
555
555
margin: 0 2px;
556
556
}
557
557
···
709
709
align-items: center !important;
710
710
font-size: 14px !important;
711
711
padding: 7px 10px !important;
712
-
border-radius: 6px !important;
712
+
border-radius: var(--border-radius-medium) !important;
713
713
}
714
714
715
715
.issue-state-label .svg {
···
835
835
width: 34px;
836
836
height: 34px;
837
837
background-color: var(--color-timeline);
838
-
border-radius: 50%;
838
+
border-radius: var(--border-radius-circle);
839
839
display: flex;
840
840
float: left;
841
841
margin-left: -33px;
···
1049
1049
1050
1050
.merge-section-info code {
1051
1051
border: 1px solid var(--color-light-border);
1052
-
border-radius: 4px;
1052
+
border-radius: var(--border-radius);
1053
1053
padding: 2px 4px;
1054
1054
background: var(--color-light);
1055
1055
}
···
2093
2093
width: 34px;
2094
2094
height: 34px;
2095
2095
min-height: 0 !important;
2096
-
border-radius: 6px;
2096
+
border-radius: var(--border-radius);
2097
2097
display: flex !important;
2098
2098
align-items: center;
2099
2099
justify-content: center;
···
2753
2753
#new-dependency-drop-list.ui.selection.dropdown {
2754
2754
min-width: 0;
2755
2755
width: 100%;
2756
-
border-radius: 4px 0 0 4px;
2756
+
border-radius: var(--border-radius) 0 0 var(--border-radius);
2757
2757
border-right: 0;
2758
2758
white-space: nowrap;
2759
2759
}
···
2949
2949
margin: 10px 0;
2950
2950
background-color: var(--color-markup-code-block);
2951
2951
border: 1px solid var(--color-secondary);
2952
-
border-radius: 3px;
2952
+
border-radius: var(--border-radius);
2953
2953
font-size: 13px;
2954
2954
line-height: 1.5;
2955
2955
overflow: auto;
+2
-3
web_src/css/repo/issue-list.css
+2
-3
web_src/css/repo/issue-list.css
···
39
39
40
40
#issue-list .flex-item-body .branches .branch {
41
41
background-color: var(--color-secondary-alpha-40);
42
-
border-radius: 3px;
42
+
border-radius: var(--border-radius);
43
43
padding: 0 4px;
44
44
}
45
45
···
55
55
width: 80px;
56
56
height: 6px;
57
57
display: inline-block;
58
-
border-radius: 3px;
59
58
}
60
59
61
60
#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
···
64
63
65
64
#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
66
65
background-color: var(--color-secondary-dark-4);
67
-
}
66
+
}
+1
-3
web_src/css/repo/release-tag.css
+1
-3
web_src/css/repo/release-tag.css
···
75
75
width: 10px;
76
76
height: 10px;
77
77
background-color: var(--color-secondary-dark-3);
78
-
z-index: 9;
79
78
position: absolute;
80
-
display: block;
81
79
left: -5.5px;
82
80
top: 40px;
83
-
border-radius: 100%;
81
+
border-radius: var(--border-radius-circle);
84
82
border: 2.5px solid var(--color-body);
85
83
}
86
84
+1
-1
web_src/css/review.css
+1
-1
web_src/css/review.css
···
273
273
border: 1px solid transparent;
274
274
padding: 4px 8px;
275
275
margin: -8px 0; /* just like other buttons in the diff box header */
276
-
border-radius: 0.285rem; /* just like .ui.tiny.button */
276
+
border-radius: var(--border-radius);
277
277
font-size: 0.857rem; /* just like .ui.tiny.button */
278
278
}
279
279