mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
Css cleanup. Added styling for tagify dropdown
This commit is contained in:
WBHarry
parent
128178847b
commit
407b70b662
10 changed files with 214 additions and 262 deletions
|
|
@ -1,45 +0,0 @@
|
|||
.slider-container {
|
||||
position: relative;
|
||||
background: lightslategray;
|
||||
|
||||
.slider-inner-container {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -60px;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
padding: 0 4px;
|
||||
border: @thinBorder solid black;
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 3px red);
|
||||
}
|
||||
|
||||
input:checked {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
& + .slider-icon {
|
||||
transform: translateX(17px);
|
||||
transition: 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-icon {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
transition: 1s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2704,46 +2704,6 @@ div.daggerheart.views.multiclass {
|
|||
background: inherit;
|
||||
border: 0;
|
||||
}
|
||||
.slider-container {
|
||||
position: relative;
|
||||
background: lightslategray;
|
||||
}
|
||||
.slider-container .slider-inner-container {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -60px;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.slider-container .slider-inner-container:hover {
|
||||
filter: drop-shadow(0 0 3px red);
|
||||
}
|
||||
.slider-container .slider-inner-container input:checked {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.slider-container .slider-inner-container input:checked + .slider-icon {
|
||||
transform: translateX(17px);
|
||||
transition: 1s;
|
||||
}
|
||||
.slider-container .slider-inner-container .slider-icon {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
transition: 1s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
.item-button.checked {
|
||||
background: green;
|
||||
}
|
||||
|
|
@ -2773,27 +2733,6 @@ div.daggerheart.views.multiclass {
|
|||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(#18162e, #f3c267) transparent;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
height: 34px;
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div span {
|
||||
font-weight: 400;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tagify tag div img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.application.sheet.daggerheart.dh-style.class .tab.settings .fieldsets-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
|
@ -3134,6 +3073,48 @@ div.daggerheart.views.multiclass {
|
|||
.application.setting.dh-style footer button {
|
||||
flex: 1;
|
||||
}
|
||||
.system-daggerheart .tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(#222, #efe6d8);
|
||||
height: 34px;
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.system-daggerheart .tagify tag div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
}
|
||||
.system-daggerheart .tagify tag div span {
|
||||
font-weight: 400;
|
||||
}
|
||||
.system-daggerheart .tagify tag div img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown {
|
||||
border: 1px solid light-dark(#222, #efe6d8) !important;
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item--active {
|
||||
background-color: light-dark(#222, #efe6d8);
|
||||
color: var(--color-dark-3);
|
||||
}
|
||||
.system-daggerheart.theme-light .tagify__dropdown {
|
||||
color: black;
|
||||
}
|
||||
.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__wrapper {
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
}
|
||||
.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__item--active {
|
||||
color: #efe6d8;
|
||||
}
|
||||
.sheet.daggerheart.dh-style .tab-navigation {
|
||||
margin: 5px 0;
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
@import './chat.less';
|
||||
@import './item.less';
|
||||
@import './application.less';
|
||||
@import './sheets//sheets.less';
|
||||
@import './components.less';
|
||||
@import './sheets/sheets.less';
|
||||
@import './dialog.less';
|
||||
@import '../node_modules/@yaireo/tagify/dist/tagify.css';
|
||||
|
||||
|
|
@ -96,14 +95,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// .window-content {
|
||||
// background: crimson;
|
||||
|
||||
// > form, >div {
|
||||
// background: url(../ui/parchment.jpg) repeat;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
#players {
|
||||
|
|
|
|||
|
|
@ -213,3 +213,62 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-daggerheart {
|
||||
.tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
height: 34px;
|
||||
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
|
||||
tag {
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagify__dropdown {
|
||||
border: 1px solid light-dark(@dark, @beige) !important;
|
||||
|
||||
.tagify__dropdown__wrapper {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
.tagify__dropdown__item--active {
|
||||
background-color: light-dark(@dark, @beige);
|
||||
color: var(--color-dark-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.theme-light {
|
||||
.tagify__dropdown {
|
||||
color: black;
|
||||
|
||||
.tagify__dropdown__wrapper {
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
}
|
||||
|
||||
.tagify__dropdown__item--active {
|
||||
color: @beige;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +1,46 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.dh-style.class {
|
||||
.tagify {
|
||||
background: light-dark(transparent, transparent);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
height: 34px;
|
||||
|
||||
border-radius: 3px;
|
||||
margin-right: 1px;
|
||||
|
||||
tag {
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab.settings {
|
||||
.fieldsets-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr;
|
||||
}
|
||||
|
||||
.list-items {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.item-line {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
h4 {
|
||||
font-family: @font-body;
|
||||
font-weight: lighter;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
.image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
a {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.dh-style.class {
|
||||
.tab.settings {
|
||||
.fieldsets-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr;
|
||||
}
|
||||
|
||||
.list-items {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.item-line {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
h4 {
|
||||
font-family: @font-body;
|
||||
font-weight: lighter;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
.image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
a {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
.daggerheart.sheet.class .guide .drop-section {
|
||||
width: 100%;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .drop-section legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .drop-section .drop-section-body {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .trait-input {
|
||||
text-align: center;
|
||||
min-width: 24px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item {
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item img {
|
||||
width: 30px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item div {
|
||||
text-align: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item i {
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .extra-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .extra-section .extra-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.daggerheart.sheet.class .guide-section-title-centered {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.daggerheart.sheet.class .inventory-section {
|
||||
width: 100%;
|
||||
border: 2px solid black;
|
||||
border-style: dotted;
|
||||
min-height: 80px;
|
||||
}
|
||||
.daggerheart.sheet.class .inventory-section .inventory-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.daggerheart.sheet.class .domain-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
65
styles/sheets/class.less
Normal file
65
styles/sheets/class.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.daggerheart.sheet.class .guide .drop-section {
|
||||
width: 100%;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .drop-section legend {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .drop-section .drop-section-body {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .trait-input {
|
||||
text-align: center;
|
||||
min-width: 24px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item {
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item img {
|
||||
width: 30px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item div {
|
||||
text-align: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .suggested-item i {
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .extra-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.daggerheart.sheet.class .guide .extra-section .extra-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.daggerheart.sheet.class .guide-section-title-centered {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.daggerheart.sheet.class .inventory-section {
|
||||
width: 100%;
|
||||
border: 2px solid black;
|
||||
border-style: dotted;
|
||||
min-height: 80px;
|
||||
}
|
||||
.daggerheart.sheet.class .inventory-section .inventory-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.daggerheart.sheet.class .domain-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue