github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

scss changes

pull/755/head
hunterlong 2020-07-19 20:47:45 -07:00
parent 0becc6eced
commit 1964b0e4f2
5 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/scss/base.scss
View File

@ -252,10 +252,6 @@
} }
} }
.mini_success {
background-color: #f3f3f3;
}
.no-decoration { .no-decoration {
color: black; color: black;
text-decoration: none; text-decoration: none;
@ -266,10 +262,6 @@
text-decoration: none; text-decoration: none;
} }
.mini_error {
background-color: #ffbbbb;
}
.btn-white { .btn-white {
background-color: white; background-color: white;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;

18
frontend/src/assets/scss/layout.scss
View File

@ -18,6 +18,22 @@ A:HOVER {
color: darken($text-color, 30%) !important; color: darken($text-color, 30%) !important;
} }
.day-success {
background-color: $day-success-background;
}
.day-success:HOVER {
background-color: lighten($day-success-background, 2%) !important;
}
.day-error {
background-color: $day-error-background;
}
.day-error:HOVER {
background-color: lighten($day-error-background, 2%) !important;
}
.contain-card { .contain-card {
.card-header { .card-header {
@ -82,7 +98,7 @@ A:HOVER {
} }
.list-group-item:HOVER { .list-group-item:HOVER {
background-color: darken($group-list-background, 12%) !important; background-color: lighten($group-list-background, 2%) !important;
} }
.list-group-item A { .list-group-item A {

33
frontend/src/assets/scss/variables.scss
View File

@ -1,25 +1,28 @@
/* Index Page */ /* Index Page */
$background-color: #313131; $background-color: #f5f5f5;
$container-color: #494949; $container-color: #ffffff;
$text-color: #e3e3e3; $text-color: #1d1d1d;
$max-width: 860px; $max-width: 860px;
$title-color: #ffffff; $title-color: #4e4e4e;
$description-color: #d2d2d2; $description-color: #828282;
$subtitle-color: #747474; $subtitle-color: #747474;
$mobile-card-shadow: 2px 3px 10px #b7b7b7; $mobile-card-shadow: 2px 3px 10px #b7b7b7;
$group-list-background: #282828;
$group-list-title: #ea8114; $group-list-background: #fafafa;
$navbar-color: #ea8114; $group-list-title: #474747;
$navbar-background: #323232; $navbar-color: #1c1c1c;
$input-background: #323232; $navbar-background: #ffffff;
$input-color: #f5821c; $input-background: #fdfdfd;
$input-border: 1px solid #e78033; $input-color: #4e4e4e;
$input-border: 1px solid #c9c9c9;
$day-success-background: #18ce08;
$day-error-background: #d50a0a;
/* Status Container */ /* Status Container */
$card-background: #2a2a2a; $card-background: #fcfcfc;
$card-border: 1px solid rgba(0,0,0,.125); $card-border: 1px solid rgba(76, 76, 76, 0.12);
$card-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08); $card-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
$service-title: #f17833; $service-title: #3e3e3e;
$service-title-size: 1.8rem; $service-title-size: 1.8rem;
$service-stats-color: #4f4f4f; $service-stats-color: #4f4f4f;
$service-description-color: #fff; $service-description-color: #fff;

2
frontend/src/components/Index/GroupServiceFailures.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="d-flex mt-3 mb-2"> <div class="d-flex mt-3 mb-2">
<div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'mini_error': d.amount > 0, 'mini_success': d.amount === 0}"> <div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
<span v-if="d.amount != 0" class="small">{{d.amount}}</span> <span v-if="d.amount != 0" class="small">{{d.amount}}</span>
</div> </div>
</div> </div>

4
frontend/src/forms/Notifier.vue
View File

@ -128,11 +128,11 @@
</button> </button>
</div> </div>
<div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0"> <div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
<button @click.prevent="testNotifier('success')" :disabled="loadingTest" class="btn btn-outline-dark btn-block text-capitalize test-notifier"> <button @click.prevent="testNotifier('success')" :disabled="loadingTest" class="btn btn-secondary btn-block text-capitalize test-notifier">
<font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Success"}}</button> <font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Success"}}</button>
</div> </div>
<div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0"> <div class="col-12 col-md-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
<button @click.prevent="testNotifier('failure')" :disabled="loadingTest" class="btn btn-outline-dark btn-block text-capitalize test-notifier"> <button @click.prevent="testNotifier('failure')" :disabled="loadingTest" class="btn btn-secondary btn-block text-capitalize test-notifier">
<font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Failure"}}</button> <font-awesome-icon v-if="loadingTest" icon="circle-notch" class="mr-2" spin/>{{loadingTest ? "Loading..." : "Test Failure"}}</button>
</div> </div>
</div> </div>