Skip to content

Commit fa8315e

Browse files
Santhosh-testsigmaSanthosh-testsigma
authored
Revamped Cookie banner on tutorials page (#90)
1 parent 56edc73 commit fa8315e

1 file changed

Lines changed: 145 additions & 21 deletions

File tree

‎src/templates/page.scss‎

Lines changed: 145 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -679,32 +679,156 @@ table{
679679
}
680680

681681
// Cookie banner
682-
#hs-banner-parent{
683-
.hs-cookie-notification-position-bottom{
684-
width: calc(min(28em, 100%)) !important;
685-
left: calc(min(15em, 100%)) !important;
682+
#hs-banner-parent {
683+
a {
684+
color: #09c0a1 !important;
685+
&:hover {
686+
color: #007d85 !important;
687+
text-decoration: underline !important;
688+
}
689+
}
690+
.hs-cookie-notification-position-bottom {
691+
width: calc(min(26.5em, 100%)) !important;
692+
left: calc(min(18.7em, 100%)) !important;
686693
@media only screen and (max-width: 767px) {
687-
left: 3%;
688-
bottom: 2%;
689-
width: 95%;
690-
}
691-
@media only screen and (min-width:768px) and (max-width: 1023px) {
692-
left: 20%;
693-
bottom: 10%;
694-
width: 35%;
695-
}
696-
#hs-eu-cookie-confirmation-inner{
697-
@apply p-8;
698-
#hs-eu-policy-wording{
699-
@apply mr-0 mb-4;
694+
left: 3% !important;
695+
bottom: 2% !important;
696+
max-width: 95% !important;
697+
}
698+
@media only screen and (min-width: 768px) and (max-width: 1023px) {
699+
left: 20% !important;
700+
bottom: 10% !important;
701+
max-width: 35% !important;
702+
}
703+
#hs-eu-cookie-confirmation-inner {
704+
padding: 2rem;
705+
#hs-eu-policy-wording {
706+
strong {
707+
margin: 0 0 1rem 0;
708+
font-size: 14px !important;
709+
line-height: 24px !important;
710+
color: #5f5f5f !important;
711+
font-weight: 300 !important;
712+
}
713+
}
714+
#hs-eu-cookie-confirmation-buttons-area {
715+
justify-content: center;
716+
margin-right: 0;
717+
#hs-eu-confirmation-button-group {
718+
flex-flow: row;
719+
#hs-eu-cookie-settings-button {
720+
padding: 1rem 2.5rem !important;
721+
text-align: center !important;
722+
font-size: 14px !important;
723+
line-height: 2rem !important;
724+
border: 0.5px solid #d0d5dd !important;
725+
color: #0a1a2a !important;
726+
min-width: 12em !important;
727+
text-decoration: none !important;
728+
}
729+
#hs-eu-confirmation-button,
730+
#hs-eu-cookie-settings-button {
731+
font-weight: 600 !important;
732+
border-radius: 0.5rem !important;
733+
&:hover {
734+
color: white !important;
735+
background-color: #007d85 !important;
736+
border-color: #007d85 !important;
737+
}
738+
}
739+
}
740+
}
741+
#hs-eu-decline-button {
742+
display: none;
700743
}
701-
#hs-eu-cookie-confirmation-buttons-area{
702-
@apply justify-center mr-0;
703-
#hs-eu-decline-button{
704-
@apply hidden;
744+
}
745+
}
746+
}
747+
#hs-modal {
748+
a {
749+
color: #09c0a1 !important;
750+
}
751+
#hs-modal-introduction {
752+
font-size: 1.6rem !important;
753+
}
754+
#hs-modal-introduction-description {
755+
p {
756+
font-size: 1.4rem !important;
757+
line-height: 2.4rem !important;
758+
font-weight: 400 !important;
759+
color: #5f5f5f !important;
760+
}
761+
}
762+
#hs-modal-body-container{
763+
gap: 0 !important;
764+
}
765+
#hs-categories-container {
766+
padding-top: 2rem !important;
767+
.hs-category-row {
768+
border-top: #d0d5ddbd !important;
769+
border-style: solid !important;
770+
border-width: 1px 0 0 0 !important;
771+
padding: 1.5rem 1rem 0 !important;
772+
.hs-toggle-switch {
773+
width: calc(3.4em + 2px) !important;
774+
height: calc(1.7em + 2px) !important;
775+
.hs-toggle-switch-nob{
776+
height: 1.4em !important;
777+
width: 1.4em !important;
778+
}
779+
}
780+
.hs-toggle-selected-flag{
781+
.hs-toggle-switch-nob{
782+
left: 56% !important;
705783
}
706784
}
785+
.hs-category-label{
786+
gap: .5rem !important;
787+
}
788+
}
789+
#hs-category-analytics,
790+
#hs-category-necessary,
791+
#hs-category-advertisement,
792+
#hs-category-functionality {
793+
span {
794+
font-size: 1.8rem !important;
795+
line-height: 2.4rem !important;
796+
font-weight: 600 !important;
797+
}
707798
}
799+
.hs-category-description {
800+
font-size: 1.4rem !important;
801+
line-height: 2rem !important;
802+
font-weight: 400 !important;
803+
color: #5f5f5f !important;
804+
}
805+
.visible {
806+
padding-top: 1.5rem;
807+
padding-left: 2rem !important;
808+
}
809+
}
810+
.hs-always-active-label {
811+
font-size: 1.4rem !important;
812+
line-height: 2rem !important;
813+
font-weight: 600 !important;
814+
color: #09c0a1 !important;
815+
}
816+
#hs-modal-footer-container {
817+
#hs-modal-accept-all {
818+
order: 2 !important;
819+
}
820+
#hs-modal-accept-all,
821+
#hs-modal-save-settings {
822+
font-weight: 600 !important;
823+
&:hover {
824+
background-color: #007d85 !important;
825+
border: #007d85 !important;
826+
color: white !important;
827+
}
828+
}
829+
}
830+
#hs-modal-footer{
831+
padding-top: 1.2rem !important;
708832
}
709833
}
710834

0 commit comments

Comments
 (0)