mirror of
https://github.com/h44z/wg-portal.git
synced 2025-10-05 07:56:17 +00:00
107 lines
2.2 KiB
CSS
107 lines
2.2 KiB
CSS
a.disabled {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
color: #888888;
|
|
}
|
|
|
|
.text-wrap {
|
|
overflow-break: anywhere;
|
|
}
|
|
|
|
.asc::after {
|
|
content: " ↑";
|
|
}
|
|
|
|
.desc::after {
|
|
content: " ↓";
|
|
}
|
|
|
|
/* style the background and the text color of the input ... */
|
|
.vue-tags-input {
|
|
max-width: 100% !important;
|
|
background-color: #f7f7f9 !important;
|
|
padding: 0 0;
|
|
}
|
|
|
|
.vue-tags-input .ti-input {
|
|
padding: 0 0;
|
|
border: none !important;
|
|
transition: border-bottom 200ms ease;
|
|
}
|
|
|
|
.vue-tags-input .ti-new-tag-input {
|
|
background: transparent;
|
|
color: var(--bs-body-color);
|
|
padding: 0.75rem 1.5rem !important;
|
|
}
|
|
|
|
|
|
/* style the placeholders color across all browser */
|
|
.vue-tags-input ::-webkit-input-placeholder {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
.vue-tags-input .ti-input::placeholder {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
.vue-tags-input ::-moz-placeholder {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
.vue-tags-input :-ms-input-placeholder {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
.vue-tags-input :-moz-placeholder {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
/* default styles for all the tags */
|
|
.vue-tags-input .ti-tag {
|
|
position: relative;
|
|
background: #ffffff;
|
|
border: 2px solid var(--bs-body-color);
|
|
margin: 6px;
|
|
color: var(--bs-body-color);
|
|
}
|
|
|
|
[data-bs-theme=dark] .vue-tags-input .ti-tag {
|
|
position: relative;
|
|
background: #3c3c3c;
|
|
border: 2px solid var(--bs-body-color);
|
|
margin: 6px;
|
|
color: var(--bs-body-color);
|
|
}
|
|
|
|
/* the styles if a tag is invalid */
|
|
.vue-tags-input .ti-tag.ti-invalid {
|
|
background-color: #e88a74;
|
|
}
|
|
|
|
/* if the user input is invalid, the input color should be red */
|
|
.vue-tags-input .ti-new-tag-input.ti-invalid {
|
|
color: #e88a74;
|
|
}
|
|
|
|
/* if a tag or the user input is a duplicate, it should be crossed out */
|
|
.vue-tags-input .ti-duplicate span,
|
|
.vue-tags-input .ti-new-tag-input.ti-duplicate {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* if the user presses backspace, the complete tag should be crossed out, to mark it for deletion */
|
|
.vue-tags-input .ti-tag:after {
|
|
transition: transform .2s;
|
|
position: absolute;
|
|
content: '';
|
|
height: 2px;
|
|
width: 108%;
|
|
left: -4%;
|
|
top: calc(50% - 1px);
|
|
background-color: #000;
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
.vue-tags-input .ti-deletion-mark:after {
|
|
transform: scaleX(1);
|
|
} |