diff options
| author | Frans Bongers <fransbongers@franss-mbp.home> | 2024-11-30 22:18:21 +0100 |
|---|---|---|
| committer | Frans Bongers <fransbongers@franss-mbp.home> | 2024-11-30 22:18:21 +0100 |
| commit | f05a9531508822f5dfb51105334444b53fe11b3e (patch) | |
| tree | cf3b688ef5d05992a78a7e70942188f1a8712a13 /land-and-freedom.scss | |
| parent | 629206f773d5fd4c9247db03e3a705c4dcdc77c4 (diff) | |
| download | land-and-freedom-f05a9531508822f5dfb51105334444b53fe11b3e.tar.gz | |
ui setup bonuses and medaillons
Diffstat (limited to 'land-and-freedom.scss')
| -rw-r--r-- | land-and-freedom.scss | 61 |
1 files changed, 53 insertions, 8 deletions
diff --git a/land-and-freedom.scss b/land-and-freedom.scss index fc8e962..5dd9325 100644 --- a/land-and-freedom.scss +++ b/land-and-freedom.scss @@ -61,6 +61,7 @@ main { flex-direction: column; align-items: center; padding: 4px; + border-radius: 20px; // background-color: yellow; // opacity: 0.5; } @@ -74,6 +75,7 @@ main { .front[data-front-id='m'] { width: 104px; height: 114px; + border-radius: 23px; } .card { @@ -122,6 +124,7 @@ main { } .card.action:hover, +.card.selected, .front.action:hover, .standee.action:hover { box-shadow: 0 0 0 3px $selected-color; @@ -137,12 +140,54 @@ main { } } -#log { background-color: floralwhite; } -#log .h1, #log .h2 { - font-size: 10px; - padding-top: 2px; - padding-bottom: 2px; - text-align: center; +.bonus { + box-sizing: border-box; + position: absolute; + width: 54px; + height: 54px; + background-size: cover; + background-repeat: no-repeat; +} + +@for $i from 0 through 1 { + .bonus[data-bonus-id='#{$i}'][data-bonus-on='0'] { + background-image: url('images/bonus/bonus_#{$i}_off.png'); + } + .bonus[data-bonus-id='#{$i}'][data-bonus-on='1'] { + background-image: url('images/bonus/bonus_#{$i}_on.png'); + } +} + +.medaillon { + box-sizing: border-box; + position: absolute; + width: 47px; + height: 47px; + background-size: cover; + background-repeat: no-repeat; + box-shadow: 0 0 0 1px #333; + border-radius: 10px; +} + +@for $i from 0 through 8 { + .medaillon[data-medaillon-id='#{$i}'] { + background-image: url('images/medaillons/medaillon_#{$i}.png'); + } +} + +#log { + background-color: floralwhite; +} +#log .h1, +#log .h2 { + font-size: 10px; + padding-top: 2px; + padding-bottom: 2px; + text-align: center; +} +#log .h1 { + background-color: hsl(4, 40%, 73%); +} +#log .h2 { + background-color: hsl(250, 40%, 83%); } -#log .h1 { background-color: hsl(4, 40%, 73%); } -#log .h2 { background-color: hsl(250, 40%, 83%); }
\ No newline at end of file |