172 lines
3.0 KiB
Sass
172 lines
3.0 KiB
Sass
// reusable: cell internal padding and color
|
|
|
|
$font-size-large: 24px
|
|
$font-size-medium: 20px
|
|
$font-size-small: 16px
|
|
|
|
$bg-hue: 15deg
|
|
$fg-hue: 280deg
|
|
|
|
$bg-hud: oklch(0.8 0.05 $bg-hue)
|
|
$bg-page: oklch(0.2 0.05 $bg-hue)
|
|
$bg-tile-insetbutton: oklch(0.7 0.05 $bg-hue)
|
|
$bg-tile-insetbutton-hover: oklch(0.95 0.03 $bg-hue)
|
|
$bg-tile: oklch(0.8 0.05 $bg-hue)
|
|
$fg-shadow: oklch(0.05 0.05 $fg-hue)
|
|
|
|
$padding-between: 1em
|
|
$padding-inside: $padding-between / 2
|
|
|
|
$border-radius: 2px
|
|
|
|
|
|
.large
|
|
font-size: $font-size-large
|
|
|
|
.medium
|
|
font-size: $font-size-medium
|
|
|
|
.small
|
|
font-size: $font-size-small
|
|
|
|
@mixin cell-internal
|
|
border-radius: $border-radius
|
|
padding: $padding-inside
|
|
box-sizing: border-box
|
|
border: 1px $fg-shadow solid
|
|
box-shadow: 4px 4px 4px 2px $fg-shadow
|
|
|
|
/* general layout */
|
|
body
|
|
background-color: $bg-page
|
|
|
|
.hud
|
|
margin-bottom: $padding-between
|
|
background-color: $bg-hud
|
|
padding: $padding-inside
|
|
|
|
.tiles
|
|
display: flex
|
|
flex-flow: row wrap
|
|
column-gap: $padding-between
|
|
row-gap: $padding-between
|
|
justify-content: center
|
|
align-items: start
|
|
margin-bottom: 1em
|
|
|
|
/* tiles */
|
|
.tile
|
|
display: block
|
|
width: 360px
|
|
@include cell-internal
|
|
background-color: $bg-tile
|
|
|
|
/* action tiles */
|
|
.actions
|
|
display: flex
|
|
flex-flow: column
|
|
column-gap: $padding-between
|
|
|
|
.action
|
|
border-radius: $border-radius
|
|
padding: $padding-inside
|
|
font-size: $font-size-medium
|
|
display: flex
|
|
flex-flow: row
|
|
justify-content: space-between
|
|
align-items: center
|
|
.text
|
|
.cost
|
|
display: flex
|
|
flex-flow: row
|
|
|
|
img.icon
|
|
height: 0.9em
|
|
|
|
&.unavailable
|
|
opacity: 30%
|
|
|
|
&.available
|
|
cursor: pointer
|
|
box-sizing: content-box
|
|
border: 1px $bg-tile-insetbutton solid
|
|
|
|
&:hover
|
|
background-color: $bg-tile-insetbutton-hover
|
|
|
|
|
|
/* hud layout */
|
|
.hud
|
|
display: flex
|
|
flex-flow: row
|
|
justify-content: space-between
|
|
align-items: center
|
|
|
|
.message
|
|
display: block
|
|
|
|
.resources
|
|
font-size: $font-size-medium
|
|
display: flex
|
|
flex-flow: row
|
|
column-gap: $padding-between
|
|
|
|
/* icons */
|
|
img.icon
|
|
height: 1em
|
|
|
|
/* lair tiles */
|
|
.tile
|
|
.lair
|
|
display: flex
|
|
flex-flow: column
|
|
row-gap: $padding-inside
|
|
|
|
.agent
|
|
$icon-dimension: 57px
|
|
display: flex
|
|
flex-flow: row
|
|
column-gap: $padding-inside
|
|
border-radius: $border-radius
|
|
height: $icon-dimension
|
|
|
|
.portrait
|
|
background-color: $bg-tile-insetbutton
|
|
border-radius: $border-radius
|
|
width: $icon-dimension
|
|
height: $icon-dimension
|
|
|
|
.caption
|
|
flex-grow: 1
|
|
|
|
display: flex
|
|
flex-flow: column
|
|
justify-content: center
|
|
row-gap: $padding-inside / 4
|
|
|
|
|
|
.progressBar
|
|
position: relative
|
|
padding: 0.15em
|
|
|
|
.backdrop
|
|
border-radius: $border-radius
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
background-color: $bg-tile-insetbutton
|
|
|
|
.caption
|
|
text-align: center
|
|
position: relative
|
|
color: #fff
|
|
font-size: 0.7em
|
|
height: 1em
|
|
|
|
&.disabled
|
|
.caption
|
|
color: #000
|