shiny-tutorials/style.css at master · PsyTeachR/shiny-tutorials · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
:root {
  --pink: #983E82;   /* hsl(315, 42%, 42%) */
  --orange: #E2A458; /* hsl( 33, 70%, 62%) */
  --yellow: #F5DC70; /* hsl( 49, 87%, 70%) */
  --green: #59935B;  /* hsl(122, 25%, 46%) */
  --blue: #467AAC;   /* hsl(209, 42%, 47%) */
  --purple: #61589C; /* hsl(248, 28%, 48%) */
  --grey: #2C3E4F;
}

/* rainbow borders */
div.navbar {
  margin-top: 18px;
  box-shadow: 0 -3px 0 0px var(--purple),
              0 -6px 0 0px var(--blue),
              0 -9px 0 0px var(--green),
              0 -12px 0 0px var(--yellow),
              0 -15px 0 0px var(--orange),
              0 -18px 0 0px var(--pink);
}

code {
  color: #6666FF !important;
}

.mm {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #553329;
  border-radius: 20px;
  margin: 5px;
  color: white;
  font: 20px Century, serif;
  text-align: center;
  line-height: 25px;
  box-shadow: 1px 1px 2px #666, inset 0 0 5px #666;
}
.mm.red { background-color: #C5463D; }
.mm.orange { background-color: #F67B3C; }
.mm.yellow { background-color: #F6D02F; }
.mm.green { background-color: #01B43D; }
.mm.blue { background-color: #25B3F1; }

img {
  max-width: 400px;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  margin-bottom: 1em;
}

div.abstract {
  display: none;
}

table tr.odd { background-color: hsla(230, 100%, 90%, .3); }
table tr.even { background-color: hsla(230, 100%, 90%, .1); }

/* set styles for alert boxes */

.alert {
  color: black;
}

.alert-danger {
  background-color: #ffb8b8;
}

.alert-warning {
  background-color: #fffad1;
}

.alert-info {
  background-color: #c2e3ff;
}

.alert-success {
  background-color: #cfffcc;
}