diff options
Diffstat (limited to 'web_src/css/modules/label.css')
| -rw-r--r-- | web_src/css/modules/label.css | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css new file mode 100644 index 00000000..bc30baaf --- /dev/null +++ b/web_src/css/modules/label.css @@ -0,0 +1,303 @@ +/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.label { + display: inline-flex; + align-items: center; + gap: .25rem; + min-width: 0; + vertical-align: middle; + line-height: 1; + background: var(--color-label-bg); + color: var(--color-label-text); + padding: 0.3em 0.5em; + font-size: 0.85714286rem; + font-weight: var(--font-weight-medium); + border: 0 solid transparent; + border-radius: 0.28571429rem; + white-space: nowrap; +} + +.ui.label:first-child { + margin-left: 0; +} +.ui.label:last-child { + margin-right: 0; +} + +a.ui.label { + cursor: pointer; +} + +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: 0.75; +} +.ui.label > a:hover { + opacity: 1; +} + +.ui.label > img { + width: auto; + vertical-align: middle; + height: 2.1666em; +} + +.ui.label > .color-icon { + margin-left: 0; +} + +.ui.label > .icon { + width: auto; + margin: 0 0.75em 0 0; +} + +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: var(--font-weight-medium); + margin-left: 1em; + opacity: 0.8; +} +.ui.label > .detail .icon { + margin: 0 0.25em 0 0; +} + +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + font-size: 0.92857143em; + opacity: 0.5; +} +.ui.label > .close.icon:hover, +.ui.label > .delete.icon:hover { + opacity: 1; +} + +.ui.label.left.icon > .close.icon, +.ui.label.left.icon > .delete.icon { + margin: 0 0.5em 0 0; +} +.ui.label:not(.icon) > .close.icon, +.ui.label:not(.icon) > .delete.icon { + margin: 0 0 0 0.5em; +} + +.ui.header > .ui.label { + margin-top: -0.29165em; +} + +a.ui.label:hover { + background: var(--color-label-hover-bg); + border-color: var(--color-label-hover-bg); + color: var(--color-label-text); +} + +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +.ugc-labels .item { + text-overflow: unset !important; +} + +.ugc-labels .item .ui.label { + text-wrap: auto; + overflow-wrap: anywhere; +} + +.ui.basic.label { + background: var(--color-button); + border: 1px solid var(--color-light-border); + color: var(--color-text-light); + padding: calc(0.5833em - 1px) calc(0.833em - 1px); +} +a.ui.basic.label:hover { + text-decoration: none; + color: var(--color-text); + border-color: var(--color-light-border); + background: var(--color-hover); +} + +.ui.ui.ui.primary.label { + background: var(--color-primary); + border-color: var(--color-primary-dark-2); + color: var(--color-primary-contrast); +} +a.ui.ui.ui.primary.label:hover { + background: var(--color-primary-dark-3); + border-color: var(--color-primary-dark-3); + color: var(--color-primary-contrast); +} +.ui.ui.ui.basic.primary.label { + background: transparent; + border-color: var(--color-primary); + color: var(--color-primary); +} +a.ui.ui.ui.basic.primary.label:hover { + background: var(--color-hover); + border-color: var(--color-primary-dark-1); + color: var(--color-primary-dark-1); +} + +.ui.ui.ui.red.label { + background: var(--color-red); + border-color: var(--color-red); + color: var(--color-white); +} +a.ui.ui.ui.red.label:hover { + background: var(--color-red-dark-1); + border-color: var(--color-red-dark-1); + color: var(--color-white); +} +.ui.ui.ui.basic.red.label { + background: transparent; + border-color: var(--color-red); + color: var(--color-red); +} +a.ui.ui.ui.basic.red.label:hover { + background: transparent; + border-color: var(--color-red-dark-1); + color: var(--color-red-dark-1); +} + +.ui.ui.ui.orange.label { + background: var(--color-orange); + border-color: var(--color-orange); + color: var(--color-white); +} +a.ui.ui.ui.orange.label:hover { + background: var(--color-orange-dark-1); + border-color: var(--color-orange-dark-1); + color: var(--color-white); +} +.ui.ui.ui.basic.orange.label { + background: transparent; + border-color: var(--color-orange); + color: var(--color-orange); +} +a.ui.ui.ui.basic.orange.label:hover { + background: transparent; + border-color: var(--color-orange-dark-1); + color: var(--color-orange-dark-1); +} + +.ui.ui.ui.yellow.label { + background: var(--color-yellow); + border-color: var(--color-yellow); + color: var(--color-white); +} +a.ui.ui.ui.yellow.label:hover { + background: var(--color-yellow-dark-1); + border-color: var(--color-yellow-dark-1); + color: var(--color-white); +} +.ui.ui.ui.basic.yellow.label { + background: transparent; + border-color: var(--color-yellow); + color: var(--color-yellow); +} +a.ui.ui.ui.basic.yellow.label:hover { + background: transparent; + border-color: var(--color-yellow-dark-1); + color: var(--color-yellow-dark-1); +} +.ui.ui.ui.olive.label { + background: var(--color-olive); + border-color: var(--color-olive); + color: var(--color-white); +} + +.ui.ui.ui.green.label { + background: var(--color-green); + border-color: var(--color-green); + color: var(--color-white); +} +a.ui.ui.ui.green.label:hover { + background: var(--color-green-dark-1); + border-color: var(--color-green-dark-1); + color: var(--color-white); +} +.ui.ui.ui.basic.green.label { + background: transparent; + border-color: var(--color-green); + color: var(--color-green); +} +a.ui.ui.ui.basic.green.label:hover { + background: transparent; + border-color: var(--color-green-dark-1); + color: var(--color-green-dark-1); +} + +.ui.ui.ui.purple.label { + background: var(--color-purple); + border-color: var(--color-purple); + color: var(--color-white); +} +a.ui.ui.ui.purple.label:hover { + background: var(--color-purple-dark-1); + border-color: var(--color-purple-dark-1); + color: var(--color-white); +} +.ui.ui.ui.basic.purple.label { + background: transparent; + border-color: var(--color-purple); + color: var(--color-purple); +} +a.ui.ui.ui.basic.purple.label:hover { + background: transparent; + border-color: var(--color-purple-dark-1); + color: var(--color-purple-dark-1); +} + +.ui.ui.ui.grey.label { + background: var(--color-label-bg); + border-color: var(--color-label-bg); + color: var(--color-label-text); +} +a.ui.ui.ui.grey.label:hover { + background: var(--color-label-hover-bg); + border-color: var(--color-label-hover-bg); + color: var(--color-white); +} +.ui.ui.ui.basic.grey.label { + background: transparent; + border-color: var(--color-label-bg); + color: var(--color-label-text); +} +a.ui.ui.ui.basic.grey.label:hover { + background: transparent; + border-color: var(--color-label-hover-bg); + color: var(--color-label-hover-bg); +} + +.ui.horizontal.label { + margin: 0 0.5em 0 0; + padding: 0.4em 0.833em; + min-width: 3em; + text-align: center; +} + +.ui.circular.label { + min-width: 2em; + min-height: 2em; + padding: 0.5em !important; + line-height: 1; + text-align: center; + border-radius: 500rem; + justify-content: center; +} + +.ui.mini.label { + font-size: 0.64285714rem; +} +.ui.tiny.label { + font-size: 0.71428571rem; +} +.ui.small.label { + font-size: 0.78571429rem; +} +.ui.large.label { + font-size: 1rem; +} |