loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Various CSS tweaks (#21244)

- Remove arc-green specific rules and instead fix the colors in the base
rules.
- Make file table row border visible on arc-green.
- Remove remnants of fomantic accordeon module that was removed.

authored by

silverwind and committed by
GitHub
3f9e323e 301d84e8

+61 -99
-1
web_src/fomantic/theme.config.less
··· 50 50 @table : 'default'; 51 51 52 52 /* Modules */ 53 - @accordion : 'default'; 54 53 @calendar : 'default'; 55 54 @checkbox : 'default'; 56 55 @dimmer : 'default';
+52 -3
web_src/less/_base.less
··· 135 135 --color-light: #00000006; 136 136 --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); 137 137 --color-light-border: #0000001d; 138 - --color-hover: #0000000f; 138 + --color-hover: #0000000c; 139 139 --color-active: #00000014; 140 140 --color-menu: #ffffff; 141 141 --color-card: #ffffff; ··· 157 157 --color-reaction-active-bg: var(--color-primary-alpha-20); 158 158 --color-tooltip-bg: #000000f0; 159 159 --color-tooltip-text: #ffffff; 160 + --color-header-bar: #ffffff; 160 161 /* backgrounds */ 161 162 --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'); 162 163 --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>'); ··· 294 295 text-decoration: none !important; 295 296 } 296 297 298 + .ui.search > .results { 299 + background: var(--color-body); 300 + border-color: var(--color-secondary); 301 + } 302 + 303 + .ui.search > .results .result { 304 + background: var(--color-body); 305 + } 306 + 307 + .ui.search > .results .result .title { 308 + color: var(--color-text-dark); 309 + } 310 + 311 + .ui.search > .results .result .image { 312 + width: auto; 313 + height: auto; 314 + } 315 + 316 + .ui.search > .results .result:hover, 317 + .ui.category.search > .results .category .result:hover { 318 + background: var(--color-hover); 319 + } 320 + 297 321 .unselectable { 298 322 -webkit-touch-callout: none; 299 323 -webkit-user-select: none; ··· 318 342 color: var(--color-text-light-2); 319 343 } 320 344 345 + .ui.divider:not(.vertical,.horizontal) { 346 + border-top-color: var(--color-secondary) !important; 347 + border-bottom: none !important; 348 + } 349 + 321 350 .page-content { 322 351 margin-top: 15px; 323 352 } ··· 447 476 448 477 .ui.dropdown .menu > .message:not(.ui) { 449 478 color: var(--color-text-light-2); 479 + } 480 + 481 + .ui.list .list > .item > .content, 482 + .ui.list > .item > .content { 483 + color: var(--color-text); 450 484 } 451 485 452 486 .ui.secondary.menu .dropdown.item:hover, ··· 656 690 657 691 .ui.table { 658 692 color: var(--color-text); 659 - background: var(--color-body); 693 + background: var(--color-box-body); 660 694 border-color: var(--color-secondary); 661 695 } 662 696 697 + .ui.table th, 698 + .ui.table td { 699 + transition: none; 700 + } 701 + 702 + .ui.table > tr > td, 703 + .ui.table > tbody > tr > td { 704 + border-top-color: var(--color-secondary-alpha-50); 705 + } 706 + 663 707 .ui.ui.selectable.table > tbody > tr:hover, 664 708 .ui.table tbody tr td.selectable:hover { 665 709 color: var(--color-text); ··· 669 713 .ui.ui.ui.ui.table tr.grey:not(.marked), 670 714 .ui.ui.table td.grey:not(.marked) { 671 715 background: var(--color-body); 716 + color: var(--color-text); 717 + } 718 + 719 + .ui.table > thead > tr > th { 720 + background: var(--color-box-header); 672 721 color: var(--color-text); 673 722 } 674 723 ··· 750 799 margin: 0 !important; 751 800 752 801 &.light { 753 - background: var(--color-body); 802 + background: var(--color-header-bar); 754 803 border-bottom: 1px solid var(--color-secondary); 755 804 } 756 805
+1 -1
web_src/less/_form.less
··· 134 134 135 135 .form { 136 136 .help { 137 - color: #999999; 137 + color: var(--color-secondary-dark-5); 138 138 padding-bottom: .6em; 139 139 display: inline-block; 140 140 }
+5 -5
web_src/less/_repository.less
··· 384 384 } 385 385 386 386 tr:hover { 387 - background-color: #ffffee; 387 + background-color: var(--color-hover); 388 388 } 389 389 390 390 tr.has-parent a { ··· 3013 3013 } 3014 3014 3015 3015 .tag-code, 3016 - .tag-code td { 3017 - background-color: #f0f9ff; 3018 - border-color: #f1f8ff !important; 3016 + .tag-code td, 3017 + .tag-code .blob-excerpt { 3018 + background-color: var(--color-box-body-highlight); 3019 3019 vertical-align: middle; 3020 3020 } 3021 3021 ··· 3031 3031 } 3032 3032 3033 3033 td.blob-excerpt { 3034 - background-color: #fafafa; 3034 + background-color: var(--color-secondary-alpha-30); 3035 3035 } 3036 3036 3037 3037 .issue-keyword {
+3 -89
web_src/less/themes/theme-arc-green.less
··· 94 94 /* target-based colors */ 95 95 --color-body: #383c4a; 96 96 --color-box-header: #404652; 97 - --color-box-body: #303440; 97 + --color-box-body: #2a2e3a; 98 98 --color-box-body-highlight: #353945; 99 99 --color-text-dark: #dbe0ea; 100 100 --color-text: #bbc0ca; ··· 105 105 --color-footer: #2e323e; 106 106 --color-timeline: #4c525e; 107 107 --color-input-text: #d5dbe6; 108 - --color-input-background: #292d39; 108 + --color-input-background: #232933; 109 109 --color-input-border: #454a57; 110 110 --color-input-border-hover: #505667; 111 111 --color-navbar: #2a2e3a; ··· 132 132 --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ 133 133 --color-reaction-bg: #ffffff12; 134 134 --color-reaction-active-bg: var(--color-primary-alpha-40); 135 + --color-header-bar: #2e323e; 135 136 } 136 137 137 138 ::-webkit-calendar-picker-indicator { 138 139 filter: invert(.8); 139 140 } 140 141 141 - .ui.horizontal.segments > .segment { 142 - background-color: #383c4a; 143 - } 144 - 145 - .following.bar.light { 146 - background: #2e323e; 147 - border-color: var(--color-secondary-alpha-40); 148 - } 149 - 150 - .following.bar .top.menu a.item:hover { 151 - color: #fff; 152 - } 153 - 154 142 .ui.red.label, 155 143 .ui.red.labels .label { 156 144 background-color: #7d3434 !important; ··· 163 151 background-color: #936e00 !important; 164 152 } 165 153 166 - .ui.accordion .title:not(.ui) { 167 - color: #dbdbdb; 168 - } 169 - 170 154 .ui.green.label, 171 155 .ui.green.labels .label, 172 156 .ui.basic.green.label { ··· 183 167 color: #fff !important; 184 168 } 185 169 186 - .ui.divider:not(.vertical,.horizontal) { 187 - border-bottom-color: var(--color-secondary); 188 - border-top-color: transparent; 189 - } 190 - 191 - .form .help { 192 - color: #7f8699; 193 - } 194 - 195 - .ui .text.light.grey { 196 - color: #7f8699 !important; 197 - } 198 - 199 170 .ui.form .fields.error .field textarea, 200 171 .ui.form .fields.error .field select, 201 172 .ui.form .fields.error .field input:not([type]), ··· 257 228 background-color: #a0cc75; 258 229 } 259 230 260 - .ui.search > .results { 261 - background: #383c4a; 262 - border-color: var(--color-secondary); 263 - } 264 - 265 - .ui.search > .results .result:hover, 266 - .ui.category.search > .results .category .result:hover { 267 - background: var(--color-secondary); 268 - } 269 - 270 - .ui.search > .results .result .title { 271 - color: #dbdbdb; 272 - } 273 - 274 - .ui.table > thead > tr > th { 275 - background: var(--color-secondary); 276 - color: #dbdbdb !important; 277 - } 278 - 279 - .repository.file.list #repo-files-table tr { 280 - background: #2a2e3a; 281 - } 282 - 283 - .repository.file.list #repo-files-table tr:hover { 284 - background-color: #393d4a !important; 285 - } 286 - 287 - .overflow.menu .items .item { 288 - color: #9d9d9d; 289 - } 290 - 291 - .overflow.menu .items .item:hover { 292 - color: #dbdbdb; 293 - } 294 - 295 - .ui.list > .item > .content { 296 - color: var(--color-secondary-dark-6) !important; 297 - } 298 - 299 231 .repository .navbar .active.item, 300 232 .repository .navbar .active.item:hover { 301 233 border-color: transparent !important; ··· 305 237 border-color: var(--color-secondary); 306 238 } 307 239 308 - .tag-code, 309 - .tag-code td { 310 - background: #353945 !important; 311 - 312 - } 313 - .tag-code td.lines-num { 314 - background-color: #3a3e4c !important; 315 - } 316 - 317 - .tag-code td.lines-type-marker, 318 - td.blob-hunk { 319 - color: #dbdbdb !important; 320 - } 321 - 322 240 .ui.red.button, 323 241 .ui.red.buttons .button { 324 242 background-color: #7d3434; ··· 342 260 .lines-num { 343 261 color: var(--color-secondary-dark-6) !important; 344 262 border-color: var(--color-secondary) !important; 345 - } 346 - 347 - td.blob-excerpt { 348 - background-color: rgba(0, 0, 0, .15); 349 263 } 350 264 351 265 .lines-code.active,