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 more unused Fomantic variants (#25292)

Save another 50KB of CSS by removing unused and useless Fomantic
variants.

Removed the last instance if a `tertiary` button and fixed a TODO:

<img width="509" alt="Screenshot 2023-06-15 at 22 34 36"
src="https://github.com/go-gitea/gitea/assets/115237/8a16ae7b-2b17-439b-a096-60a52724e3d6">

authored by

silverwind and committed by
GitHub 69b1e2f1 0ab9b7f4

+17 -1887
+1
.gitattributes
··· 5 5 /templates/swagger/v1_json.tmpl linguist-generated 6 6 /vendor/** -text -eol linguist-vendored 7 7 /web_src/fomantic/build/** linguist-generated 8 + /web_src/fomantic/_site/globals/site.variables linguist-language=Less 8 9 /web_src/js/vendor/** -text -eol linguist-vendored 9 10 Dockerfile.* linguist-language=Dockerfile
-16
web_src/css/modules/button.css
··· 197 197 border-color: var(--color-secondary-active); 198 198 } 199 199 200 - /* tertiary */ 201 - 202 - .ui.tertiary.button, 203 - .ui.tertiary.button:focus { 204 - color: var(--color-text-light); 205 - border: none; 206 - } 207 - 208 - .ui.tertiary.button:hover { 209 - color: var(--color-text); 210 - } 211 - 212 - .ui.tertiary.button:active { 213 - color: var(--color-text-dark); 214 - } 215 - 216 200 /* red */ 217 201 218 202 .ui.red.labels .label,
+15 -3
web_src/fomantic/_site/globals/site.variables
··· 5 5 @bold: 500; 6 6 @useCustomScrollbars: false; 7 7 @disabledOpacity: var(--opacity-disabled); 8 - @variationPopupTooltip: false; 9 8 @linkHoverUnderline: underline; 10 - @variationButtonSocial: false; 11 9 @pageOverflowX: visible; 12 10 13 - /* disable all inverted variations */ 14 11 @variationAccordionInverted: false; 15 12 @variationBreadcrumbInverted: false; 13 + @variationButtonAnimated: false; 14 + @variationButtonAnimatedFade: false; 16 15 @variationButtonAttached: false; 17 16 @variationButtonInverted: false; 17 + @variationButtonSocial: false; 18 + @variationButtonTertiary: false; 18 19 @variationCalendarInverted: false; 19 20 @variationCardInverted: false; 20 21 @variationCheckboxInverted: false; ··· 25 26 @variationFeedInverted: false; 26 27 @variationFlyoutInverted: false; 27 28 @variationFormInverted: false; 29 + @variationFormTransparent: false; 30 + @variationGridDoubling: false; 28 31 @variationGridInverted: false; 29 32 @variationHeaderInverted: false; 30 33 @variationIconInverted: false; 31 34 @variationInputInverted: false; 32 35 @variationItemInverted: false; 36 + @variationLabelCorner: false; 37 + @variationLabelImage: false; 33 38 @variationLabelInverted: false; 39 + @variationLabelRibbon: false; 40 + @variationLabelTag: false; 34 41 @variationListInverted: false; 35 42 @variationMenuInverted: false; 36 43 @variationMessageInverted: false; ··· 38 45 @variationNagInverted: false; 39 46 @variationPlaceholderInverted: false; 40 47 @variationPopupInverted: false; 48 + @variationPopupTooltip: false; 41 49 @variationProgressInverted: false; 42 50 @variationSegmentInverted: false; 51 + @variationSegmentPiled: false; 52 + @variationSegmentStacked: false; 43 53 @variationSliderInverted: false; 44 54 @variationStatisticInverted: false; 45 55 @variationStepInverted: false; 46 56 @variationTableInverted: false; 57 + @variationTableMarked: false; 58 + @variationTableStackable: false; 47 59 @variationTextInverted: false; 48 60 @variationToastInverted: false; 49 61 @variationTransitionInverted: false;
-1863
web_src/fomantic/build/semantic.css
··· 203 203 *******************************/ 204 204 205 205 /*------------------- 206 - Animated 207 - --------------------*/ 208 - 209 - .ui.animated.button { 210 - position: relative; 211 - overflow: hidden; 212 - padding-right: 0 !important; 213 - vertical-align: middle; 214 - z-index: 1; 215 - } 216 - 217 - .ui.animated.button .content { 218 - will-change: transform, opacity; 219 - } 220 - 221 - .ui.animated.button .visible.content { 222 - position: relative; 223 - margin-right: 1.5em; 224 - } 225 - 226 - .ui.animated.button .hidden.content { 227 - position: absolute; 228 - width: 100%; 229 - } 230 - 231 - /* Horizontal */ 232 - 233 - .ui.animated.button .visible.content, 234 - .ui.animated.button .hidden.content { 235 - transition: right 0.3s ease 0s; 236 - } 237 - 238 - .ui.animated.button .visible.content { 239 - left: auto; 240 - right: 0; 241 - } 242 - 243 - .ui.animated.button .hidden.content { 244 - top: 50%; 245 - left: auto; 246 - right: -100%; 247 - margin-top: -0.5em; 248 - } 249 - 250 - .ui.animated.button:focus .visible.content, 251 - .ui.animated.button:hover .visible.content { 252 - left: auto; 253 - right: 200%; 254 - } 255 - 256 - .ui.animated.button:focus .hidden.content, 257 - .ui.animated.button:hover .hidden.content { 258 - left: auto; 259 - right: 0; 260 - } 261 - 262 - /* Vertical */ 263 - 264 - .ui.vertical.animated.button .visible.content, 265 - .ui.vertical.animated.button .hidden.content { 266 - transition: top 0.3s ease, transform 0.3s ease; 267 - } 268 - 269 - .ui.vertical.animated.button .visible.content { 270 - transform: translateY(0%); 271 - right: auto; 272 - } 273 - 274 - .ui.vertical.animated.button .hidden.content { 275 - top: -50%; 276 - left: 0; 277 - right: auto; 278 - } 279 - 280 - .ui.vertical.animated.button:focus .visible.content, 281 - .ui.vertical.animated.button:hover .visible.content { 282 - transform: translateY(200%); 283 - right: auto; 284 - } 285 - 286 - .ui.vertical.animated.button:focus .hidden.content, 287 - .ui.vertical.animated.button:hover .hidden.content { 288 - top: 50%; 289 - right: auto; 290 - } 291 - 292 - /* Fade */ 293 - 294 - .ui.fade.animated.button .visible.content, 295 - .ui.fade.animated.button .hidden.content { 296 - transition: opacity 0.3s ease, transform 0.3s ease; 297 - } 298 - 299 - .ui.fade.animated.button .visible.content { 300 - left: auto; 301 - right: auto; 302 - opacity: 1; 303 - transform: scale(1); 304 - } 305 - 306 - .ui.fade.animated.button .hidden.content { 307 - opacity: 0; 308 - left: 0; 309 - right: auto; 310 - transform: scale(1.5); 311 - } 312 - 313 - .ui.fade.animated.button:focus .visible.content, 314 - .ui.fade.animated.button:hover .visible.content { 315 - left: auto; 316 - right: auto; 317 - opacity: 0; 318 - transform: scale(0.75); 319 - } 320 - 321 - .ui.fade.animated.button:focus .hidden.content, 322 - .ui.fade.animated.button:hover .hidden.content { 323 - left: 0; 324 - right: auto; 325 - opacity: 1; 326 - transform: scale(1); 327 - } 328 - 329 - /*------------------- 330 206 Labeled Button 331 207 --------------------*/ 332 208 ··· 628 504 629 505 .ui.basic.vertical.buttons .button:first-child { 630 506 border-top-width: 0; 631 - } 632 - 633 - /*------------------- 634 - Tertiary 635 - --------------------*/ 636 - 637 - /* Overline Mixin */ 638 - 639 - .ui.tertiary.button { 640 - transition: color 0.1s ease !important; 641 - border-radius: 0; 642 - margin: 0.28571429em 0.25em 0.28571429em 0 !important; 643 - padding: 0.5em !important; 644 - box-shadow: none; 645 - color: rgba(0, 0, 0, 0.6); 646 - background: none; 647 - } 648 - 649 - .ui.tertiary.button:hover { 650 - box-shadow: inset 0 -0.2em 0 #666666; 651 - color: #333333; 652 - background: none; 653 - } 654 - 655 - .ui.tertiary.button:focus { 656 - box-shadow: inset 0 -0.2em 0 #666666; 657 - color: #333333; 658 - background: none; 659 - } 660 - 661 - .ui.tertiary.button:active { 662 - box-shadow: inset 0 -0.2em 0 #999999; 663 - border-radius: 0.28571429rem 0.28571429rem 0 0; 664 - color: #666666; 665 - background: none; 666 507 } 667 508 668 509 /*-------------- ··· 1076 917 margin-left: -1px; 1077 918 } 1078 919 1079 - /* Tertiary */ 1080 - 1081 - .ui.tertiary.primary.buttons .button, 1082 - .ui.tertiary.primary.buttons .tertiary.button, 1083 - .ui.tertiary.primary.button { 1084 - background: transparent; 1085 - box-shadow: none; 1086 - color: #2185D0; 1087 - } 1088 - 1089 - .ui.tertiary.primary.buttons .button:hover, 1090 - .ui.tertiary.primary.buttons button:hover, 1091 - .ui.tertiary.primary.button:hover { 1092 - box-shadow: inset 0 -0.2em 0 #2b75ac; 1093 - color: #2b75ac; 1094 - } 1095 - 1096 - .ui.tertiary.primary.buttons .button:focus, 1097 - .ui.tertiary.primary.buttons .tertiary.button:focus, 1098 - .ui.tertiary.primary.button:focus { 1099 - box-shadow: inset 0 -0.2em 0 #216ea7; 1100 - color: #216ea7; 1101 - } 1102 - 1103 - .ui.tertiary.primary.buttons .active.button, 1104 - .ui.tertiary.primary.buttons .tertiary.active.button, 1105 - .ui.tertiary.primary.active.button, 1106 - .ui.tertiary.primary.buttons .button:active, 1107 - .ui.tertiary.primary.buttons .tertiary.button:active, 1108 - .ui.tertiary.primary.button:active { 1109 - box-shadow: inset 0 -0.2em 0 #007bd8; 1110 - color: #1279c6; 1111 - } 1112 - 1113 920 .ui.secondary.buttons .button, 1114 921 .ui.secondary.button { 1115 922 background-color: #1B1C1D; ··· 1192 999 margin-left: -1px; 1193 1000 } 1194 1001 1195 - /* Tertiary */ 1196 - 1197 - .ui.tertiary.secondary.buttons .button, 1198 - .ui.tertiary.secondary.buttons .tertiary.button, 1199 - .ui.tertiary.secondary.button { 1200 - background: transparent; 1201 - box-shadow: none; 1202 - color: #1B1C1D; 1203 - } 1204 - 1205 - .ui.tertiary.secondary.buttons .button:hover, 1206 - .ui.tertiary.secondary.buttons button:hover, 1207 - .ui.tertiary.secondary.button:hover { 1208 - box-shadow: inset 0 -0.2em 0 #292929; 1209 - color: #292929; 1210 - } 1211 - 1212 - .ui.tertiary.secondary.buttons .button:focus, 1213 - .ui.tertiary.secondary.buttons .tertiary.button:focus, 1214 - .ui.tertiary.secondary.button:focus { 1215 - box-shadow: inset 0 -0.2em 0 #303030; 1216 - color: #303030; 1217 - } 1218 - 1219 - .ui.tertiary.secondary.buttons .active.button, 1220 - .ui.tertiary.secondary.buttons .tertiary.active.button, 1221 - .ui.tertiary.secondary.active.button, 1222 - .ui.tertiary.secondary.buttons .button:active, 1223 - .ui.tertiary.secondary.buttons .tertiary.button:active, 1224 - .ui.tertiary.secondary.button:active { 1225 - box-shadow: inset 0 -0.2em 0 #1f2933; 1226 - color: #27292a; 1227 - } 1228 - 1229 1002 .ui.red.buttons .button, 1230 1003 .ui.red.button { 1231 1004 background-color: #DB2828; ··· 1308 1081 margin-left: -1px; 1309 1082 } 1310 1083 1311 - /* Tertiary */ 1312 - 1313 - .ui.tertiary.red.buttons .button, 1314 - .ui.tertiary.red.buttons .tertiary.button, 1315 - .ui.tertiary.red.button { 1316 - background: transparent; 1317 - box-shadow: none; 1318 - color: #DB2828; 1319 - } 1320 - 1321 - .ui.tertiary.red.buttons .button:hover, 1322 - .ui.tertiary.red.buttons button:hover, 1323 - .ui.tertiary.red.button:hover { 1324 - box-shadow: inset 0 -0.2em 0 #b93131; 1325 - color: #b93131; 1326 - } 1327 - 1328 - .ui.tertiary.red.buttons .button:focus, 1329 - .ui.tertiary.red.buttons .tertiary.button:focus, 1330 - .ui.tertiary.red.button:focus { 1331 - box-shadow: inset 0 -0.2em 0 #b52626; 1332 - color: #b52626; 1333 - } 1334 - 1335 - .ui.tertiary.red.buttons .active.button, 1336 - .ui.tertiary.red.buttons .tertiary.active.button, 1337 - .ui.tertiary.red.active.button, 1338 - .ui.tertiary.red.buttons .button:active, 1339 - .ui.tertiary.red.buttons .tertiary.button:active, 1340 - .ui.tertiary.red.button:active { 1341 - box-shadow: inset 0 -0.2em 0 #ea0000; 1342 - color: #d41515; 1343 - } 1344 - 1345 1084 .ui.orange.buttons .button, 1346 1085 .ui.orange.button { 1347 1086 background-color: #F2711C; ··· 1424 1163 margin-left: -1px; 1425 1164 } 1426 1165 1427 - /* Tertiary */ 1428 - 1429 - .ui.tertiary.orange.buttons .button, 1430 - .ui.tertiary.orange.buttons .tertiary.button, 1431 - .ui.tertiary.orange.button { 1432 - background: transparent; 1433 - box-shadow: none; 1434 - color: #F2711C; 1435 - } 1436 - 1437 - .ui.tertiary.orange.buttons .button:hover, 1438 - .ui.tertiary.orange.buttons button:hover, 1439 - .ui.tertiary.orange.button:hover { 1440 - box-shadow: inset 0 -0.2em 0 #da671b; 1441 - color: #da671b; 1442 - } 1443 - 1444 - .ui.tertiary.orange.buttons .button:focus, 1445 - .ui.tertiary.orange.buttons .tertiary.button:focus, 1446 - .ui.tertiary.orange.button:focus { 1447 - box-shadow: inset 0 -0.2em 0 #ce6017; 1448 - color: #ce6017; 1449 - } 1450 - 1451 - .ui.tertiary.orange.buttons .active.button, 1452 - .ui.tertiary.orange.buttons .tertiary.active.button, 1453 - .ui.tertiary.orange.active.button, 1454 - .ui.tertiary.orange.buttons .button:active, 1455 - .ui.tertiary.orange.buttons .tertiary.button:active, 1456 - .ui.tertiary.orange.button:active { 1457 - box-shadow: inset 0 -0.2em 0 #f56100; 1458 - color: #f56100; 1459 - } 1460 - 1461 1166 .ui.yellow.buttons .button, 1462 1167 .ui.yellow.button { 1463 1168 background-color: #FBBD08; ··· 1540 1245 margin-left: -1px; 1541 1246 } 1542 1247 1543 - /* Tertiary */ 1544 - 1545 - .ui.tertiary.yellow.buttons .button, 1546 - .ui.tertiary.yellow.buttons .tertiary.button, 1547 - .ui.tertiary.yellow.button { 1548 - background: transparent; 1549 - box-shadow: none; 1550 - color: #FBBD08; 1551 - } 1552 - 1553 - .ui.tertiary.yellow.buttons .button:hover, 1554 - .ui.tertiary.yellow.buttons button:hover, 1555 - .ui.tertiary.yellow.button:hover { 1556 - box-shadow: inset 0 -0.2em 0 #d2a217; 1557 - color: #d2a217; 1558 - } 1559 - 1560 - .ui.tertiary.yellow.buttons .button:focus, 1561 - .ui.tertiary.yellow.buttons .tertiary.button:focus, 1562 - .ui.tertiary.yellow.button:focus { 1563 - box-shadow: inset 0 -0.2em 0 #c49816; 1564 - color: #c49816; 1565 - } 1566 - 1567 - .ui.tertiary.yellow.buttons .active.button, 1568 - .ui.tertiary.yellow.buttons .tertiary.active.button, 1569 - .ui.tertiary.yellow.active.button, 1570 - .ui.tertiary.yellow.buttons .button:active, 1571 - .ui.tertiary.yellow.buttons .tertiary.button:active, 1572 - .ui.tertiary.yellow.button:active { 1573 - box-shadow: inset 0 -0.2em 0 #eaae00; 1574 - color: #eaae00; 1575 - } 1576 - 1577 1248 .ui.olive.buttons .button, 1578 1249 .ui.olive.button { 1579 1250 background-color: #B5CC18; ··· 1656 1327 margin-left: -1px; 1657 1328 } 1658 1329 1659 - /* Tertiary */ 1660 - 1661 - .ui.tertiary.olive.buttons .button, 1662 - .ui.tertiary.olive.buttons .tertiary.button, 1663 - .ui.tertiary.olive.button { 1664 - background: transparent; 1665 - box-shadow: none; 1666 - color: #B5CC18; 1667 - } 1668 - 1669 - .ui.tertiary.olive.buttons .button:hover, 1670 - .ui.tertiary.olive.buttons button:hover, 1671 - .ui.tertiary.olive.button:hover { 1672 - box-shadow: inset 0 -0.2em 0 #98a922; 1673 - color: #98a922; 1674 - } 1675 - 1676 - .ui.tertiary.olive.buttons .button:focus, 1677 - .ui.tertiary.olive.buttons .tertiary.button:focus, 1678 - .ui.tertiary.olive.button:focus { 1679 - box-shadow: inset 0 -0.2em 0 #92a418; 1680 - color: #92a418; 1681 - } 1682 - 1683 - .ui.tertiary.olive.buttons .active.button, 1684 - .ui.tertiary.olive.buttons .tertiary.active.button, 1685 - .ui.tertiary.olive.active.button, 1686 - .ui.tertiary.olive.buttons .button:active, 1687 - .ui.tertiary.olive.buttons .tertiary.button:active, 1688 - .ui.tertiary.olive.button:active { 1689 - box-shadow: inset 0 -0.2em 0 #b1cb00; 1690 - color: #aac109; 1691 - } 1692 - 1693 1330 .ui.green.buttons .button, 1694 1331 .ui.green.button { 1695 1332 background-color: #21BA45; ··· 1772 1409 margin-left: -1px; 1773 1410 } 1774 1411 1775 - /* Tertiary */ 1776 - 1777 - .ui.tertiary.green.buttons .button, 1778 - .ui.tertiary.green.buttons .tertiary.button, 1779 - .ui.tertiary.green.button { 1780 - background: transparent; 1781 - box-shadow: none; 1782 - color: #21BA45; 1783 - } 1784 - 1785 - .ui.tertiary.green.buttons .button:hover, 1786 - .ui.tertiary.green.buttons button:hover, 1787 - .ui.tertiary.green.button:hover { 1788 - box-shadow: inset 0 -0.2em 0 #2a9844; 1789 - color: #2a9844; 1790 - } 1791 - 1792 - .ui.tertiary.green.buttons .button:focus, 1793 - .ui.tertiary.green.buttons .tertiary.button:focus, 1794 - .ui.tertiary.green.button:focus { 1795 - box-shadow: inset 0 -0.2em 0 #20923b; 1796 - color: #20923b; 1797 - } 1798 - 1799 - .ui.tertiary.green.buttons .active.button, 1800 - .ui.tertiary.green.buttons .tertiary.active.button, 1801 - .ui.tertiary.green.active.button, 1802 - .ui.tertiary.green.buttons .button:active, 1803 - .ui.tertiary.green.buttons .tertiary.button:active, 1804 - .ui.tertiary.green.button:active { 1805 - box-shadow: inset 0 -0.2em 0 #00c22e; 1806 - color: #13ae38; 1807 - } 1808 - 1809 1412 .ui.teal.buttons .button, 1810 1413 .ui.teal.button { 1811 1414 background-color: #00B5AD; ··· 1888 1491 margin-left: -1px; 1889 1492 } 1890 1493 1891 - /* Tertiary */ 1892 - 1893 - .ui.tertiary.teal.buttons .button, 1894 - .ui.tertiary.teal.buttons .tertiary.button, 1895 - .ui.tertiary.teal.button { 1896 - background: transparent; 1897 - box-shadow: none; 1898 - color: #00B5AD; 1899 - } 1900 - 1901 - .ui.tertiary.teal.buttons .button:hover, 1902 - .ui.tertiary.teal.buttons button:hover, 1903 - .ui.tertiary.teal.button:hover { 1904 - box-shadow: inset 0 -0.2em 0 #108c86; 1905 - color: #108c86; 1906 - } 1907 - 1908 - .ui.tertiary.teal.buttons .button:focus, 1909 - .ui.tertiary.teal.buttons .tertiary.button:focus, 1910 - .ui.tertiary.teal.button:focus { 1911 - box-shadow: inset 0 -0.2em 0 #0e7e79; 1912 - color: #0e7e79; 1913 - } 1914 - 1915 - .ui.tertiary.teal.buttons .active.button, 1916 - .ui.tertiary.teal.buttons .tertiary.active.button, 1917 - .ui.tertiary.teal.active.button, 1918 - .ui.tertiary.teal.buttons .button:active, 1919 - .ui.tertiary.teal.buttons .tertiary.button:active, 1920 - .ui.tertiary.teal.button:active { 1921 - box-shadow: inset 0 -0.2em 0 #009c95; 1922 - color: #009c95; 1923 - } 1924 - 1925 1494 .ui.blue.buttons .button, 1926 1495 .ui.blue.button { 1927 1496 background-color: #2185D0; ··· 2004 1573 margin-left: -1px; 2005 1574 } 2006 1575 2007 - /* Tertiary */ 2008 - 2009 - .ui.tertiary.blue.buttons .button, 2010 - .ui.tertiary.blue.buttons .tertiary.button, 2011 - .ui.tertiary.blue.button { 2012 - background: transparent; 2013 - box-shadow: none; 2014 - color: #2185D0; 2015 - } 2016 - 2017 - .ui.tertiary.blue.buttons .button:hover, 2018 - .ui.tertiary.blue.buttons button:hover, 2019 - .ui.tertiary.blue.button:hover { 2020 - box-shadow: inset 0 -0.2em 0 #2b75ac; 2021 - color: #2b75ac; 2022 - } 2023 - 2024 - .ui.tertiary.blue.buttons .button:focus, 2025 - .ui.tertiary.blue.buttons .tertiary.button:focus, 2026 - .ui.tertiary.blue.button:focus { 2027 - box-shadow: inset 0 -0.2em 0 #216ea7; 2028 - color: #216ea7; 2029 - } 2030 - 2031 - .ui.tertiary.blue.buttons .active.button, 2032 - .ui.tertiary.blue.buttons .tertiary.active.button, 2033 - .ui.tertiary.blue.active.button, 2034 - .ui.tertiary.blue.buttons .button:active, 2035 - .ui.tertiary.blue.buttons .tertiary.button:active, 2036 - .ui.tertiary.blue.button:active { 2037 - box-shadow: inset 0 -0.2em 0 #007bd8; 2038 - color: #1279c6; 2039 - } 2040 - 2041 1576 .ui.violet.buttons .button, 2042 1577 .ui.violet.button { 2043 1578 background-color: #6435C9; ··· 2120 1655 margin-left: -1px; 2121 1656 } 2122 1657 2123 - /* Tertiary */ 2124 - 2125 - .ui.tertiary.violet.buttons .button, 2126 - .ui.tertiary.violet.buttons .tertiary.button, 2127 - .ui.tertiary.violet.button { 2128 - background: transparent; 2129 - box-shadow: none; 2130 - color: #6435C9; 2131 - } 2132 - 2133 - .ui.tertiary.violet.buttons .button:hover, 2134 - .ui.tertiary.violet.buttons button:hover, 2135 - .ui.tertiary.violet.button:hover { 2136 - box-shadow: inset 0 -0.2em 0 #6040a5; 2137 - color: #6040a5; 2138 - } 2139 - 2140 - .ui.tertiary.violet.buttons .button:focus, 2141 - .ui.tertiary.violet.buttons .tertiary.button:focus, 2142 - .ui.tertiary.violet.button:focus { 2143 - box-shadow: inset 0 -0.2em 0 #5735a0; 2144 - color: #5735a0; 2145 - } 2146 - 2147 - .ui.tertiary.violet.buttons .active.button, 2148 - .ui.tertiary.violet.buttons .tertiary.active.button, 2149 - .ui.tertiary.violet.active.button, 2150 - .ui.tertiary.violet.buttons .button:active, 2151 - .ui.tertiary.violet.buttons .tertiary.button:active, 2152 - .ui.tertiary.violet.button:active { 2153 - box-shadow: inset 0 -0.2em 0 #4e0fd6; 2154 - color: #5626bf; 2155 - } 2156 - 2157 1658 .ui.purple.buttons .button, 2158 1659 .ui.purple.button { 2159 1660 background-color: #A333C8; ··· 2236 1737 margin-left: -1px; 2237 1738 } 2238 1739 2239 - /* Tertiary */ 2240 - 2241 - .ui.tertiary.purple.buttons .button, 2242 - .ui.tertiary.purple.buttons .tertiary.button, 2243 - .ui.tertiary.purple.button { 2244 - background: transparent; 2245 - box-shadow: none; 2246 - color: #A333C8; 2247 - } 2248 - 2249 - .ui.tertiary.purple.buttons .button:hover, 2250 - .ui.tertiary.purple.buttons button:hover, 2251 - .ui.tertiary.purple.button:hover { 2252 - box-shadow: inset 0 -0.2em 0 #8a3ea4; 2253 - color: #8a3ea4; 2254 - } 2255 - 2256 - .ui.tertiary.purple.buttons .button:focus, 2257 - .ui.tertiary.purple.buttons .tertiary.button:focus, 2258 - .ui.tertiary.purple.button:focus { 2259 - box-shadow: inset 0 -0.2em 0 #84339f; 2260 - color: #84339f; 2261 - } 2262 - 2263 - .ui.tertiary.purple.buttons .active.button, 2264 - .ui.tertiary.purple.buttons .tertiary.active.button, 2265 - .ui.tertiary.purple.active.button, 2266 - .ui.tertiary.purple.buttons .button:active, 2267 - .ui.tertiary.purple.buttons .tertiary.button:active, 2268 - .ui.tertiary.purple.button:active { 2269 - box-shadow: inset 0 -0.2em 0 #a30dd4; 2270 - color: #9724be; 2271 - } 2272 - 2273 1740 .ui.pink.buttons .button, 2274 1741 .ui.pink.button { 2275 1742 background-color: #E03997; ··· 2352 1819 margin-left: -1px; 2353 1820 } 2354 1821 2355 - /* Tertiary */ 2356 - 2357 - .ui.tertiary.pink.buttons .button, 2358 - .ui.tertiary.pink.buttons .tertiary.button, 2359 - .ui.tertiary.pink.button { 2360 - background: transparent; 2361 - box-shadow: none; 2362 - color: #E03997; 2363 - } 2364 - 2365 - .ui.tertiary.pink.buttons .button:hover, 2366 - .ui.tertiary.pink.buttons button:hover, 2367 - .ui.tertiary.pink.button:hover { 2368 - box-shadow: inset 0 -0.2em 0 #cc3389; 2369 - color: #cc3389; 2370 - } 2371 - 2372 - .ui.tertiary.pink.buttons .button:focus, 2373 - .ui.tertiary.pink.buttons .tertiary.button:focus, 2374 - .ui.tertiary.pink.button:focus { 2375 - box-shadow: inset 0 -0.2em 0 #c92782; 2376 - color: #c92782; 2377 - } 2378 - 2379 - .ui.tertiary.pink.buttons .active.button, 2380 - .ui.tertiary.pink.buttons .tertiary.active.button, 2381 - .ui.tertiary.pink.active.button, 2382 - .ui.tertiary.pink.buttons .button:active, 2383 - .ui.tertiary.pink.buttons .tertiary.button:active, 2384 - .ui.tertiary.pink.button:active { 2385 - box-shadow: inset 0 -0.2em 0 #ff0090; 2386 - color: #ea158d; 2387 - } 2388 - 2389 1822 .ui.brown.buttons .button, 2390 1823 .ui.brown.button { 2391 1824 background-color: #A5673F; ··· 2468 1901 margin-left: -1px; 2469 1902 } 2470 1903 2471 - /* Tertiary */ 2472 - 2473 - .ui.tertiary.brown.buttons .button, 2474 - .ui.tertiary.brown.buttons .tertiary.button, 2475 - .ui.tertiary.brown.button { 2476 - background: transparent; 2477 - box-shadow: none; 2478 - color: #A5673F; 2479 - } 2480 - 2481 - .ui.tertiary.brown.buttons .button:hover, 2482 - .ui.tertiary.brown.buttons button:hover, 2483 - .ui.tertiary.brown.button:hover { 2484 - box-shadow: inset 0 -0.2em 0 #835f48; 2485 - color: #835f48; 2486 - } 2487 - 2488 - .ui.tertiary.brown.buttons .button:focus, 2489 - .ui.tertiary.brown.buttons .tertiary.button:focus, 2490 - .ui.tertiary.brown.button:focus { 2491 - box-shadow: inset 0 -0.2em 0 #7d573e; 2492 - color: #7d573e; 2493 - } 2494 - 2495 - .ui.tertiary.brown.buttons .active.button, 2496 - .ui.tertiary.brown.buttons .tertiary.active.button, 2497 - .ui.tertiary.brown.active.button, 2498 - .ui.tertiary.brown.buttons .button:active, 2499 - .ui.tertiary.brown.buttons .tertiary.button:active, 2500 - .ui.tertiary.brown.button:active { 2501 - box-shadow: inset 0 -0.2em 0 #ae561d; 2502 - color: #995a31; 2503 - } 2504 - 2505 1904 .ui.grey.buttons .button, 2506 1905 .ui.grey.button { 2507 1906 background-color: #767676; ··· 2584 1983 margin-left: -1px; 2585 1984 } 2586 1985 2587 - /* Tertiary */ 2588 - 2589 - .ui.tertiary.grey.buttons .button, 2590 - .ui.tertiary.grey.buttons .tertiary.button, 2591 - .ui.tertiary.grey.button { 2592 - background: transparent; 2593 - box-shadow: none; 2594 - color: #767676; 2595 - } 2596 - 2597 - .ui.tertiary.grey.buttons .button:hover, 2598 - .ui.tertiary.grey.buttons button:hover, 2599 - .ui.tertiary.grey.button:hover { 2600 - box-shadow: inset 0 -0.2em 0 #838383; 2601 - color: #838383; 2602 - } 2603 - 2604 - .ui.tertiary.grey.buttons .button:focus, 2605 - .ui.tertiary.grey.buttons .tertiary.button:focus, 2606 - .ui.tertiary.grey.button:focus { 2607 - box-shadow: inset 0 -0.2em 0 #8a8a8a; 2608 - color: #8a8a8a; 2609 - } 2610 - 2611 - .ui.tertiary.grey.buttons .active.button, 2612 - .ui.tertiary.grey.buttons .tertiary.active.button, 2613 - .ui.tertiary.grey.active.button, 2614 - .ui.tertiary.grey.buttons .button:active, 2615 - .ui.tertiary.grey.buttons .tertiary.button:active, 2616 - .ui.tertiary.grey.button:active { 2617 - box-shadow: inset 0 -0.2em 0 #7e5454; 2618 - color: #696969; 2619 - } 2620 - 2621 1986 .ui.black.buttons .button, 2622 1987 .ui.black.button { 2623 1988 background-color: #1B1C1D; ··· 2698 2063 2699 2064 .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { 2700 2065 margin-left: -1px; 2701 - } 2702 - 2703 - /* Tertiary */ 2704 - 2705 - .ui.tertiary.black.buttons .button, 2706 - .ui.tertiary.black.buttons .tertiary.button, 2707 - .ui.tertiary.black.button { 2708 - background: transparent; 2709 - box-shadow: none; 2710 - color: #1B1C1D; 2711 - } 2712 - 2713 - .ui.tertiary.black.buttons .button:hover, 2714 - .ui.tertiary.black.buttons button:hover, 2715 - .ui.tertiary.black.button:hover { 2716 - box-shadow: inset 0 -0.2em 0 #8b8f93; 2717 - color: #8b8f93; 2718 - } 2719 - 2720 - .ui.tertiary.black.buttons .button:focus, 2721 - .ui.tertiary.black.buttons .tertiary.button:focus, 2722 - .ui.tertiary.black.button:focus { 2723 - box-shadow: inset 0 -0.2em 0 #93969a; 2724 - color: #93969a; 2725 - } 2726 - 2727 - .ui.tertiary.black.buttons .active.button, 2728 - .ui.tertiary.black.buttons .tertiary.active.button, 2729 - .ui.tertiary.black.active.button, 2730 - .ui.tertiary.black.buttons .button:active, 2731 - .ui.tertiary.black.buttons .tertiary.button:active, 2732 - .ui.tertiary.black.button:active { 2733 - box-shadow: inset 0 -0.2em 0 #404245; 2734 - color: #0f0f10; 2735 2066 } 2736 2067 2737 2068 /*--------------- ··· 6763 6094 margin-top: 0.7em; 6764 6095 } 6765 6096 6766 - /*-------------------- 6767 - Transparent 6768 - ---------------------*/ 6769 - 6770 - .ui.form .field .transparent.input:not(.icon) input, 6771 - .ui.form .field input.transparent, 6772 - .ui.form .field textarea.transparent { 6773 - padding: 0.67857143em 1em; 6774 - } 6775 - 6776 - .ui.form .field input.transparent, 6777 - .ui.form .field textarea.transparent { 6778 - border-color: transparent !important; 6779 - background-color: transparent !important; 6780 - box-shadow: none !important; 6781 - } 6782 - 6783 6097 /*-------------------------- 6784 6098 Input w/ attached Button 6785 6099 ---------------------------*/ ··· 10120 9434 } 10121 9435 10122 9436 /*------------------- 10123 - Doubling 10124 - --------------------*/ 10125 - 10126 - /* Tablet Only */ 10127 - 10128 - @media only screen and (min-width: 768px) and (max-width: 991.98px) { 10129 - .ui.doubling.grid { 10130 - width: auto; 10131 - } 10132 - 10133 - .ui.grid > .doubling.row, 10134 - .ui.doubling.grid > .row { 10135 - margin: 0 !important; 10136 - padding: 0 !important; 10137 - } 10138 - 10139 - .ui.grid > .doubling.row > .column, 10140 - .ui.doubling.grid > .row > .column { 10141 - display: inline-block !important; 10142 - padding-top: 1rem !important; 10143 - padding-bottom: 1rem !important; 10144 - box-shadow: none !important; 10145 - margin: 0; 10146 - } 10147 - 10148 - .ui[class*="two column"].doubling.grid > .row > .column, 10149 - .ui[class*="two column"].doubling.grid > .column:not(.row), 10150 - .ui.grid > [class*="two column"].doubling.row.row > .column { 10151 - width: 100% !important; 10152 - } 10153 - 10154 - .ui[class*="three column"].doubling.grid > .row > .column, 10155 - .ui[class*="three column"].doubling.grid > .column:not(.row), 10156 - .ui.grid > [class*="three column"].doubling.row.row > .column { 10157 - width: 50% !important; 10158 - } 10159 - 10160 - .ui[class*="four column"].doubling.grid > .row > .column, 10161 - .ui[class*="four column"].doubling.grid > .column:not(.row), 10162 - .ui.grid > [class*="four column"].doubling.row.row > .column { 10163 - width: 50% !important; 10164 - } 10165 - 10166 - .ui[class*="five column"].doubling.grid > .row > .column, 10167 - .ui[class*="five column"].doubling.grid > .column:not(.row), 10168 - .ui.grid > [class*="five column"].doubling.row.row > .column { 10169 - width: 33.33333333% !important; 10170 - } 10171 - 10172 - .ui[class*="six column"].doubling.grid > .row > .column, 10173 - .ui[class*="six column"].doubling.grid > .column:not(.row), 10174 - .ui.grid > [class*="six column"].doubling.row.row > .column { 10175 - width: 33.33333333% !important; 10176 - } 10177 - 10178 - .ui[class*="seven column"].doubling.grid > .row > .column, 10179 - .ui[class*="seven column"].doubling.grid > .column:not(.row), 10180 - .ui.grid > [class*="seven column"].doubling.row.row > .column { 10181 - width: 33.33333333% !important; 10182 - } 10183 - 10184 - .ui[class*="eight column"].doubling.grid > .row > .column, 10185 - .ui[class*="eight column"].doubling.grid > .column:not(.row), 10186 - .ui.grid > [class*="eight column"].doubling.row.row > .column { 10187 - width: 25% !important; 10188 - } 10189 - 10190 - .ui[class*="nine column"].doubling.grid > .row > .column, 10191 - .ui[class*="nine column"].doubling.grid > .column:not(.row), 10192 - .ui.grid > [class*="nine column"].doubling.row.row > .column { 10193 - width: 25% !important; 10194 - } 10195 - 10196 - .ui[class*="ten column"].doubling.grid > .row > .column, 10197 - .ui[class*="ten column"].doubling.grid > .column:not(.row), 10198 - .ui.grid > [class*="ten column"].doubling.row.row > .column { 10199 - width: 20% !important; 10200 - } 10201 - 10202 - .ui[class*="eleven column"].doubling.grid > .row > .column, 10203 - .ui[class*="eleven column"].doubling.grid > .column:not(.row), 10204 - .ui.grid > [class*="eleven column"].doubling.row.row > .column { 10205 - width: 20% !important; 10206 - } 10207 - 10208 - .ui[class*="twelve column"].doubling.grid > .row > .column, 10209 - .ui[class*="twelve column"].doubling.grid > .column:not(.row), 10210 - .ui.grid > [class*="twelve column"].doubling.row.row > .column { 10211 - width: 16.66666667% !important; 10212 - } 10213 - 10214 - .ui[class*="thirteen column"].doubling.grid > .row > .column, 10215 - .ui[class*="thirteen column"].doubling.grid > .column:not(.row), 10216 - .ui.grid > [class*="thirteen column"].doubling.row.row > .column { 10217 - width: 16.66666667% !important; 10218 - } 10219 - 10220 - .ui[class*="fourteen column"].doubling.grid > .row > .column, 10221 - .ui[class*="fourteen column"].doubling.grid > .column:not(.row), 10222 - .ui.grid > [class*="fourteen column"].doubling.row.row > .column { 10223 - width: 14.28571429% !important; 10224 - } 10225 - 10226 - .ui[class*="fifteen column"].doubling.grid > .row > .column, 10227 - .ui[class*="fifteen column"].doubling.grid > .column:not(.row), 10228 - .ui.grid > [class*="fifteen column"].doubling.row.row > .column { 10229 - width: 14.28571429% !important; 10230 - } 10231 - 10232 - .ui[class*="sixteen column"].doubling.grid > .row > .column, 10233 - .ui[class*="sixteen column"].doubling.grid > .column:not(.row), 10234 - .ui.grid > [class*="sixteen column"].doubling.row.row > .column { 10235 - width: 12.5% !important; 10236 - } 10237 - } 10238 - 10239 - /* Mobile Only */ 10240 - 10241 - @media only screen and (max-width: 767.98px) { 10242 - .ui.grid > .doubling.row, 10243 - .ui.doubling.grid > .row { 10244 - margin: 0 !important; 10245 - padding: 0 !important; 10246 - } 10247 - 10248 - .ui.grid > .doubling.row > .column, 10249 - .ui.doubling.grid > .row > .column { 10250 - padding-top: 1rem !important; 10251 - padding-bottom: 1rem !important; 10252 - margin: 0 !important; 10253 - box-shadow: none !important; 10254 - } 10255 - 10256 - .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, 10257 - .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), 10258 - .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { 10259 - width: 100% !important; 10260 - } 10261 - 10262 - .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, 10263 - .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), 10264 - .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { 10265 - width: 50% !important; 10266 - } 10267 - 10268 - .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, 10269 - .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), 10270 - .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { 10271 - width: 50% !important; 10272 - } 10273 - 10274 - .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, 10275 - .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), 10276 - .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { 10277 - width: 50% !important; 10278 - } 10279 - 10280 - .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, 10281 - .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), 10282 - .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { 10283 - width: 50% !important; 10284 - } 10285 - 10286 - .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, 10287 - .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), 10288 - .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { 10289 - width: 50% !important; 10290 - } 10291 - 10292 - .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, 10293 - .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), 10294 - .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { 10295 - width: 50% !important; 10296 - } 10297 - 10298 - .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, 10299 - .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), 10300 - .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { 10301 - width: 33.33333333% !important; 10302 - } 10303 - 10304 - .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, 10305 - .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), 10306 - .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { 10307 - width: 33.33333333% !important; 10308 - } 10309 - 10310 - .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, 10311 - .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), 10312 - .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { 10313 - width: 33.33333333% !important; 10314 - } 10315 - 10316 - .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, 10317 - .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), 10318 - .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { 10319 - width: 33.33333333% !important; 10320 - } 10321 - 10322 - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, 10323 - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), 10324 - .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { 10325 - width: 33.33333333% !important; 10326 - } 10327 - 10328 - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, 10329 - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), 10330 - .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { 10331 - width: 25% !important; 10332 - } 10333 - 10334 - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, 10335 - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), 10336 - .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { 10337 - width: 25% !important; 10338 - } 10339 - 10340 - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, 10341 - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), 10342 - .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { 10343 - width: 25% !important; 10344 - } 10345 - } 10346 - 10347 - /*------------------- 10348 9437 Stackable 10349 9438 --------------------*/ 10350 9439 ··· 12858 11947 Types 12859 11948 *******************************/ 12860 11949 12861 - .ui.image.label { 12862 - width: auto; 12863 - margin-top: 0; 12864 - margin-bottom: 0; 12865 - max-width: 9999px; 12866 - vertical-align: baseline; 12867 - text-transform: none; 12868 - background: #E8E8E8; 12869 - padding: 0.5833em 0.833em 0.5833em 0.5em; 12870 - border-radius: 0.28571429rem; 12871 - box-shadow: none; 12872 - } 12873 - 12874 - .ui.image.label.attached:not(.basic) { 12875 - padding: 0.5833em 0.833em 0.5833em 0.5em; 12876 - } 12877 - 12878 - .ui.image.label img { 12879 - display: inline-block; 12880 - vertical-align: top; 12881 - height: 2.1666em; 12882 - margin: -0.5833em 0.5em -0.5833em -0.5em; 12883 - border-radius: 0.28571429rem 0 0 0.28571429rem; 12884 - } 12885 - 12886 - .ui.image.label .detail { 12887 - background: rgba(0, 0, 0, 0.1); 12888 - margin: -0.5833em -0.833em -0.5833em 0.5em; 12889 - padding: 0.5833em 0.833em; 12890 - border-radius: 0 0.28571429rem 0.28571429rem 0; 12891 - } 12892 - 12893 - .ui.bottom.attached.image.label:not(.right) > img, 12894 - .ui.top.right.attached.image.label > img { 12895 - border-top-left-radius: 0; 12896 - } 12897 - 12898 - .ui.top.attached.image.label:not(.right) > img, 12899 - .ui.bottom.right.attached.image.label > img { 12900 - border-bottom-left-radius: 0; 12901 - } 12902 - 12903 - /*------------------- 12904 - Tag 12905 - --------------------*/ 12906 - 12907 - .ui.tag.labels .label, 12908 - .ui.tag.label { 12909 - margin-left: 1em; 12910 - position: relative; 12911 - padding-left: 1.5em; 12912 - padding-right: 1.5em; 12913 - border-radius: 0 0.28571429rem 0.28571429rem 0; 12914 - transition: none; 12915 - } 12916 - 12917 - .ui.tag.labels .label:before, 12918 - .ui.tag.label:before { 12919 - position: absolute; 12920 - transform: translateY(-50%) translateX(50%) rotate(-45deg); 12921 - top: 50%; 12922 - right: 100%; 12923 - content: ''; 12924 - background-color: inherit; 12925 - background-image: none; 12926 - width: 1.56em; 12927 - height: 1.56em; 12928 - transition: none; 12929 - } 12930 - 12931 - .ui.tag.labels .label:after, 12932 - .ui.tag.label:after { 12933 - position: absolute; 12934 - content: ''; 12935 - top: 50%; 12936 - left: -0.25em; 12937 - margin-top: -0.25em; 12938 - background-color: #FFFFFF; 12939 - width: 0.5em; 12940 - height: 0.5em; 12941 - box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); 12942 - border-radius: 500rem; 12943 - } 12944 - 12945 - .ui.basic.tag.labels .label:before, 12946 - .ui.basic.tag.label:before { 12947 - border-color: inherit; 12948 - border-width: 1px 0 0 1px; 12949 - border-style: inherit; 12950 - right: calc(100% + 1px); 12951 - } 12952 - 12953 - .ui.basic.tag.labels .label:after, 12954 - .ui.basic.tag.label:after { 12955 - box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); 12956 - } 12957 - 12958 - /*------------------- 12959 - Corner Label 12960 - --------------------*/ 12961 - 12962 - .ui.corner.label { 12963 - position: absolute; 12964 - top: 0; 12965 - right: 0; 12966 - margin: 0; 12967 - padding: 0; 12968 - text-align: center; 12969 - border-color: #E8E8E8; 12970 - width: 4em; 12971 - height: 4em; 12972 - z-index: 1; 12973 - transition: border-color 0.1s ease; 12974 - } 12975 - 12976 - /* Icon Label */ 12977 - 12978 - .ui.corner.label { 12979 - background-color: transparent !important; 12980 - } 12981 - 12982 - .ui.corner.label:after { 12983 - position: absolute; 12984 - content: ""; 12985 - right: 0; 12986 - top: 0; 12987 - z-index: -1; 12988 - width: 0; 12989 - height: 0; 12990 - background-color: transparent; 12991 - border-top: 0 solid transparent; 12992 - border-right: 4em solid transparent; 12993 - border-bottom: 4em solid transparent; 12994 - border-left: 0 solid transparent; 12995 - border-right-color: inherit; 12996 - transition: border-color 0.1s ease; 12997 - } 12998 - 12999 - .ui.corner.label .icon { 13000 - cursor: inherit; 13001 - position: absolute; 13002 - top: 0.64285714em; 13003 - left: auto; 13004 - right: 0.57142857em; 13005 - font-size: 1.14285714em; 13006 - margin: 0; 13007 - } 13008 - 13009 - /* Left Corner */ 13010 - 13011 - .ui.left.corner.label, 13012 - .ui.left.corner.label:after { 13013 - right: auto; 13014 - left: 0; 13015 - } 13016 - 13017 - .ui.left.corner.label:after { 13018 - border-top: 4em solid transparent; 13019 - border-right: 4em solid transparent; 13020 - border-bottom: 0 solid transparent; 13021 - border-left: 0 solid transparent; 13022 - border-top-color: inherit; 13023 - } 13024 - 13025 - .ui.left.corner.label .icon { 13026 - left: 0.57142857em; 13027 - right: auto; 13028 - } 13029 - 13030 - /* Segment */ 13031 - 13032 - .ui.segment > .ui.corner.label { 13033 - top: -1px; 13034 - right: -1px; 13035 - } 13036 - 13037 - .ui.segment > .ui.left.corner.label { 13038 - right: auto; 13039 - left: -1px; 13040 - } 13041 - 13042 - /*------------------- 13043 - Ribbon 13044 - --------------------*/ 13045 - 13046 - .ui.ribbon.label { 13047 - position: relative; 13048 - margin: 0; 13049 - min-width: -webkit-max-content; 13050 - min-width: -moz-max-content; 13051 - min-width: max-content; 13052 - border-radius: 0 0.28571429rem 0.28571429rem 0; 13053 - border-color: rgba(0, 0, 0, 0.15); 13054 - } 13055 - 13056 - .ui.ribbon.label:after { 13057 - position: absolute; 13058 - content: ''; 13059 - top: 100%; 13060 - left: 0; 13061 - background-color: transparent; 13062 - border-style: solid; 13063 - border-width: 0 1.2em 1.2em 0; 13064 - border-color: transparent; 13065 - border-right-color: inherit; 13066 - width: 0; 13067 - height: 0; 13068 - } 13069 - 13070 - /* Positioning */ 13071 - 13072 - .ui.ribbon.label { 13073 - left: calc(-1rem - 1.2em); 13074 - margin-right: -1.2em; 13075 - padding-left: calc(1rem + 1.2em); 13076 - padding-right: 1.2em; 13077 - } 13078 - 13079 - .ui[class*="right ribbon"].label { 13080 - left: calc(100% + 1rem + 1.2em); 13081 - padding-left: 1.2em; 13082 - padding-right: calc(1rem + 1.2em); 13083 - } 13084 - 13085 - .ui.basic.ribbon.label { 13086 - padding-top: calc(0.5833em - 1px); 13087 - padding-bottom: calc(0.5833em - 1px); 13088 - } 13089 - 13090 - .ui.basic.ribbon.label:not([class*="right ribbon"]) { 13091 - padding-left: calc(1rem + 1.2em - 1px); 13092 - padding-right: calc(1.2em - 1px); 13093 - } 13094 - 13095 - .ui.basic[class*="right ribbon"].label { 13096 - padding-left: calc(1.2em - 1px); 13097 - padding-right: calc(1rem + 1.2em - 1px); 13098 - } 13099 - 13100 - .ui.basic.ribbon.label::after { 13101 - top: calc(100% + 1px); 13102 - } 13103 - 13104 - .ui.basic.ribbon.label:not([class*="right ribbon"])::after { 13105 - left: -1px; 13106 - } 13107 - 13108 - .ui.basic[class*="right ribbon"].label::after { 13109 - right: -1px; 13110 - } 13111 - 13112 - /* Right Ribbon */ 13113 - 13114 - .ui[class*="right ribbon"].label { 13115 - text-align: left; 13116 - transform: translateX(-100%); 13117 - border-radius: 0.28571429rem 0 0 0.28571429rem; 13118 - } 13119 - 13120 - .ui[class*="right ribbon"].label:after { 13121 - left: auto; 13122 - right: 0; 13123 - border-style: solid; 13124 - border-width: 1.2em 1.2em 0 0; 13125 - border-color: transparent; 13126 - border-top-color: inherit; 13127 - } 13128 - 13129 - /* Inside Table */ 13130 - 13131 - .ui.image > .ribbon.label, 13132 - .ui.card .image > .ribbon.label { 13133 - position: absolute; 13134 - top: 1rem; 13135 - } 13136 - 13137 - .ui.card .image > .ui.ribbon.label, 13138 - .ui.image > .ui.ribbon.label { 13139 - left: calc(0.05rem - 1.2em); 13140 - } 13141 - 13142 - .ui.card .image > .ui[class*="right ribbon"].label, 13143 - .ui.image > .ui[class*="right ribbon"].label { 13144 - left: calc(100% + -0.05rem + 1.2em); 13145 - padding-left: 0.833em; 13146 - } 13147 - 13148 - /* Inside Table */ 13149 - 13150 - .ui.table td > .ui.ribbon.label { 13151 - left: calc(-1em - 1.2em); 13152 - } 13153 - 13154 - .ui.table td > .ui[class*="right ribbon"].label { 13155 - left: calc(100% + 1em + 1.2em); 13156 - padding-left: 0.833em; 13157 - } 13158 - 13159 11950 /*------------------- 13160 11951 Attached 13161 11952 --------------------*/ ··· 13313 12104 padding-left: calc(0.833em - 1px); 13314 12105 } 13315 12106 13316 - .ui.basic.image.label { 13317 - padding-left: calc(0.5em - 1px); 13318 - } 13319 - 13320 12107 /* Link */ 13321 12108 13322 12109 .ui.basic.labels a.label:hover, ··· 13363 12150 color: #FFFFFF; 13364 12151 } 13365 12152 13366 - /* Ribbon */ 13367 - 13368 - .ui.ui.ui.primary.ribbon.label { 13369 - border-color: #1a69a4; 13370 - } 13371 - 13372 12153 /* Basic */ 13373 12154 13374 12155 .ui.basic.labels .primary.label, ··· 13401 12182 color: #FFFFFF; 13402 12183 } 13403 12184 13404 - /* Ribbon */ 13405 - 13406 - .ui.ui.ui.secondary.ribbon.label { 13407 - border-color: #020203; 13408 - } 13409 - 13410 12185 /* Basic */ 13411 12186 13412 12187 .ui.basic.labels .secondary.label, ··· 13439 12214 color: #FFFFFF; 13440 12215 } 13441 12216 13442 - /* Ribbon */ 13443 - 13444 - .ui.ui.ui.red.ribbon.label { 13445 - border-color: #b21e1e; 13446 - } 13447 - 13448 12217 /* Basic */ 13449 12218 13450 12219 .ui.basic.labels .red.label, ··· 13477 12246 color: #FFFFFF; 13478 12247 } 13479 12248 13480 - /* Ribbon */ 13481 - 13482 - .ui.ui.ui.orange.ribbon.label { 13483 - border-color: #cf590c; 13484 - } 13485 - 13486 12249 /* Basic */ 13487 12250 13488 12251 .ui.basic.labels .orange.label, ··· 13515 12278 color: #FFFFFF; 13516 12279 } 13517 12280 13518 - /* Ribbon */ 13519 - 13520 - .ui.ui.ui.yellow.ribbon.label { 13521 - border-color: #cd9903; 13522 - } 13523 - 13524 12281 /* Basic */ 13525 12282 13526 12283 .ui.basic.labels .yellow.label, ··· 13553 12310 color: #FFFFFF; 13554 12311 } 13555 12312 13556 - /* Ribbon */ 13557 - 13558 - .ui.ui.ui.olive.ribbon.label { 13559 - border-color: #8d9e13; 13560 - } 13561 - 13562 12313 /* Basic */ 13563 12314 13564 12315 .ui.basic.labels .olive.label, ··· 13591 12342 color: #FFFFFF; 13592 12343 } 13593 12344 13594 - /* Ribbon */ 13595 - 13596 - .ui.ui.ui.green.ribbon.label { 13597 - border-color: #198f35; 13598 - } 13599 - 13600 12345 /* Basic */ 13601 12346 13602 12347 .ui.basic.labels .green.label, ··· 13629 12374 color: #FFFFFF; 13630 12375 } 13631 12376 13632 - /* Ribbon */ 13633 - 13634 - .ui.ui.ui.teal.ribbon.label { 13635 - border-color: #00827c; 13636 - } 13637 - 13638 12377 /* Basic */ 13639 12378 13640 12379 .ui.basic.labels .teal.label, ··· 13667 12406 color: #FFFFFF; 13668 12407 } 13669 12408 13670 - /* Ribbon */ 13671 - 13672 - .ui.ui.ui.blue.ribbon.label { 13673 - border-color: #1a69a4; 13674 - } 13675 - 13676 12409 /* Basic */ 13677 12410 13678 12411 .ui.basic.labels .blue.label, ··· 13705 12438 color: #FFFFFF; 13706 12439 } 13707 12440 13708 - /* Ribbon */ 13709 - 13710 - .ui.ui.ui.violet.ribbon.label { 13711 - border-color: #502aa1; 13712 - } 13713 - 13714 12441 /* Basic */ 13715 12442 13716 12443 .ui.basic.labels .violet.label, ··· 13743 12470 color: #FFFFFF; 13744 12471 } 13745 12472 13746 - /* Ribbon */ 13747 - 13748 - .ui.ui.ui.purple.ribbon.label { 13749 - border-color: #82299f; 13750 - } 13751 - 13752 12473 /* Basic */ 13753 12474 13754 12475 .ui.basic.labels .purple.label, ··· 13781 12502 color: #FFFFFF; 13782 12503 } 13783 12504 13784 - /* Ribbon */ 13785 - 13786 - .ui.ui.ui.pink.ribbon.label { 13787 - border-color: #c71f7e; 13788 - } 13789 - 13790 12505 /* Basic */ 13791 12506 13792 12507 .ui.basic.labels .pink.label, ··· 13819 12534 color: #FFFFFF; 13820 12535 } 13821 12536 13822 - /* Ribbon */ 13823 - 13824 - .ui.ui.ui.brown.ribbon.label { 13825 - border-color: #805031; 13826 - } 13827 - 13828 12537 /* Basic */ 13829 12538 13830 12539 .ui.basic.labels .brown.label, ··· 13857 12566 color: #FFFFFF; 13858 12567 } 13859 12568 13860 - /* Ribbon */ 13861 - 13862 - .ui.ui.ui.grey.ribbon.label { 13863 - border-color: #5d5d5d; 13864 - } 13865 - 13866 12569 /* Basic */ 13867 12570 13868 12571 .ui.basic.labels .grey.label, ··· 13893 12596 background-color: #27292a; 13894 12597 border-color: #27292a; 13895 12598 color: #FFFFFF; 13896 - } 13897 - 13898 - /* Ribbon */ 13899 - 13900 - .ui.ui.ui.black.ribbon.label { 13901 - border-color: #020203; 13902 12599 } 13903 12600 13904 12601 /* Basic */ ··· 20315 19012 } 20316 19013 20317 19014 /*------------------- 20318 - Piled 20319 - --------------------*/ 20320 - 20321 - .ui.piled.segments, 20322 - .ui.piled.segment { 20323 - margin: 3em 0; 20324 - box-shadow: ''; 20325 - z-index: auto; 20326 - } 20327 - 20328 - .ui.piled.segment:first-child { 20329 - margin-top: 0; 20330 - } 20331 - 20332 - .ui.piled.segment:last-child { 20333 - margin-bottom: 0; 20334 - } 20335 - 20336 - .ui.piled.segments:after, 20337 - .ui.piled.segments:before, 20338 - .ui.piled.segment:after, 20339 - .ui.piled.segment:before { 20340 - background-color: #FFFFFF; 20341 - visibility: visible; 20342 - content: ''; 20343 - display: block; 20344 - height: 100%; 20345 - left: 0; 20346 - position: absolute; 20347 - width: 100%; 20348 - border: 1px solid rgba(34, 36, 38, 0.15); 20349 - box-shadow: ''; 20350 - } 20351 - 20352 - .ui.piled.segments:before, 20353 - .ui.piled.segment:before { 20354 - transform: rotate(-1.2deg); 20355 - top: 0; 20356 - z-index: -2; 20357 - } 20358 - 20359 - .ui.piled.segments:after, 20360 - .ui.piled.segment:after { 20361 - transform: rotate(1.2deg); 20362 - top: 0; 20363 - z-index: -1; 20364 - } 20365 - 20366 - /* Piled Attached */ 20367 - 20368 - .ui[class*="top attached"].piled.segment { 20369 - margin-top: 3em; 20370 - margin-bottom: 0; 20371 - } 20372 - 20373 - .ui.piled.segment[class*="top attached"]:first-child { 20374 - margin-top: 0; 20375 - } 20376 - 20377 - .ui.piled.segment[class*="bottom attached"] { 20378 - margin-top: 0; 20379 - margin-bottom: 3em; 20380 - } 20381 - 20382 - .ui.piled.segment[class*="bottom attached"]:last-child { 20383 - margin-bottom: 0; 20384 - } 20385 - 20386 - /*------------------- 20387 - Stacked 20388 - --------------------*/ 20389 - 20390 - .ui.stacked.segment { 20391 - padding-bottom: 1.4em; 20392 - } 20393 - 20394 - .ui.stacked.segments:before, 20395 - .ui.stacked.segments:after, 20396 - .ui.stacked.segment:before, 20397 - .ui.stacked.segment:after { 20398 - content: ''; 20399 - position: absolute; 20400 - bottom: -3px; 20401 - left: 0; 20402 - border-top: 1px solid rgba(34, 36, 38, 0.15); 20403 - background: rgba(0, 0, 0, 0.03); 20404 - width: 100%; 20405 - height: 6px; 20406 - visibility: visible; 20407 - } 20408 - 20409 - .ui.stacked.segments:before, 20410 - .ui.stacked.segment:before { 20411 - display: none; 20412 - } 20413 - 20414 - /* Add additional page */ 20415 - 20416 - .ui.tall.stacked.segments:before, 20417 - .ui.tall.stacked.segment:before { 20418 - display: block; 20419 - bottom: 0; 20420 - } 20421 - 20422 - /*------------------- 20423 19015 Padded 20424 19016 --------------------*/ 20425 19017 ··· 21440 20032 .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { 21441 20033 box-shadow: none !important; 21442 20034 } 21443 - 21444 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.left { 21445 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 21446 - } 21447 - 21448 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.primary.right { 21449 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 21450 - } 21451 - 21452 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.left { 21453 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 21454 - } 21455 - 21456 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.secondary.right { 21457 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 21458 - } 21459 - 21460 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.left { 21461 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset; 21462 - } 21463 - 21464 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.red.right { 21465 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset; 21466 - } 21467 - 21468 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.left { 21469 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset; 21470 - } 21471 - 21472 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.orange.right { 21473 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset; 21474 - } 21475 - 21476 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.left { 21477 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset; 21478 - } 21479 - 21480 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.yellow.right { 21481 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset; 21482 - } 21483 - 21484 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.left { 21485 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset; 21486 - } 21487 - 21488 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.olive.right { 21489 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset; 21490 - } 21491 - 21492 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.left { 21493 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset; 21494 - } 21495 - 21496 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.green.right { 21497 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset; 21498 - } 21499 - 21500 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.left { 21501 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset; 21502 - } 21503 - 21504 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.teal.right { 21505 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset; 21506 - } 21507 - 21508 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.left { 21509 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 21510 - } 21511 - 21512 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.blue.right { 21513 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 21514 - } 21515 - 21516 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.left { 21517 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset; 21518 - } 21519 - 21520 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.violet.right { 21521 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset; 21522 - } 21523 - 21524 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.left { 21525 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset; 21526 - } 21527 - 21528 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.purple.right { 21529 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset; 21530 - } 21531 - 21532 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.left { 21533 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset; 21534 - } 21535 - 21536 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.pink.right { 21537 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset; 21538 - } 21539 - 21540 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.left { 21541 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset; 21542 - } 21543 - 21544 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.brown.right { 21545 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset; 21546 - } 21547 - 21548 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.left { 21549 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; 21550 - } 21551 - 21552 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.grey.right { 21553 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; 21554 - } 21555 - 21556 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.left { 21557 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 21558 - } 21559 - 21560 - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.black.right { 21561 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 21562 - } 21563 20035 } 21564 20036 21565 20037 /******************************* ··· 21745 20217 *******************************/ 21746 20218 21747 20219 /*-------------- 21748 - Stackable 21749 - ---------------*/ 21750 - 21751 - @media only screen and (max-width: 991.98px) { 21752 - .ui[class*="tablet stackable"].table, 21753 - .ui[class*="tablet stackable"].table > thead, 21754 - .ui[class*="tablet stackable"].table > thead > tr, 21755 - .ui[class*="tablet stackable"].table > tfoot, 21756 - .ui[class*="tablet stackable"].table > tfoot > tr, 21757 - .ui[class*="tablet stackable"].table > tbody, 21758 - .ui[class*="tablet stackable"].table > tbody > tr, 21759 - .ui[class*="tablet stackable"].table > tr, 21760 - .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned), 21761 - .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned), 21762 - .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned), 21763 - .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned), 21764 - .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned), 21765 - .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned), 21766 - .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) { 21767 - display: block !important; 21768 - width: 100% !important; 21769 - } 21770 - 21771 - .ui[class*="tablet stackable"].table { 21772 - padding: 0; 21773 - } 21774 - 21775 - .ui[class*="tablet stackable"].table > thead { 21776 - display: block; 21777 - } 21778 - 21779 - .ui[class*="tablet stackable"].table > tfoot { 21780 - display: block; 21781 - } 21782 - 21783 - .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, 21784 - .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, 21785 - .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr, 21786 - .ui.ui.ui.ui[class*="tablet stackable"].table > tr { 21787 - padding-top: 1em; 21788 - padding-bottom: 1em; 21789 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; 21790 - } 21791 - 21792 - .ui[class*="tablet stackable"].table > thead > tr > th, 21793 - .ui[class*="tablet stackable"].table > tbody > tr > th, 21794 - .ui[class*="tablet stackable"].table > tfoot > tr > th, 21795 - .ui[class*="tablet stackable"].table > tr > th, 21796 - .ui[class*="tablet stackable"].table > tbody > tr > td, 21797 - .ui[class*="tablet stackable"].table > tfoot > tr > td, 21798 - .ui[class*="tablet stackable"].table > tr > td { 21799 - background: none; 21800 - border: none !important; 21801 - padding: 0.25em 0.75em; 21802 - box-shadow: none; 21803 - } 21804 - 21805 - /* Definition Table */ 21806 - 21807 - .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { 21808 - box-shadow: none !important; 21809 - } 21810 - } 21811 - 21812 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.left { 21813 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 21814 - } 21815 - 21816 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.primary.right { 21817 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 21818 - } 21819 - 21820 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.left { 21821 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 21822 - } 21823 - 21824 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.secondary.right { 21825 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 21826 - } 21827 - 21828 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.left { 21829 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #DB2828 inset; 21830 - } 21831 - 21832 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.red.right { 21833 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #DB2828 inset; 21834 - } 21835 - 21836 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.left { 21837 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #F2711C inset; 21838 - } 21839 - 21840 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.orange.right { 21841 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #F2711C inset; 21842 - } 21843 - 21844 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.left { 21845 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #FBBD08 inset; 21846 - } 21847 - 21848 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.yellow.right { 21849 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #FBBD08 inset; 21850 - } 21851 - 21852 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.left { 21853 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #B5CC18 inset; 21854 - } 21855 - 21856 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.olive.right { 21857 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #B5CC18 inset; 21858 - } 21859 - 21860 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.left { 21861 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #21BA45 inset; 21862 - } 21863 - 21864 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.green.right { 21865 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #21BA45 inset; 21866 - } 21867 - 21868 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.left { 21869 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00B5AD inset; 21870 - } 21871 - 21872 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.teal.right { 21873 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00B5AD inset; 21874 - } 21875 - 21876 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.left { 21877 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185D0 inset; 21878 - } 21879 - 21880 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.blue.right { 21881 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185D0 inset; 21882 - } 21883 - 21884 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.left { 21885 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6435C9 inset; 21886 - } 21887 - 21888 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.violet.right { 21889 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6435C9 inset; 21890 - } 21891 - 21892 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.left { 21893 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A333C8 inset; 21894 - } 21895 - 21896 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.purple.right { 21897 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A333C8 inset; 21898 - } 21899 - 21900 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.left { 21901 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #E03997 inset; 21902 - } 21903 - 21904 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.pink.right { 21905 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #E03997 inset; 21906 - } 21907 - 21908 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.left { 21909 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #A5673F inset; 21910 - } 21911 - 21912 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.brown.right { 21913 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #A5673F inset; 21914 - } 21915 - 21916 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.left { 21917 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; 21918 - } 21919 - 21920 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.grey.right { 21921 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; 21922 - } 21923 - 21924 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.left { 21925 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1B1C1D inset; 21926 - } 21927 - 21928 - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.black.right { 21929 - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1B1C1D inset; 21930 - } 21931 - 21932 - /*-------------- 21933 20220 Text Alignment 21934 20221 ---------------*/ 21935 20222 ··· 22153 20440 .ui.selectable.table tr:hover td.primary:not(.marked) { 22154 20441 background: #d3f1ff; 22155 20442 color: rgba(255, 255, 255, 0.9); 22156 - } 22157 - 22158 - .ui.table td.marked.primary.left, 22159 - .ui.table tr.marked.primary.left { 22160 - box-shadow: 0.2em 0 0 0 #2185D0 inset; 22161 - } 22162 - 22163 - .ui.table td.marked.primary.right, 22164 - .ui.table tr.marked.primary.right { 22165 - box-shadow: -0.2em 0 0 0 #2185D0 inset; 22166 20443 } 22167 20444 22168 20445 .ui.secondary.table { ··· 22182 20459 color: rgba(255, 255, 255, 0.9); 22183 20460 } 22184 20461 22185 - .ui.table td.marked.secondary.left, 22186 - .ui.table tr.marked.secondary.left { 22187 - box-shadow: 0.2em 0 0 0 #1B1C1D inset; 22188 - } 22189 - 22190 - .ui.table td.marked.secondary.right, 22191 - .ui.table tr.marked.secondary.right { 22192 - box-shadow: -0.2em 0 0 0 #1B1C1D inset; 22193 - } 22194 - 22195 20462 .ui.red.table { 22196 20463 border-top: 0.2em solid #DB2828; 22197 20464 } ··· 22209 20476 color: #DB2828; 22210 20477 } 22211 20478 22212 - .ui.table td.marked.red.left, 22213 - .ui.table tr.marked.red.left { 22214 - box-shadow: 0.2em 0 0 0 #DB2828 inset; 22215 - } 22216 - 22217 - .ui.table td.marked.red.right, 22218 - .ui.table tr.marked.red.right { 22219 - box-shadow: -0.2em 0 0 0 #DB2828 inset; 22220 - } 22221 - 22222 20479 .ui.orange.table { 22223 20480 border-top: 0.2em solid #F2711C; 22224 20481 } ··· 22236 20493 color: #F2711C; 22237 20494 } 22238 20495 22239 - .ui.table td.marked.orange.left, 22240 - .ui.table tr.marked.orange.left { 22241 - box-shadow: 0.2em 0 0 0 #F2711C inset; 22242 - } 22243 - 22244 - .ui.table td.marked.orange.right, 22245 - .ui.table tr.marked.orange.right { 22246 - box-shadow: -0.2em 0 0 0 #F2711C inset; 22247 - } 22248 - 22249 20496 .ui.yellow.table { 22250 20497 border-top: 0.2em solid #FBBD08; 22251 20498 } ··· 22263 20510 color: #B58105; 22264 20511 } 22265 20512 22266 - .ui.table td.marked.yellow.left, 22267 - .ui.table tr.marked.yellow.left { 22268 - box-shadow: 0.2em 0 0 0 #FBBD08 inset; 22269 - } 22270 - 22271 - .ui.table td.marked.yellow.right, 22272 - .ui.table tr.marked.yellow.right { 22273 - box-shadow: -0.2em 0 0 0 #FBBD08 inset; 22274 - } 22275 - 22276 20513 .ui.olive.table { 22277 20514 border-top: 0.2em solid #B5CC18; 22278 20515 } ··· 22290 20527 color: #8ABC1E; 22291 20528 } 22292 20529 22293 - .ui.table td.marked.olive.left, 22294 - .ui.table tr.marked.olive.left { 22295 - box-shadow: 0.2em 0 0 0 #B5CC18 inset; 22296 - } 22297 - 22298 - .ui.table td.marked.olive.right, 22299 - .ui.table tr.marked.olive.right { 22300 - box-shadow: -0.2em 0 0 0 #B5CC18 inset; 22301 - } 22302 - 22303 20530 .ui.green.table { 22304 20531 border-top: 0.2em solid #21BA45; 22305 20532 } ··· 22317 20544 color: #1EBC30; 22318 20545 } 22319 20546 22320 - .ui.table td.marked.green.left, 22321 - .ui.table tr.marked.green.left { 22322 - box-shadow: 0.2em 0 0 0 #21BA45 inset; 22323 - } 22324 - 22325 - .ui.table td.marked.green.right, 22326 - .ui.table tr.marked.green.right { 22327 - box-shadow: -0.2em 0 0 0 #21BA45 inset; 22328 - } 22329 - 22330 20547 .ui.teal.table { 22331 20548 border-top: 0.2em solid #00B5AD; 22332 20549 } ··· 22342 20559 .ui.selectable.table tr:hover td.teal:not(.marked) { 22343 20560 background: #d8ffff; 22344 20561 color: #10A3A3; 22345 - } 22346 - 22347 - .ui.table td.marked.teal.left, 22348 - .ui.table tr.marked.teal.left { 22349 - box-shadow: 0.2em 0 0 0 #00B5AD inset; 22350 - } 22351 - 22352 - .ui.table td.marked.teal.right, 22353 - .ui.table tr.marked.teal.right { 22354 - box-shadow: -0.2em 0 0 0 #00B5AD inset; 22355 20562 } 22356 20563 22357 20564 .ui.blue.table { ··· 22371 20578 color: #2185D0; 22372 20579 } 22373 20580 22374 - .ui.table td.marked.blue.left, 22375 - .ui.table tr.marked.blue.left { 22376 - box-shadow: 0.2em 0 0 0 #2185D0 inset; 22377 - } 22378 - 22379 - .ui.table td.marked.blue.right, 22380 - .ui.table tr.marked.blue.right { 22381 - box-shadow: -0.2em 0 0 0 #2185D0 inset; 22382 - } 22383 - 22384 20581 .ui.violet.table { 22385 20582 border-top: 0.2em solid #6435C9; 22386 20583 } ··· 22398 20595 color: #6435C9; 22399 20596 } 22400 20597 22401 - .ui.table td.marked.violet.left, 22402 - .ui.table tr.marked.violet.left { 22403 - box-shadow: 0.2em 0 0 0 #6435C9 inset; 22404 - } 22405 - 22406 - .ui.table td.marked.violet.right, 22407 - .ui.table tr.marked.violet.right { 22408 - box-shadow: -0.2em 0 0 0 #6435C9 inset; 22409 - } 22410 - 22411 20598 .ui.purple.table { 22412 20599 border-top: 0.2em solid #A333C8; 22413 20600 } ··· 22425 20612 color: #A333C8; 22426 20613 } 22427 20614 22428 - .ui.table td.marked.purple.left, 22429 - .ui.table tr.marked.purple.left { 22430 - box-shadow: 0.2em 0 0 0 #A333C8 inset; 22431 - } 22432 - 22433 - .ui.table td.marked.purple.right, 22434 - .ui.table tr.marked.purple.right { 22435 - box-shadow: -0.2em 0 0 0 #A333C8 inset; 22436 - } 22437 - 22438 20615 .ui.pink.table { 22439 20616 border-top: 0.2em solid #E03997; 22440 20617 } ··· 22452 20629 color: #E03997; 22453 20630 } 22454 20631 22455 - .ui.table td.marked.pink.left, 22456 - .ui.table tr.marked.pink.left { 22457 - box-shadow: 0.2em 0 0 0 #E03997 inset; 22458 - } 22459 - 22460 - .ui.table td.marked.pink.right, 22461 - .ui.table tr.marked.pink.right { 22462 - box-shadow: -0.2em 0 0 0 #E03997 inset; 22463 - } 22464 - 22465 20632 .ui.brown.table { 22466 20633 border-top: 0.2em solid #A5673F; 22467 20634 } ··· 22479 20646 color: #A5673F; 22480 20647 } 22481 20648 22482 - .ui.table td.marked.brown.left, 22483 - .ui.table tr.marked.brown.left { 22484 - box-shadow: 0.2em 0 0 0 #A5673F inset; 22485 - } 22486 - 22487 - .ui.table td.marked.brown.right, 22488 - .ui.table tr.marked.brown.right { 22489 - box-shadow: -0.2em 0 0 0 #A5673F inset; 22490 - } 22491 - 22492 20649 .ui.grey.table { 22493 20650 border-top: 0.2em solid #767676; 22494 20651 } ··· 22506 20663 color: #767676; 22507 20664 } 22508 20665 22509 - .ui.table td.marked.grey.left, 22510 - .ui.table tr.marked.grey.left { 22511 - box-shadow: 0.2em 0 0 0 #767676 inset; 22512 - } 22513 - 22514 - .ui.table td.marked.grey.right, 22515 - .ui.table tr.marked.grey.right { 22516 - box-shadow: -0.2em 0 0 0 #767676 inset; 22517 - } 22518 - 22519 20666 .ui.black.table { 22520 20667 border-top: 0.2em solid #1B1C1D; 22521 20668 } ··· 22531 20678 .ui.selectable.table tr:hover td.black:not(.marked) { 22532 20679 background: #000000; 22533 20680 color: #FFFFFF; 22534 - } 22535 - 22536 - .ui.table td.marked.black.left, 22537 - .ui.table tr.marked.black.left { 22538 - box-shadow: 0.2em 0 0 0 #1B1C1D inset; 22539 - } 22540 - 22541 - .ui.table td.marked.black.right, 22542 - .ui.table tr.marked.black.right { 22543 - box-shadow: -0.2em 0 0 0 #1B1C1D inset; 22544 20681 } 22545 20682 22546 20683 /*--------------
+1 -5
web_src/js/components/PullRequestMergeForm.vue
··· 27 27 <div class="field"> 28 28 <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/> 29 29 <template v-if="mergeMessageFieldValue !== mergeForm.defaultMergeMessage"> 30 - <button @click.prevent="clearMergeMessage" class="ui tertiary button"> 30 + <button @click.prevent="clearMergeMessage" class="btn gt-mt-2 gt-p-2 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint"> 31 31 {{ mergeForm.textClearMergeMessage }} 32 32 </button> 33 - <div class="ui label"> 34 - <!-- TODO: Convert to tooltip once we can use tooltips in Vue templates --> 35 - {{ mergeForm.textClearMergeMessageHint }} 36 - </div> 37 33 </template> 38 34 </div> 39 35 </template>