mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add colored tags
This commit is contained in:
Jeremy Thomas
@@ -10886,32 +10886,6 @@ label.panel-block:hover {
|
||||
--bulma-danger-dark: #cc0f35;
|
||||
--bulma-danger-dark-hover: #b40e2f;
|
||||
--bulma-danger-dark-active: #9d0c29;
|
||||
--bulma-light-h: 0deg;
|
||||
--bulma-light-s: 0%;
|
||||
--bulma-light-l: 96%;
|
||||
--bulma-light: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l)));
|
||||
--bulma-light-hover: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 5%));
|
||||
--bulma-light-active: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 10%));
|
||||
--bulma-light-invert: var(--bulma-black-transparent);
|
||||
--bulma-light-light: whitesmoke;
|
||||
--bulma-light-light-hover: #e8e8e8;
|
||||
--bulma-light-light-active: #dbdbdb;
|
||||
--bulma-light-dark: #4a4a4a;
|
||||
--bulma-light-dark-hover: #3d3d3d;
|
||||
--bulma-light-dark-active: #303030;
|
||||
--bulma-dark-h: 0deg;
|
||||
--bulma-dark-s: 0%;
|
||||
--bulma-dark-l: 21%;
|
||||
--bulma-dark: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l)));
|
||||
--bulma-dark-hover: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 5%));
|
||||
--bulma-dark-active: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 10%));
|
||||
--bulma-dark-invert: var(--bulma-white);
|
||||
--bulma-dark-light: whitesmoke;
|
||||
--bulma-dark-light-hover: #e8e8e8;
|
||||
--bulma-dark-light-active: #dbdbdb;
|
||||
--bulma-dark-dark: #8a8a8a;
|
||||
--bulma-dark-dark-hover: #7d7d7d;
|
||||
--bulma-dark-dark-active: #707070;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@@ -11050,6 +11024,67 @@ label.panel-block:hover {
|
||||
a.box:active {
|
||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px #3273dc;
|
||||
}
|
||||
.delete {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.delete::before, .delete::after {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
.delete:hover, .delete:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.delete:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.notification {
|
||||
background-color: #242424;
|
||||
}
|
||||
.progress::-webkit-progress-bar {
|
||||
background-color: #363636;
|
||||
}
|
||||
.progress::-webkit-progress-value {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress::-moz-progress-bar {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress::-ms-fill {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress.is-white:indeterminate {
|
||||
background-image: linear-gradient(to right, white 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-black:indeterminate {
|
||||
background-image: linear-gradient(to right, #0a0a0a 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-light:indeterminate {
|
||||
background-image: linear-gradient(to right, whitesmoke 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-dark:indeterminate {
|
||||
background-image: linear-gradient(to right, #363636 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-primary:indeterminate {
|
||||
background-image: linear-gradient(to right, #00d1b2 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-link:indeterminate {
|
||||
background-image: linear-gradient(to right, #3273dc 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-info:indeterminate {
|
||||
background-image: linear-gradient(to right, #3298dc 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-success:indeterminate {
|
||||
background-image: linear-gradient(to right, #48c774 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-warning:indeterminate {
|
||||
background-image: linear-gradient(to right, #ffdd57 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-danger:indeterminate {
|
||||
background-image: linear-gradient(to right, #f14668 30%, #363636 30%);
|
||||
}
|
||||
.progress:indeterminate {
|
||||
background-color: #363636;
|
||||
background-image: linear-gradient(to right, #b5b5b5 30%, #363636 30%);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -11321,6 +11356,162 @@ label.panel-block:hover {
|
||||
color: var(--bulma-text);
|
||||
}
|
||||
|
||||
.content h1,
|
||||
.content h2,
|
||||
.content h3,
|
||||
.content h4,
|
||||
.content h5,
|
||||
.content h6 {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: var(--bulma-background);
|
||||
border-left-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.content table td,
|
||||
.content table th {
|
||||
border-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.content table th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content table thead td,
|
||||
.content table thead th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content table tfoot td,
|
||||
.content table tfoot th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: var(--bulma-scheme-main);
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
border-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.table td.is-selected,
|
||||
.table th.is-selected {
|
||||
background-color: var(--bulma-primary);
|
||||
color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table tr.is-selected {
|
||||
background-color: var(--bulma-primary);
|
||||
color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table tr.is-selected td,
|
||||
.table tr.is-selected th {
|
||||
border-color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table thead td,
|
||||
.table thead th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table tfoot td,
|
||||
.table tfoot th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
|
||||
background-color: var(--bulma-scheme-main-ter);
|
||||
}
|
||||
|
||||
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.tag:not(body) {
|
||||
background-color: var(--tag-background-color) !important;
|
||||
color: var(--tag-color) !important;
|
||||
--tag-background-color: var(--bulma-background);
|
||||
--tag-color: var(--bulma-text);
|
||||
}
|
||||
|
||||
.tag:not(body).is-primary {
|
||||
--tag-background-color: var(--bulma-primary);
|
||||
--tag-color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-primary.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), 7%);
|
||||
--tag-color: var(--bulma-primary);
|
||||
}
|
||||
|
||||
.tag:not(body).is-link {
|
||||
--tag-background-color: var(--bulma-link);
|
||||
--tag-color: var(--bulma-link-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-link.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), 7%);
|
||||
--tag-color: var(--bulma-link);
|
||||
}
|
||||
|
||||
.tag:not(body).is-info {
|
||||
--tag-background-color: var(--bulma-info);
|
||||
--tag-color: var(--bulma-info-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-info.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), 7%);
|
||||
--tag-color: var(--bulma-info);
|
||||
}
|
||||
|
||||
.tag:not(body).is-success {
|
||||
--tag-background-color: var(--bulma-success);
|
||||
--tag-color: var(--bulma-success-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-success.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), 7%);
|
||||
--tag-color: var(--bulma-success);
|
||||
}
|
||||
|
||||
.tag:not(body).is-warning {
|
||||
--tag-background-color: var(--bulma-warning);
|
||||
--tag-color: var(--bulma-warning-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-warning.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), 7%);
|
||||
--tag-color: var(--bulma-warning);
|
||||
}
|
||||
|
||||
.tag:not(body).is-danger {
|
||||
--tag-background-color: var(--bulma-danger);
|
||||
--tag-color: var(--bulma-danger-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-danger.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), 7%);
|
||||
--tag-color: var(--bulma-danger);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user