← All changes | src/css/components/admin.scss +160 -15 1.8.1 → 2.0.7 View file →

		@@ -1,17 +1,20 @@
1	1	.hsr-onboarding-navbar {
2	2	width: 100%;
3	3	display: flex;
4	4	justify-content: center;
5		- margin-top: 32px;
6	5	}
7	6
8	7	.hsr-onboarding-navbar__wrapper {
9		- width: 730px;
10		- height: 56px;
	8	+ width: 100%;
	9	+ height: 72px;
11	10	background: #FFFFFF;
12		- border: 1px solid #DADCE0;
13		- border-radius: 8px;
	11	+ border-bottom: 1px solid #DADCE0;
	12	+
	13	+ @media(max-width: 1000px) {
	14	+ height: 56px;
	15	+ }
	16	+
14	17	}
15	18
16	19	.hsr-wrapper__list {
17	20	padding: 0px 16px;
		@@ -21,20 +24,51 @@
21	24	align-items: center;
22	25	}
23	26
24	27	.hsr-list__item {
25		- font-weight: 700;
26		- font-size: 14px;
	28	+ font-weight: normal;
	29	+ font-size: 16px;
27	30	line-height: 24px;
28		- color: #727586;
29		- padding: 16px 24px;
	31	+ color: $gray-base;
	32	+ padding: 24px 30px;
30	33	cursor: pointer;
31	34	margin: 0;
	35	+ display: flex;
	36	+ align-items: center;
	37	+ border-bottom: 1px solid transparent;
	38	+
	39	+ svg {
	40	+ margin-right: 5px;
	41	+
	42	+ path {
	43	+ fill: $gray-base;
	44	+ }
	45	+
	46	+ }
	47	+ @media( max-width: 1170px) {
	48	+ padding: 24px 15px;
	49	+ font-size: 14px;
	50	+ }
	51	+ @media( max-width: 1000px) {
	52	+ display: none;
	53	+ }
32	54	}
33	55
34	56	.hsr-active {
35		- color: #673DE6;
36		- border-bottom: #673DE6 1px solid;
	57	+ color: $primary-purple;
	58	+ border-bottom: $primary-purple 2px solid;
	59	+ background-color: $light-purple;
	60	+ padding-top: 25px;
	61	+
	62	+ svg {
	63	+ margin-right: 5px;
	64	+
	65	+ path {
	66	+ fill: $primary-purple;
	67	+ }
	68	+
	69	+ }
	70	+
37	71	}
38	72
39	73	.hsr-onboarding {
40	74	width: 100%;
		@@ -207,9 +241,9 @@
207	241	}
208	242
209	243	@media only screen and (max-width: 768px) {
210	244	.hsr-onboarding-step {
211		- width: 80%;
	245	+ width: 100%;
212	246	}
213	247
214	248	.hsr-publish-modal .hsr-publish-modal--body {
215	249	width: 70%;
		@@ -289,8 +323,9 @@
289	323	.hsr-learn-page-container {
290	324	display: flex;
291	325	align-items: center;
292	326	flex-direction: column;
	327	+ padding: 0 15px;
293	328	}
294	329	.hsr-page-container-wrapper {
295	330	width: 100%;
296	331	max-width: 730px;
		@@ -315,8 +350,12 @@
315	350	color: #1D1E20;
316	351	font-weight: 700;
317	352	font-size: 16px;
318	353	line-height: 24px;
	354	+
	355	+ @media( max-width: 500px ) {
	356	+ font-size: 14px;
	357	+ }
319	358	}
320	359
321	360	.hsr-header-youtube {
322	361	width: 172px;
		@@ -472,14 +511,13 @@
472	511
473	512	@media only screen and (max-width: 768px) {
474	513	.hsr-wrapper-header {
475	514	justify-content: center;
476		- width: max-content;
	515	+ flex-wrap: wrap;
477	516	}
478	517
479	518	.hsr-tutorial-wrapper, .hsr-page-container-wrapper {
480	519	width: 100%;
481		- max-width: 370px;
482	520	}
483	521
484	522	.hsr-main-video {
485	523	text-align: -webkit-center;
		@@ -509,9 +547,8 @@
509	547	}
510	548
511	549	.hsr-help-card {
512	550	margin-bottom: 24px;
513		- max-width: 370px;
514	551	width: 100%;
515	552	}
516	553	}
517	554
		@@ -530,5 +567,113 @@
530	567	}
531	568
532	569	.hsr-show {
533	570	display: block;
	571	+}
	572	+
	573	+.hts-domain-step {
	574	+
	575	+ .hts-website-url,.hts-nameservers {
	576	+ background-color:$gray-light;
	577	+ padding: 16px;
	578	+ margin-top: 10px;
	579	+ text-align: left;
	580	+ color: $gray-base;
	581	+
	582	+ span {
	583	+ color: $primary-purple;
	584	+ margin-left: 30px;
	585	+ font-weight: 600;
	586	+ }
	587	+
	588	+ }
	589	+ .hts-nameservers {
	590	+ div {
	591	+ display: flex;
	592	+ align-items: baseline;
	593	+
	594	+ p {
	595	+ min-width: 125px;
	596	+ }
	597	+
	598	+ b {
	599	+ color: $dark;
	600	+ display: flex;
	601	+ align-items: center;
	602	+
	603	+ svg {
	604	+ margin-left: 10px;
	605	+ cursor: pointer;
	606	+ }
	607	+ }
	608	+ }
	609	+ }
	610	+
	611	+ .hts-yt-video {
	612	+ display: flex;
	613	+ align-items: center;
	614	+ justify-content: space-between;
	615	+
	616	+ @media(max-width: 767px) {
	617	+ flex-direction: column;
	618	+ align-items: flex-start;
	619	+ }
	620	+
	621	+ .hts-wrap {
	622	+ display: flex;
	623	+ align-items: center;
	624	+
	625	+ @media(max-width: 767px) {
	626	+ img {
	627	+ display: block;
	628	+ margin: 10px auto 10px 0;
	629	+ }
	630	+ display: block;
	631	+ }
	632	+
	633	+ .hts-video-description {
	634	+ margin-left: 15px;
	635	+
	636	+ @media(max-width: 767px) {
	637	+ margin-left: 0;
	638	+ }
	639	+
	640	+ p {
	641	+ font-size: 12px;
	642	+ color: $gray-base;
	643	+ }
	644	+ }
	645	+ }
	646	+
	647	+ .hts-video-button {
	648	+
	649	+ a {
	650	+ display: flex;
	651	+ }
	652	+
	653	+ @media(max-width: 767px) {
	654	+ margin-top: 10px;
	655	+ }
	656	+ }
	657	+
	658	+ }
	659	+
	660	+}
	661	+
	662	+.hts-tab-content {
	663	+
	664	+ .wrapper {
	665	+ margin: auto;
	666	+ max-width: 730px;
	667	+ width: 100%;
	668	+ }
	669	+
	670	+ .hts-container {
	671	+ background-color: #fff;
	672	+ border: 1px solid #dadce0;
	673	+ border-radius: 8px;
	674	+ margin-top: 25px;
	675	+ padding: 40px;
	676	+ text-align: left;
	677	+ }
	678	+
534	679	}