254 lines
4.7 KiB
Sass
254 lines
4.7 KiB
Sass
$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 |