frontend/src/styles/theme.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

:root {
    --ns-primary: #0063AB;
    --ns-accent: #00a8e8;
    --ns-bg: #003459;
    --ns-bg-light-30: rgba(0, 152, 189, 0.3);
    --ns-bg-dark-100: rgba(0, 65, 101, 1.0);
    --ns-bg-dark-50: rgba(0, 65, 101, 0.5);
    --offwhite: #dfd7d7;
}

body {
    /*background-image: url('/assets/images/add_model_background.jpg');*/
    background-color: var(--ns-bg);
}

.bg-light {
    background-color: var(--ns-bg-light-30) !important;
}

.ns-border-primary {
    border: 1px solid var(--ns-primary);
}

.ns-bg-dark-50 {
    background-color: var(--ns-bg-dark-50) !important;
}

.ns-bg-dark-100 {
    background-color: var(--ns-bg-dark-100) !important;
}

a {
    color: var(--ns-primary) !important;
}

.text-offwhite {
    color: var(--offwhite) !important;
}


/* Ripple effect */

.bubble {
    background-position: center;
    transition: background 0.8s;
}

.bubble:hover {
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}

.bubble:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
}