Adding a little bit of style

This commit is contained in:
Axel 2021-12-20 15:08:44 +01:00
parent bece9b724e
commit ca765a1328
5 changed files with 225 additions and 219 deletions

View file

@ -1,4 +1,10 @@
@import url(https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap);
@font-face {
font-family: "Digital7";
src: url("/fonts/digital.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/** /**
* SETTINGS * SETTINGS
**/ **/
@ -167,6 +173,19 @@ html body .inactive {
background-color: #dfdfdf !important; background-color: #dfdfdf !important;
opacity: 0.5; opacity: 0.5;
} }
html body .refreshed-time {
text-align: right;
font-size: 0.8rem;
margin-bottom: 2rem;
}
html body .refreshed-time .clock {
font-family: Digital7;
font-size: 1.2rem;
background-color: #000;
border-radius: 4px;
color: #FFF;
padding: 0.3rem 0.5rem;
}
@-webkit-keyframes shake { @-webkit-keyframes shake {
10%, 90% { 10%, 90% {

BIN
public/fonts/digital.ttf Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
@font-face {
font-family: 'Digital7';
src:
url('/fonts/digital.ttf') format('truetype')
;
font-weight: normal;
font-style: normal;
}
/** /**
* SETTINGS * SETTINGS
**/ **/
@ -217,6 +227,21 @@ html {
background-color: $inactive_color !important; background-color: $inactive_color !important;
opacity: 0.5; opacity: 0.5;
} }
.refreshed-time {
text-align: right;
font-size: .8rem;
margin-bottom: 2rem;
.clock {
font-family: Digital7;
font-size: 1.2rem;
background-color: #000;
border-radius: 4px;
color: #FFF;
padding: .3rem .5rem;
}
}
} }
} }

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<h1>MonitoLite Dashboard</h1> <h1>MonitoLite Dashboard</h1>
<p class="refreshed-time">Data refreshed: {{ refreshedTime }}</p> <p class="refreshed-time">Last refresh: <br /><span class="clock">{{ refreshedTime }}</span></p>
<quick-view></quick-view> <quick-view></quick-view>
<task-list></task-list> <task-list></task-list>
</div> </div>
@ -48,8 +48,5 @@
</script> </script>
<style scoped> <style scoped>
.refreshed-time {
text-align: right;
font-size: .8rem;
}
</style> </style>