CH4004-R.github.io/styles.css at main · gcshearman/CH4004-R.github.io · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* css styles */

/* Resize navbar logo */
.navbar-brand img {
  min-height: 60px !important;    /* adjust as needed */
  width: auto !important;     /* preserves aspect ratio */
}


/* add tools-tabset css for the setup instructions */

.panel-tabset[data-group="tools-tabset"] .choose-your-tool {
  max-width: 90px;
  margin-right: 25px;
  margin-top: 30px;
  font-weight: 600;
  font-size: 1.0rem;
  text-align: left;
  vertical-align: center;
}

.panel-tabset[data-group="tools-tabset"] .tab-content {
  border: none;
  padding-left: 5px;
}

.panel-tabset[data-group="tools-tabset"] .nav-tabs {
  border-bottom: none;
}

.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
  text-align: center;
  margin-right: 20px;
  margin-top: 10px;
  color: inherit;
  width: 120px;
  height: 120px;
  font-size: 0.8em;
}


/* Inactive tabs */
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
  border: 1.5px solid black;   /* Thinner border */
  border-radius: 10px;
}

/* Active tab */
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
  border: 3px solid black;   /* Thicker border for active */
}


.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
   border-color: black;
   border-width: 5px;
}

.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active,
.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
  border-color: black;
  border-width: 3px;
}

.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
  height: 80%;
  display: block;
  margin-bottom: 2px;
}

.highlight-yellow {
  background-color: #fff176;
  padding: 2px 4px;
  border-radius: 0px;
}
.highlight-blue {
  background-color: #cde7ff;
  padding: 2px 3px;
  border-radius: 0px;
}
.highlight-green {
  background-color: #b2ff59;  /* neon lime highlighter green */
  padding: 2px 3px;
  border-radius: 0px;
}
.highlight-pink {
  background-color: #ff80ab;  /* fluorescent pink */
  padding: 2px 3px;
  border-radius: 0px;
}

/* ==========================
   WebR Tag
   ========================== */
.tag-webr {
  display: inline-block;
  background-color: #00c0ff;   /* bright turquoise */
  color: black;                /* readable text */
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.9em;
  vertical-align: middle;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* ==========================
   RStudio Tag
   ========================== */
.tag-rstudio {
  display: inline-block;
  background-color: #3465a4;   /* RStudio blue */
  color: white;                /* readable on dark background */
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.9em;
  vertical-align: middle;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}