code.gitea.io/gitea@v1.22.3/web_src/css/modules/label.css (about) 1 /* based on Fomantic UI label 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.label { 5 display: inline-flex; 6 align-items: center; 7 gap: .25rem; 8 min-width: 0; 9 vertical-align: middle; 10 line-height: 1; 11 background: var(--color-label-bg); 12 color: var(--color-label-text); 13 padding: 0.3em 0.5em; 14 font-size: 0.85714286rem; 15 font-weight: var(--font-weight-medium); 16 border: 0 solid transparent; 17 border-radius: 0.28571429rem; 18 white-space: nowrap; 19 } 20 21 .ui.label:first-child { 22 margin-left: 0; 23 } 24 .ui.label:last-child { 25 margin-right: 0; 26 } 27 28 a.ui.label { 29 cursor: pointer; 30 } 31 32 .ui.label > a { 33 cursor: pointer; 34 color: inherit; 35 opacity: 0.75; 36 } 37 .ui.label > a:hover { 38 opacity: 1; 39 } 40 41 .ui.label > img { 42 width: auto; 43 vertical-align: middle; 44 height: 2.1666em; 45 } 46 47 .ui.label > .color-icon { 48 margin-left: 0; 49 } 50 51 .ui.label > .icon { 52 width: auto; 53 margin: 0 0.75em 0 0; 54 } 55 56 .ui.label > .detail { 57 display: inline-block; 58 vertical-align: top; 59 font-weight: var(--font-weight-medium); 60 margin-left: 1em; 61 opacity: 0.8; 62 } 63 .ui.label > .detail .icon { 64 margin: 0 0.25em 0 0; 65 } 66 67 .ui.label > .close.icon, 68 .ui.label > .delete.icon { 69 cursor: pointer; 70 font-size: 0.92857143em; 71 opacity: 0.5; 72 } 73 .ui.label > .close.icon:hover, 74 .ui.label > .delete.icon:hover { 75 opacity: 1; 76 } 77 78 .ui.label.left.icon > .close.icon, 79 .ui.label.left.icon > .delete.icon { 80 margin: 0 0.5em 0 0; 81 } 82 .ui.label:not(.icon) > .close.icon, 83 .ui.label:not(.icon) > .delete.icon { 84 margin: 0 0 0 0.5em; 85 } 86 87 .ui.header > .ui.label { 88 margin-top: -0.29165em; 89 } 90 91 a.ui.label:hover { 92 background: var(--color-label-hover-bg); 93 border-color: var(--color-label-hover-bg); 94 color: var(--color-label-text); 95 } 96 97 .ui.label.visible:not(.dropdown) { 98 display: inline-block !important; 99 } 100 101 .ui.basic.label { 102 background: var(--color-button); 103 border: 1px solid var(--color-light-border); 104 color: var(--color-text-light); 105 padding: calc(0.5833em - 1px) calc(0.833em - 1px); 106 } 107 a.ui.basic.label:hover { 108 text-decoration: none; 109 color: var(--color-text); 110 border-color: var(--color-secondary-dark-2); 111 background: var(--color-hover); 112 } 113 114 .ui.ui.ui.primary.label { 115 background: var(--color-primary); 116 border-color: var(--color-primary-dark-2); 117 color: var(--color-primary-contrast); 118 } 119 a.ui.ui.ui.primary.label:hover { 120 background: var(--color-primary-dark-3); 121 border-color: var(--color-primary-dark-3); 122 color: var(--color-primary-contrast); 123 } 124 .ui.ui.ui.basic.primary.label { 125 background: transparent; 126 border-color: var(--color-primary); 127 color: var(--color-primary); 128 } 129 a.ui.ui.ui.basic.primary.label:hover { 130 background: var(--color-hover); 131 border-color: var(--color-primary-dark-1); 132 color: var(--color-primary-dark-1); 133 } 134 135 .ui.ui.ui.red.label { 136 background: var(--color-red); 137 border-color: var(--color-red); 138 color: var(--color-white); 139 } 140 a.ui.ui.ui.red.label:hover { 141 background: var(--color-red-dark-1); 142 border-color: var(--color-red-dark-1); 143 color: var(--color-white); 144 } 145 .ui.ui.ui.basic.red.label { 146 background: transparent; 147 border-color: var(--color-red); 148 color: var(--color-red); 149 } 150 a.ui.ui.ui.basic.red.label:hover { 151 background: transparent; 152 border-color: var(--color-red-dark-1); 153 color: var(--color-red-dark-1); 154 } 155 156 .ui.ui.ui.orange.label { 157 background: var(--color-orange); 158 border-color: var(--color-orange); 159 color: var(--color-white); 160 } 161 a.ui.ui.ui.orange.label:hover { 162 background: var(--color-orange-dark-1); 163 border-color: var(--color-orange-dark-1); 164 color: var(--color-white); 165 } 166 .ui.ui.ui.basic.orange.label { 167 background: transparent; 168 border-color: var(--color-orange); 169 color: var(--color-orange); 170 } 171 a.ui.ui.ui.basic.orange.label:hover { 172 background: transparent; 173 border-color: var(--color-orange-dark-1); 174 color: var(--color-orange-dark-1); 175 } 176 177 .ui.ui.ui.yellow.label { 178 background: var(--color-yellow); 179 border-color: var(--color-yellow); 180 color: var(--color-white); 181 } 182 a.ui.ui.ui.yellow.label:hover { 183 background: var(--color-yellow-dark-1); 184 border-color: var(--color-yellow-dark-1); 185 color: var(--color-white); 186 } 187 .ui.ui.ui.basic.yellow.label { 188 background: transparent; 189 border-color: var(--color-yellow); 190 color: var(--color-yellow); 191 } 192 a.ui.ui.ui.basic.yellow.label:hover { 193 background: transparent; 194 border-color: var(--color-yellow-dark-1); 195 color: var(--color-yellow-dark-1); 196 } 197 .ui.ui.ui.olive.label { 198 background: var(--color-olive); 199 border-color: var(--color-olive); 200 color: var(--color-white); 201 } 202 203 .ui.ui.ui.green.label { 204 background: var(--color-green); 205 border-color: var(--color-green); 206 color: var(--color-white); 207 } 208 a.ui.ui.ui.green.label:hover { 209 background: var(--color-green-dark-1); 210 border-color: var(--color-green-dark-1); 211 color: var(--color-white); 212 } 213 .ui.ui.ui.basic.green.label { 214 background: transparent; 215 border-color: var(--color-green); 216 color: var(--color-green); 217 } 218 a.ui.ui.ui.basic.green.label:hover { 219 background: transparent; 220 border-color: var(--color-green-dark-1); 221 color: var(--color-green-dark-1); 222 } 223 224 .ui.ui.ui.purple.label { 225 background: var(--color-purple); 226 border-color: var(--color-purple); 227 color: var(--color-white); 228 } 229 a.ui.ui.ui.purple.label:hover { 230 background: var(--color-purple-dark-1); 231 border-color: var(--color-purple-dark-1); 232 color: var(--color-white); 233 } 234 .ui.ui.ui.basic.purple.label { 235 background: transparent; 236 border-color: var(--color-purple); 237 color: var(--color-purple); 238 } 239 a.ui.ui.ui.basic.purple.label:hover { 240 background: transparent; 241 border-color: var(--color-purple-dark-1); 242 color: var(--color-purple-dark-1); 243 } 244 245 .ui.ui.ui.grey.label { 246 background: var(--color-label-bg); 247 border-color: var(--color-label-bg); 248 color: var(--color-label-text); 249 } 250 a.ui.ui.ui.grey.label:hover { 251 background: var(--color-label-hover-bg); 252 border-color: var(--color-label-hover-bg); 253 color: var(--color-white); 254 } 255 .ui.ui.ui.basic.grey.label { 256 background: transparent; 257 border-color: var(--color-label-bg); 258 color: var(--color-label-text); 259 } 260 a.ui.ui.ui.basic.grey.label:hover { 261 background: transparent; 262 border-color: var(--color-label-hover-bg); 263 color: var(--color-label-hover-bg); 264 } 265 266 .ui.horizontal.label { 267 margin: 0 0.5em 0 0; 268 padding: 0.4em 0.833em; 269 min-width: 3em; 270 text-align: center; 271 } 272 273 .ui.circular.label { 274 min-width: 2em; 275 min-height: 2em; 276 padding: 0.5em !important; 277 line-height: 1; 278 text-align: center; 279 border-radius: 500rem; 280 justify-content: center; 281 } 282 283 .ui.mini.label { 284 font-size: 0.64285714rem; 285 } 286 .ui.tiny.label { 287 font-size: 0.71428571rem; 288 } 289 .ui.small.label { 290 font-size: 0.78571429rem; 291 } 292 .ui.large.label { 293 font-size: 1rem; 294 }