mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-21 18:09:54 +02:00
Adjust styling of secret blocks (#2080)
* Adjust styling of secret blocks * Only show button when hovering over the secret section
This commit is contained in:
parent
3de9c2f909
commit
6e0d0b4e2c
3 changed files with 44 additions and 2 deletions
|
|
@ -597,6 +597,44 @@
|
|||
font-size: var(--font-size-12);
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
secret-block {
|
||||
position: relative;
|
||||
section.secret {
|
||||
background-color: @red-10;
|
||||
padding: 0;
|
||||
margin-top: 0.375rem;
|
||||
&.revealed {
|
||||
background-color: @green-10;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
button.reveal {
|
||||
--button-size: 0.875rem;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: min-content;
|
||||
padding: 1px 8px 0 8px;
|
||||
bottom: calc(100% - 0.4375rem - 2px);
|
||||
|
||||
background-color: var(--dh-window-button-color-bg); // todo: find a better var name
|
||||
border-color: var(--color-secret-border);
|
||||
color: var(--dh-window-button-color-text);
|
||||
font-size: var(--font-size-10);
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover button.reveal {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-daggerheart {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ body.game:is(.performance-low, .noblur) {
|
|||
}
|
||||
|
||||
button {
|
||||
background: light-dark(#e8e6e3, @deep-black);
|
||||
color: light-dark(@dark-blue, @beige);
|
||||
background: var(--dh-window-button-color-bg);
|
||||
color: var(--dh-window-button-color-text);
|
||||
border: 1px solid light-dark(@dark-blue, transparent);
|
||||
padding: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -107,6 +107,8 @@
|
|||
--dh-input-color-text: @dark;
|
||||
--dh-trait-color-bg: #b1afb6;
|
||||
--dh-trait-color-border: #8e8d96;
|
||||
--dh-window-button-color-bg: #e8e6e3;
|
||||
--dh-window-button-color-text: @dark-blue;
|
||||
}
|
||||
}
|
||||
@scope (.theme-dark) to (.themed) {
|
||||
|
|
@ -124,6 +126,8 @@
|
|||
--dh-input-color-text: @beige;
|
||||
--dh-trait-color-bg: #50433F;
|
||||
--dh-trait-color-border: #927952;
|
||||
--dh-window-button-color-bg: @deep-black;
|
||||
--dh-window-button-color-text: @beige;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue