webinno/monitolite
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding a little bit of style

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/css/app.css
View file

@ -1,4 +1,10 @@
@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
**/
@ -167,6 +173,19 @@ html body .inactive {
background-color: #dfdfdf !important;
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 {
10%, 90% {

BIN
public/fonts/digital.ttf Normal file
View file

Binary file not shown.

41
public/js/app.js
View file

File diff suppressed because one or more lines are too long

25
resources/sass/app.scss
View file

@ -1,5 +1,15 @@
@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
**/
@ -217,6 +227,21 @@ html {
background-color: $inactive_color !important;
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;
}
}
}
}

7
resources/views/app.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="container">
<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>
<task-list></task-list>
</div>
@ -48,8 +48,5 @@
</script>
<style scoped>
.refreshed-time {
text-align: right;
font-size: .8rem;
}
</style>