Skip to content

Commit 5651cf5

Browse files
turtledreamsturtledreams
authored
Merge pull request #23 from Countly/ui-glowup
UI Update
2 parents af4022c + 35fb0e4 commit 5651cf5

File tree

11 files changed

+551
-220
lines changed

11 files changed

+551
-220
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ XX.XX.X
44
* Refreshed server URL and app key placeholders.
55
* Enhanced push integration with the latest Android SDK calls.
66
* Streamlined Android SDK integration steps for the current version.
7+
* Updated CSS all around
8+
* Added highlight.js 11.9
9+
* Removed force Post from web, iOS and Android

‎css/style.css‎

Lines changed: 225 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
/* Move down content because we have a fixed navbar that is 50px tall */
21
body {
3-
padding-bottom: 20px;
4-
background-color: #F7FAFC;
2+
padding-bottom: 24px;
3+
background-color: #F3F4F6;
4+
color: #1F2933;
5+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
58
}
69

710
.iconstuff
@@ -86,6 +89,111 @@ textarea{
8689
width: 100%;
8790
height: 500px;
8891
}
92+
93+
/* code snippet styling */
94+
.code,
95+
textarea.no-translate,
96+
textarea.code {
97+
background-color: #020617;
98+
color: #E5E7EB;
99+
border-radius: 12px;
100+
border: 1px solid #111827;
101+
padding: 12px 14px;
102+
font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
103+
font-size: 13px;
104+
line-height: 1.5;
105+
box-shadow: 0 18px 40px rgba(15,23,42,0.75);
106+
resize: vertical;
107+
}
108+
109+
.code:focus,
110+
textarea.no-translate:focus {
111+
outline: none;
112+
box-shadow: inset 0 0 0 1px #4F46E5, 0 18px 40px rgba(79,70,229,0.55);
113+
}
114+
115+
.code-toolbar {
116+
display: flex;
117+
align-items: center;
118+
justify-content: flex-end;
119+
margin-bottom: 6px;
120+
}
121+
122+
.code-toolbar.text-right {
123+
justify-content: space-between;
124+
}
125+
126+
/* highlighted code shells (used on iOS page) */
127+
.code-shell {
128+
margin-top: 10px;
129+
border-radius: 12px;
130+
background: transparent;
131+
box-shadow: 0 18px 40px rgba(15,23,42,0.75);
132+
overflow: hidden;
133+
}
134+
135+
.code-shell .code-toolbar {
136+
background: #020617;
137+
border-radius: 12px 12px 0 0;
138+
padding: 6px 10px;
139+
border-bottom: 1px solid #111827;
140+
margin-bottom: 0;
141+
justify-content: flex-end;
142+
}
143+
144+
.code-view {
145+
margin: 0;
146+
background-color: #020617;
147+
border-radius: 0 0 12px 12px;
148+
border-top: none;
149+
}
150+
151+
.code-view code {
152+
display: block;
153+
padding: 12px 14px;
154+
font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
155+
font-size: 13px;
156+
line-height: 1.5;
157+
}
158+
159+
.code-source {
160+
position: absolute;
161+
left: -9999px;
162+
width: 1px;
163+
height: 1px;
164+
opacity: 0;
165+
border: none;
166+
box-shadow: none;
167+
}
168+
169+
.btn-copy-icon {
170+
background: transparent;
171+
border: none;
172+
padding: 4px 6px;
173+
border-radius: 999px;
174+
color: #9CA3AF;
175+
display: inline-flex;
176+
align-items: center;
177+
justify-content: center;
178+
cursor: pointer;
179+
transition: background-color 120ms ease-out, color 120ms ease-out, transform 80ms ease-out;
180+
}
181+
182+
.btn-copy-icon:hover {
183+
background-color: rgba(148,163,184,0.16);
184+
color: #E5E7EB;
185+
transform: translateY(-1px);
186+
}
187+
188+
.btn-copy-icon:focus {
189+
outline: none;
190+
box-shadow: 0 0 0 2px rgba(79,70,229,0.5);
191+
}
192+
193+
.btn-copy-icon svg {
194+
width: 16px;
195+
height: 16px;
196+
}
89197
.segment{
90198
position: relative;
91199
}
@@ -105,16 +213,9 @@ textarea{
105213
}
106214

107215
.jumbotron {
108-
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3d284c+0,623882+100 */
109-
background: #191C20; /* Old browsers */
110-
background: -moz-linear-gradient(-45deg, #191C20 0%, #191C20 100%); /* FF3.6-15 */
111-
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#191C20), color-stop(100%,#191C20)); /* Chrome4-9,Safari4-5 */
112-
background: -webkit-linear-gradient(-45deg, #191C20 0%,#191C20 100%); /* Chrome10-25,Safari5.1-6 */
113-
background: -ms-linear-gradient(-45deg, #191C20 0%, #191C20 100%); /* Internet Explorer 10+ */
114-
background: -o-linear-gradient(-45deg, #191C20 0%, #191C20 100%); /* Opera 11.10+ */
115-
background: linear-gradient(135deg, #191C20 0%,#191C20 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
116-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d284c', endColorstr='#623882',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
117-
216+
background: radial-gradient(circle at top left, #1F2937 0%, #0F172A 40%, #020617 100%);
217+
border-bottom: 1px solid rgba(255,255,255,0.08);
218+
box-shadow: 0 16px 40px rgba(15,23,42,0.55);
118219
}
119220

120221
@media screen and (min-width: 768px) {
@@ -125,15 +226,15 @@ textarea{
125226
}
126227

127228
.jumbotron p {
128-
color:#DFD9E3;
229+
color:#E5E7EB;
129230
font-size: 17px;
130231
text-align: center;
131-
letter-spacing: 1px;
132-
font-weight: 200;
232+
letter-spacing: 0.5px;
233+
font-weight: 300;
133234
max-width: 650px;
134235
margin: 0 auto;
135236
margin-top: 20px;
136-
line-height: 27px;
237+
line-height: 28px;
137238
}
138239

139240
.jumbotron.top { padding:20px; }
@@ -175,17 +276,20 @@ textarea{
175276
}
176277

177278
h2 {
178-
color:#4D4F5F;
179-
font-weight: 200;
279+
color:#111827;
280+
font-weight: 300;
180281
margin: 40px 0 30px 0;
181282
}
182283

183284
.cly-grid .cly-col {
184285
border: 1px solid #EAEAEA;
185-
background-color: #FFF;
286+
background-color: #FFFFFF;
186287
padding:30px;
187288
margin-bottom: 30px;
188289
text-align: center;
290+
border-radius: 18px;
291+
box-shadow: 0 10px 30px rgba(15,23,42,0.06);
292+
transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
189293
}
190294

191295
.cly-grid .cly-col h2 {
@@ -196,15 +300,17 @@ h2 {
196300

197301
.cly-grid .cly-col p {
198302
font-size: 14px;
199-
color:#7B7B7B;
200-
line-height: 20px;
303+
color:#4B5563;
304+
line-height: 22px;
201305
max-width: 700px;
202306
margin: 0 auto;
203307
}
204308

205309
.cly-grid .cly-col:hover {
206310
cursor: pointer;
207-
box-shadow: 0 5px 10px rgba(0,0,0,.15);
311+
transform: translateY(-4px);
312+
box-shadow: 0 16px 40px rgba(15,23,42,0.18);
313+
border-color: #D1D5DB;
208314
}
209315

210316
.cly-grid .cly-col .icon {
@@ -223,9 +329,12 @@ h2 {
223329

224330

225331
.cly-grid .cly-col .next {
226-
color:#2FA732;
332+
color:#22C55E;
227333
margin-top: 30px;
228334
font-size: 12px;
335+
letter-spacing: 0.12em;
336+
text-transform: uppercase;
337+
font-weight: 600;
229338
}
230339

231340
#dropdown-icon {
@@ -248,11 +357,57 @@ h2 {
248357

249358
footer p {
250359
text-align: center;
251-
margin: 30px 0 40px 0;
360+
margin: 40px 0 40px 0;
252361
}
253362

254363
footer a {
255-
color:#623882 !important;
364+
color:#4F46E5 !important;
365+
}
366+
367+
/* buttons theme */
368+
.btn {
369+
border-radius: 999px;
370+
font-weight: 500;
371+
padding: 8px 18px;
372+
border-width: 1px;
373+
transition: background-color 140ms ease-out, color 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out, transform 80ms ease-out;
374+
}
375+
376+
.btn:focus,
377+
.btn:active:focus {
378+
outline: none;
379+
box-shadow: 0 0 0 2px rgba(79,70,229,0.35);
380+
}
381+
382+
.btn-default {
383+
background-color: #FFFFFF;
384+
color: #111827;
385+
border-color: #D1D5DB;
386+
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
387+
}
388+
389+
.btn-default:hover,
390+
.btn-default:focus {
391+
background-color: #EEF2FF;
392+
color: #111827;
393+
border-color: #4F46E5;
394+
box-shadow: 0 6px 18px rgba(15,23,42,0.12);
395+
transform: translateY(-1px);
396+
}
397+
398+
.btn-success {
399+
background-color: #22C55E;
400+
border-color: #16A34A;
401+
color: #FFFFFF;
402+
box-shadow: 0 6px 18px rgba(22,163,74,0.35);
403+
}
404+
405+
.btn-success:hover,
406+
.btn-success:focus {
407+
background-color: #16A34A;
408+
border-color: #15803D;
409+
box-shadow: 0 8px 24px rgba(21,128,61,0.45);
410+
transform: translateY(-1px);
256411
}
257412

258413
#sdks {
@@ -302,20 +457,56 @@ footer a {
302457
#countly-link:hover { text-decoration: none; }
303458

304459
fieldset {
305-
border: 2px solid #191C20 ;
306-
border-radius: 5px;
307-
padding: 10px;
308-
margin: 15px;
460+
border: 1px solid #E5E7EB;
461+
border-radius: 12px;
462+
padding: 16px 20px;
463+
margin: 16px 0;
464+
background-color: #FFFFFF;
465+
box-shadow: 0 4px 16px rgba(15,23,42,0.04);
309466
}
310467

311468
legend {
312-
padding: 5px;
313-
margin: 0px;
469+
padding: 0 8px;
470+
margin: 0 0 8px 0;
314471
max-width: max-content;
472+
font-size: 11px;
473+
font-weight: 600;
474+
text-transform: uppercase;
475+
letter-spacing: 0.08em;
476+
color: #6B7280;
477+
background-color: #EEF2FF;
478+
border-radius: 999px;
479+
}
480+
481+
.section.advanced {
482+
margin-top: 24px;
483+
border-radius: 16px;
484+
border-color: #E5E7EB;
485+
background: linear-gradient(135deg, #F9FAFB 0%, #EFF6FF 100%);
486+
box-shadow: 0 12px 30px rgba(15,23,42,0.08);
487+
padding-top: 20px;
488+
overflow: hidden;
489+
}
490+
491+
.section.advanced.open {
492+
border-color: #4F46E5;
493+
box-shadow: 0 16px 40px rgba(79,70,229,0.28);
315494
}
316495

317-
.advanced-list{display: none;}
318-
.advanced span.label {cursor:pointer;}
496+
.advanced-list{
497+
display: none;
498+
margin-top: 12px;
499+
padding-top: 12px;
500+
border-top: 1px dashed #D1D5DB;
501+
}
502+
503+
.advanced span.label {
504+
cursor:pointer;
505+
display: inline-flex;
506+
align-items: center;
507+
gap: 8px;
508+
color: #111827;
509+
}
319510

320511
.disabled {
321512
opacity: 0.5;

0 commit comments

Comments
 (0)