Test a specific look for mobile only

This commit is contained in:
Bubka 2020-01-29 17:26:05 +01:00
parent c4fef56b04
commit ad15381fc9
2 changed files with 15 additions and 1 deletions

View File

@ -18,7 +18,7 @@
<!-- accounts -->
<div class="columns is-multiline is-centered is-gapless">
<div class="column is-narrow" v-for="account in filteredAccounts">
<div class="tfa has-background-black-bis has-text-white is-size-3" @click.stop="showAccount(account.id)">
<div class="tfa has-text-white is-size-3" @click.stop="showAccount(account.id)">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }}
<span class="is-family-primary is-size-6 has-text-grey">{{ account.account }}</span>

View File

@ -40,6 +40,20 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background-color: hsl(0, 0%, 7%); /*black-bis from Bulma*/
max-width: 400px;
}
@media screen and (max-width: 768px) {
.tfa {
border-radius: unset;
text-align: inherit;
border-bottom: 1px solid hsl(0, 0%, 21%);
background-color: hsl(0, 0%, 14%); /*black-ter from Bulma*/
margin: 0;
padding: 0 0.5rem 0.5rem 0.5rem;
max-width: none;
}
}
.tfa img {