You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Radarr/frontend/src/Components/Label.css

131 lines
2.3 KiB

.label {
display: inline-block;
margin: 2px;
border: 1px solid;
border-radius: 2px;
color: var(--white);
text-align: center;
white-space: nowrap;
line-height: 1;
cursor: default;
}
/** Kinds **/
.danger {
border-color: var(--dangerColor);
background-color: var(--dangerColor);
&.outline {
color: var(--dangerColor);
}
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
}
}
.default {
border-color: var(--themeLightColor);
background-color: var(--themeLightColor);
&.outline {
color: var(--themeLightColor);
}
}
.disabled {
border-color: var(--disabledColor);
background-color: var(--disabledColor);
&.outline {
color: var(--offWhite);
}
}
.info {
border-color: var(--infoColor);
background-color: var(--infoColor);
color: var(--infoTextColor);
&.outline {
color: var(--infoColor);
}
}
.inverse {
border-color: var(--inverseLabelColor);
background-color: var(--inverseLabelColor);
color: var(--inverseLabelTextColor);
&.outline {
background-color: var(--inverseLabelTextColor) !important;
color: var(--inverseLabelColor);
}
}
.primary {
border-color: var(--primaryColor);
background-color: var(--primaryColor);
&.outline {
color: var(--primaryColor);
}
}
.success {
border-color: var(--successColor);
background-color: var(--successColor);
color: #eee;
&.outline {
color: var(--successColor);
}
}
.warning {
border-color: var(--warningColor);
background-color: var(--warningColor);
&.outline {
color: var(--warningColor);
}
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
}
}
.queue {
border-color: var(--queueColor);
background-color: var(--queueColor);
&.outline {
color: var(--queueColor);
}
}
/** Sizes **/
.small {
padding: 1px 3px;
font-size: 11px;
}
.medium {
padding: 2px 5px;
font-size: 12px;
}
.large {
padding: 3px 7px;
font-weight: bold;
font-size: $defaultFontSize;
}
/** Outline **/
.outline {
background-color: var(--disabledLabelColor);
}