Skip to content

Commit fc77123

Browse files
eddalmond1eddalmond1
committed
eli-420 split out CSS into it's own file
1 parent b708c04 commit fc77123

File tree

2 files changed

+222
-172
lines changed

2 files changed

+222
-172
lines changed

‎scripts/dashboard_report.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* NHS Dashboard Report Styles */
2+
:root {
3+
--nhs-blue: #005EB8;
4+
--nhs-white: #FFFFFF;
5+
--nhs-black: #231f20;
6+
--nhs-dark-grey: #425563;
7+
--nhs-mid-grey: #768692;
8+
--nhs-pale-grey: #E8EDEE;
9+
--nhs-warm-yellow: #FFB81C;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: "Frutiger W01", Arial, sans-serif;
20+
background: var(--nhs-pale-grey);
21+
color: var(--nhs-black);
22+
line-height: 1.5;
23+
}
24+
25+
.nhs-header {
26+
background-color: var(--nhs-blue);
27+
color: var(--nhs-white);
28+
padding: 24px 0;
29+
margin-bottom: 32px;
30+
}
31+
32+
.nhs-container {
33+
max-width: 960px;
34+
margin: 0 auto;
35+
padding: 0 16px;
36+
}
37+
38+
.nhs-logo {
39+
font-weight: 700;
40+
font-size: 24px;
41+
letter-spacing: -0.5px;
42+
display: inline-block;
43+
margin-right: 16px;
44+
padding-right: 16px;
45+
border-right: 1px solid rgba(255, 255, 255, 0.3);
46+
}
47+
48+
.report-title {
49+
font-size: 24px;
50+
font-weight: 600;
51+
display: inline-block;
52+
}
53+
54+
.report-meta {
55+
margin-top: 8px;
56+
font-size: 14px;
57+
opacity: 0.9;
58+
}
59+
60+
.content {
61+
padding-bottom: 48px;
62+
}
63+
64+
.section-header {
65+
background: var(--nhs-white);
66+
padding: 16px 24px;
67+
margin-bottom: 24px;
68+
border-left: 8px solid var(--nhs-blue);
69+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
70+
}
71+
72+
.section-header h2 {
73+
font-size: 24px;
74+
color: var(--nhs-blue);
75+
margin: 0;
76+
}
77+
78+
.env-section {
79+
margin-bottom: 48px;
80+
}
81+
82+
.env-title {
83+
font-size: 20px;
84+
color: var(--nhs-dark-grey);
85+
margin-bottom: 20px;
86+
padding-bottom: 8px;
87+
border-bottom: 2px solid #d8dde0;
88+
}
89+
90+
.widget-card {
91+
background: var(--nhs-white);
92+
border: 1px solid #d8dde0;
93+
border-bottom: 4px solid var(--nhs-blue);
94+
margin-bottom: 32px;
95+
padding: 24px;
96+
page-break-inside: avoid;
97+
}
98+
99+
.widget-header {
100+
margin-bottom: 16px;
101+
border-bottom: 1px solid var(--nhs-pale-grey);
102+
padding-bottom: 16px;
103+
}
104+
105+
.widget-title {
106+
font-size: 19px;
107+
font-weight: 600;
108+
color: var(--nhs-black);
109+
margin-bottom: 8px;
110+
}
111+
112+
.widget-description {
113+
font-size: 16px;
114+
color: var(--nhs-dark-grey);
115+
background: #f0f4f5;
116+
padding: 12px;
117+
border-left: 4px solid var(--nhs-mid-grey);
118+
}
119+
120+
.widget-image-container {
121+
margin-top: 20px;
122+
text-align: center;
123+
}
124+
125+
.widget-image {
126+
max-width: 100%;
127+
height: auto;
128+
border: 1px solid var(--nhs-pale-grey);
129+
}
130+
131+
.footer {
132+
text-align: center;
133+
padding: 32px 0;
134+
color: var(--nhs-mid-grey);
135+
font-size: 14px;
136+
border-top: 1px solid #d8dde0;
137+
margin-top: 48px;
138+
}
139+
140+
@media print {
141+
body {
142+
background: white;
143+
}
144+
.nhs-header {
145+
background: white;
146+
color: black;
147+
border-bottom: 2px solid var(--nhs-blue);
148+
}
149+
.widget-card {
150+
border: none;
151+
border-bottom: 1px solid #ccc;
152+
}
153+
.section-header {
154+
border: none;
155+
padding: 0;
156+
margin-bottom: 16px;
157+
}
158+
}

0 commit comments

Comments
 (0)