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
66 .is-loading {
77 pointer-events: none !important;
88 position: relative !important;
9− overflow: hidden !important;
109 }
1110
1211 .is-loading > * {
@@ -35,10 +34,14 @@ · 22 unmodified lines
3534 border-radius: var(--border-radius-circle);
3635 }
3736
38−.is-loading.small-loading-icon::after {
37+.is-loading.loading-icon-2px::after {
3938 border-width: 2px;
4039 }
4140
41+.is-loading.loading-icon-3px::after {
42+ border-width: 3px;
43+}
44+
4245 /* 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. */
4346 form.single-button-form.is-loading > * {
4447 opacity: 1;
@@ -63,7 +66,7 @@ form.single-button-form.is-loading .button { · 18 unmodified lines
6366 background: transparent;
6467 }
6568
66−/* TODO: not needed, use "is-loading small-loading-icon" instead */
69+/* TODO: not needed, use "is-loading loading-icon-2px" instead */
6770 code.language-math.is-loading::after {
6871 padding: 0;
6972 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+
4+input[type="checkbox"],
5+input[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
135135 font-weight: var(--font-weight-normal);
136136 }
137137
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+
138144 /* if a .top.attached.header is followed by a .segment, add some margin */
139145 .ui.segments + .ui.top.attached.header,
140146 .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
140140 .secondary-nav {
141141 background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
142142 }
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
2929 z-index: 1;
3030 }
3131
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+
3243 /* tooltip theme for text tooltips */
3344
3445 .tippy-box[data-theme="tooltip"] {