daggerheart/styles/less/ui/settings/settings.less
Murilo Brito 2721dfe417
Feature/enhance style applications (#390)
* enhance settings style applications

* enhance beastform application and fix action selection style

* Start-aligned downtime move fieldsets

* requested changes

* fixing continue button style

* fixing double scroll bars in char sheet

* set currency above item list

* fix experience not appearing in sidebar

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
2025-07-22 03:04:17 +02:00

128 lines
2.8 KiB
Text

@import '../../utils/colors.less';
.daggerheart.dh-style.setting {
fieldset {
display: flex;
flex-direction: column;
gap: 4px;
&.two-columns {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
&.even {
grid-template-columns: 1fr 1fr;
}
}
&.start-align {
align-self: flex-start;
}
}
.setting-group-field {
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.settings-items {
display: flex;
flex-direction: column;
gap: 8px;
.settings-item {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid;
border-radius: 8px;
padding: 0 8px 0 0;
.settings-sub-item {
display: flex;
align-items: center;
gap: 8px;
img {
width: 60px;
border-radius: 8px 0 0 8px;
}
i {
font-size: 18px;
}
}
}
}
.settings-item-header {
display: flex;
align-items: center;
.profile {
height: 100px;
width: 100px;
object-fit: cover;
box-sizing: border-box;
cursor: pointer;
}
.item-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
width: 80%;
.item-name input[type='text'] {
font-size: 32px;
height: 42px;
text-align: center;
width: 90%;
transition: all 0.3s ease;
outline: 2px solid transparent;
border: 1px solid transparent;
&:hover[type='text'],
&:focus[type='text'] {
box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden);
}
}
}
}
.settings-col {
display: flex;
flex-direction: column;
gap: 4px;
}
.trait-array-container {
display: flex;
justify-content: space-evenly;
gap: 8px;
margin-bottom: 16px;
.trait-array-item {
position: relative;
display: flex;
justify-content: center;
label {
position: absolute;
top: -7px;
font-size: 12px;
font-variant: petite-caps;
}
input {
text-align: center;
}
}
}
}