/*! * # Fomantic-UI 2.9.3 - Label * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Label *******************************/ .ui.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0 0.14285714em; background-color: #e8e8e8; background-image: none; padding: 0.5833em 0.833em; color: rgba(0, 0, 0, 0.6); text-transform: none; font-weight: bold; border: 0 solid transparent; border-radius: 0.28571429rem; transition: background 0.1s ease; } .ui.label:first-child { margin-left: 0; } .ui.label:last-child { margin-right: 0; } /* Link */ a.ui.label { cursor: pointer; } /* Inside Link */ .ui.label > a { cursor: pointer; color: inherit; opacity: 0.5; transition: 0.1s opacity ease; } .ui.label > a:hover { opacity: 1; } /* Image */ .ui.label > img { width: auto !important; vertical-align: middle; height: 2.1666em; } /* Icon */ .ui.ui[class*="left icon"].label > .icon, .ui.label > .icon { width: auto; margin: 0 0.75em 0 0; } /* Detail */ .ui.label > .detail { display: inline-block; vertical-align: top; font-weight: bold; margin-left: 1em; opacity: 0.8; } .ui.label > .detail .icon { margin: 0 0.25em 0 0; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon { cursor: pointer; font-size: 0.92857143em; opacity: 0.5; transition: background 0.1s ease; } .ui.label > .close.icon:hover, .ui.label > .delete.icon:hover { opacity: 1; } /* Backward compatible positioning */ .ui.label[class*="left icon"] > .close.icon, .ui.label[class*="left icon"] > .delete.icon { margin: 0 0.5em 0 0; } .ui.label[class*="left icon"] > .close.icon.right, .ui.label[class*="left icon"] > .delete.icon.right { margin: 0 0 0 0.5em; } .ui.label:not(.icon) > .close.icon, .ui.label:not(.icon) > .delete.icon { margin: 0 0 0 0.5em; } /* Label for only an icon */ .ui.icon.label > .icon { margin: 0 auto; } /* Right Side Icon */ .ui[class*="right icon"].label > .icon { margin: 0 0 0 0.75em; } /* ------------------- Group -------------------- */ .ui.labels > .label { margin: 0 0.5em 0.5em 0; } /* ------------------- Coupling -------------------- */ .ui.header > .ui.label { margin-top: -0.29165em; } /* Remove border radius on attached segment */ .ui.attached.segment > .ui.top.left.attached.label, .ui.bottom.attached.segment > .ui.top.left.attached.label { border-top-left-radius: 0; } .ui.attached.segment > .ui.top.right.attached.label, .ui.bottom.attached.segment > .ui.top.right.attached.label { border-top-right-radius: 0; } .ui.top.attached.segment > .ui.bottom.left.attached.label { border-bottom-left-radius: 0; } .ui.top.attached.segment > .ui.bottom.right.attached.label { border-bottom-right-radius: 0; } /* Padding on next content after a label */ .ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), .ui.top.attached.label + :not(.attached) { margin-top: 2rem !important; } .ui.bottom.attached.label ~ :last-child:not(.attached) { margin-top: 0; margin-bottom: 2rem !important; } .ui.segment:not(.basic) > .ui.top.attached.label { margin-top: -1px; } .ui.segment:not(.basic) > .ui.bottom.attached.label { margin-bottom: -1px; } .ui.segment:not(.basic) > .ui.attached.label:not(.right) { margin-left: -1px; } .ui.segment:not(.basic) > .ui.right.attached.label { margin-right: -1px; } .ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { width: calc(100% + 2px); } /******************************* Types *******************************/ .ui.image.label { width: auto; margin-top: 0; margin-bottom: 0; max-width: 9999px; vertical-align: baseline; text-transform: none; background: #e8e8e8; padding: 0.5833em 0.833em 0.5833em 0.5em; border-radius: 0.28571429rem; box-shadow: none; } .ui.image.label.attached:not(.basic) { padding: 0.5833em 0.833em 0.5833em 0.5em; } .ui.image.label img { display: inline-block; vertical-align: top; height: 2.1666em; margin: -0.5833em 0.5em -0.5833em -0.5em; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui.image.label .detail { background: rgba(0, 0, 0, 0.1); margin: -0.5833em -0.833em -0.5833em 0.5em; padding: 0.5833em 0.833em; border-radius: 0 0.28571429rem 0.28571429rem 0; } .ui.bottom.attached.image.label:not(.right) > img, .ui.top.right.attached.image.label > img { border-top-left-radius: 0; } .ui.top.attached.image.label:not(.right) > img, .ui.bottom.right.attached.image.label > img { border-bottom-left-radius: 0; } /* ------------------- Tag -------------------- */ .ui.tag.labels .label, .ui.tag.label { margin-left: 1em; position: relative; padding-left: 1.5em; padding-right: 1.5em; border-radius: 0 0.28571429rem 0.28571429rem 0; transition: none; } .ui.tag.labels .label::before, .ui.tag.label::before { position: absolute; transform: translateY(-50%) translateX(50%) rotate(-45deg); top: 50%; right: 100%; content: ""; background-color: inherit; background-image: none; width: 1.56em; height: 1.56em; transition: none; } .ui.tag.labels .label::after, .ui.tag.label::after { position: absolute; content: ""; top: 50%; left: -0.25em; margin-top: -0.25em; background-color: #fff; width: 0.5em; height: 0.5em; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); border-radius: 500rem; } .ui.basic.tag.labels .label::before, .ui.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; right: calc(100% + 1px); } .ui.basic.tag.labels .label::after, .ui.basic.tag.label::after { box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); } /* ------------------- Corner Label -------------------- */ .ui.corner.label { position: absolute; top: 0; right: 0; margin: 0; padding: 0; text-align: center; border-color: #e8e8e8; width: 4em; height: 4em; z-index: 1; transition: border-color 0.1s ease; } /* Icon Label */ .ui.corner.label { background-color: transparent !important; } .ui.corner.label::after { position: absolute; content: ""; right: 0; top: 0; z-index: -1; width: 0; height: 0; background-color: transparent; border-top: 0 solid transparent; border-right: 4em solid transparent; border-bottom: 4em solid transparent; border-left: 0 solid transparent; border-right-color: inherit; transition: border-color 0.1s ease; } .ui.corner.label .icon { cursor: inherit; position: absolute; top: 0.64285714em; left: auto; right: 0.57142857em; font-size: 1.14285714em; margin: 0; } /* Left Corner */ .ui.left.corner.label, .ui.left.corner.label::after { right: auto; left: 0; } .ui.left.corner.label::after { border-top: 4em solid transparent; border-right: 4em solid transparent; border-bottom: 0 solid transparent; border-left: 0 solid transparent; border-top-color: inherit; } .ui.left.corner.label .icon { left: 0.57142857em; right: auto; } /* Segment */ .ui.segment > .ui.corner.label { top: -1px; right: -1px; } .ui.segment > .ui.left.corner.label { right: auto; left: -1px; } /* ------------------- Ribbon -------------------- */ .ui.ribbon.label { position: relative; margin: 0; min-width: -webkit-max-content; min-width: max-content; border-radius: 0 0.28571429rem 0.28571429rem 0; border-color: rgba(0, 0, 0, 0.15); } .ui.ribbon.label::after { position: absolute; content: ""; top: 100%; left: 0; background-color: transparent; border-style: solid; border-width: 0 1.2em 1.2em 0; border-color: transparent; border-right-color: inherit; width: 0; height: 0; } /* Positioning */ .ui.ribbon.label { left: calc(-1rem - 1.2em); margin-right: -1.2em; padding-left: calc(1rem + 1.2em); padding-right: 1.2em; } .ui[class*="right ribbon"].label { left: calc(100% + 1rem + 1.2em); padding-left: 1.2em; padding-right: calc(1rem + 1.2em); } .ui.basic.ribbon.label { padding-top: calc(0.5833em - 1px); padding-bottom: calc(0.5833em - 1px); } .ui.basic.ribbon.label:not([class*="right ribbon"]) { padding-left: calc(1rem + 1.2em - 1px); padding-right: calc(1.2em - 1px); } .ui.basic[class*="right ribbon"].label { padding-left: calc(1.2em - 1px); padding-right: calc(1rem + 1.2em - 1px); } .ui.basic.ribbon.label::after { top: calc(100% + 1px); } .ui.basic.ribbon.label:not([class*="right ribbon"])::after { left: -1px; } .ui.basic[class*="right ribbon"].label::after { right: -1px; } /* Right Ribbon */ .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui[class*="right ribbon"].label::after { left: auto; right: 0; border-style: solid; border-width: 1.2em 1.2em 0 0; border-color: transparent; border-top-color: inherit; } /* Inside Table */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { position: absolute; top: 1rem; } .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label { left: calc(0.05rem - 1.2em); } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label { left: calc(100% + -0.05rem + 1.2em); padding-left: 0.833em; } /* Inside Table */ .ui.table td > .ui.ribbon.label { left: calc(-1em - 1.2em); } .ui.table td > .ui[class*="right ribbon"].label { left: calc(100% + 1em + 1.2em); padding-left: 0.833em; } /* ------------------- Attached -------------------- */ .ui[class*="top attached"].label, .ui.attached.label { width: 100%; position: absolute; margin: 0; top: 0; left: 0; padding: 0.75em 1em; border-radius: 0.21428571rem 0.21428571rem 0 0; } .ui[class*="bottom attached"].label { top: auto; bottom: 0; border-radius: 0 0 0.21428571rem 0.21428571rem; } .ui[class*="top left attached"].label { width: auto; margin-top: 0; border-radius: 0.21428571rem 0 0.28571429rem 0; } .ui[class*="top right attached"].label { width: auto; left: auto; right: 0; border-radius: 0 0.21428571rem 0 0.28571429rem; } .ui[class*="bottom left attached"].label { width: auto; top: auto; bottom: 0; border-radius: 0 0.28571429rem 0 0.21428571rem; } .ui[class*="bottom right attached"].label { top: auto; bottom: 0; left: auto; right: 0; width: auto; border-radius: 0.28571429rem 0 0.21428571rem 0; } /******************************* States *******************************/ /* ------------------- Disabled -------------------- */ .ui.disabled.labels .label, .ui.label.disabled { opacity: 0.45; pointer-events: none; } /* ------------------- Hover -------------------- */ .ui.labels a.label:hover, a.ui.label:hover { background-color: #e0e0e0; border-color: #e0e0e0; background-image: none; color: rgba(0, 0, 0, 0.8); } .ui.labels a.label:hover::before, a.ui.label:hover::before { color: rgba(0, 0, 0, 0.8); } /* ------------------- Active -------------------- */ .ui.active.label { background-color: #d0d0d0; border-color: #d0d0d0; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.label::before { background-color: #d0d0d0; background-image: none; color: rgba(0, 0, 0, 0.95); } /* ------------------- Active Hover -------------------- */ .ui.labels a.active.label:hover, a.ui.active.label:hover { background-color: #c8c8c8; border-color: #c8c8c8; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.labels a.active.label:hover::before, a.ui.active.label:hover::before { background-color: #c8c8c8; background-image: none; color: rgba(0, 0, 0, 0.95); } /* ------------------- Visible -------------------- */ .ui.labels.visible .label, .ui.label.visible:not(.dropdown) { display: inline-block !important; } /* ------------------- Hidden -------------------- */ .ui.labels.hidden .label, .ui.label.hidden { display: none !important; } /******************************* Variations *******************************/ /* ------------------- Basic -------------------- */ .ui.basic.labels .label, .ui.basic.label { background: none #fff; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); box-shadow: none; padding-top: calc(0.5833em - 1px); padding-bottom: calc(0.5833em - 1px); padding-right: calc(0.833em - 1px); } .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, .ui.basic.label:not(.tag):not(.image):not(.ribbon) { padding-left: calc(0.833em - 1px); } .ui.basic.image.label { padding-left: calc(0.5em - 1px); } /* Link */ .ui.basic.labels a.label:hover, a.ui.basic.label:hover { text-decoration: none; background: none #fff; color: #4d17c0; box-shadow: none; } /* Pointing */ .ui.basic.pointing.label::before { border-color: inherit; } /* ------------------- Fluid -------------------- */ .ui.label.fluid, .ui.fluid.labels > .label { width: 100%; box-sizing: border-box; } .ui.centered.labels .label, .ui.centered.label { text-align: center; } /* ------------------- Inverted -------------------- */ .ui.inverted.labels .label, .ui.inverted.label { color: rgba(255, 255, 255, 0.9); background-color: #b5b5b5; } .ui.inverted.corner.label { border-color: #b5b5b5; } .ui.inverted.corner.label:hover { border-color: #e8e8e8; transition: none; } .ui.inverted.basic.labels .label, .ui.inverted.basic.label, .ui.inverted.basic.label:hover { border-color: rgba(255, 255, 255, 0.5); background: #1b1c1d; } .ui.inverted.basic.label:hover { color: #6435c9; } /* ------------------- Colors -------------------- */ .ui.primary.labels .label, .ui.ui.ui.primary.label { background-color: #6435c9; border-color: #6435c9; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.primary.labels a.label:hover, a.ui.ui.ui.primary.label:hover { background-color: #5829bb; border-color: #5829bb; color: #fff; } /* Ribbon */ .ui.ui.ui.primary.ribbon.label { border-color: #502aa1; } /* Basic */ .ui.basic.labels .primary.label, .ui.ui.ui.basic.primary.label { background: none #fff; border-color: #6435c9; color: #6435c9; } .ui.basic.labels a.primary.label:hover, a.ui.ui.ui.basic.primary.label:hover { background: none #fff; border-color: #5829bb; color: #5829bb; } /* Inverted */ .ui.inverted.labels .primary.label, .ui.ui.ui.inverted.primary.label { background-color: #a291fb; border-color: #a291fb; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.primary.label:hover, a.ui.ui.ui.inverted.primary.label:hover { background-color: #745aff; border-color: #745aff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.primary.ribbon.label { border-color: #7860f9; } /* Inverted Basic */ .ui.inverted.basic.labels .primary.label, .ui.ui.ui.inverted.basic.primary.label { background-color: #1b1c1d; border-color: #a291fb; color: #a291fb; } .ui.inverted.basic.labels a.primary.label:hover, a.ui.ui.ui.inverted.basic.primary.label:hover { border-color: #745aff; background-color: #1b1c1d; color: #745aff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .primary.label, .ui.ui.ui.inverted.primary.basic.tag.label { border: 1px solid #a291fb; } .ui.inverted.basic.tag.labels .primary.label::before, .ui.ui.ui.inverted.primary.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.secondary.labels .label, .ui.ui.ui.secondary.label { background-color: #1b1c1d; border-color: #1b1c1d; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.secondary.labels a.label:hover, a.ui.ui.ui.secondary.label:hover { background-color: #27292a; border-color: #27292a; color: #fff; } /* Ribbon */ .ui.ui.ui.secondary.ribbon.label { border-color: #020203; } /* Basic */ .ui.basic.labels .secondary.label, .ui.ui.ui.basic.secondary.label { background: none #fff; border-color: #1b1c1d; color: #1b1c1d; } .ui.basic.labels a.secondary.label:hover, a.ui.ui.ui.basic.secondary.label:hover { background: none #fff; border-color: #27292a; color: #27292a; } /* Inverted */ .ui.inverted.labels .secondary.label, .ui.ui.ui.inverted.secondary.label { background-color: #545454; border-color: #545454; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.secondary.label:hover, a.ui.ui.ui.inverted.secondary.label:hover { background-color: #6e6e6e; border-color: #6e6e6e; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.secondary.ribbon.label { border-color: #3b3b3b; } /* Inverted Basic */ .ui.inverted.basic.labels .secondary.label, .ui.ui.ui.inverted.basic.secondary.label { background-color: #1b1c1d; border-color: #545454; color: #545454; } .ui.inverted.basic.labels a.secondary.label:hover, a.ui.ui.ui.inverted.basic.secondary.label:hover { border-color: #6e6e6e; background-color: #1b1c1d; color: #6e6e6e; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .secondary.label, .ui.ui.ui.inverted.secondary.basic.tag.label { border: 1px solid #545454; } .ui.inverted.basic.tag.labels .secondary.label::before, .ui.ui.ui.inverted.secondary.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.red.labels .label, .ui.ui.ui.red.label { background-color: #db2828; border-color: #db2828; color: #fff; } /* Link */ .ui.red.labels a.label:hover, a.ui.ui.ui.red.label:hover { background-color: #d01919; border-color: #d01919; color: #fff; } /* Ribbon */ .ui.ui.ui.red.ribbon.label { border-color: #b21e1e; } /* Basic */ .ui.basic.labels .red.label, .ui.ui.ui.basic.red.label { background: none #fff; border-color: #db2828; color: #db2828; } .ui.basic.labels a.red.label:hover, a.ui.ui.ui.basic.red.label:hover { background: none #fff; border-color: #d01919; color: #d01919; } /* Inverted */ .ui.inverted.labels .red.label, .ui.ui.ui.inverted.red.label { background-color: #ff695e; border-color: #ff695e; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.red.label:hover, a.ui.ui.ui.inverted.red.label:hover { background-color: #ff392b; border-color: #ff392b; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.red.ribbon.label { border-color: #ff392b; } /* Inverted Basic */ .ui.inverted.basic.labels .red.label, .ui.ui.ui.inverted.basic.red.label { background-color: #1b1c1d; border-color: #ff695e; color: #ff695e; } .ui.inverted.basic.labels a.red.label:hover, a.ui.ui.ui.inverted.basic.red.label:hover { border-color: #ff392b; background-color: #1b1c1d; color: #ff392b; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .red.label, .ui.ui.ui.inverted.red.basic.tag.label { border: 1px solid #ff695e; } .ui.inverted.basic.tag.labels .red.label::before, .ui.ui.ui.inverted.red.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.orange.labels .label, .ui.ui.ui.orange.label { background-color: #f2711c; border-color: #f2711c; color: #fff; } /* Link */ .ui.orange.labels a.label:hover, a.ui.ui.ui.orange.label:hover { background-color: #f26202; border-color: #f26202; color: #fff; } /* Ribbon */ .ui.ui.ui.orange.ribbon.label { border-color: #cf590c; } /* Basic */ .ui.basic.labels .orange.label, .ui.ui.ui.basic.orange.label { background: none #fff; border-color: #f2711c; color: #f2711c; } .ui.basic.labels a.orange.label:hover, a.ui.ui.ui.basic.orange.label:hover { background: none #fff; border-color: #f26202; color: #f26202; } /* Inverted */ .ui.inverted.labels .orange.label, .ui.ui.ui.inverted.orange.label { background-color: #ff851b; border-color: #ff851b; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.orange.label:hover, a.ui.ui.ui.inverted.orange.label:hover { background-color: #e76b00; border-color: #e76b00; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.orange.ribbon.label { border-color: #e76b00; } /* Inverted Basic */ .ui.inverted.basic.labels .orange.label, .ui.ui.ui.inverted.basic.orange.label { background-color: #1b1c1d; border-color: #ff851b; color: #ff851b; } .ui.inverted.basic.labels a.orange.label:hover, a.ui.ui.ui.inverted.basic.orange.label:hover { border-color: #e76b00; background-color: #1b1c1d; color: #e76b00; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .orange.label, .ui.ui.ui.inverted.orange.basic.tag.label { border: 1px solid #ff851b; } .ui.inverted.basic.tag.labels .orange.label::before, .ui.ui.ui.inverted.orange.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.yellow.labels .label, .ui.ui.ui.yellow.label { background-color: #fbbd08; border-color: #fbbd08; color: #fff; } /* Link */ .ui.yellow.labels a.label:hover, a.ui.ui.ui.yellow.label:hover { background-color: #eaae00; border-color: #eaae00; color: #fff; } /* Ribbon */ .ui.ui.ui.yellow.ribbon.label { border-color: #cd9903; } /* Basic */ .ui.basic.labels .yellow.label, .ui.ui.ui.basic.yellow.label { background: none #fff; border-color: #fbbd08; color: #fbbd08; } .ui.basic.labels a.yellow.label:hover, a.ui.ui.ui.basic.yellow.label:hover { background: none #fff; border-color: #eaae00; color: #eaae00; } /* Inverted */ .ui.inverted.labels .yellow.label, .ui.ui.ui.inverted.yellow.label { background-color: #ffe21f; border-color: #ffe21f; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.yellow.label:hover, a.ui.ui.ui.inverted.yellow.label:hover { background-color: #ebcd00; border-color: #ebcd00; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.yellow.ribbon.label { border-color: #ebcd00; } /* Inverted Basic */ .ui.inverted.basic.labels .yellow.label, .ui.ui.ui.inverted.basic.yellow.label { background-color: #1b1c1d; border-color: #ffe21f; color: #ffe21f; } .ui.inverted.basic.labels a.yellow.label:hover, a.ui.ui.ui.inverted.basic.yellow.label:hover { border-color: #ebcd00; background-color: #1b1c1d; color: #ebcd00; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .yellow.label, .ui.ui.ui.inverted.yellow.basic.tag.label { border: 1px solid #ffe21f; } .ui.inverted.basic.tag.labels .yellow.label::before, .ui.ui.ui.inverted.yellow.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.olive.labels .label, .ui.ui.ui.olive.label { background-color: #b5cc18; border-color: #b5cc18; color: #fff; } /* Link */ .ui.olive.labels a.label:hover, a.ui.ui.ui.olive.label:hover { background-color: #a7bd0d; border-color: #a7bd0d; color: #fff; } /* Ribbon */ .ui.ui.ui.olive.ribbon.label { border-color: #8d9e13; } /* Basic */ .ui.basic.labels .olive.label, .ui.ui.ui.basic.olive.label { background: none #fff; border-color: #b5cc18; color: #b5cc18; } .ui.basic.labels a.olive.label:hover, a.ui.ui.ui.basic.olive.label:hover { background: none #fff; border-color: #a7bd0d; color: #a7bd0d; } /* Inverted */ .ui.inverted.labels .olive.label, .ui.ui.ui.inverted.olive.label { background-color: #d9e778; border-color: #d9e778; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.olive.label:hover, a.ui.ui.ui.inverted.olive.label:hover { background-color: #d2e745; border-color: #d2e745; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.olive.ribbon.label { border-color: #cddf4d; } /* Inverted Basic */ .ui.inverted.basic.labels .olive.label, .ui.ui.ui.inverted.basic.olive.label { background-color: #1b1c1d; border-color: #d9e778; color: #d9e778; } .ui.inverted.basic.labels a.olive.label:hover, a.ui.ui.ui.inverted.basic.olive.label:hover { border-color: #d2e745; background-color: #1b1c1d; color: #d2e745; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .olive.label, .ui.ui.ui.inverted.olive.basic.tag.label { border: 1px solid #d9e778; } .ui.inverted.basic.tag.labels .olive.label::before, .ui.ui.ui.inverted.olive.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.green.labels .label, .ui.ui.ui.green.label { background-color: #21ba45; border-color: #21ba45; color: #fff; } /* Link */ .ui.green.labels a.label:hover, a.ui.ui.ui.green.label:hover { background-color: #16ab39; border-color: #16ab39; color: #fff; } /* Ribbon */ .ui.ui.ui.green.ribbon.label { border-color: #198f35; } /* Basic */ .ui.basic.labels .green.label, .ui.ui.ui.basic.green.label { background: none #fff; border-color: #21ba45; color: #21ba45; } .ui.basic.labels a.green.label:hover, a.ui.ui.ui.basic.green.label:hover { background: none #fff; border-color: #16ab39; color: #16ab39; } /* Inverted */ .ui.inverted.labels .green.label, .ui.ui.ui.inverted.green.label { background-color: #2ecc40; border-color: #2ecc40; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.green.label:hover, a.ui.ui.ui.inverted.green.label:hover { background-color: #1ea92e; border-color: #1ea92e; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.green.ribbon.label { border-color: #25a233; } /* Inverted Basic */ .ui.inverted.basic.labels .green.label, .ui.ui.ui.inverted.basic.green.label { background-color: #1b1c1d; border-color: #2ecc40; color: #2ecc40; } .ui.inverted.basic.labels a.green.label:hover, a.ui.ui.ui.inverted.basic.green.label:hover { border-color: #1ea92e; background-color: #1b1c1d; color: #1ea92e; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .green.label, .ui.ui.ui.inverted.green.basic.tag.label { border: 1px solid #2ecc40; } .ui.inverted.basic.tag.labels .green.label::before, .ui.ui.ui.inverted.green.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.teal.labels .label, .ui.ui.ui.teal.label { background-color: #00b5ad; border-color: #00b5ad; color: #fff; } /* Link */ .ui.teal.labels a.label:hover, a.ui.ui.ui.teal.label:hover { background-color: #009c95; border-color: #009c95; color: #fff; } /* Ribbon */ .ui.ui.ui.teal.ribbon.label { border-color: #00827c; } /* Basic */ .ui.basic.labels .teal.label, .ui.ui.ui.basic.teal.label { background: none #fff; border-color: #00b5ad; color: #00b5ad; } .ui.basic.labels a.teal.label:hover, a.ui.ui.ui.basic.teal.label:hover { background: none #fff; border-color: #009c95; color: #009c95; } /* Inverted */ .ui.inverted.labels .teal.label, .ui.ui.ui.inverted.teal.label { background-color: #6dffff; border-color: #6dffff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.teal.label:hover, a.ui.ui.ui.inverted.teal.label:hover { background-color: #3affff; border-color: #3affff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.teal.ribbon.label { border-color: #3affff; } /* Inverted Basic */ .ui.inverted.basic.labels .teal.label, .ui.ui.ui.inverted.basic.teal.label { background-color: #1b1c1d; border-color: #6dffff; color: #6dffff; } .ui.inverted.basic.labels a.teal.label:hover, a.ui.ui.ui.inverted.basic.teal.label:hover { border-color: #3affff; background-color: #1b1c1d; color: #3affff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .teal.label, .ui.ui.ui.inverted.teal.basic.tag.label { border: 1px solid #6dffff; } .ui.inverted.basic.tag.labels .teal.label::before, .ui.ui.ui.inverted.teal.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.blue.labels .label, .ui.ui.ui.blue.label { background-color: #2185d0; border-color: #2185d0; color: #fff; } /* Link */ .ui.blue.labels a.label:hover, a.ui.ui.ui.blue.label:hover { background-color: #1678c2; border-color: #1678c2; color: #fff; } /* Ribbon */ .ui.ui.ui.blue.ribbon.label { border-color: #1a69a4; } /* Basic */ .ui.basic.labels .blue.label, .ui.ui.ui.basic.blue.label { background: none #fff; border-color: #2185d0; color: #2185d0; } .ui.basic.labels a.blue.label:hover, a.ui.ui.ui.basic.blue.label:hover { background: none #fff; border-color: #1678c2; color: #1678c2; } /* Inverted */ .ui.inverted.labels .blue.label, .ui.ui.ui.inverted.blue.label { background-color: #54c8ff; border-color: #54c8ff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.blue.label:hover, a.ui.ui.ui.inverted.blue.label:hover { background-color: #21b8ff; border-color: #21b8ff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.blue.ribbon.label { border-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.basic.labels .blue.label, .ui.ui.ui.inverted.basic.blue.label { background-color: #1b1c1d; border-color: #54c8ff; color: #54c8ff; } .ui.inverted.basic.labels a.blue.label:hover, a.ui.ui.ui.inverted.basic.blue.label:hover { border-color: #21b8ff; background-color: #1b1c1d; color: #21b8ff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .blue.label, .ui.ui.ui.inverted.blue.basic.tag.label { border: 1px solid #54c8ff; } .ui.inverted.basic.tag.labels .blue.label::before, .ui.ui.ui.inverted.blue.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.violet.labels .label, .ui.ui.ui.violet.label { background-color: #6435c9; border-color: #6435c9; color: #fff; } /* Link */ .ui.violet.labels a.label:hover, a.ui.ui.ui.violet.label:hover { background-color: #5829bb; border-color: #5829bb; color: #fff; } /* Ribbon */ .ui.ui.ui.violet.ribbon.label { border-color: #502aa1; } /* Basic */ .ui.basic.labels .violet.label, .ui.ui.ui.basic.violet.label { background: none #fff; border-color: #6435c9; color: #6435c9; } .ui.basic.labels a.violet.label:hover, a.ui.ui.ui.basic.violet.label:hover { background: none #fff; border-color: #5829bb; color: #5829bb; } /* Inverted */ .ui.inverted.labels .violet.label, .ui.ui.ui.inverted.violet.label { background-color: #a291fb; border-color: #a291fb; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.violet.label:hover, a.ui.ui.ui.inverted.violet.label:hover { background-color: #745aff; border-color: #745aff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.violet.ribbon.label { border-color: #7860f9; } /* Inverted Basic */ .ui.inverted.basic.labels .violet.label, .ui.ui.ui.inverted.basic.violet.label { background-color: #1b1c1d; border-color: #a291fb; color: #a291fb; } .ui.inverted.basic.labels a.violet.label:hover, a.ui.ui.ui.inverted.basic.violet.label:hover { border-color: #745aff; background-color: #1b1c1d; color: #745aff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .violet.label, .ui.ui.ui.inverted.violet.basic.tag.label { border: 1px solid #a291fb; } .ui.inverted.basic.tag.labels .violet.label::before, .ui.ui.ui.inverted.violet.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.purple.labels .label, .ui.ui.ui.purple.label { background-color: #a333c8; border-color: #a333c8; color: #fff; } /* Link */ .ui.purple.labels a.label:hover, a.ui.ui.ui.purple.label:hover { background-color: #9627ba; border-color: #9627ba; color: #fff; } /* Ribbon */ .ui.ui.ui.purple.ribbon.label { border-color: #82299f; } /* Basic */ .ui.basic.labels .purple.label, .ui.ui.ui.basic.purple.label { background: none #fff; border-color: #a333c8; color: #a333c8; } .ui.basic.labels a.purple.label:hover, a.ui.ui.ui.basic.purple.label:hover { background: none #fff; border-color: #9627ba; color: #9627ba; } /* Inverted */ .ui.inverted.labels .purple.label, .ui.ui.ui.inverted.purple.label { background-color: #dc73ff; border-color: #dc73ff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.purple.label:hover, a.ui.ui.ui.inverted.purple.label:hover { background-color: #cf40ff; border-color: #cf40ff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.purple.ribbon.label { border-color: #cf40ff; } /* Inverted Basic */ .ui.inverted.basic.labels .purple.label, .ui.ui.ui.inverted.basic.purple.label { background-color: #1b1c1d; border-color: #dc73ff; color: #dc73ff; } .ui.inverted.basic.labels a.purple.label:hover, a.ui.ui.ui.inverted.basic.purple.label:hover { border-color: #cf40ff; background-color: #1b1c1d; color: #cf40ff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .purple.label, .ui.ui.ui.inverted.purple.basic.tag.label { border: 1px solid #dc73ff; } .ui.inverted.basic.tag.labels .purple.label::before, .ui.ui.ui.inverted.purple.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.pink.labels .label, .ui.ui.ui.pink.label { background-color: #e03997; border-color: #e03997; color: #fff; } /* Link */ .ui.pink.labels a.label:hover, a.ui.ui.ui.pink.label:hover { background-color: #e61a8d; border-color: #e61a8d; color: #fff; } /* Ribbon */ .ui.ui.ui.pink.ribbon.label { border-color: #c71f7e; } /* Basic */ .ui.basic.labels .pink.label, .ui.ui.ui.basic.pink.label { background: none #fff; border-color: #e03997; color: #e03997; } .ui.basic.labels a.pink.label:hover, a.ui.ui.ui.basic.pink.label:hover { background: none #fff; border-color: #e61a8d; color: #e61a8d; } /* Inverted */ .ui.inverted.labels .pink.label, .ui.ui.ui.inverted.pink.label { background-color: #ff8edf; border-color: #ff8edf; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.pink.label:hover, a.ui.ui.ui.inverted.pink.label:hover { background-color: #ff5bd1; border-color: #ff5bd1; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.pink.ribbon.label { border-color: #ff5bd1; } /* Inverted Basic */ .ui.inverted.basic.labels .pink.label, .ui.ui.ui.inverted.basic.pink.label { background-color: #1b1c1d; border-color: #ff8edf; color: #ff8edf; } .ui.inverted.basic.labels a.pink.label:hover, a.ui.ui.ui.inverted.basic.pink.label:hover { border-color: #ff5bd1; background-color: #1b1c1d; color: #ff5bd1; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .pink.label, .ui.ui.ui.inverted.pink.basic.tag.label { border: 1px solid #ff8edf; } .ui.inverted.basic.tag.labels .pink.label::before, .ui.ui.ui.inverted.pink.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.brown.labels .label, .ui.ui.ui.brown.label { background-color: #a5673f; border-color: #a5673f; color: #fff; } /* Link */ .ui.brown.labels a.label:hover, a.ui.ui.ui.brown.label:hover { background-color: #975b33; border-color: #975b33; color: #fff; } /* Ribbon */ .ui.ui.ui.brown.ribbon.label { border-color: #805031; } /* Basic */ .ui.basic.labels .brown.label, .ui.ui.ui.basic.brown.label { background: none #fff; border-color: #a5673f; color: #a5673f; } .ui.basic.labels a.brown.label:hover, a.ui.ui.ui.basic.brown.label:hover { background: none #fff; border-color: #975b33; color: #975b33; } /* Inverted */ .ui.inverted.labels .brown.label, .ui.ui.ui.inverted.brown.label { background-color: #d67c1c; border-color: #d67c1c; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.brown.label:hover, a.ui.ui.ui.inverted.brown.label:hover { background-color: #b0620f; border-color: #b0620f; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.brown.ribbon.label { border-color: #a96216; } /* Inverted Basic */ .ui.inverted.basic.labels .brown.label, .ui.ui.ui.inverted.basic.brown.label { background-color: #1b1c1d; border-color: #d67c1c; color: #d67c1c; } .ui.inverted.basic.labels a.brown.label:hover, a.ui.ui.ui.inverted.basic.brown.label:hover { border-color: #b0620f; background-color: #1b1c1d; color: #b0620f; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .brown.label, .ui.ui.ui.inverted.brown.basic.tag.label { border: 1px solid #d67c1c; } .ui.inverted.basic.tag.labels .brown.label::before, .ui.ui.ui.inverted.brown.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.grey.labels .label, .ui.ui.ui.grey.label { background-color: #767676; border-color: #767676; color: #fff; } /* Link */ .ui.grey.labels a.label:hover, a.ui.ui.ui.grey.label:hover { background-color: #838383; border-color: #838383; color: #fff; } /* Ribbon */ .ui.ui.ui.grey.ribbon.label { border-color: #5d5d5d; } /* Basic */ .ui.basic.labels .grey.label, .ui.ui.ui.basic.grey.label { background: none #fff; border-color: #767676; color: #767676; } .ui.basic.labels a.grey.label:hover, a.ui.ui.ui.basic.grey.label:hover { background: none #fff; border-color: #838383; color: #838383; } /* Inverted */ .ui.inverted.labels .grey.label, .ui.ui.ui.inverted.grey.label { background-color: #dcddde; border-color: #dcddde; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.grey.label:hover, a.ui.ui.ui.inverted.grey.label:hover { background-color: #c2c4c5; border-color: #c2c4c5; color: #fff; } /* Inverted Ribbon */ .ui.ui.ui.inverted.grey.ribbon.label { border-color: #e9eaea; } /* Inverted Basic */ .ui.inverted.basic.labels .grey.label, .ui.ui.ui.inverted.basic.grey.label { background-color: #1b1c1d; border-color: #dcddde; color: rgba(255, 255, 255, 0.9); } .ui.inverted.basic.labels a.grey.label:hover, a.ui.ui.ui.inverted.basic.grey.label:hover { border-color: #c2c4c5; background-color: #1b1c1d; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .grey.label, .ui.ui.ui.inverted.grey.basic.tag.label { border: 1px solid #dcddde; } .ui.inverted.basic.tag.labels .grey.label::before, .ui.ui.ui.inverted.grey.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.black.labels .label, .ui.ui.ui.black.label { background-color: #1b1c1d; border-color: #1b1c1d; color: #fff; } /* Link */ .ui.black.labels a.label:hover, a.ui.ui.ui.black.label:hover { background-color: #27292a; border-color: #27292a; color: #fff; } /* Ribbon */ .ui.ui.ui.black.ribbon.label { border-color: #020203; } /* Basic */ .ui.basic.labels .black.label, .ui.ui.ui.basic.black.label { background: none #fff; border-color: #1b1c1d; color: #1b1c1d; } .ui.basic.labels a.black.label:hover, a.ui.ui.ui.basic.black.label:hover { background: none #fff; border-color: #27292a; color: #27292a; } /* Inverted */ .ui.inverted.labels .black.label, .ui.ui.ui.inverted.black.label { background-color: #545454; border-color: #545454; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.black.label:hover, a.ui.ui.ui.inverted.black.label:hover { background-color: #000000; border-color: #000000; color: #fff; } /* Inverted Ribbon */ .ui.ui.ui.inverted.black.ribbon.label { border-color: #616161; } /* Inverted Basic */ .ui.inverted.basic.labels .black.label, .ui.ui.ui.inverted.basic.black.label { background-color: #1b1c1d; border-color: #545454; color: rgba(255, 255, 255, 0.9); } .ui.inverted.basic.labels a.black.label:hover, a.ui.ui.ui.inverted.basic.black.label:hover { border-color: #000000; background-color: #1b1c1d; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .black.label, .ui.ui.ui.inverted.black.basic.tag.label { border: 1px solid #545454; } .ui.inverted.basic.tag.labels .black.label::before, .ui.ui.ui.inverted.black.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } /* ------------------- Horizontal -------------------- */ .ui.horizontal.labels .label, .ui.horizontal.label { margin: 0 0.5em 0 0; padding: 0.4em 0.833em; min-width: 3em; text-align: center; } /* ------------------- Circular -------------------- */ .ui.circular.labels .label, .ui.circular.label { min-width: 2em; min-height: 2em; padding: 0.5em !important; line-height: 1em; text-align: center; border-radius: 500rem; } .ui.empty.circular.labels .label, .ui.empty.circular.label { min-width: 0; min-height: 0; overflow: hidden; width: 0.5em; height: 0.5em; vertical-align: baseline; } /* ------------------- Pointing -------------------- */ .ui.pointing.label { position: relative; } .ui.attached.pointing.label { position: absolute; } .ui.pointing.label::before { background-color: inherit; background-image: inherit; border-width: 0; border-style: solid; border-color: inherit; } /* Arrow */ .ui.pointing.label::before { position: absolute; content: ""; transform: rotate(45deg); background-image: none; z-index: 2; width: 0.6666em; height: 0.6666em; transition: none; } /* --- Above --- */ .ui.pointing.label, .ui[class*="pointing above"].label { margin-top: 1em; } .ui.pointing.label::before, .ui[class*="pointing above"].label::before { border-width: 1px 0 0 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0; left: 50%; } /* --- Below --- */ .ui[class*="bottom pointing"].label, .ui[class*="pointing below"].label { margin-top: 0; margin-bottom: 1em; } .ui[class*="bottom pointing"].label::before, .ui[class*="pointing below"].label::before { border-width: 0 1px 1px 0; right: auto; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 100%; left: 50%; } /* --- Left --- */ .ui[class*="left pointing"].label { margin-top: 0; margin-left: 0.6666em; } .ui[class*="left pointing"].label::before { border-width: 0 0 1px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; left: 0; } /* --- Right --- */ .ui[class*="right pointing"].label { margin-top: 0; margin-right: 0.6666em; } .ui[class*="right pointing"].label::before { border-width: 1px 1px 0 0; transform: translateX(50%) translateY(-50%) rotate(45deg); top: 50%; right: 0; bottom: auto; left: auto; } /* Basic Pointing */ /* --- Above --- */ .ui.basic.pointing.label::before, .ui.basic[class*="pointing above"].label::before { margin-top: -1px; } /* --- Below --- */ .ui.basic[class*="bottom pointing"].label::before, .ui.basic[class*="pointing below"].label::before { bottom: auto; top: 100%; margin-top: 1px; } /* --- Left --- */ .ui.basic[class*="left pointing"].label::before { top: 50%; left: -1px; } /* --- Right --- */ .ui.basic[class*="right pointing"].label::before { top: 50%; right: -1px; } /* ------------------ Floating Label ------------------- */ .ui.floating.label { position: absolute; z-index: 100; top: -1em; right: 0; white-space: nowrap; transform: translateX(50%); } .ui.right.aligned.floating.label { transform: translateX(1.2em); } .ui.left.floating.label { left: 0; right: auto; transform: translateX(-50%); } .ui.left.aligned.floating.label { transform: translateX(-1.2em); } .ui.bottom.floating.label { top: auto; bottom: -1em; } /* ------------------- Sizes -------------------- */ .ui.labels .label, .ui.label { font-size: 0.85714286rem; } .ui.mini.labels .label, .ui.mini.label { font-size: 0.64285714rem; } .ui.tiny.labels .label, .ui.tiny.label { font-size: 0.71428571rem; } .ui.small.labels .label, .ui.small.label { font-size: 0.78571429rem; } .ui.large.labels .label, .ui.large.label { font-size: 1rem; } .ui.big.labels .label, .ui.big.label { font-size: 1.28571429rem; } .ui.huge.labels .label, .ui.huge.label { font-size: 1.42857143rem; } .ui.massive.labels .label, .ui.massive.label { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/