2020-06-16 18:50:46 +02:00
|
|
|
.ftIconButton
|
|
|
|
display: flex
|
|
|
|
flex-flow: row wrap
|
|
|
|
justify-content: space-evenly
|
|
|
|
position: relative
|
2020-06-23 17:47:19 +02:00
|
|
|
user-select: none
|
2020-06-16 18:50:46 +02:00
|
|
|
|
|
|
|
.iconButton
|
|
|
|
width: 1em
|
|
|
|
height: 1em
|
|
|
|
border-radius: 50%
|
|
|
|
cursor: pointer
|
|
|
|
transition: background 0.15s ease-out
|
|
|
|
|
|
|
|
&.shadow
|
|
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
|
|
|
|
|
|
|
&.base
|
|
|
|
background-color: var(--card-bg-color)
|
|
|
|
color: var(--primary-text-color)
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
background-color: var(--side-nav-hover-color)
|
|
|
|
|
|
|
|
&:active
|
|
|
|
background-color: var(--side-nav-active-color)
|
|
|
|
|
2020-12-18 05:21:17 +01:00
|
|
|
&.base-no-default
|
|
|
|
&:hover
|
|
|
|
background-color: var(--side-nav-hover-color)
|
|
|
|
|
|
|
|
&:active
|
|
|
|
background-color: var(--side-nav-active-color)
|
|
|
|
|
2020-06-16 18:50:46 +02:00
|
|
|
&.primary
|
|
|
|
background-color: var(--primary-color)
|
|
|
|
color: var(--text-with-main-color)
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
background-color: var(--primary-color-hover)
|
|
|
|
|
|
|
|
&:active
|
|
|
|
background-color: var(--primary-color-active)
|
|
|
|
|
|
|
|
&.secondary
|
|
|
|
background-color: var(--accent-color)
|
|
|
|
color: var(--text-with-accent-color)
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
background-color: var(--accent-color-hover)
|
|
|
|
|
|
|
|
&:active
|
|
|
|
background-color: var(--accent-color-active)
|
|
|
|
|
2021-01-15 00:03:23 +01:00
|
|
|
&.favorite
|
|
|
|
color: var(--favorite-icon-color)
|
|
|
|
|
2020-06-16 18:50:46 +02:00
|
|
|
.iconDropdown
|
2020-09-21 01:15:59 +02:00
|
|
|
display: none
|
2020-06-16 18:50:46 +02:00
|
|
|
position: absolute
|
|
|
|
text-align: center
|
|
|
|
list-style-type: none
|
2020-06-17 16:02:31 +02:00
|
|
|
z-index: 3
|
2020-06-16 18:50:46 +02:00
|
|
|
margin-top: 45px
|
|
|
|
font-size: 12px
|
|
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
|
|
|
background-color: var(--side-nav-color)
|
|
|
|
color: var(--secondary-text-color)
|
|
|
|
user-select: none
|
|
|
|
|
2020-09-21 01:15:59 +02:00
|
|
|
&:focus
|
|
|
|
display: inline
|
|
|
|
|
2020-06-16 18:50:46 +02:00
|
|
|
&.left
|
2020-07-12 01:11:40 +02:00
|
|
|
right: calc(50% - 10px)
|
2020-06-16 18:50:46 +02:00
|
|
|
|
|
|
|
&.right
|
2020-07-12 01:11:40 +02:00
|
|
|
left: calc(50% - 10px)
|
2020-06-16 18:50:46 +02:00
|
|
|
|
|
|
|
.list
|
|
|
|
margin: 0
|
|
|
|
padding: 0
|
|
|
|
list-style-type: none
|
|
|
|
|
|
|
|
.listItem
|
2022-05-30 00:33:27 +02:00
|
|
|
padding: 8px 10px
|
2020-06-16 18:50:46 +02:00
|
|
|
margin: 0
|
|
|
|
white-space: nowrap
|
|
|
|
cursor: pointer
|
|
|
|
transition: background 0.2s ease-out
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
background-color: var(--side-nav-hover-color)
|
|
|
|
transition: background 0.2s ease-in
|
|
|
|
|
|
|
|
&:active
|
|
|
|
background-color: var(--side-nav-active-color)
|
|
|
|
transition: background 0.1s ease-in
|
2022-05-30 00:33:27 +02:00
|
|
|
|
|
|
|
.listItemDivider
|
|
|
|
width: 95%
|
|
|
|
margin: 1px auto
|
|
|
|
border-top: 1px solid var(--tertiary-text-color)
|
|
|
|
// Too "visible" with current color
|
|
|
|
opacity: 50%
|
|
|
|
|