← All changes | src/css/components/admin.scss +182 -19 1.8.2 → 2.1.6 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 $border-gray;
	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,56 @@
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	+ }
	54	+
	55	+ &:hover:not(.hsr-active) {
	56	+ background-color: $gray-light;
	57	+ border-bottom: 1px solid $border-gray;
	58	+ }
32	59	}
33	60
34	61	.hsr-active {
35		- color: #673DE6;
36		- border-bottom: #673DE6 1px solid;
	62	+ color: $primary-purple;
	63	+ border-bottom: $primary-purple 2px solid;
	64	+ background-color: $light-purple;
	65	+ padding-top: 25px;
	66	+
	67	+ svg {
	68	+ margin-right: 5px;
	69	+
	70	+ path {
	71	+ fill: $primary-purple;
	72	+ }
	73	+
	74	+ }
	75	+
37	76	}
38	77
39	78	.hsr-onboarding {
40	79	width: 100%;
		@@ -55,12 +94,25 @@
55	94	font-size: $text-font-size;
56	95	font-weight: 400;
57	96	}
58	97
59		-.hostinger.hsr-onboarding p {
60		- color: $paragraph-color;
61		- margin-top: 8px;
62		- line-height: 24px;
	98	+.hostinger.hsr-onboarding {
	99	+
	100	+ p,
	101	+ ul {
	102	+ color: $paragraph-color;
	103	+ margin-top: 8px;
	104	+ line-height: 24px;
	105	+ }
	106	+
	107	+ ul {
	108	+ list-style-type: disc;
	109	+ margin-left: 25px;
	110	+
	111	+ li {
	112	+ text-align: left;
	113	+ }
	114	+ }
63	115	}
64	116
65	117	.hsr-onboarding-steps {
66	118	display: flex;
		@@ -207,9 +259,9 @@
207	259	}
208	260
209	261	@media only screen and (max-width: 768px) {
210	262	.hsr-onboarding-step {
211		- width: 80%;
	263	+ width: 100%;
212	264	}
213	265
214	266	.hsr-publish-modal .hsr-publish-modal--body {
215	267	width: 70%;
		@@ -289,8 +341,9 @@
289	341	.hsr-learn-page-container {
290	342	display: flex;
291	343	align-items: center;
292	344	flex-direction: column;
	345	+ padding: 0 15px;
293	346	}
294	347	.hsr-page-container-wrapper {
295	348	width: 100%;
296	349	max-width: 730px;
		@@ -315,8 +368,12 @@
315	368	color: #1D1E20;
316	369	font-weight: 700;
317	370	font-size: 16px;
318	371	line-height: 24px;
	372	+
	373	+ @media( max-width: 500px ) {
	374	+ font-size: 14px;
	375	+ }
319	376	}
320	377
321	378	.hsr-header-youtube {
322	379	width: 172px;
		@@ -472,14 +529,13 @@
472	529
473	530	@media only screen and (max-width: 768px) {
474	531	.hsr-wrapper-header {
475	532	justify-content: center;
476		- width: max-content;
	533	+ flex-wrap: wrap;
477	534	}
478	535
479	536	.hsr-tutorial-wrapper, .hsr-page-container-wrapper {
480	537	width: 100%;
481		- max-width: 370px;
482	538	}
483	539
484	540	.hsr-main-video {
485	541	text-align: -webkit-center;
		@@ -509,9 +565,8 @@
509	565	}
510	566
511	567	.hsr-help-card {
512	568	margin-bottom: 24px;
513		- max-width: 370px;
514	569	width: 100%;
515	570	}
516	571	}
517	572
		@@ -530,5 +585,113 @@
530	585	}
531	586
532	587	.hsr-show {
533	588	display: block;
	589	+}
	590	+
	591	+.hts-domain-step {
	592	+
	593	+ .hts-website-url,.hts-nameservers {
	594	+ background-color:$gray-light;
	595	+ padding: 16px;
	596	+ margin-top: 10px;
	597	+ text-align: left;
	598	+ color: $gray-base;
	599	+
	600	+ span {
	601	+ color: $primary-purple;
	602	+ margin-left: 30px;
	603	+ font-weight: 600;
	604	+ }
	605	+
	606	+ }
	607	+ .hts-nameservers {
	608	+ div {
	609	+ display: flex;
	610	+ align-items: baseline;
	611	+
	612	+ p {
	613	+ min-width: 125px;
	614	+ }
	615	+
	616	+ b {
	617	+ color: $dark;
	618	+ display: flex;
	619	+ align-items: center;
	620	+
	621	+ svg {
	622	+ margin-left: 10px;
	623	+ cursor: pointer;
	624	+ }
	625	+ }
	626	+ }
	627	+ }
	628	+
	629	+ .hts-yt-video {
	630	+ display: flex;
	631	+ align-items: center;
	632	+ justify-content: space-between;
	633	+
	634	+ @media(max-width: 767px) {
	635	+ flex-direction: column;
	636	+ align-items: flex-start;
	637	+ }
	638	+
	639	+ .hts-wrap {
	640	+ display: flex;
	641	+ align-items: center;
	642	+
	643	+ @media(max-width: 767px) {
	644	+ img {
	645	+ display: block;
	646	+ margin: 10px auto 10px 0;
	647	+ }
	648	+ display: block;
	649	+ }
	650	+
	651	+ .hts-video-description {
	652	+ margin-left: 15px;
	653	+
	654	+ @media(max-width: 767px) {
	655	+ margin-left: 0;
	656	+ }
	657	+
	658	+ p {
	659	+ font-size: 12px;
	660	+ color: $gray-base;
	661	+ }
	662	+ }
	663	+ }
	664	+
	665	+ .hts-video-button {
	666	+
	667	+ a {
	668	+ display: flex;
	669	+ }
	670	+
	671	+ @media(max-width: 767px) {
	672	+ margin-top: 10px;
	673	+ }
	674	+ }
	675	+
	676	+ }
	677	+
	678	+}
	679	+
	680	+.hts-tab-content {
	681	+
	682	+ .wrapper {
	683	+ margin: auto;
	684	+ max-width: 730px;
	685	+ width: 100%;
	686	+ }
	687	+
	688	+ .hts-container {
	689	+ background-color: #fff;
	690	+ border: 1px solid #dadce0;
	691	+ border-radius: 8px;
	692	+ margin-top: 25px;
	693	+ padding: 40px;
	694	+ text-align: left;
	695	+ }
	696	+
534	697	}