oppi.li / perf-test
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.

Remove fomantic input module (#30194)

Another pure CSS module. Some styling is part of the `form` module which
will likely follow next.

(cherry picked from commit ff334749f58c71980ec19143bc21c0a799074b30)

Conflicts:
- web_src/js/components/DashboardRepoList.vue
Resolved the conflict by manually applying the Gitea change.

authored by

silverwind and committed by
Gergely Nagy d40127a3 19832265

+208 -813
+1 -1
templates/devtest/gitea-ui.tmpl
··· 102 102 103 103 <div> 104 104 <h1>Loading</h1> 105 - <div class="is-loading small-loading-icon tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div> 105 + <div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div> 106 106 <div class="is-loading tw-border tw-border-secondary tw-py-4"> 107 107 <p>loading ...</p> 108 108 <p>loading ...</p>
+1 -1
templates/repo/issue/view_content/sidebar.tmpl
··· 684 684 {{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}} 685 685 <div class="divider"></div> 686 686 <div class="inline field"> 687 - <div class="ui checkbox small-loading-icon" id="allow-edits-from-maintainers" 687 + <div class="ui checkbox loading-icon-2px" id="allow-edits-from-maintainers" 688 688 data-url="{{.Issue.Link}}" 689 689 data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}" 690 690 data-prompt-error="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"
-57
web_src/css/base.css
··· 317 317 background-color: var(--color-label-bg); 318 318 } 319 319 320 - /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */ 321 - .ui.input > input { 322 - line-height: var(--line-height-default); 323 - text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */ 324 - } 325 - 326 320 /* fix Fomantic's line-height causing vertical scrollbars to appear */ 327 321 ul.ui.list li, 328 322 ol.ui.list li, 329 323 .ui.list > .item, 330 324 .ui.list .list > .item { 331 325 line-height: var(--line-height-default); 332 - } 333 - 334 - .ui.input.focus > input, 335 - .ui.input > input:focus { 336 - border-color: var(--color-primary); 337 - } 338 - 339 - .ui.action.input .ui.ui.button { 340 - border-color: var(--color-input-border); 341 - padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */ 342 - padding-bottom: 0; 343 - } 344 - 345 - /* currently used for search bar dropdowns in repo search and explore code */ 346 - .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection { 347 - min-width: 10em; 348 - } 349 - .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) { 350 - border-right: none; 351 - } 352 - .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover { 353 - border-color: var(--color-input-border); 354 - } 355 - .ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible { 356 - border-bottom-left-radius: 0 !important; 357 - border-bottom-right-radius: 0 !important; 358 - } 359 - .ui.action.input:not([class*="left action"]) > input, 360 - .ui.action.input:not([class*="left action"]) > input:hover { 361 - border-right: none; 362 - } 363 - .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection, 364 - .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover, 365 - .ui.action.input:not([class*="left action"]) > input:focus + .button, 366 - .ui.action.input:not([class*="left action"]) > input:focus + .button:hover, 367 - .ui.action.input:not([class*="left action"]) > input:focus + .icon + .button, 368 - .ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover { 369 - border-left-color: var(--color-primary); 370 - } 371 - .ui.action.input:not([class*="left action"]) > input:focus { 372 - border-right-color: var(--color-primary); 373 326 } 374 327 375 328 .ui.menu { ··· 1619 1572 .ui.ui.labeled.button { 1620 1573 gap: 0; 1621 1574 align-items: stretch; 1622 - } 1623 - 1624 - .ui.ui.icon.input .icon { 1625 - display: flex; 1626 - align-items: center; 1627 - justify-content: center; 1628 - } 1629 - 1630 - .ui.icon.input > i.icon { 1631 - transition: none; 1632 1575 } 1633 1576 1634 1577 .flex-items-block > .item,
+1
web_src/css/index.css
··· 6 6 @import "./modules/container.css"; 7 7 @import "./modules/divider.css"; 8 8 @import "./modules/header.css"; 9 + @import "./modules/input.css"; 9 10 @import "./modules/label.css"; 10 11 @import "./modules/segment.css"; 11 12 @import "./modules/grid.css";
+6 -2
web_src/css/modules/animations.css
··· 34 34 border-radius: var(--border-radius-circle); 35 35 } 36 36 37 - .is-loading.small-loading-icon::after { 37 + .is-loading.loading-icon-2px::after { 38 38 border-width: 2px; 39 + } 40 + 41 + .is-loading.loading-icon-3px::after { 42 + border-width: 3px; 39 43 } 40 44 41 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. */ ··· 62 66 background: transparent; 63 67 } 64 68 65 - /* TODO: not needed, use "is-loading small-loading-icon" instead */ 69 + /* TODO: not needed, use "is-loading loading-icon-2px" instead */ 66 70 code.language-math.is-loading::after { 67 71 padding: 0; 68 72 border-width: 2px;
+192
web_src/css/modules/input.css
··· 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: 50%; 52 + transform: translateY(-50%); 53 + opacity: 0.5; 54 + border-radius: 0 0.28571429rem 0.28571429rem 0; 55 + pointer-events: none; 56 + padding: 4px; 57 + } 58 + 59 + .ui.icon.input > i.icon.is-loading { 60 + position: absolute !important; 61 + } 62 + 63 + .ui.icon.input > i.icon.is-loading > * { 64 + visibility: hidden; 65 + } 66 + 67 + .ui.ui.ui.ui.icon.input > textarea, 68 + .ui.ui.ui.ui.icon.input > input { 69 + padding-right: 2.67142857em; 70 + } 71 + .ui.icon.input > i.link.icon { 72 + cursor: pointer; 73 + } 74 + .ui.icon.input > i.circular.icon { 75 + top: 0.35em; 76 + right: 0.5em; 77 + } 78 + 79 + .ui[class*="left icon"].input > i.icon { 80 + right: auto; 81 + left: 8px; 82 + border-radius: 0.28571429rem 0 0 0.28571429rem; 83 + } 84 + .ui[class*="left icon"].input > i.circular.icon { 85 + right: auto; 86 + left: 0.5em; 87 + } 88 + .ui.ui.ui.ui[class*="left icon"].input > textarea, 89 + .ui.ui.ui.ui[class*="left icon"].input > input { 90 + padding-left: 2.67142857em; 91 + padding-right: 1em; 92 + } 93 + 94 + .ui.icon.input > textarea:focus ~ .icon, 95 + .ui.icon.input > input:focus ~ .icon { 96 + opacity: 1; 97 + } 98 + 99 + .ui.icon.input > textarea ~ i.icon { 100 + height: 3em; 101 + } 102 + 103 + .ui.form .field.error > .ui.action.input > .ui.button, 104 + .ui.action.input.error > .ui.button { 105 + border-top: 1px solid var(--color-error-border); 106 + border-bottom: 1px solid var(--color-error-border); 107 + } 108 + 109 + .ui.action.input > .button, 110 + .ui.action.input > .buttons { 111 + display: flex; 112 + align-items: center; 113 + flex: 0 0 auto; 114 + } 115 + .ui.action.input > .button, 116 + .ui.action.input > .buttons > .button { 117 + padding-top: 0.78571429em; 118 + padding-bottom: 0.78571429em; 119 + margin: 0; 120 + } 121 + 122 + .ui.action.input:not([class*="left action"]) > input { 123 + border-top-right-radius: 0; 124 + border-bottom-right-radius: 0; 125 + border-right-color: transparent; 126 + } 127 + 128 + .ui.action.input > .dropdown:first-child, 129 + .ui.action.input > .button:first-child, 130 + .ui.action.input > .buttons:first-child > .button { 131 + border-radius: 0.28571429rem 0 0 0.28571429rem; 132 + } 133 + .ui.action.input > .dropdown:not(:first-child), 134 + .ui.action.input > .button:not(:first-child), 135 + .ui.action.input > .buttons:not(:first-child) > .button { 136 + border-radius: 0; 137 + } 138 + .ui.action.input > .dropdown:last-child, 139 + .ui.action.input > .button:last-child, 140 + .ui.action.input > .buttons:last-child > .button { 141 + border-radius: 0 0.28571429rem 0.28571429rem 0; 142 + } 143 + 144 + .ui.fluid.input { 145 + display: flex; 146 + } 147 + .ui.fluid.input > input { 148 + width: 0 !important; 149 + } 150 + 151 + .ui.tiny.input { 152 + font-size: 0.85714286em; 153 + } 154 + .ui.small.input { 155 + font-size: 0.92857143em; 156 + } 157 + 158 + .ui.action.input .ui.ui.button { 159 + border-color: var(--color-input-border); 160 + padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */ 161 + padding-bottom: 0; 162 + } 163 + 164 + /* currently used for search bar dropdowns in repo search and explore code */ 165 + .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection { 166 + min-width: 10em; 167 + } 168 + .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) { 169 + border-right: none; 170 + } 171 + .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover { 172 + border-color: var(--color-input-border); 173 + } 174 + .ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible { 175 + border-bottom-left-radius: 0 !important; 176 + border-bottom-right-radius: 0 !important; 177 + } 178 + .ui.action.input:not([class*="left action"]) > input, 179 + .ui.action.input:not([class*="left action"]) > input:hover { 180 + border-right: none; 181 + } 182 + .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection, 183 + .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover, 184 + .ui.action.input:not([class*="left action"]) > input:focus + .button, 185 + .ui.action.input:not([class*="left action"]) > input:focus + .button:hover, 186 + .ui.action.input:not([class*="left action"]) > input:focus + .icon + .button, 187 + .ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover { 188 + border-left-color: var(--color-primary); 189 + } 190 + .ui.action.input:not([class*="left action"]) > input:focus { 191 + border-right-color: var(--color-primary); 192 + }
-744
web_src/fomantic/build/semantic.css
··· 6478 6478 Site Overrides 6479 6479 *******************************/ 6480 6480 /*! 6481 - * # Fomantic-UI - Input 6482 - * http://github.com/fomantic/Fomantic-UI/ 6483 - * 6484 - * 6485 - * Released under the MIT license 6486 - * http://opensource.org/licenses/MIT 6487 - * 6488 - */ 6489 - 6490 - /******************************* 6491 - Standard 6492 - *******************************/ 6493 - 6494 - /*-------------------- 6495 - Inputs 6496 - ---------------------*/ 6497 - 6498 - .ui.input { 6499 - position: relative; 6500 - font-weight: normal; 6501 - font-style: normal; 6502 - display: inline-flex; 6503 - color: rgba(0, 0, 0, 0.87); 6504 - } 6505 - 6506 - .ui.input > input { 6507 - margin: 0; 6508 - max-width: 100%; 6509 - flex: 1 0 auto; 6510 - outline: none; 6511 - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 6512 - text-align: left; 6513 - line-height: 1.21428571em; 6514 - font-family: var(--fonts-regular); 6515 - padding: 0.67857143em 1em; 6516 - background: #FFFFFF; 6517 - border: 1px solid rgba(34, 36, 38, 0.15); 6518 - color: rgba(0, 0, 0, 0.87); 6519 - border-radius: 0.28571429rem; 6520 - transition: box-shadow 0.1s ease, border-color 0.1s ease; 6521 - box-shadow: none; 6522 - } 6523 - 6524 - /*-------------------- 6525 - Placeholder 6526 - ---------------------*/ 6527 - 6528 - /* browsers require these rules separate */ 6529 - 6530 - .ui.input > input::-webkit-input-placeholder { 6531 - color: rgba(191, 191, 191, 0.87); 6532 - } 6533 - 6534 - .ui.input > input::-moz-placeholder { 6535 - color: rgba(191, 191, 191, 0.87); 6536 - } 6537 - 6538 - .ui.input > input:-ms-input-placeholder { 6539 - color: rgba(191, 191, 191, 0.87); 6540 - } 6541 - 6542 - /******************************* 6543 - States 6544 - *******************************/ 6545 - 6546 - /*-------------------- 6547 - Disabled 6548 - ---------------------*/ 6549 - 6550 - .ui.disabled.input, 6551 - .ui.input:not(.disabled) input[disabled] { 6552 - opacity: var(--opacity-disabled); 6553 - } 6554 - 6555 - .ui.disabled.input > input, 6556 - .ui.input:not(.disabled) input[disabled] { 6557 - pointer-events: none; 6558 - } 6559 - 6560 - /*-------------------- 6561 - Active 6562 - ---------------------*/ 6563 - 6564 - .ui.input > input:active, 6565 - .ui.input.down input { 6566 - border-color: rgba(0, 0, 0, 0.3); 6567 - background: #FAFAFA; 6568 - color: rgba(0, 0, 0, 0.87); 6569 - box-shadow: none; 6570 - } 6571 - 6572 - /*-------------------- 6573 - Loading 6574 - ---------------------*/ 6575 - 6576 - .ui.loading.loading.input > i.icon:before { 6577 - position: absolute; 6578 - content: ''; 6579 - top: 50%; 6580 - left: 50%; 6581 - margin: -0.64285714em 0 0 -0.64285714em; 6582 - width: 1.28571429em; 6583 - height: 1.28571429em; 6584 - border-radius: 500rem; 6585 - border: 0.2em solid rgba(0, 0, 0, 0.1); 6586 - } 6587 - 6588 - .ui.loading.loading.input > i.icon:after { 6589 - position: absolute; 6590 - content: ''; 6591 - top: 50%; 6592 - left: 50%; 6593 - margin: -0.64285714em 0 0 -0.64285714em; 6594 - width: 1.28571429em; 6595 - height: 1.28571429em; 6596 - animation: loader 0.6s infinite linear; 6597 - border: 0.2em solid #767676; 6598 - border-radius: 500rem; 6599 - box-shadow: 0 0 0 1px transparent; 6600 - } 6601 - 6602 - /*-------------------- 6603 - Focus 6604 - ---------------------*/ 6605 - 6606 - .ui.input.focus > input, 6607 - .ui.input > input:focus { 6608 - border-color: #85B7D9; 6609 - background: #FFFFFF; 6610 - color: rgba(0, 0, 0, 0.8); 6611 - box-shadow: none; 6612 - } 6613 - 6614 - .ui.input.focus > input::-webkit-input-placeholder, 6615 - .ui.input > input:focus::-webkit-input-placeholder { 6616 - color: rgba(115, 115, 115, 0.87); 6617 - } 6618 - 6619 - .ui.input.focus > input::-moz-placeholder, 6620 - .ui.input > input:focus::-moz-placeholder { 6621 - color: rgba(115, 115, 115, 0.87); 6622 - } 6623 - 6624 - .ui.input.focus > input:-ms-input-placeholder, 6625 - .ui.input > input:focus:-ms-input-placeholder { 6626 - color: rgba(115, 115, 115, 0.87); 6627 - } 6628 - 6629 - /*-------------------- 6630 - States 6631 - ---------------------*/ 6632 - 6633 - .ui.input.error > input { 6634 - background-color: #FFF6F6; 6635 - border-color: #E0B4B4; 6636 - color: #9F3A38; 6637 - box-shadow: none; 6638 - } 6639 - 6640 - /* Placeholder */ 6641 - 6642 - .ui.input.error > input::-webkit-input-placeholder { 6643 - color: #e7bdbc; 6644 - } 6645 - 6646 - .ui.input.error > input::-moz-placeholder { 6647 - color: #e7bdbc; 6648 - } 6649 - 6650 - .ui.input.error > input:-ms-input-placeholder { 6651 - color: #e7bdbc !important; 6652 - } 6653 - 6654 - /* Focused Placeholder */ 6655 - 6656 - .ui.input.error > input:focus::-webkit-input-placeholder { 6657 - color: #da9796; 6658 - } 6659 - 6660 - .ui.input.error > input:focus::-moz-placeholder { 6661 - color: #da9796; 6662 - } 6663 - 6664 - .ui.input.error > input:focus:-ms-input-placeholder { 6665 - color: #da9796 !important; 6666 - } 6667 - 6668 - .ui.input.info > input { 6669 - background-color: #F8FFFF; 6670 - border-color: #A9D5DE; 6671 - color: #276F86; 6672 - box-shadow: none; 6673 - } 6674 - 6675 - /* Placeholder */ 6676 - 6677 - .ui.input.info > input::-webkit-input-placeholder { 6678 - color: #98cfe1; 6679 - } 6680 - 6681 - .ui.input.info > input::-moz-placeholder { 6682 - color: #98cfe1; 6683 - } 6684 - 6685 - .ui.input.info > input:-ms-input-placeholder { 6686 - color: #98cfe1 !important; 6687 - } 6688 - 6689 - /* Focused Placeholder */ 6690 - 6691 - .ui.input.info > input:focus::-webkit-input-placeholder { 6692 - color: #70bdd6; 6693 - } 6694 - 6695 - .ui.input.info > input:focus::-moz-placeholder { 6696 - color: #70bdd6; 6697 - } 6698 - 6699 - .ui.input.info > input:focus:-ms-input-placeholder { 6700 - color: #70bdd6 !important; 6701 - } 6702 - 6703 - .ui.input.success > input { 6704 - background-color: #FCFFF5; 6705 - border-color: #A3C293; 6706 - color: #2C662D; 6707 - box-shadow: none; 6708 - } 6709 - 6710 - /* Placeholder */ 6711 - 6712 - .ui.input.success > input::-webkit-input-placeholder { 6713 - color: #8fcf90; 6714 - } 6715 - 6716 - .ui.input.success > input::-moz-placeholder { 6717 - color: #8fcf90; 6718 - } 6719 - 6720 - .ui.input.success > input:-ms-input-placeholder { 6721 - color: #8fcf90 !important; 6722 - } 6723 - 6724 - /* Focused Placeholder */ 6725 - 6726 - .ui.input.success > input:focus::-webkit-input-placeholder { 6727 - color: #6cbf6d; 6728 - } 6729 - 6730 - .ui.input.success > input:focus::-moz-placeholder { 6731 - color: #6cbf6d; 6732 - } 6733 - 6734 - .ui.input.success > input:focus:-ms-input-placeholder { 6735 - color: #6cbf6d !important; 6736 - } 6737 - 6738 - .ui.input.warning > input { 6739 - background-color: #FFFAF3; 6740 - border-color: #C9BA9B; 6741 - color: #573A08; 6742 - box-shadow: none; 6743 - } 6744 - 6745 - /* Placeholder */ 6746 - 6747 - .ui.input.warning > input::-webkit-input-placeholder { 6748 - color: #edad3e; 6749 - } 6750 - 6751 - .ui.input.warning > input::-moz-placeholder { 6752 - color: #edad3e; 6753 - } 6754 - 6755 - .ui.input.warning > input:-ms-input-placeholder { 6756 - color: #edad3e !important; 6757 - } 6758 - 6759 - /* Focused Placeholder */ 6760 - 6761 - .ui.input.warning > input:focus::-webkit-input-placeholder { 6762 - color: #e39715; 6763 - } 6764 - 6765 - .ui.input.warning > input:focus::-moz-placeholder { 6766 - color: #e39715; 6767 - } 6768 - 6769 - .ui.input.warning > input:focus:-ms-input-placeholder { 6770 - color: #e39715 !important; 6771 - } 6772 - 6773 - /******************************* 6774 - Variations 6775 - *******************************/ 6776 - 6777 - /*-------------------- 6778 - Transparent 6779 - ---------------------*/ 6780 - 6781 - .ui.transparent.input > textarea, 6782 - .ui.transparent.input > input { 6783 - border-color: transparent !important; 6784 - background-color: transparent !important; 6785 - padding: 0; 6786 - box-shadow: none !important; 6787 - border-radius: 0 !important; 6788 - } 6789 - 6790 - .field .ui.transparent.input > textarea { 6791 - padding: 0.67857143em 1em; 6792 - } 6793 - 6794 - /* Transparent Icon */ 6795 - 6796 - :not(.field) > .ui.transparent.icon.input > i.icon { 6797 - width: 1.1em; 6798 - } 6799 - 6800 - :not(.field) > .ui.ui.ui.transparent.icon.input > input { 6801 - padding-left: 0; 6802 - padding-right: 2em; 6803 - } 6804 - 6805 - :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { 6806 - padding-left: 2em; 6807 - padding-right: 0; 6808 - } 6809 - 6810 - /*-------------------- 6811 - Icon 6812 - ---------------------*/ 6813 - 6814 - .ui.icon.input > i.icon { 6815 - cursor: default; 6816 - position: absolute; 6817 - line-height: 1; 6818 - text-align: center; 6819 - top: 0; 6820 - right: 0; 6821 - margin: 0; 6822 - height: 100%; 6823 - width: 2.67142857em; 6824 - opacity: 0.5; 6825 - border-radius: 0 0.28571429rem 0.28571429rem 0; 6826 - transition: opacity 0.3s ease; 6827 - } 6828 - 6829 - .ui.icon.input > i.icon:not(.link) { 6830 - pointer-events: none; 6831 - } 6832 - 6833 - .ui.ui.ui.ui.icon.input > textarea, 6834 - .ui.ui.ui.ui.icon.input > input { 6835 - padding-right: 2.67142857em; 6836 - } 6837 - 6838 - .ui.icon.input > i.icon:before, 6839 - .ui.icon.input > i.icon:after { 6840 - left: 0; 6841 - position: absolute; 6842 - text-align: center; 6843 - top: 50%; 6844 - width: 100%; 6845 - margin-top: -0.5em; 6846 - } 6847 - 6848 - .ui.icon.input > i.link.icon { 6849 - cursor: pointer; 6850 - } 6851 - 6852 - .ui.icon.input > i.circular.icon { 6853 - top: 0.35em; 6854 - right: 0.5em; 6855 - } 6856 - 6857 - /* Left Icon Input */ 6858 - 6859 - .ui[class*="left icon"].input > i.icon { 6860 - right: auto; 6861 - left: 1px; 6862 - border-radius: 0.28571429rem 0 0 0.28571429rem; 6863 - } 6864 - 6865 - .ui[class*="left icon"].input > i.circular.icon { 6866 - right: auto; 6867 - left: 0.5em; 6868 - } 6869 - 6870 - .ui.ui.ui.ui[class*="left icon"].input > textarea, 6871 - .ui.ui.ui.ui[class*="left icon"].input > input { 6872 - padding-left: 2.67142857em; 6873 - padding-right: 1em; 6874 - } 6875 - 6876 - /* Focus */ 6877 - 6878 - .ui.icon.input > textarea:focus ~ i.icon, 6879 - .ui.icon.input > input:focus ~ i.icon { 6880 - opacity: 1; 6881 - } 6882 - 6883 - /*-------------------- 6884 - Labeled 6885 - ---------------------*/ 6886 - 6887 - /* Adjacent Label */ 6888 - 6889 - .ui.labeled.input > .label { 6890 - flex: 0 0 auto; 6891 - margin: 0; 6892 - font-size: 1em; 6893 - } 6894 - 6895 - .ui.labeled.input > .label:not(.corner) { 6896 - padding-top: 0.78571429em; 6897 - padding-bottom: 0.78571429em; 6898 - } 6899 - 6900 - /* Regular Label on Left */ 6901 - 6902 - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { 6903 - border-top-right-radius: 0; 6904 - border-bottom-right-radius: 0; 6905 - } 6906 - 6907 - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { 6908 - border-top-left-radius: 0; 6909 - border-bottom-left-radius: 0; 6910 - border-left-color: transparent; 6911 - } 6912 - 6913 - .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { 6914 - border-left-color: #85B7D9; 6915 - } 6916 - 6917 - /* Regular Label on Right */ 6918 - 6919 - .ui[class*="right labeled"].input > input { 6920 - border-top-right-radius: 0 !important; 6921 - border-bottom-right-radius: 0 !important; 6922 - border-right-color: transparent !important; 6923 - } 6924 - 6925 - .ui[class*="right labeled"].input > input + .label { 6926 - border-top-left-radius: 0; 6927 - border-bottom-left-radius: 0; 6928 - } 6929 - 6930 - .ui[class*="right labeled"].input > input:focus { 6931 - border-right-color: #85B7D9 !important; 6932 - } 6933 - 6934 - /* Corner Label */ 6935 - 6936 - .ui.labeled.input .corner.label { 6937 - top: 1px; 6938 - right: 1px; 6939 - font-size: 0.64285714em; 6940 - border-radius: 0 0.28571429rem 0 0; 6941 - } 6942 - 6943 - /* Spacing with corner label */ 6944 - 6945 - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea, 6946 - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { 6947 - padding-right: 2.5em !important; 6948 - } 6949 - 6950 - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea, 6951 - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { 6952 - padding-right: 3.25em !important; 6953 - } 6954 - 6955 - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { 6956 - margin-right: 1.25em; 6957 - } 6958 - 6959 - /* Left Labeled */ 6960 - 6961 - .ui[class*="left corner labeled"].labeled.input > textarea, 6962 - .ui[class*="left corner labeled"].labeled.input > input { 6963 - padding-left: 2.5em !important; 6964 - } 6965 - 6966 - .ui[class*="left corner labeled"].icon.input > textarea, 6967 - .ui[class*="left corner labeled"].icon.input > input { 6968 - padding-left: 3.25em !important; 6969 - } 6970 - 6971 - .ui[class*="left corner labeled"].icon.input > i.icon { 6972 - margin-left: 1.25em; 6973 - } 6974 - 6975 - .ui.icon.input > textarea ~ i.icon { 6976 - height: 3em; 6977 - } 6978 - 6979 - :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { 6980 - height: 1.3em; 6981 - } 6982 - 6983 - /* Corner Label Position */ 6984 - 6985 - .ui.input > .ui.corner.label { 6986 - top: 1px; 6987 - right: 1px; 6988 - } 6989 - 6990 - .ui.input > .ui.left.corner.label { 6991 - right: auto; 6992 - left: 1px; 6993 - } 6994 - 6995 - /* Labeled and action input states */ 6996 - 6997 - .ui.form .field.error > .ui.action.input > .ui.button, 6998 - .ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 6999 - .ui.action.input.error > .ui.button, 7000 - .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label { 7001 - border-top: 1px solid #E0B4B4; 7002 - border-bottom: 1px solid #E0B4B4; 7003 - } 7004 - 7005 - .ui.form .field.error > .ui[class*="left action"].input > .ui.button, 7006 - .ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 7007 - .ui[class*="left action"].input.error > .ui.button, 7008 - .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label { 7009 - border-left: 1px solid #E0B4B4; 7010 - } 7011 - 7012 - .ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button, 7013 - .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 7014 - .ui.action.input.error:not([class*="left action"]) > input + .ui.button, 7015 - .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label { 7016 - border-right: 1px solid #E0B4B4; 7017 - } 7018 - 7019 - .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 7020 - .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child { 7021 - border-left: 1px solid #E0B4B4; 7022 - } 7023 - 7024 - .ui.form .field.info > .ui.action.input > .ui.button, 7025 - .ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 7026 - .ui.action.input.info > .ui.button, 7027 - .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label { 7028 - border-top: 1px solid #A9D5DE; 7029 - border-bottom: 1px solid #A9D5DE; 7030 - } 7031 - 7032 - .ui.form .field.info > .ui[class*="left action"].input > .ui.button, 7033 - .ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 7034 - .ui[class*="left action"].input.info > .ui.button, 7035 - .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label { 7036 - border-left: 1px solid #A9D5DE; 7037 - } 7038 - 7039 - .ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button, 7040 - .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 7041 - .ui.action.input.info:not([class*="left action"]) > input + .ui.button, 7042 - .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label { 7043 - border-right: 1px solid #A9D5DE; 7044 - } 7045 - 7046 - .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 7047 - .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child { 7048 - border-left: 1px solid #A9D5DE; 7049 - } 7050 - 7051 - .ui.form .field.success > .ui.action.input > .ui.button, 7052 - .ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 7053 - .ui.action.input.success > .ui.button, 7054 - .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label { 7055 - border-top: 1px solid #A3C293; 7056 - border-bottom: 1px solid #A3C293; 7057 - } 7058 - 7059 - .ui.form .field.success > .ui[class*="left action"].input > .ui.button, 7060 - .ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 7061 - .ui[class*="left action"].input.success > .ui.button, 7062 - .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label { 7063 - border-left: 1px solid #A3C293; 7064 - } 7065 - 7066 - .ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button, 7067 - .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 7068 - .ui.action.input.success:not([class*="left action"]) > input + .ui.button, 7069 - .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label { 7070 - border-right: 1px solid #A3C293; 7071 - } 7072 - 7073 - .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 7074 - .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child { 7075 - border-left: 1px solid #A3C293; 7076 - } 7077 - 7078 - .ui.form .field.warning > .ui.action.input > .ui.button, 7079 - .ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 7080 - .ui.action.input.warning > .ui.button, 7081 - .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label { 7082 - border-top: 1px solid #C9BA9B; 7083 - border-bottom: 1px solid #C9BA9B; 7084 - } 7085 - 7086 - .ui.form .field.warning > .ui[class*="left action"].input > .ui.button, 7087 - .ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 7088 - .ui[class*="left action"].input.warning > .ui.button, 7089 - .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label { 7090 - border-left: 1px solid #C9BA9B; 7091 - } 7092 - 7093 - .ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button, 7094 - .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 7095 - .ui.action.input.warning:not([class*="left action"]) > input + .ui.button, 7096 - .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label { 7097 - border-right: 1px solid #C9BA9B; 7098 - } 7099 - 7100 - .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 7101 - .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child { 7102 - border-left: 1px solid #C9BA9B; 7103 - } 7104 - 7105 - /*-------------------- 7106 - Action 7107 - ---------------------*/ 7108 - 7109 - .ui.action.input > .button, 7110 - .ui.action.input > .buttons { 7111 - display: flex; 7112 - align-items: center; 7113 - flex: 0 0 auto; 7114 - } 7115 - 7116 - .ui.action.input > .button, 7117 - .ui.action.input > .buttons > .button { 7118 - padding-top: 0.78571429em; 7119 - padding-bottom: 0.78571429em; 7120 - margin: 0; 7121 - } 7122 - 7123 - /* Input when ui Left*/ 7124 - 7125 - .ui[class*="left action"].input > input { 7126 - border-top-left-radius: 0; 7127 - border-bottom-left-radius: 0; 7128 - border-left-color: transparent; 7129 - } 7130 - 7131 - /* Input when ui Right*/ 7132 - 7133 - .ui.action.input:not([class*="left action"]) > input { 7134 - border-top-right-radius: 0; 7135 - border-bottom-right-radius: 0; 7136 - border-right-color: transparent; 7137 - } 7138 - 7139 - /* Button and Dropdown */ 7140 - 7141 - .ui.action.input > .dropdown:first-child, 7142 - .ui.action.input > .button:first-child, 7143 - .ui.action.input > .buttons:first-child > .button { 7144 - border-radius: 0.28571429rem 0 0 0.28571429rem; 7145 - } 7146 - 7147 - .ui.action.input > .dropdown:not(:first-child), 7148 - .ui.action.input > .button:not(:first-child), 7149 - .ui.action.input > .buttons:not(:first-child) > .button { 7150 - border-radius: 0; 7151 - } 7152 - 7153 - .ui.action.input > .dropdown:last-child, 7154 - .ui.action.input > .button:last-child, 7155 - .ui.action.input > .buttons:last-child > .button { 7156 - border-radius: 0 0.28571429rem 0.28571429rem 0; 7157 - } 7158 - 7159 - /* Input Focus */ 7160 - 7161 - .ui.action.input:not([class*="left action"]) > input:focus { 7162 - border-right-color: #85B7D9; 7163 - } 7164 - 7165 - .ui.ui[class*="left action"].input > input:focus { 7166 - border-left-color: #85B7D9; 7167 - } 7168 - 7169 - /*-------------------- 7170 - Fluid 7171 - ---------------------*/ 7172 - 7173 - .ui.fluid.input { 7174 - display: flex; 7175 - } 7176 - 7177 - .ui.fluid.input > input { 7178 - width: 0 !important; 7179 - } 7180 - 7181 - /*-------------------- 7182 - Size 7183 - ---------------------*/ 7184 - 7185 - .ui.input { 7186 - font-size: 1em; 7187 - } 7188 - 7189 - .ui.mini.input { 7190 - font-size: 0.78571429em; 7191 - } 7192 - 7193 - .ui.tiny.input { 7194 - font-size: 0.85714286em; 7195 - } 7196 - 7197 - .ui.small.input { 7198 - font-size: 0.92857143em; 7199 - } 7200 - 7201 - .ui.large.input { 7202 - font-size: 1.14285714em; 7203 - } 7204 - 7205 - .ui.big.input { 7206 - font-size: 1.28571429em; 7207 - } 7208 - 7209 - .ui.huge.input { 7210 - font-size: 1.42857143em; 7211 - } 7212 - 7213 - .ui.massive.input { 7214 - font-size: 1.71428571em; 7215 - } 7216 - 7217 - /******************************* 7218 - Theme Overrides 7219 - *******************************/ 7220 - 7221 - /******************************* 7222 - Site Overrides 7223 - *******************************/ 7224 - /*! 7225 6481 * # Fomantic-UI - List 7226 6482 * http://github.com/fomantic/Fomantic-UI/ 7227 6483 *
-1
web_src/fomantic/semantic.json
··· 26 26 "dimmer", 27 27 "dropdown", 28 28 "form", 29 - "input", 30 29 "list", 31 30 "menu", 32 31 "modal",
+3 -3
web_src/js/components/DashboardRepoList.vue
··· 350 350 <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span> 351 351 </div> 352 352 </h4> 353 - <div class="ui top attached segment repos-search gt-rounded-top"> 354 - <div class="ui fluid action left icon input" :class="{loading: isLoading}"> 353 + <div class="ui attached segment repos-search"> 354 + <div class="ui small fluid action left icon input"> 355 355 <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos"> 356 - <i class="icon"><svg-icon name="octicon-search" :size="16"/></i> 356 + <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i> 357 357 <div class="ui dropdown icon button" :title="textFilter"> 358 358 <svg-icon name="octicon-filter" :size="16"/> 359 359 <div class="menu">
+2 -2
web_src/js/features/common-global.js
··· 109 109 showErrorToast(`${i18n.network_error} ${e}`); 110 110 } 111 111 } 112 - actionElem.classList.remove('is-loading', 'small-loading-icon'); 112 + actionElem.classList.remove('is-loading', 'loading-icon-2px'); 113 113 } 114 114 115 115 async function formFetchAction(e) { ··· 121 121 122 122 formEl.classList.add('is-loading'); 123 123 if (formEl.clientHeight < 50) { 124 - formEl.classList.add('small-loading-icon'); 124 + formEl.classList.add('loading-icon-2px'); 125 125 } 126 126 127 127 const formMethod = formEl.getAttribute('method') || 'get';
+2 -2
web_src/js/features/copycontent.js
··· 19 19 // the text to copy is not in the DOM or it is an image which should be 20 20 // fetched to copy in full resolution 21 21 if (link) { 22 - btn.classList.add('is-loading', 'small-loading-icon'); 22 + btn.classList.add('is-loading', 'loading-icon-2px'); 23 23 try { 24 24 const res = await GET(link, {credentials: 'include', redirect: 'follow'}); 25 25 const contentType = res.headers.get('content-type'); ··· 33 33 } catch { 34 34 return showTemporaryTooltip(btn, i18n.copy_error); 35 35 } finally { 36 - btn.classList.remove('is-loading', 'small-loading-icon'); 36 + btn.classList.remove('is-loading', 'loading-icon-2px'); 37 37 } 38 38 } else { // text, read from DOM 39 39 const lineEls = document.querySelectorAll('.file-view .lines-code');