History

Merge pull request '[gitea] week 15 cherry pick' (#3091) from algernon/forgejo:wcp/week-15 into forgejo

Earl Warren committed 2 years ago

Commit 26fc7c32 parents 7179ae8 9bd261a117 files · +6611 −7217Browse files

Showing the changes to web_src/css/modules (7 of 117 files). Show all

Unified · Split

7 files
  1. web_src/css/modules/animations.css +6 −3
  2. web_src/css/modules/checkbox.css +120 −0
  3. web_src/css/modules/header.css +6 −0
  4. web_src/css/modules/input.css +197 −0
  5. web_src/css/modules/list.css +187 −0
  6. web_src/css/modules/navbar.css +5 −0
  7. web_src/css/modules/tippy.css +11 −0
web_src/css/modules/animations.css+6−3
@@ -6,7 +6,6 @@ · 5 unmodified lines
6.is-loading {6.is-loading {
7 pointer-events: none !important;7 pointer-events: none !important;
8 position: relative !important;8 position: relative !important;
9 overflow: hidden !important;
10}9}
11 10
12.is-loading > * {11.is-loading > * {
@@ -35,10 +34,14 @@ · 22 unmodified lines
35 border-radius: var(--border-radius-circle);34 border-radius: var(--border-radius-circle);
36}35}
37 36
38.is-loading.small-loading-icon::after {37.is-loading.loading-icon-2px::after {
39 border-width: 2px;38 border-width: 2px;
40}39}
41 40
41.is-loading.loading-icon-3px::after {
42 border-width: 3px;
43}
44
42/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */45/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
43form.single-button-form.is-loading > * {46form.single-button-form.is-loading > * {
44 opacity: 1;47 opacity: 1;
@@ -63,7 +66,7 @@ form.single-button-form.is-loading .button { · 18 unmodified lines
63 background: transparent;66 background: transparent;
64}67}
65 68
66/* TODO: not needed, use "is-loading small-loading-icon" instead */69/* TODO: not needed, use "is-loading loading-icon-2px" instead */
67code.language-math.is-loading::after {70code.language-math.is-loading::after {
68 padding: 0;71 padding: 0;
69 border-width: 2px;72 border-width: 2px;
web_src/css/modules/checkbox.css+120−0
@@ -0,0 +1,120 @@
1/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4input[type="checkbox"],
5input[type="radio"] {
6 width: var(--checkbox-size);
7 height: var(--checkbox-size);
8}
9
10.ui.checkbox {
11 position: relative;
12 display: inline-block;
13 vertical-align: baseline;
14 min-height: var(--checkbox-size);
15 line-height: var(--checkbox-size);
16 min-width: var(--checkbox-size);
17 padding: 1px;
18}
19
20.ui.checkbox input[type="checkbox"],
21.ui.checkbox input[type="radio"] {
22 position: absolute;
23 top: 0;
24 left: 0;
25 width: var(--checkbox-size);
26 height: var(--checkbox-size);
27}
28
29.ui.checkbox input[type="checkbox"]:enabled,
30.ui.checkbox input[type="radio"]:enabled,
31.ui.checkbox label:enabled {
32 cursor: pointer;
33}
34
35.ui.checkbox label {
36 cursor: auto;
37 position: relative;
38 display: block;
39 user-select: none;
40}
41
42.ui.checkbox label,
43.ui.radio.checkbox label {
44 margin-left: 1.85714em;
45}
46
47.ui.checkbox + label {
48 vertical-align: middle;
49}
50
51.ui.disabled.checkbox label,
52.ui.checkbox input[disabled] ~ label {
53 cursor: default !important;
54 opacity: 0.5;
55 pointer-events: none;
56}
57
58.ui.radio.checkbox {
59 min-height: var(--checkbox-size);
60}
61
62/* "switch" styled checkbox */
63
64.ui.toggle.checkbox {
65 min-height: 1.5rem;
66}
67.ui.toggle.checkbox input {
68 width: 3.5rem;
69 height: 1.5rem;
70 opacity: 0;
71 z-index: 3;
72}
73.ui.toggle.checkbox label {
74 min-height: 1.5rem;
75 padding-left: 4.5rem;
76 padding-top: 0.15em;
77}
78.ui.toggle.checkbox label::before {
79 display: block;
80 position: absolute;
81 content: "";
82 z-index: 1;
83 top: 0;
84 width: 3.5rem;
85 height: 1.5rem;
86 border-radius: 500rem;
87 left: 0;
88}
89.ui.toggle.checkbox label::after {
90 background: var(--color-white);
91 position: absolute;
92 content: "";
93 opacity: 1;
94 z-index: 2;
95 width: 1.5rem;
96 height: 1.5rem;
97 top: 0;
98 left: 0;
99 border-radius: 500rem;
100 transition: background 0.3s ease, left 0.3s ease;
101}
102.ui.toggle.checkbox input ~ label::after {
103 left: -0.05rem;
104}
105.ui.toggle.checkbox input:checked ~ label::after {
106 left: 2.15rem;
107}
108.ui.toggle.checkbox input:focus ~ label::before,
109.ui.toggle.checkbox label::before {
110 background: var(--color-input-toggle-background);
111}
112.ui.toggle.checkbox label,
113.ui.toggle.checkbox input:checked ~ label,
114.ui.toggle.checkbox input:focus:checked ~ label {
115 color: var(--color-text) !important;
116}
117.ui.toggle.checkbox input:checked ~ label::before,
118.ui.toggle.checkbox input:focus:checked ~ label::before {
119 background: var(--color-primary) !important;
120}
web_src/css/modules/header.css+6−0
@@ -135,6 +135,12 @@ h4.ui.header .sub.header { · 134 unmodified lines
135 font-weight: var(--font-weight-normal);135 font-weight: var(--font-weight-normal);
136}136}
137 137
138/* open dropdown menus to the left in right-attached headers */
139.ui.attached.header > .ui.right .ui.dropdown .menu {
140 right: 0;
141 left: auto;
142}
143
138/* if a .top.attached.header is followed by a .segment, add some margin */144/* if a .top.attached.header is followed by a .segment, add some margin */
139.ui.segments + .ui.top.attached.header,145.ui.segments + .ui.top.attached.header,
140.ui.attached.segment + .ui.top.attached.header {146.ui.attached.segment + .ui.top.attached.header {
web_src/css/modules/input.css+197−0
@@ -0,0 +1,197 @@
1/* based on Fomantic UI input 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.input {
5 position: relative;
6 font-weight: var(--font-weight-normal);
7 display: inline-flex;
8 color: var(--color-input-text);
9}
10.ui.input > input {
11 margin: 0;
12 max-width: 100%;
13 flex: 1 0 auto;
14 outline: none;
15 font-family: var(--fonts-regular);
16 padding: 0.67857143em 1em;
17 border: 1px solid var(--color-input-border);
18 color: var(--color-input-text);
19 border-radius: 0.28571429rem;
20 line-height: var(--line-height-default);
21 text-align: start;
22}
23
24.ui.disabled.input,
25.ui.input:not(.disabled) input[disabled] {
26 opacity: var(--opacity-disabled);
27}
28.ui.disabled.input > input,
29.ui.input:not(.disabled) input[disabled] {
30 pointer-events: none;
31}
32
33.ui.input.focus > input,
34.ui.input > input:focus {
35 border-color: var(--color-primary);
36}
37
38.ui.input.error > input {
39 background: var(--color-error-bg);
40 border-color: var(--color-error-border);
41 color: var(--color-error-text);
42}
43
44.ui.icon.input > i.icon {
45 display: flex;
46 align-items: center;
47 justify-content: center;
48 cursor: default;
49 position: absolute;
50 text-align: center;
51 top: 0;
52 right: 0;
53 margin: 0;
54 height: 100%;
55 width: 2.67142857em;
56 opacity: 0.5;
57 border-radius: 0 0.28571429rem 0.28571429rem 0;
58 pointer-events: none;
59 padding: 4px;
60}
61
62.ui.icon.input > i.icon.is-loading {
63 position: absolute !important;
64 height: 28px;
65 top: 4px;
66}
67
68.ui.icon.input > i.icon.is-loading > * {
69 visibility: hidden;
70}
71
72.ui.ui.ui.ui.icon.input > textarea,
73.ui.ui.ui.ui.icon.input > input {
74 padding-right: 2.67142857em;
75}
76.ui.icon.input > i.link.icon {
77 cursor: pointer;
78}
79.ui.icon.input > i.circular.icon {
80 top: 0.35em;
81 right: 0.5em;
82}
83
84.ui[class*="left icon"].input > i.icon {
85 right: auto;
86 left: 1px;
87 border-radius: 0.28571429rem 0 0 0.28571429rem;
88}
89.ui[class*="left icon"].input > i.circular.icon {
90 right: auto;
91 left: 0.5em;
92}
93.ui.ui.ui.ui[class*="left icon"].input > textarea,
94.ui.ui.ui.ui[class*="left icon"].input > input {
95 padding-left: 2.67142857em;
96 padding-right: 1em;
97}
98
99.ui.icon.input > textarea:focus ~ .icon,
100.ui.icon.input > input:focus ~ .icon {
101 opacity: 1;
102}
103
104.ui.icon.input > textarea ~ i.icon {
105 height: 3em;
106}
107
108.ui.form .field.error > .ui.action.input > .ui.button,
109.ui.action.input.error > .ui.button {
110 border-top: 1px solid var(--color-error-border);
111 border-bottom: 1px solid var(--color-error-border);
112}
113
114.ui.action.input > .button,
115.ui.action.input > .buttons {
116 display: flex;
117 align-items: center;
118 flex: 0 0 auto;
119}
120.ui.action.input > .button,
121.ui.action.input > .buttons > .button {
122 padding-top: 0.78571429em;
123 padding-bottom: 0.78571429em;
124 margin: 0;
125}
126
127.ui.action.input:not([class*="left action"]) > input {
128 border-top-right-radius: 0;
129 border-bottom-right-radius: 0;
130 border-right-color: transparent;
131}
132
133.ui.action.input > .dropdown:first-child,
134.ui.action.input > .button:first-child,
135.ui.action.input > .buttons:first-child > .button {
136 border-radius: 0.28571429rem 0 0 0.28571429rem;
137}
138.ui.action.input > .dropdown:not(:first-child),
139.ui.action.input > .button:not(:first-child),
140.ui.action.input > .buttons:not(:first-child) > .button {
141 border-radius: 0;
142}
143.ui.action.input > .dropdown:last-child,
144.ui.action.input > .button:last-child,
145.ui.action.input > .buttons:last-child > .button {
146 border-radius: 0 0.28571429rem 0.28571429rem 0;
147}
148
149.ui.fluid.input {
150 display: flex;
151}
152.ui.fluid.input > input {
153 width: 0 !important;
154}
155
156.ui.tiny.input {
157 font-size: 0.85714286em;
158}
159.ui.small.input {
160 font-size: 0.92857143em;
161}
162
163.ui.action.input .ui.ui.button {
164 border-color: var(--color-input-border);
165 padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
166 padding-bottom: 0;
167}
168
169/* currently used for search bar dropdowns in repo search and explore code */
170.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
171 min-width: 10em;
172}
173.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
174 border-right: none;
175}
176.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
177 border-color: var(--color-input-border);
178}
179.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
180 border-bottom-left-radius: 0 !important;
181 border-bottom-right-radius: 0 !important;
182}
183.ui.action.input:not([class*="left action"]) > input,
184.ui.action.input:not([class*="left action"]) > input:hover {
185 border-right: none;
186}
187.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
188.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
189.ui.action.input:not([class*="left action"]) > input:focus + .button,
190.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
191.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
192.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
193 border-left-color: var(--color-primary);
194}
195.ui.action.input:not([class*="left action"]) > input:focus {
196 border-right-color: var(--color-primary);
197}
web_src/css/modules/list.css+187−0
@@ -0,0 +1,187 @@
1/* based on Fomantic UI list 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.list {
5 list-style-type: none;
6 margin: 1em 0;
7 padding: 0;
8 font-size: 1em;
9}
10
11.ui.list:first-child {
12 margin-top: 0;
13 padding-top: 0;
14}
15
16.ui.list:last-child {
17 margin-bottom: 0;
18 padding-bottom: 0;
19}
20
21.ui.list > .item,
22.ui.list .list > .item {
23 display: list-item;
24 table-layout: fixed;
25 list-style-type: none;
26 list-style-position: outside;
27}
28
29.ui.list > .list > .item::after,
30.ui.list > .item::after {
31 content: "";
32 display: block;
33 height: 0;
34 clear: both;
35 visibility: hidden;
36}
37
38.ui.list .list:not(.icon) {
39 clear: both;
40 margin: 0;
41 padding: 0.75em 0 0.25em 0.5em;
42}
43
44.ui.list .list > .item {
45 padding: 0.14285714em 0;
46}
47
48.ui.list .list > .item > i.icon,
49.ui.list > .item > i.icon {
50 display: table-cell;
51 min-width: 1.55em;
52 padding-top: 0;
53 transition: color 0.1s ease;
54 padding-right: 0.28571429em;
55 vertical-align: top;
56}
57.ui.list .list > .item > i.icon:only-child,
58.ui.list > .item > i.icon:only-child {
59 display: inline-block;
60 min-width: auto;
61 vertical-align: top;
62}
63
64.ui.list .list > .item > .image,
65.ui.list > .item > .image {
66 display: table-cell;
67 background-color: transparent;
68 vertical-align: top;
69}
70.ui.list .list > .item > .image:not(:only-child):not(img),
71.ui.list > .item > .image:not(:only-child):not(img) {
72 padding-right: 0.5em;
73}
74.ui.list .list > .item > .image img,
75.ui.list > .item > .image img {
76 vertical-align: top;
77}
78.ui.list .list > .item > img.image,
79.ui.list .list > .item > .image:only-child,
80.ui.list > .item > img.image,
81.ui.list > .item > .image:only-child {
82 display: inline-block;
83}
84
85.ui.list .list > .item > .content,
86.ui.list > .item > .content {
87 color: var(--color-text);
88}
89.ui.list .list > .item > .image + .content,
90.ui.list .list > .item > i.icon + .content,
91.ui.list > .item > .image + .content,
92.ui.list > .item > i.icon + .content {
93 display: table-cell;
94 width: 100%;
95 padding: 0 0 0 0.5em;
96 vertical-align: top;
97}
98.ui.list .list > .item > img.image + .content,
99.ui.list > .item > img.image + .content {
100 display: inline-block;
101 width: auto;
102}
103.ui.list .list > .item > .content > .list,
104.ui.list > .item > .content > .list {
105 margin-left: 0;
106 padding-left: 0;
107}
108
109.ui.list .list > .item .header,
110.ui.list > .item .header {
111 display: block;
112 margin: 0;
113 font-family: var(--fonts-regular);
114 font-weight: var(--font-weight-medium);
115 color: var(--color-text-dark);
116}
117
118.ui.list .list > .item .description,
119.ui.list > .item .description {
120 display: block;
121 color: var(--color-text);
122}
123
124.ui.list > .item a,
125.ui.list .list > .item a {
126 cursor: pointer;
127}
128
129.ui.menu .ui.list > .item,
130.ui.menu .ui.list .list > .item {
131 display: list-item;
132 table-layout: fixed;
133 background-color: transparent;
134 list-style-type: none;
135 list-style-position: outside;
136 padding: 0.21428571em 0;
137}
138.ui.menu .ui.list .list > .item::before,
139.ui.menu .ui.list > .item::before {
140 border: none;
141 background: none;
142}
143.ui.menu .ui.list .list > .item:first-child,
144.ui.menu .ui.list > .item:first-child {
145 padding-top: 0;
146}
147.ui.menu .ui.list .list > .item:last-child,
148.ui.menu .ui.list > .item:last-child {
149 padding-bottom: 0;
150}
151
152.ui.list .list > .disabled.item,
153.ui.list > .disabled.item {
154 pointer-events: none;
155 opacity: var(--opacity-disabled);
156}
157
158.ui.list .list > a.item:hover > .icons,
159.ui.list > a.item:hover > .icons,
160.ui.list .list > a.item:hover > i.icon,
161.ui.list > a.item:hover > i.icon {
162 color: var(--color-text-dark);
163}
164
165.ui.divided.list > .item {
166 border-top: 1px solid var(--color-secondary);
167}
168.ui.divided.list .list > .item {
169 border-top: none;
170}
171.ui.divided.list .item .list > .item {
172 border-top: none;
173}
174.ui.divided.list .list > .item:first-child,
175.ui.divided.list > .item:first-child {
176 border-top: none;
177}
178.ui.divided.list .list > .item:first-child {
179 border-top-width: 1px;
180}
181
182.ui.relaxed.list > .item:not(:first-child) {
183 padding-top: 0.42857143em;
184}
185.ui.relaxed.list > .item:not(:last-child) {
186 padding-bottom: 0.42857143em;
187}
web_src/css/modules/navbar.css+5−0
@@ -140,3 +140,8 @@ · 139 unmodified lines
140.secondary-nav {140.secondary-nav {
141 background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */141 background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
142}142}
143
144.issue-navbar {
145 display: flex;
146 justify-content: space-between;
147}
web_src/css/modules/tippy.css+11−0
@@ -29,6 +29,17 @@ · 28 unmodified lines
29 z-index: 1;29 z-index: 1;
30}30}
31 31
32/* bare theme, no styling at all, except box-shadow */
33.tippy-box[data-theme="bare"] {
34 border: none;
35 box-shadow: 0 6px 18px var(--color-shadow);
36}
37
38.tippy-box[data-theme="bare"] .tippy-content {
39 padding: 0;
40 background: transparent;
41}
42
32/* tooltip theme for text tooltips */43/* tooltip theme for text tooltips */
33 44
34.tippy-box[data-theme="tooltip"] {45.tippy-box[data-theme="tooltip"] {