$avatarSize: 3em
$borderRadius: .3em

$backColor: #333
$tileColor: #222
$darkColor: #111
$halfColor: #999
$noneColor: #aaa
$foreColor: #eee

@mixin tile
  margin: $borderRadius
  background-color: $tileColor
  border-radius: $borderRadius
  padding: $borderRadius

*
  margin: 0
  padding: 0
  font-family: Verdana, Geneva, sans-serif
  scrollbar-width: thin

body
  background-color: $backColor
  color: $foreColor

a
  text-decoration: none
  color: $noneColor

input, select, button
  background-color: $backColor
  color: $foreColor
  border: 1px solid $halfColor

.icon
  width: 1em
  height: 1em
  vertical-align: middle

.text-icon
  font-weight: bold
  font-size: 1.2em

.note
  font-size: .7em
  vertical-align: text-top

.letter
  margin: 0 .5em

.colored
  color: orange

#errors
  position: absolute
  .error
    @include tile

#content
  display: flex
  flex-direction: column
  height: 100vh

#showManager
  position: absolute
  bottom: 0

#manager
  background-color: $tileColor
  border-radius: $borderRadius
  padding-left: 1em
  height: 1.3em
  display: flex
  justify-content: space-between

#layout-select
  display: flex

#services
  flex: 1
  overflow: hidden
  display: grid
  grid-gap: .2em
  grid-template-columns: repeat(8, minmax(0, 1fr))
  grid-template-rows: repeat(4, minmax(0, 1fr))
  justify-items: stretch
  .tile
    overflow: auto
    & > div
      height: 100%
      display: flex
      flex-direction: column
      .service-header
        .title, .settings
          @include tile
        .title
          font-size: large
          text-align: center
          font-weight: bold
        .settings .position
          float: right
          width: 1.2em
      .service-content
        overflow: hidden
  .service-loader
    display: inline-block
    width: 64px
    height: 64px
    &:after
      content: " "
      display: block
      width: 46px
      height: 46px
      margin: 1px
      border-radius: 50%
      border: 5px solid $noneColor
      border-color: $noneColor transparent $noneColor transparent
      animation: service-loader 1.2s linear infinite
    @keyframes service-loader
      0%
        transform: rotate(0deg)
      100%
        transform: rotate(360deg)

.mastodon
  .client
    display: flex
    height: 100%
    overflow-y: auto
    .header
      @include tile
    .list
      & > div
        @include tile
    .statues
      flex: 1
    .notifications
      max-width: 33%

    .account
      .name
        margin: 0 $borderRadius
        color: $foreColor
      .avatar
        float: left
        border-radius: $borderRadius
        width: $avatarSize
        height: $avatarSize
        background-size: $avatarSize $avatarSize
      div
        display: inline-block

    .status, .notification
      min-height: $avatarSize
      .content
        margin: .5em .5em .5em 1em
        &.avatared
          margin-left: .5em + $avatarSize
        .reblog
          font-size: .8em
        .spoiler
          margin-bottom: .5em
        .media
          margin: .5em
          position: relative
          display: inline-block
          & > *
            max-height: 10em
            max-width: 100%
          .gif
            position: absolute
            top: 0
            bottom: 0
            left: 0
            right: 0
            height: 100%
            width: 100%
            background-color: #00000044
            color: white
            padding: .5em
      .meta
        margin-left: 1em + $avatarSize
        font-size: .8em
        a
          margin: 0 .5em

    .date, .dismiss
      float: right

.openweathermap
  .loadable-block
    overflow: hidden
    display: flex
    flex: 1
    flex-direction: column
  .list
    display: flex
    flex-wrap: wrap
  .weather, .forecast
    flex: 1
    @include tile
  .forecast
    flex: 1
    overflow: hidden
    height: 100%
    .chart
      position: relative
      height: 100%
  .weather
    min-width: 17em
    border: 1px solid $tileColor
    display: grid
    grid-template-columns: auto auto
    grid-template-rows: 1.2em auto
    grid-template-areas: "header main" "data remove"
    &.selected
      border-color: $halfColor
    .header
      grid-area: header
      font-size: 1.2em
    .data
      grid-area: data
      margin-top: .5em
    .main
      grid-area: main
      justify-self: right
      p
        margin: $borderRadius
        display: inline
        vertical-align: top
    .remove
      grid-area: remove
      justify-self: right
      align-self: end
      font-size: .8em
  .ic
    overflow: hidden
    height: 30px
    display: inline-block
    img
      margin-top: -10px

.nextcloud-news
  .unreaded
    overflow-y: auto
  .news
    @include tile
    .date
      float: right
    .read
      margin-right: .5em
    .content
      padding: $borderRadius