Commit 9dc773b1b34d2b4954430daa82c5ff92df752105
1 parent
1c575dae09
Exists in
master
new page added
Showing
6 changed files
with
256 additions
and
30 deletions
Show diff stats
src/assets/css/custom.css
| 1 | html, | 1 | html, |
| 2 | body { | 2 | body { |
| 3 | height: 100%; | 3 | height: 100%; |
| 4 | } | 4 | } |
| 5 | 5 | ||
| 6 | body { | 6 | body { |
| 7 | display: -ms-flexbox; | 7 | display: -ms-flexbox; |
| 8 | display: flex; | 8 | display: flex; |
| 9 | -ms-flex-align: center; | 9 | -ms-flex-align: center; |
| 10 | align-items: center; | 10 | align-items: center; |
| 11 | padding-top: 0px; | 11 | padding-top: 0px; |
| 12 | padding-bottom: 0px; | 12 | padding-bottom: 0px; |
| 13 | background-color:#DFE7EF; | 13 | background-color:#DFE7EF; |
| 14 | font-family: 'Montserrat', sans-serif; | 14 | font-family: 'Montserrat', sans-serif; |
| 15 | } | 15 | } |
| 16 | #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} | 16 | #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} |
| 17 | /* heading */ | 17 | /* heading */ |
| 18 | h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} | 18 | h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} |
| 19 | 19 | ||
| 20 | /* spaces */ | 20 | /* spaces */ |
| 21 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } | 21 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } |
| 22 | 22 | ||
| 23 | 23 | ||
| 24 | .h-100{height: 100%;} | 24 | .h-100{height: 100%;} |
| 25 | .main-wrp{ height: 100%;padding-left: 56px; /*padding-right: 233px;*/ background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; | 25 | .main-wrp{ height: 100%;padding-left: 56px; /*padding-right: 233px;*/ background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; |
| 26 | background-size: 45%;} | 26 | background-size: 45%;} |
| 27 | /* navbar */ | 27 | /* navbar */ |
| 28 | .spotLight-nav{ padding-top: 20px; z-index: 5;} | 28 | .spotLight-nav{ padding-top: 20px; z-index: 5;} |
| 29 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; | 29 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; |
| 30 | font-size: 16px; | 30 | font-size: 16px; |
| 31 | font-style: normal; | 31 | font-style: normal; |
| 32 | font-weight: 400; | 32 | font-weight: 400; |
| 33 | line-height: 22px; | 33 | line-height: 22px; |
| 34 | letter-spacing: -0.7470597624778748px; | 34 | letter-spacing: -0.7470597624778748px; |
| 35 | text-align: left; color:#000; opacity: 0.6; | 35 | text-align: left; color:#000; opacity: 0.6; |
| 36 | } | 36 | } |
| 37 | .spotLight-nav li {margin-right: 14px;} | 37 | .spotLight-nav li {margin-right: 14px;} |
| 38 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} | 38 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} |
| 39 | .spotLight-nav li.spotLight-img a{opacity: 1;} | 39 | .spotLight-nav li.spotLight-img a{opacity: 1;} |
| 40 | .navbar-brand{ margin-right: 57px;} | 40 | .navbar-brand{ margin-right: 57px;} |
| 41 | 41 | ||
| 42 | /* ul list style */ | 42 | /* ul list style */ |
| 43 | .sign-in-up-list{ width:450px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; | 43 | .sign-in-up-list{ width:450px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; |
| 44 | font-size: 20px; | 44 | font-size: 20px; |
| 45 | font-style: normal; | 45 | font-style: normal; |
| 46 | font-weight: 500; | 46 | font-weight: 500; |
| 47 | line-height: 24px; float: left; margin-top: 24px; } | 47 | line-height: 24px; float: left; margin-top: 24px; } |
| 48 | .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} | 48 | .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} |
| 49 | .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} | 49 | .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} |
| 50 | .sign-in-up-list li span{ float: left;} | 50 | .sign-in-up-list li span{ float: left;} |
| 51 | /* form */ | 51 | /* form */ |
| 52 | .form-layout{ width: 100%; display: block; float: left;} | 52 | .form-layout{ width: 100%; display: block; float: left;} |
| 53 | .form-layout form{ display:block; float: left; width: 100%;} | 53 | .form-layout form{ display:block; float: left; width: 100%;} |
| 54 | .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | 54 | .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} |
| 55 | .form-layout .social-login{ display: block; width: 339px; | 55 | .form-layout .social-login{ display: block; width: 339px; |
| 56 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } | 56 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } |
| 57 | .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} | 57 | .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} |
| 58 | .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} | 58 | .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} |
| 59 | .form-layout .social-login ul li:nth-child(2){margin:0 37px;} | 59 | .form-layout .social-login ul li:nth-child(2){margin:0 37px;} |
| 60 | .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} | 60 | .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} |
| 61 | 61 | ||
| 62 | form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; | 62 | form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; |
| 63 | 63 | ||
| 64 | font-family: 'Montserrat', sans-serif; | 64 | font-family: 'Montserrat', sans-serif; |
| 65 | font-size: 13px; | 65 | font-size: 13px; |
| 66 | font-style: normal; | 66 | font-style: normal; |
| 67 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} | 67 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} |
| 68 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} | 68 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} |
| 69 | 69 | ||
| 70 | /* placeholder */ | 70 | /* placeholder */ |
| 71 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ | 71 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ |
| 72 | line-height: 18px; | 72 | line-height: 18px; |
| 73 | color: #000000; | 73 | color: #000000; |
| 74 | opacity: 0.5; | 74 | opacity: 0.5; |
| 75 | font-family: 'Montserrat', sans-serif; | 75 | font-family: 'Montserrat', sans-serif; |
| 76 | font-size: 13px; | 76 | font-size: 13px; |
| 77 | font-style: normal; | 77 | font-style: normal; |
| 78 | font-weight: 600; | 78 | font-weight: 600; |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 81 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 82 | line-height: 18px; | 82 | line-height: 18px; |
| 83 | color: #000000; | 83 | color: #000000; |
| 84 | opacity: 0.5; | 84 | opacity: 0.5; |
| 85 | font-family: 'Montserrat', sans-serif; | 85 | font-family: 'Montserrat', sans-serif; |
| 86 | font-size: 13px; | 86 | font-size: 13px; |
| 87 | font-style: normal; | 87 | font-style: normal; |
| 88 | font-weight: 600; | 88 | font-weight: 600; |
| 89 | } | 89 | } |
| 90 | 90 | ||
| 91 | form input::-ms-input-placeholder { /* Microsoft Edge */ | 91 | form input::-ms-input-placeholder { /* Microsoft Edge */ |
| 92 | line-height: 18px; | 92 | line-height: 18px; |
| 93 | color: #000000; | 93 | color: #000000; |
| 94 | opacity: 0.5; | 94 | opacity: 0.5; |
| 95 | font-family: 'Montserrat', sans-serif; | 95 | font-family: 'Montserrat', sans-serif; |
| 96 | font-size: 13px; | 96 | font-size: 13px; |
| 97 | font-style: normal; | 97 | font-style: normal; |
| 98 | font-weight: 600; | 98 | font-weight: 600; |
| 99 | } | 99 | } |
| 100 | /* placeholder */ | 100 | /* placeholder */ |
| 101 | .sb-button{ background: #514DA7; | 101 | .sb-button{ background: #514DA7; |
| 102 | height: 50px; | 102 | height: 50px; |
| 103 | line-height: 35px; | 103 | line-height: 35px; |
| 104 | color: #fff; | 104 | color: #fff; |
| 105 | font-family: 'Montserrat', sans-serif; | 105 | font-family: 'Montserrat', sans-serif; |
| 106 | font-size: 13px; | 106 | font-size: 13px; |
| 107 | font-style: normal; | 107 | font-style: normal; |
| 108 | font-weight: 600; | 108 | font-weight: 600; |
| 109 | width: 100%;} | 109 | width: 100%;} |
| 110 | .sb-button img{ margin-right: 10px; width: 20px;} | 110 | .sb-button img{ margin-right: 10px; width: 20px;} |
| 111 | .sb-button:hover{ color:#fff;} | 111 | .sb-button:hover{ color:#fff;} |
| 112 | .form-layout p{margin-top:17px ;} | 112 | .form-layout p{margin-top:17px ;} |
| 113 | .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | 113 | .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} |
| 114 | .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} | 114 | .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} |
| 115 | .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} | 115 | .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} |
| 116 | .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; | 116 | .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; |
| 117 | } | 117 | } |
| 118 | .form-layout p a:hover{ color:#000;} | 118 | .form-layout p a:hover{ color:#000;} |
| 119 | .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} | 119 | .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} |
| 120 | .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} | 120 | .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} |
| 121 | .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} | 121 | .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} |
| 122 | .welcome-hd-back{ | 122 | .welcome-hd-back{ |
| 123 | font-family: 'Bebas Neue', cursive; | 123 | font-family: 'Bebas Neue', cursive; |
| 124 | font-style: normal; | 124 | font-style: normal; |
| 125 | font-weight: 600; | 125 | font-weight: 600; |
| 126 | font-size: 106px; | 126 | font-size: 106px; |
| 127 | line-height: 106px; | 127 | line-height: 106px; |
| 128 | color: #000000; | 128 | color: #000000; |
| 129 | } | 129 | } |
| 130 | .form-layout .go-back span{ font-weight: 500 !important;} | 130 | .form-layout .go-back span{ font-weight: 500 !important;} |
| 131 | .reset-pass-spc{ margin-top: 110px;} | 131 | .reset-pass-spc{ margin-top: 110px;} |
| 132 | 132 | ||
| 133 | /* profile */ | 133 | /* profile */ |
| 134 | .inner-wrp { | 134 | .inner-wrp { |
| 135 | height: 100%; | 135 | height: 100%; |
| 136 | padding-left: 37px; | 136 | padding-left: 37px; |
| 137 | padding-right: 37px; | 137 | padding-right: 37px; |
| 138 | background:#fff;; | 138 | background:#fff;; |
| 139 | font-family: 'Montserrat', sans-serif; | 139 | font-family: 'Montserrat', sans-serif; |
| 140 | 140 | ||
| 141 | } | 141 | } |
| 142 | .user-profile-photo{ width: 40px; position: relative; display: block; | 142 | .user-profile-photo{ width: 40px; position: relative; display: block; |
| 143 | height: 40px; | 143 | height: 40px; |
| 144 | border-radius: 100px; | 144 | border-radius: 100px; |
| 145 | padding: 1px;} | 145 | padding: 1px;} |
| 146 | .user-profile-photo a, img{ width: 100%;} | 146 | .user-profile-photo a, img{ width: 100%;} |
| 147 | .inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;} | 147 | .inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;} |
| 148 | .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} | 148 | .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} |
| 149 | .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} | 149 | .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} |
| 150 | .user-profile{ display: block; | 150 | .user-profile{ display: block; |
| 151 | float: left; | 151 | float: left; |
| 152 | margin-left:30px; | 152 | margin-left:30px; |
| 153 | position: relative; | 153 | position: relative; |
| 154 | width: 760px;} | 154 | width: 760px;} |
| 155 | .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} | 155 | .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} |
| 156 | .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} | 156 | .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} |
| 157 | .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} | 157 | .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} |
| 158 | .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} | 158 | .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} |
| 159 | .talk-to-me ul li{ display: block; float: left;margin-right:3px;} | 159 | .talk-to-me ul li{ display: block; float: left;margin-right:3px;} |
| 160 | .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} | 160 | .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} |
| 161 | .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } | 161 | .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } |
| 162 | .joined-info li a{ color:#000; opacity: 0.5;} | 162 | .joined-info li a{ color:#000; opacity: 0.5;} |
| 163 | .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} | 163 | .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} |
| 164 | .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} | 164 | .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} |
| 165 | .joined-info li{ float: left;} | 165 | .joined-info li{ float: left;} |
| 166 | 166 | ||
| 167 | /* list style */ | 167 | /* list style */ |
| 168 | .list-style-group{ width: 100%; display: block; float: left;} | 168 | .list-style-group{ width: 100%; display: block; float: left;} |
| 169 | .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} | 169 | .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} |
| 170 | .list-style{list-style-type: none; margin:0px; padding: 0px;} | 170 | .list-style{list-style-type: none; margin:0px; padding: 0px;} |
| 171 | .list-style li{ float: left;} | 171 | .list-style li{ float: left;} |
| 172 | .list-style li a{ display: block; float: left;} | 172 | .list-style li a{ display: block; float: left;} |
| 173 | .list-style li a img{ width: 48px; display: block; float: left; } | 173 | .list-style li a img{ width: 48px; display: block; float: left; } |
| 174 | .list-spc-top{ margin-top:15px ;} | 174 | .list-spc-top{ margin-top:15px ;} |
| 175 | 175 | ||
| 176 | /* social connects */ | 176 | /* social connects */ |
| 177 | .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} | 177 | .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} |
| 178 | .social-connects li{ float: left; margin-right:0px ; margin-left: 6px;} | 178 | .social-connects li{ float: left; margin-right:0px ; margin-left: 6px;} |
| 179 | .social-connects li a{ display: block; float: left; padding: 11px;} | 179 | .social-connects li a{ display: block; float: left; padding: 11px;} |
| 180 | .social-connects li a img.twitter{ margin-top:3px;} | 180 | .social-connects li a img.twitter{ margin-top:3px;} |
| 181 | .social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} | 181 | .social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} |
| 182 | .social-connects li a:hover{background: #EF484F;} | 182 | .social-connects li a:hover{background: #EF484F;} |
| 183 | .social-connects li a:hover img{ | 183 | .social-connects li a:hover img{ |
| 184 | -webkit-filter: brightness(15); | 184 | -webkit-filter: brightness(15); |
| 185 | filter:brightness(15); | 185 | filter:brightness(15); |
| 186 | } | 186 | } |
| 187 | .social-connects li a img{ width: 19px; display: block; float: left;} | 187 | .social-connects li a img{ width: 19px; display: block; float: left;} |
| 188 | .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; | 188 | .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; |
| 189 | float: left;} | 189 | float: left;} |
| 190 | .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} | 190 | .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} |
| 191 | 191 | ||
| 192 | /* profile tab */ | 192 | /* profile tab */ |
| 193 | .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;} | 193 | .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;} |
| 194 | .top-brd{border-top: 1px solid #DFE7EF;} | 194 | .top-brd{border-top: 1px solid #DFE7EF;} |
| 195 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} | 195 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} |
| 196 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} | 196 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} |
| 197 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} | 197 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} |
| 198 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } | 198 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } |
| 199 | 199 | ||
| 200 | /* profile data wrp */ | 200 | /* profile data wrp */ |
| 201 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} | 201 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} |
| 202 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} | 202 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} |
| 203 | .card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;} | 203 | .card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;} |
| 204 | .company-detail{ width: 100%; | 204 | .company-detail{ width: 100%; |
| 205 | display: block; | 205 | display: block; |
| 206 | float: left; | 206 | float: left; |
| 207 | position: relative; | 207 | position: relative; |
| 208 | margin-top: -63px; | 208 | margin-top: -63px; |
| 209 | margin-bottom: 21px;} | 209 | margin-bottom: 21px;} |
| 210 | .company-detail .c-logo{ width: 82px; display: block; float: left;} | 210 | .company-detail .c-logo{ width: 82px; display: block; float: left;} |
| 211 | .company-detail .c-logo img{ width: 100%;} | 211 | .company-detail .c-logo img{ width: 100%;} |
| 212 | .company-detail .c-tag img{ width: 100%;} | 212 | .company-detail .c-tag img{ width: 100%;} |
| 213 | .company-detail .c-tag { width: 89px; display: block; float: right;} | 213 | .company-detail .c-tag { width: 89px; display: block; float: right;} |
| 214 | .card-warpper h1{width: 260px; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} | 214 | .card-warpper h1{width: 260px; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} |
| 215 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} | 215 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} |
| 216 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} | 216 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} |
| 217 | .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} | 217 | .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} |
| 218 | .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } | 218 | .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } |
| 219 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} | 219 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} |
| 220 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} | 220 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} |
| 221 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} | 221 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} |
| 222 | /* colors */ | 222 | /* colors */ |
| 223 | .cape-honey{ background: #fde2a3;} | 223 | .cape-honey{ background: #fde2a3;} |
| 224 | .rose-bud{ background: #fba29a;} | 224 | .rose-bud{ background: #fba29a;} |
| 225 | .pattens-blue{ background: #ceeced;} | 225 | .pattens-blue{ background: #ceeced;} |
| 226 | 226 | ||
| 227 | .insight-design{ background: #FBC647;} | 227 | .insight-design{ background: #FBC647;} |
| 228 | .insight-product{ background: #9DDADB;} | 228 | .insight-product{ background: #9DDADB;} |
| 229 | .insight-marketing{ background: #F74536;} | 229 | .insight-marketing{ background: #F74536;} |
| 230 | .insight-pricing{ background: #C1C0FE;} | 230 | .insight-pricing{ background: #C1C0FE;} |
| 231 | .insight-psychology{ background: #477970;} | 231 | .insight-psychology{ background: #477970;} |
| 232 | .no-cursor{ | 232 | .no-cursor{ |
| 233 | cursor: default !important; | 233 | cursor: default !important; |
| 234 | } | 234 | } |
| 235 | .no-underline{ | 235 | .no-underline{ |
| 236 | text-decoration: none !important; | 236 | text-decoration: none !important; |
| 237 | } | 237 | } |
| 238 | .cursor-pointer{ | 238 | .cursor-pointer{ |
| 239 | cursor: pointer !important; | 239 | cursor: pointer !important; |
| 240 | } | 240 | } |
| 241 | /* add new card */ | 241 | /* add new card */ |
| 242 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} | 242 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} |
| 243 | .add-card-warpper a{ display: block; | 243 | .add-card-warpper a{ display: block; |
| 244 | width: 86px; | 244 | width: 86px; |
| 245 | margin: 0 auto; | 245 | margin: 0 auto; |
| 246 | margin-top: 92px;} | 246 | margin-top: 92px;} |
| 247 | 247 | ||
| 248 | /* New Profile Buttons */ | 248 | /* New Profile Buttons */ |
| 249 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} | 249 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} |
| 250 | /* button sm */ | 250 | /* button sm */ |
| 251 | .profile-sm-bt{ width: 180px; | 251 | .profile-sm-bt{ width: 180px; |
| 252 | height: 54px; | 252 | height: 54px; |
| 253 | border-radius: 5px; | 253 | border-radius: 5px; |
| 254 | border: 1px solid #514DA7; | 254 | border: 1px solid #514DA7; |
| 255 | color: #514DA7; | 255 | color: #514DA7; |
| 256 | font-size: 16px; | 256 | font-size: 16px; |
| 257 | font-weight: 500; | 257 | font-weight: 500; |
| 258 | display: block; | 258 | display: block; |
| 259 | line-height: 55px; | 259 | line-height: 55px; |
| 260 | text-align: center;} | 260 | text-align: center;} |
| 261 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 261 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 262 | /* button md */ | 262 | /* button md */ |
| 263 | .profile-md-bt{ width:233px; | 263 | .profile-md-bt{ width:233px; |
| 264 | height: 54px; | 264 | height: 54px; |
| 265 | border-radius: 5px; | 265 | border-radius: 5px; |
| 266 | border: 1px solid #514DA7; | 266 | border: 1px solid #514DA7; |
| 267 | color: #514DA7; | 267 | color: #514DA7; |
| 268 | font-size: 16px; | 268 | font-size: 16px; |
| 269 | font-weight: 500; | 269 | font-weight: 500; |
| 270 | display: block; | 270 | display: block; |
| 271 | line-height: 55px; | 271 | line-height: 55px; |
| 272 | text-align: center;} | 272 | text-align: center;} |
| 273 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 273 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 274 | /* button lg */ | 274 | /* button lg */ |
| 275 | .profile-lg-bt{ width:261px; | 275 | .profile-lg-bt{ width:261px; |
| 276 | height: 54px; | 276 | height: 54px; |
| 277 | border-radius: 5px; | 277 | border-radius: 5px; |
| 278 | border: 1px solid #514DA7; | 278 | border: 1px solid #514DA7; |
| 279 | color: #514DA7; | 279 | color: #514DA7; |
| 280 | font-size: 16px; | 280 | font-size: 16px; |
| 281 | font-weight: 500; | 281 | font-weight: 500; |
| 282 | display: block; | 282 | display: block; |
| 283 | line-height: 55px; | 283 | line-height: 55px; |
| 284 | text-align: center;} | 284 | text-align: center;} |
| 285 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 285 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 286 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} | 286 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} |
| 287 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} | 287 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 288 | /* Replies */ | 288 | /* Replies */ |
| 289 | .replies{ display: block; float: left;} | 289 | .replies{ display: block; float: left;} |
| 290 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} | 290 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} |
| 291 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} | 291 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} |
| 292 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; | 292 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; |
| 293 | font-size: 12px; | 293 | font-size: 12px; |
| 294 | font-style: normal; | 294 | font-style: normal; |
| 295 | font-weight: 400; | 295 | font-weight: 400; |
| 296 | line-height: 14px; color:#000; opacity: 0.5;} | 296 | line-height: 14px; color:#000; opacity: 0.5;} |
| 297 | .comment-spc{ margin-left:9px ;} | 297 | .comment-spc{ margin-left:9px ;} |
| 298 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} | 298 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} |
| 299 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} | 299 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} |
| 300 | 300 | ||
| 301 | /* team */ | 301 | /* team */ |
| 302 | .verified-team{ width: 129px; | 302 | .verified-team{ width: 129px; |
| 303 | display: inline-table; | 303 | display: inline-table; |
| 304 | margin-top: 7px; | 304 | margin-top: 7px; |
| 305 | position: absolute; | 305 | position: absolute; |
| 306 | margin-left: 10px;} | 306 | margin-left: 10px;} |
| 307 | .verified-team img{ width: 100%; display: block; float: left;} | 307 | .verified-team img{ width: 100%; display: block; float: left;} |
| 308 | .active-company{ border-bottom: 4px solid #ef484f;} | 308 | .active-company{ border-bottom: 4px solid #ef484f;} |
| 309 | .active-company a{ font-weight: 700 !important;} | 309 | .active-company a{ font-weight: 700 !important;} |
| 310 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} | 310 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} |
| 311 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} | 311 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} |
| 312 | .c-social li a img{ width: auto !important;} | 312 | .c-social li a img{ width: auto !important;} |
| 313 | .company-footer{ width: 100%; display: block; float: left;} | 313 | .company-footer{ width: 100%; display: block; float: left;} |
| 314 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} | 314 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} |
| 315 | .company-footer ul li{float: left; margin-right: 10px;} | 315 | .company-footer ul li{float: left; margin-right: 10px;} |
| 316 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} | 316 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} |
| 317 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} | 317 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} |
| 318 | .company-footer .next{float: right; margin-top: -25px; | 318 | .company-footer .next{float: right; margin-top: -25px; |
| 319 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} | 319 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} |
| 320 | .company-footer .next img{ width: 25px; | 320 | .company-footer .next img{ width: 25px; |
| 321 | margin-top: 17px; | 321 | margin-top: 17px; |
| 322 | margin-left: 16px;} | 322 | margin-left: 16px;} |
| 323 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} | 323 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} |
| 324 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; | 324 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; |
| 325 | border-radius: 4px; | 325 | border-radius: 4px; |
| 326 | padding: 23px; } | 326 | padding: 23px; } |
| 327 | /* members */ | 327 | /* members */ |
| 328 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} | 328 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} |
| 329 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} | 329 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} |
| 330 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} | 330 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} |
| 331 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} | 331 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} |
| 332 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} | 332 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} |
| 333 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} | 333 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} |
| 334 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} | 334 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} |
| 335 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} | 335 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} |
| 336 | .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; | 336 | .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; |
| 337 | margin-left: 8px !important; | 337 | margin-left: 8px !important; |
| 338 | margin-top: 6px; | 338 | margin-top: 6px; |
| 339 | border-radius: 5px;} | 339 | border-radius: 5px;} |
| 340 | 340 | ||
| 341 | /* popup */ | 341 | /* popup */ |
| 342 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} | 342 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} |
| 343 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} | 343 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} |
| 344 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ | 344 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ |
| 345 | filter: blur(8px); | 345 | filter: blur(8px); |
| 346 | -webkit-filter: blur(8px);} | 346 | -webkit-filter: blur(8px);} |
| 347 | .popup-set{ width: 530px; | 347 | .popup-set{ width: 530px; |
| 348 | background-color: #fff; | 348 | background-color: #fff; |
| 349 | border-radius: 0 40px 40px 40px; | 349 | border-radius: 0 40px 40px 40px; |
| 350 | padding: 30px; | 350 | padding: 30px; |
| 351 | position: relative; | 351 | position: relative; |
| 352 | margin: 0 auto; | 352 | margin: 0 auto; |
| 353 | margin-top: 80px;} | 353 | margin-top: 80px;} |
| 354 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} | 354 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} |
| 355 | .popup-header img{ width: 109px; display: block; float: left;} | 355 | .popup-header img{ width: 109px; display: block; float: left;} |
| 356 | .popup-header ul{ display: block; | 356 | .popup-header ul{ display: block; |
| 357 | list-style-type: none; | 357 | list-style-type: none; |
| 358 | margin: 0px; | 358 | margin: 0px; |
| 359 | padding: 0px; | 359 | padding: 0px; |
| 360 | margin-top: 75px; | 360 | margin-top: 75px; |
| 361 | margin-left: 20px; | 361 | margin-left: 20px; |
| 362 | float: left;} | 362 | float: left;} |
| 363 | .popup-header ul li{ float: left; margin-right: 31px;} | 363 | .popup-header ul li{ float: left; margin-right: 31px;} |
| 364 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} | 364 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} |
| 365 | .popup-header ul li a{color:#514DA7;} | 365 | .popup-header ul li a{color:#514DA7;} |
| 366 | .popup-header ul li a span{ display: block; | 366 | .popup-header ul li a span{ display: block; |
| 367 | float: left; | 367 | float: left; |
| 368 | margin-left: 10px; | 368 | margin-left: 10px; |
| 369 | width: 50px; | 369 | width: 50px; |
| 370 | font-size: 14px; | 370 | font-size: 14px; |
| 371 | line-height: 17px; | 371 | line-height: 17px; |
| 372 | margin-top: -10px;} | 372 | margin-top: -10px;} |
| 373 | .popup-body{ width: 100%; | 373 | .popup-body{ width: 100%; |
| 374 | display: block; | 374 | display: block; |
| 375 | float: left; | 375 | float: left; |
| 376 | max-height: 450px; | 376 | max-height: 450px; |
| 377 | overflow-y: auto; | 377 | overflow-y: auto; |
| 378 | padding-right: 16px;} | 378 | padding-right: 16px;} |
| 379 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} | 379 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} |
| 380 | 380 | ||
| 381 | 381 | ||
| 382 | .popup-forms .floating-label label{font-size: 11px; | 382 | .popup-forms .floating-label label{font-size: 11px; |
| 383 | line-height: 19px; | 383 | line-height: 19px; |
| 384 | font-size: 16px; | 384 | font-size: 16px; |
| 385 | font-weight: 400; | 385 | font-weight: 400; |
| 386 | color: #000; | 386 | color: #000; |
| 387 | position: absolute; | 387 | position: absolute; |
| 388 | margin: 0px 10px 0 10px; | 388 | margin: 0px 10px 0 10px; |
| 389 | background: #fff; | 389 | background: #fff; |
| 390 | padding: 0 3px; | 390 | padding: 0 3px; |
| 391 | position: absolute; | 391 | position: absolute; |
| 392 | pointer-events: none; | 392 | pointer-events: none; |
| 393 | top: 15px; opacity: 0.5; | 393 | top: 15px; opacity: 0.5; |
| 394 | transition: 0.2s ease all; | 394 | transition: 0.2s ease all; |
| 395 | -moz-transition: 0.2s ease all; | 395 | -moz-transition: 0.2s ease all; |
| 396 | -webkit-transition: 0.2s ease all; | 396 | -webkit-transition: 0.2s ease all; |
| 397 | } | 397 | } |
| 398 | 398 | ||
| 399 | .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 399 | .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} |
| 400 | .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} | 400 | .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} |
| 401 | 401 | ||
| 402 | .popup-forms .floating-input input:focus{ outline: none;} | 402 | .popup-forms .floating-input input:focus{ outline: none;} |
| 403 | .popup-forms .floating-label input:focus~label{ | 403 | .popup-forms .floating-label input:focus~label{ |
| 404 | top: -11px; | 404 | top: -11px; |
| 405 | color: #514DA7; | 405 | color: #514DA7; |
| 406 | font-size: 14px;background:#fff; | 406 | font-size: 14px;background:#fff; |
| 407 | opacity:1; | 407 | opacity:1; |
| 408 | } | 408 | } |
| 409 | .popup-forms .floating-label input:not(:placeholder-shown)~label { | 409 | .popup-forms .floating-label input:not(:placeholder-shown)~label { |
| 410 | position: absolute; | 410 | position: absolute; |
| 411 | top: -11px; | 411 | top: -11px; |
| 412 | background:#fff; | 412 | background:#fff; |
| 413 | 413 | ||
| 414 | font-size: 14px; | 414 | font-size: 14px; |
| 415 | color: #514DA7;opacity:1; | 415 | color: #514DA7;opacity:1; |
| 416 | } | 416 | } |
| 417 | /* textarea */ | 417 | /* textarea */ |
| 418 | .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 418 | .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} |
| 419 | .popup-forms .floating-input textarea:focus{ outline: none;} | 419 | .popup-forms .floating-input textarea:focus{ outline: none;} |
| 420 | .popup-forms .floating-label textarea:focus~label{ | 420 | .popup-forms .floating-label textarea:focus~label{ |
| 421 | top: -11px; | 421 | top: -11px; |
| 422 | color: #514DA7; | 422 | color: #514DA7; |
| 423 | font-size: 14px;background:#fff; | 423 | font-size: 14px;background:#fff; |
| 424 | opacity:1; | 424 | opacity:1; |
| 425 | } | 425 | } |
| 426 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { | 426 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { |
| 427 | position: absolute; | 427 | position: absolute; |
| 428 | top: -11px; | 428 | top: -11px; |
| 429 | background:#fff; | 429 | background:#fff; |
| 430 | 430 | ||
| 431 | font-size: 14px; | 431 | font-size: 14px; |
| 432 | color: #514DA7;opacity:1; | 432 | color: #514DA7;opacity:1; |
| 433 | } | 433 | } |
| 434 | .popup-forms .form-group{ margin-bottom: 20px;} | 434 | .popup-forms .form-group{ margin-bottom: 20px;} |
| 435 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} | 435 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} |
| 436 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} | 436 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} |
| 437 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } | 437 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } |
| 438 | .interests li{ float: left; margin-right: 20px; position: relative;} | 438 | .interests li{ float: left; margin-right: 20px; position: relative;} |
| 439 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; | 439 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; |
| 440 | border-radius: 5px;} | 440 | border-radius: 5px;} |
| 441 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; | 441 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; |
| 442 | border-radius: 5px; background-color: #fff !important; width: 125px;} | 442 | border-radius: 5px; background-color: #fff !important; width: 125px;} |
| 443 | .interests li a{ width: 20px; | 443 | .interests li a{ width: 20px; |
| 444 | display: block; | 444 | display: block; |
| 445 | float: right; | 445 | float: right; |
| 446 | margin: 6px 0px 0 114px; | 446 | margin: 6px 0px 0 114px; |
| 447 | position: absolute;} | 447 | position: absolute;} |
| 448 | /* color codes */ | 448 | /* color codes */ |
| 449 | .silver{background-color: #C4C4C4;} | 449 | .silver{background-color: #C4C4C4;} |
| 450 | .milk-punch{background-color: #FFF6D7;} | 450 | .milk-punch{background-color: #FFF6D7;} |
| 451 | .french-pass{background-color: #BDDBFF;} | 451 | .french-pass{background-color: #BDDBFF;} |
| 452 | .cyan-french-pass{background-color: #C0FAFE;} | 452 | .cyan-french-pass{background-color: #C0FAFE;} |
| 453 | .cosmos{background-color: #FFDBDC;} | 453 | .cosmos{background-color: #FFDBDC;} |
| 454 | .cape-Honey{background-color: #FEE6AC;} | 454 | .cape-Honey{background-color: #FEE6AC;} |
| 455 | .snuff{background-color: #E5DFF0;} | 455 | .snuff{background-color: #E5DFF0;} |
| 456 | .catskillWhite{background-color: #DFE7EF;} | 456 | .catskillWhite{background-color: #DFE7EF;} |
| 457 | .white{background-color: #fff;} | 457 | .white{background-color: #fff;} |
| 458 | /* color codes */ | 458 | /* color codes */ |
| 459 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 459 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 460 | .colors li{ display: block; float: left; margin-right: 14px;} | 460 | .colors li{ display: block; float: left; margin-right: 14px;} |
| 461 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} | 461 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} |
| 462 | .colors li a.active{border: 2px solid #514DA7;} | 462 | .colors li a.active{border: 2px solid #514DA7;} |
| 463 | .popup-forms .next-bt{ width: 99px; | 463 | .popup-forms .next-bt{ width: 99px; |
| 464 | height: 54px; | 464 | height: 54px; |
| 465 | background: #514DA7; | 465 | background: #514DA7; |
| 466 | display: block; | 466 | display: block; |
| 467 | text-align: center; | 467 | text-align: center; |
| 468 | border-radius: 5px; | 468 | border-radius: 5px; |
| 469 | color: #fff; | 469 | color: #fff; |
| 470 | font-size: 16px; | 470 | font-size: 16px; |
| 471 | line-height: 54px; | 471 | line-height: 54px; |
| 472 | font-weight: 600; | 472 | font-weight: 600; |
| 473 | position: absolute; | 473 | position: absolute; |
| 474 | right: 50px; | 474 | right: 50px; |
| 475 | bottom: -80px;} | 475 | bottom: -80px;} |
| 476 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} | 476 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} |
| 477 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} | 477 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} |
| 478 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; | 478 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; |
| 479 | display: block; | 479 | display: block; |
| 480 | width: 270px; | 480 | width: 270px; |
| 481 | float: right; | 481 | float: right; |
| 482 | margin-top: 10px;} | 482 | margin-top: 10px;} |
| 483 | .select-arrow{ display: block; | 483 | .select-arrow{ display: block; |
| 484 | float: right; | 484 | float: right; |
| 485 | position: absolute; | 485 | position: absolute; |
| 486 | top: 13px; | 486 | top: 13px; |
| 487 | right: 17px; | 487 | right: 17px; |
| 488 | background: #fff; | 488 | background: #fff; |
| 489 | width: 31px; | 489 | width: 31px; |
| 490 | height: 17px;} | 490 | height: 17px;} |
| 491 | .select-arrow img{width: 15px;} | 491 | .select-arrow img{width: 15px;} |
| 492 | .popup-forms .save-bt{ width: 150px; | 492 | .popup-forms .save-bt{ width: 150px; |
| 493 | height: 54px; | 493 | height: 54px; |
| 494 | background: #514DA7; | 494 | background: #514DA7; |
| 495 | display: block; | 495 | display: block; |
| 496 | text-align: center; | 496 | text-align: center; |
| 497 | border-radius: 5px; | 497 | border-radius: 5px; |
| 498 | color: #fff; | 498 | color: #fff; |
| 499 | font-size: 16px; | 499 | font-size: 16px; |
| 500 | line-height: 54px; | 500 | line-height: 54px; |
| 501 | font-weight: 600; | 501 | font-weight: 600; |
| 502 | position: absolute; | 502 | position: absolute; |
| 503 | right: 50px; | 503 | right: 50px; |
| 504 | bottom: -80px;} | 504 | bottom: -80px;} |
| 505 | /* insights */ | 505 | /* insights */ |
| 506 | .insights-wrp{ background-image: url(../images/insights-bg.svg); | 506 | .insights-wrp{ background-image: url(../images/insights-bg.svg); |
| 507 | background-color: #DFE7EF; | 507 | background-color: #DFE7EF; |
| 508 | height: 100%; | 508 | height: 100%; |
| 509 | background-repeat: no-repeat; | 509 | background-repeat: no-repeat; |
| 510 | background-position: top center; | 510 | background-position: top center; |
| 511 | background-size: contain; padding: 0 50px 0 100px;} | 511 | background-size: contain; padding: 0 50px 0 100px;} |
| 512 | .insights-profile{width: 32px; | 512 | .insights-profile{width: 32px; |
| 513 | height: 32px; | 513 | height: 32px; |
| 514 | float: right; | 514 | float: right; |
| 515 | display: block; | 515 | display: block; |
| 516 | position: absolute; | 516 | position: absolute; |
| 517 | right: 0;} | 517 | right: 0;} |
| 518 | .insights-searh a{ width: 21px; | 518 | .insights-searh a{ width: 21px; |
| 519 | height: 25px; | 519 | height: 25px; |
| 520 | display: block; | 520 | display: block; |
| 521 | position: absolute; | 521 | position: absolute; |
| 522 | right: 24px; | 522 | right: 24px; |
| 523 | top: 23px;} | 523 | top: 23px;} |
| 524 | .insights-searh a img{ width: 100%;} | 524 | .insights-searh a img{ width: 100%;} |
| 525 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} | 525 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} |
| 526 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 526 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 527 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 527 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 528 | } | 528 | } |
| 529 | 529 | ||
| 530 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 530 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 531 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 531 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 532 | } | 532 | } |
| 533 | 533 | ||
| 534 | .insights-searh input::placeholder { | 534 | .insights-searh input::placeholder { |
| 535 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 535 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 536 | } | 536 | } |
| 537 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 537 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 538 | /* insights 2 */ | 538 | /* insights 2 */ |
| 539 | .back-to-lib{ font-size: 12px; | 539 | .back-to-lib{ font-size: 12px; |
| 540 | line-height: 14px; | 540 | line-height: 14px; |
| 541 | color: #000000; | 541 | color: #000000; |
| 542 | font-weight: 500; | 542 | font-weight: 500; |
| 543 | display: block; | 543 | display: block; |
| 544 | float: left;} | 544 | float: left;} |
| 545 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} | 545 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} |
| 546 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} | 546 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} |
| 547 | .insights-list li{ display: block; float: left;} | 547 | .insights-list li{ display: block; float: left;} |
| 548 | .insights-list li a{ display: block; | 548 | .insights-list li a{ display: block; |
| 549 | float: left; | 549 | float: left; |
| 550 | margin: 0px; | 550 | margin: 0px; |
| 551 | padding: 5px 14px; | 551 | padding: 5px 14px; |
| 552 | background: #70A853; | 552 | background: #70A853; |
| 553 | font-size: 15px;text-transform:uppercase; | 553 | font-size: 15px;text-transform:uppercase; |
| 554 | font-weight: 700; | 554 | font-weight: 700; |
| 555 | font-style: normal; | 555 | font-style: normal; |
| 556 | color: #fff; | 556 | color: #fff; |
| 557 | border-radius: 50px;} | 557 | border-radius: 50px;} |
| 558 | .insights-details{ width: 850px;display:block; float: left;} | 558 | .insights-details{ width: 850px;display:block; float: left;} |
| 559 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} | 559 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} |
| 560 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} | 560 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} |
| 561 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} | 561 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} |
| 562 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} | 562 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} |
| 563 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} | 563 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} |
| 564 | .features-group-list li a:hover{ text-decoration: none;} | 564 | .features-group-list li a:hover{ text-decoration: none;} |
| 565 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} | 565 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} |
| 566 | .features-group-list li a img{ width: 9px; } | 566 | .features-group-list li a img{ width: 9px; } |
| 567 | .insights-rply img{ width: 14px;} | 567 | .insights-rply img{ width: 14px;} |
| 568 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} | 568 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} |
| 569 | .insights-rply:hover{color: #70A853;} | 569 | .insights-rply:hover{color: #70A853;} |
| 570 | .active-green{border-bottom: 4px solid #70A853;} | 570 | .active-green{border-bottom: 4px solid #70A853;} |
| 571 | .insights-spc{padding: 0 100px;} | 571 | .insights-spc{padding: 0 100px;} |
| 572 | 572 | ||
| 573 | /* insight page 1 */ | 573 | /* insight page 1 */ |
| 574 | .insights-border{height: 1px; | 574 | .insights-border{height: 1px; |
| 575 | text-align: center; | 575 | text-align: center; |
| 576 | display: block; | 576 | display: block; |
| 577 | background: #FFFFFF; | 577 | background: #FFFFFF; |
| 578 | clear: both; | 578 | clear: both; |
| 579 | width: 100%; | 579 | width: 100%; |
| 580 | margin-top: 30px;} | 580 | margin-top: 30px;} |
| 581 | .insights-border span{ text-align: center; | 581 | .insights-border span{ text-align: center; |
| 582 | position: relative; | 582 | position: relative; |
| 583 | top: -13px; | 583 | top: -13px; |
| 584 | background: #DFE7EF; | 584 | background: #DFE7EF; |
| 585 | margin: 0 11px; | 585 | margin: 0 11px; |
| 586 | padding: 0px 10px;} | 586 | padding: 0px 10px;} |
| 587 | .insights-list-filter{display:table;float:left;width:100%;} | 587 | .insights-list-filter{display:table;float:left;width:100%;} |
| 588 | .insights-list-filter ul{ list-style-type: none; text-align: center; | 588 | .insights-list-filter ul{ list-style-type: none; text-align: center; |
| 589 | margin-top:40px; | 589 | margin-top:40px; |
| 590 | padding: 0px; | 590 | padding: 0px; |
| 591 | display: block; | 591 | display: block; |
| 592 | float: left; | 592 | float: left; |
| 593 | width: 100%;} | 593 | width: 100%;} |
| 594 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} | 594 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} |
| 595 | .insights-list-filter li a{padding: 5px 20px;color: #fff; | 595 | .insights-list-filter li a{padding: 5px 20px;color: #fff; |
| 596 | float: left; | 596 | float: left; |
| 597 | text-transform: uppercase; | 597 | text-transform: uppercase; |
| 598 | line-height: 26px; | 598 | line-height: 26px; |
| 599 | text-align: center; | 599 | text-align: center; |
| 600 | font-weight: 600; | 600 | font-weight: 600; |
| 601 | font-size: 20px; | 601 | font-size: 20px; |
| 602 | border-radius:30px; | 602 | border-radius:30px; |
| 603 | } | 603 | } |
| 604 | .insights-list-filter li a:hover{text-decoration:none;} | 604 | .insights-list-filter li a:hover{text-decoration:none;} |
| 605 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} | 605 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} |
| 606 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} | 606 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} |
| 607 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} | 607 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} |
| 608 | .insights-products p{font-size:15px; margin-bottom: 0px;} | 608 | .insights-products p{font-size:15px; margin-bottom: 0px;} |
| 609 | .insights-products span{float:right;} | 609 | .insights-products span{float:right;} |
| 610 | .insight-mb-spc{margin-bottom:34px;} | 610 | .insight-mb-spc{margin-bottom:34px;} |
| 611 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} | 611 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} |
| 612 | .insights-products a{ width: 18px; display: block; float: right;} | 612 | .insights-products a{ width: 18px; display: block; float: right;} |
| 613 | 613 | ||
| 614 | /* colors */ | 614 | /* colors */ |
| 615 | .lavender-blue-bg{background:#C1C0FE;} | 615 | .lavender-blue-bg{background:#C1C0FE;} |
| 616 | .golden-tainoi-bg{background:#FBC647;} | 616 | .golden-tainoi-bg{background:#FBC647;} |
| 617 | .red-orange-bg{background:#F74536;} | 617 | .red-orange-bg{background:#F74536;} |
| 618 | .morning-glory-bg{background:#9DDADB;} | 618 | .morning-glory-bg{background:#9DDADB;} |
| 619 | .dark-green-copper-bg{background:#477970;} | 619 | .dark-green-copper-bg{background:#477970;} |
| 620 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} | 620 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} |
| 621 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} | 621 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} |
| 622 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} | 622 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} |
| 623 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} | 623 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} |
| 624 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} | 624 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} |
| 625 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} | 625 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} |
| 626 | .radical-red-col{color:#EF484F;} | 626 | .radical-red-col{color:#EF484F;} |
| 627 | .selective-yellow-col{color:#FABB05;} | 627 | .selective-yellow-col{color:#FABB05;} |
| 628 | .lavender-blue-col{color:#C1C0FE;} | 628 | .lavender-blue-col{color:#C1C0FE;} |
| 629 | .dark-green-copper-col{color:#477970;} | 629 | .dark-green-copper-col{color:#477970;} |
| 630 | .purple-heart-col{color:#673AB7;} | 630 | .purple-heart-col{color:#673AB7;} |
| 631 | .silver-col{color:#C4C4C4;} | 631 | .silver-col{color:#C4C4C4;} |
| 632 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} | 632 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} |
| 633 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} | 633 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} |
| 634 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} | 634 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} |
| 635 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} | 635 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} |
| 636 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} | 636 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} |
| 637 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} | 637 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} |
| 638 | /* button */ | 638 | /* button */ |
| 639 | .switch-btn { | 639 | .switch-btn { |
| 640 | position: relative; | 640 | position: relative; |
| 641 | display: inline-block; | 641 | display: inline-block; |
| 642 | width: 44px; | 642 | width: 44px; |
| 643 | height: 24px; | 643 | height: 24px; |
| 644 | } | 644 | } |
| 645 | .switch-btn input { | 645 | .switch-btn input { |
| 646 | opacity: 0; | 646 | opacity: 0; |
| 647 | width: 0; | 647 | width: 0; |
| 648 | height: 0; | 648 | height: 0; |
| 649 | } | 649 | } |
| 650 | .rounded-toggle { | 650 | .rounded-toggle { |
| 651 | position: absolute; | 651 | position: absolute; |
| 652 | cursor: pointer; | 652 | cursor: pointer; |
| 653 | top: 0; | 653 | top: 0; |
| 654 | left: 0; | 654 | left: 0; |
| 655 | right: 0; | 655 | right: 0; |
| 656 | bottom: 0; | 656 | bottom: 0; |
| 657 | background: #DFE7EF; | 657 | background: #DFE7EF; |
| 658 | -webkit-transition: .4s; | 658 | -webkit-transition: .4s; |
| 659 | transition: .4s; | 659 | transition: .4s; |
| 660 | border-radius: 34px; | 660 | border-radius: 34px; |
| 661 | } | 661 | } |
| 662 | .rounded-toggle:before { | 662 | .rounded-toggle:before { |
| 663 | position: absolute; | 663 | position: absolute; |
| 664 | content: ""; | 664 | content: ""; |
| 665 | height: 14px; | 665 | height: 14px; |
| 666 | width: 13px; | 666 | width: 13px; |
| 667 | left: 6px; | 667 | left: 6px; |
| 668 | bottom: 5px; | 668 | bottom: 5px; |
| 669 | background-color: #514DA7; | 669 | background-color: #514DA7; |
| 670 | -webkit-transition: .4s; | 670 | -webkit-transition: .4s; |
| 671 | transition: .4s; | 671 | transition: .4s; |
| 672 | border-radius: 50%; | 672 | border-radius: 50%; |
| 673 | } | 673 | } |
| 674 | .toggle-btn:checked + .rounded-toggle { | 674 | .toggle-btn:checked + .rounded-toggle { |
| 675 | background: #DFE7EF; | 675 | background: #DFE7EF; |
| 676 | } | 676 | } |
| 677 | 677 | ||
| 678 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} | 678 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} |
| 679 | .toggle-btn:focus + .rounded-toggle{ | 679 | .toggle-btn:focus + .rounded-toggle{ |
| 680 | box-shadow: 0 0 1px #2196F3; | 680 | box-shadow: 0 0 1px #2196F3; |
| 681 | } | 681 | } |
| 682 | .toggle-btn:checked + .rounded-toggle:before { | 682 | .toggle-btn:checked + .rounded-toggle:before { |
| 683 | -webkit-transform: translateX(19px); | 683 | -webkit-transform: translateX(19px); |
| 684 | -ms-transform: translateX(19px); | 684 | -ms-transform: translateX(19px); |
| 685 | transform: translateX(19px); | 685 | transform: translateX(19px); |
| 686 | } | 686 | } |
| 687 | .switch-bt-wrp{margin-top: 15px; width: 100px; | 687 | .switch-bt-wrp{margin-top: 15px; width: 100px; |
| 688 | float: right; | 688 | float: right; |
| 689 | text-align: right; } | 689 | text-align: right; } |
| 690 | .switch-btn{float: left ;} | 690 | .switch-btn{float: left ;} |
| 691 | .onoff{ margin-top: -3px; float: right;} | 691 | .onoff{ margin-top: -3px; float: right;} |
| 692 | 692 | ||
| 693 | /* intro Episode */ | 693 | /* intro Episode */ |
| 694 | .episode-intro{ padding: 0 30px 0 30px; height: 100%;} | 694 | .episode-intro{ padding: 0 30px 0 30px; height: 100%;} |
| 695 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; | 695 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; |
| 696 | bottom: 50px; z-index: 2; | 696 | bottom: 50px; z-index: 2; |
| 697 | right: 0; | 697 | right: 0; |
| 698 | left: 0;} | 698 | left: 0;} |
| 699 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} | 699 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} |
| 700 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; | 700 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; |
| 701 | display: block; margin-top: 28px; | 701 | display: block; margin-top: 28px; |
| 702 | } | 702 | } |
| 703 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} | 703 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} |
| 704 | .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} | 704 | .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} |
| 705 | .bottom-startup .title{ font-size: 48px; | 705 | .bottom-startup .title{ font-size: 48px; |
| 706 | font-family: 'Zuume'; | 706 | font-family: 'Zuume'; |
| 707 | font-weight: 400; | 707 | font-weight: 400; |
| 708 | line-height: 144px; | 708 | line-height: 144px; |
| 709 | color: #514DA7; | 709 | color: #514DA7; |
| 710 | width: 440px; | 710 | width: 440px; |
| 711 | height: 100%; float: left; | 711 | height: 100%; float: left; |
| 712 | border-right: 0.8px solid #514DA7; | 712 | border-right: 0.8px solid #514DA7; |
| 713 | text-align: center;} | 713 | text-align: center;} |
| 714 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; | 714 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; |
| 715 | } | 715 | } |
| 716 | .bottom-startup .author-sec .top{ width: 100%; | 716 | .bottom-startup .author-sec .top{ width: 100%; |
| 717 | display: block; | 717 | display: block; |
| 718 | float: left; | 718 | float: left; |
| 719 | padding: 20px 10px 10px 10px; | 719 | padding: 20px 10px 10px 10px; |
| 720 | height: 72px;} | 720 | height: 72px;} |
| 721 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 721 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 722 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; | 722 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; |
| 723 | font-family: 'Zuume'; | 723 | font-family: 'Zuume'; |
| 724 | font-weight: 400;} | 724 | font-weight: 400;} |
| 725 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; | 725 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; |
| 726 | border-top: 0.8px solid #514DA7; | 726 | border-top: 0.8px solid #514DA7; |
| 727 | display: block; | 727 | display: block; |
| 728 | float: left; | 728 | float: left; |
| 729 | padding: 0px 10px 0px 10px; | 729 | padding: 0px 10px 0px 10px; |
| 730 | height: 72px;} | 730 | height: 72px;} |
| 731 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} | 731 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} |
| 732 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} | 732 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} |
| 733 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 733 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 734 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; | 734 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; |
| 735 | font-family: 'Zuume'; | 735 | font-family: 'Zuume'; |
| 736 | font-weight: 400;} | 736 | font-weight: 400;} |
| 737 | .bottom-startup .author-sec.info{ width: 90px;} | 737 | .bottom-startup .author-sec.info{ width: 90px;} |
| 738 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } | 738 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } |
| 739 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} | 739 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} |
| 740 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} | 740 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} |
| 741 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} | 741 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} |
| 742 | .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} | 742 | .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} |
| 743 | .bottom-startup .start a img{ width: 24px; | 743 | .bottom-startup .start a img{ width: 24px; |
| 744 | display: block; | 744 | display: block; |
| 745 | margin: 0 auto; | 745 | margin: 0 auto; |
| 746 | margin-bottom: 10px;} | 746 | margin-bottom: 10px;} |
| 747 | 747 | ||
| 748 | /* compare */ | 748 | /* compare */ |
| 749 | .compare-c{ width: 475px; | 749 | .compare-c{ width: 475px; |
| 750 | display: block; | 750 | display: block; |
| 751 | margin: 0 auto; | 751 | margin: 0 auto; |
| 752 | bottom: 50%; | 752 | bottom: 50%; |
| 753 | position: absolute; | 753 | position: absolute; |
| 754 | left: 0; | 754 | left: 0; |
| 755 | right: 0; | 755 | right: 0; |
| 756 | z-index: 2;} | 756 | z-index: 2;} |
| 757 | .compare-c .logo-1{ width: 200px; display: block; float: left;} | 757 | .compare-c .logo-1{ width: 200px; display: block; float: left;} |
| 758 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; | 758 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; |
| 759 | margin-top: 25px;} | 759 | margin-top: 25px;} |
| 760 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} | 760 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} |
| 761 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} | 761 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} |
| 762 | .epi-bg{ position: absolute; | 762 | .epi-bg{ position: absolute; |
| 763 | bottom: -152px; | 763 | bottom: -152px; |
| 764 | left: 18%; width: 1920px; | 764 | left: 18%; width: 1920px; |
| 765 | z-index: 1;} | 765 | z-index: 1;} |
| 766 | /* intro startup */ | 766 | /* intro startup */ |
| 767 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } | 767 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } |
| 768 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } | 768 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } |
| 769 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} | 769 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} |
| 770 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } | 770 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } |
| 771 | .intro-startup .footer-bottom ul li{ height: 5px; | 771 | .intro-startup .footer-bottom ul li{ height: 5px; |
| 772 | display: block; | 772 | display: block; |
| 773 | float: left; | 773 | float: left; |
| 774 | width: 49%; | 774 | width: 49%; |
| 775 | background: #fff;} | 775 | background: #fff;} |
| 776 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} | 776 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} |
| 777 | .intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } | 777 | .intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } |
| 778 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} | 778 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} |
| 779 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} | 779 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} |
| 780 | .intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 12px; display: block; float: left;} | 780 | .intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 12px; display: block; float: left;} |
| 781 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} | 781 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} |
| 782 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} | 782 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} |
| 783 | .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; | 783 | .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; |
| 784 | right: 0; | 784 | right: 0; |
| 785 | margin: 0 auto; | 785 | margin: 0 auto; |
| 786 | bottom: 0; | 786 | bottom: 0; |
| 787 | top: unset; | 787 | top: unset; |
| 788 | background-position: bottom;} | 788 | background-position: bottom;} |
| 789 | .samsung-compare-c{ width: 382px; | 789 | .samsung-compare-c{ width: 382px; |
| 790 | display: block; | 790 | display: block; |
| 791 | margin: 0 auto; | 791 | margin: 0 auto; |
| 792 | position: absolute; | 792 | position: absolute; |
| 793 | top: 13px; | 793 | top: 13px; |
| 794 | left: 0; | 794 | left: 0; |
| 795 | right: 0; overflow: hidden; | 795 | right: 0; overflow: hidden; |
| 796 | height: 702px;} | 796 | height: 702px;} |
| 797 | .samsung-compare-c img{ width: 100%;} | 797 | .samsung-compare-c img{ width: 100%;} |
| 798 | .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} | 798 | .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} |
| 799 | 799 | ||
| 800 | /* comment wrapper */ | 800 | /* comment wrapper */ |
| 801 | .smasung-g-10wrp .comment-box{ width: 428px; | 801 | .smasung-g-10wrp .comment-box{ width: 428px; |
| 802 | display: block; | 802 | display: block; |
| 803 | float: left; right: -394px; | 803 | float: left; right: -394px; |
| 804 | position: absolute; | 804 | position: absolute; |
| 805 | bottom: 100px;} | 805 | bottom: 100px;} |
| 806 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; | 806 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; |
| 807 | border: 1px solid #201E6A; | 807 | border: 1px solid #201E6A; |
| 808 | box-sizing: border-box; | 808 | box-sizing: border-box; |
| 809 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 809 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 810 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} | 810 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} |
| 811 | .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} | 811 | .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} |
| 812 | .comment-box-s-1 .footer{background: #F7F9FB; | 812 | .comment-box-s-1 .footer{background: #F7F9FB; |
| 813 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; | 813 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; |
| 814 | box-sizing: border-box; | 814 | box-sizing: border-box; |
| 815 | border-radius: 0px 0px 0px 25px;} | 815 | border-radius: 0px 0px 0px 25px;} |
| 816 | .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} | 816 | .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} |
| 817 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} | 817 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} |
| 818 | .key-arrow{ width: 50px; float: left; margin-top:5px;} | 818 | .key-arrow{ width: 50px; float: left; margin-top:5px;} |
| 819 | .comment-w-397{ width: 397px; float: right;} | 819 | .comment-w-397{ width: 397px; float: right;} |
| 820 | .comment-box .user-photo{ width: 200px; display: block; float: right;} | 820 | .comment-box .user-photo{ width: 200px; display: block; float: right;} |
| 821 | .spot-light-top{ width: 927px; | 821 | .spot-light-top{ width: 927px; |
| 822 | height: 100%; position: absolute; | 822 | height: 100%; position: absolute; |
| 823 | top: 0px; | 823 | top: 0px; |
| 824 | overflow: hidden; | 824 | overflow: hidden; |
| 825 | left: -350px; | 825 | left: -350px; |
| 826 | right: 0; | 826 | right: 0; |
| 827 | margin: 0 auto; } | 827 | margin: 0 auto; } |
| 828 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); | 828 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); |
| 829 | border: 1px solid #000000; | 829 | border: 1px solid #000000; |
| 830 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} | 830 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} |
| 831 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; | 831 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; |
| 832 | margin-top: -63px;} | 832 | margin-top: -63px;} |
| 833 | .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} | 833 | .app-discovery .top-user img{ width:100px; display: block; margin:0 auto; margin-top: 20px;} |
| 834 | .app-discovery h1{font-size: 60px; | 834 | .app-discovery h1{font-size: 60px; |
| 835 | font-family: 'Zuume'; margin-top: 136px; | 835 | font-family: 'Zuume'; margin-top: 136px; |
| 836 | font-weight: 400; | 836 | font-weight: 400; |
| 837 | line-height: 66px; width: 100%; display: block; text-align: center; | 837 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 838 | color: #000;} | 838 | color: #000;} |
| 839 | .app-discovery h2{font-size: 60px; | 839 | .app-discovery h2{font-size: 60px; |
| 840 | font-family: 'Zuume'; | 840 | font-family: 'Zuume'; |
| 841 | font-weight: 300; | 841 | font-weight: 300; |
| 842 | line-height: 66px; width: 100%; display: block; text-align: center; | 842 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 843 | color: #000;} | 843 | color: #000;} |
| 844 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} | 844 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} |
| 845 | .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} | 845 | .popcorn-set{ position: absolute; width: 120px; display: block; left: 50px; bottom: 0;} |
| 846 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } | 846 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } |
| 847 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} | 847 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} |
| 848 | .ft-comments-group{display: block; | 848 | .ft-comments-group{display: block; |
| 849 | float: left; | 849 | float: left; |
| 850 | padding-top: 23px; width: 100%; | 850 | padding-top: 23px; width: 100%; |
| 851 | height: 100%; padding-right: 15px; | 851 | height: 100%; padding-right: 15px; |
| 852 | } | 852 | } |
| 853 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} | 853 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} |
| 854 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 854 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 855 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} | 855 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} |
| 856 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} | 856 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} |
| 857 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} | 857 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} |
| 858 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} | 858 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} |
| 859 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } | 859 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } |
| 860 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} | 860 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} |
| 861 | .ft-comments-group .comments-detail p{ margin-top: 2px; | 861 | .ft-comments-group .comments-detail p{ margin-top: 2px; |
| 862 | font-size: 12px; | 862 | font-size: 12px; |
| 863 | line-height: 14px; | 863 | line-height: 14px; |
| 864 | font-weight: 400; | 864 | font-weight: 400; |
| 865 | color: #000000; | 865 | color: #000000; |
| 866 | margin-bottom: 0px; | 866 | margin-bottom: 0px; |
| 867 | width: 100%; | 867 | width: 100%; |
| 868 | display: block; | 868 | display: block; |
| 869 | float: left;} | 869 | float: left;} |
| 870 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} | 870 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} |
| 871 | .white-bg{ background-color: #fff;} | 871 | .white-bg{ background-color: #fff;} |
| 872 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} | 872 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} |
| 873 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } | 873 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } |
| 874 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } | 874 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } |
| 875 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ | 875 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ |
| 876 | color: #514DA7; font-size: 12px; line-height: 14px; | 876 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 877 | } | 877 | } |
| 878 | 878 | ||
| 879 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 879 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 880 | color: #514DA7; font-size: 12px; line-height: 14px; | 880 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 881 | } | 881 | } |
| 882 | 882 | ||
| 883 | .comment-frm .frm-wdth input::placeholder { | 883 | .comment-frm .frm-wdth input::placeholder { |
| 884 | color: #514DA7; font-size: 12px; line-height: 14px; | 884 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 885 | } | 885 | } |
| 886 | .comment-frm .add-comment{background: #514DA7; | 886 | .comment-frm .add-comment{background: #514DA7; |
| 887 | border-radius: 5px; | 887 | border-radius: 5px; |
| 888 | font-size: 13px; | 888 | font-size: 13px; |
| 889 | line-height: 29px; | 889 | line-height: 29px; |
| 890 | color: #fff; | 890 | color: #fff; |
| 891 | padding: 5px 10px; | 891 | padding: 5px 10px; |
| 892 | display: block; | 892 | display: block; |
| 893 | width:111px; | 893 | width:111px; |
| 894 | float: right; text-align: center; | 894 | float: right; text-align: center; |
| 895 | height: 39px; | 895 | height: 39px; |
| 896 | } | 896 | } |
| 897 | .comment-frm .add-comment img{ width: 14px; | 897 | .comment-frm .add-comment img{ width: 14px; |
| 898 | 898 | ||
| 899 | } | 899 | } |
| 900 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} | 900 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} |
| 901 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} | 901 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} |
| 902 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} | 902 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} |
| 903 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; | 903 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; |
| 904 | border: 1px solid #201E6A; | 904 | border: 1px solid #201E6A; |
| 905 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 905 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 906 | border-radius: 25px 25px 25px 0px; } | 906 | border-radius: 25px 25px 25px 0px; } |
| 907 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} | 907 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} |
| 908 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} | 908 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} |
| 909 | .rly-comment-set li{ float: left; margin-right: 15px;} | 909 | .rly-comment-set li{ float: left; margin-right: 15px;} |
| 910 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} | 910 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} |
| 911 | .rly-comment-set li img{ width: 13px; | 911 | .rly-comment-set li img{ width: 13px; |
| 912 | float: left; | 912 | float: left; |
| 913 | display: block; | 913 | display: block; |
| 914 | margin-top: 8px; | 914 | margin-top: 8px; |
| 915 | margin-right: 6px;} | 915 | margin-right: 6px;} |
| 916 | .comments-a-wrp{ width: 629px; | 916 | .comments-a-wrp{ width: 629px; |
| 917 | display: block; | 917 | display: block; |
| 918 | float: right; | 918 | float: right; |
| 919 | position: absolute; | 919 | position: absolute; |
| 920 | bottom: 160px; | 920 | bottom: 160px; |
| 921 | right: 0;} | 921 | right: 0;} |
| 922 | /* thnaks Wrapper */ | 922 | /* thnaks Wrapper */ |
| 923 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} | 923 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} |
| 924 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } | 924 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } |
| 925 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} | 925 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} |
| 926 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; | 926 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; |
| 927 | box-sizing: border-box; | 927 | box-sizing: border-box; |
| 928 | border-radius: 15px; position: relative; | 928 | border-radius: 15px; position: relative; |
| 929 | z-index: 2;} | 929 | z-index: 2;} |
| 930 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; | 930 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; |
| 931 | margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} | 931 | margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} |
| 932 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} | 932 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} |
| 933 | .thanks-pay-wrp ul{ display: block; | 933 | .thanks-pay-wrp ul{ display: block; |
| 934 | margin-top: 50px; | 934 | margin-top: 50px; |
| 935 | margin: 32px 0 0 67px; | 935 | margin: 32px 0 0 67px; |
| 936 | padding: 0px; | 936 | padding: 0px; |
| 937 | list-style-type: none; | 937 | list-style-type: none; |
| 938 | width: 370px; | 938 | width: 370px; |
| 939 | float: left;} | 939 | float: left;} |
| 940 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} | 940 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} |
| 941 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} | 941 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} |
| 942 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} | 942 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} |
| 943 | .thanks-pay-wrp ul li a span img{ width: 8px; | 943 | .thanks-pay-wrp ul li a span img{ width: 8px; |
| 944 | display: block; | 944 | display: block; |
| 945 | float: left; | 945 | float: left; |
| 946 | margin-left: 3px; | 946 | margin-left: 3px; |
| 947 | margin-top: 4px; | 947 | margin-top: 4px; |
| 948 | margin-right: 5px;} | 948 | margin-right: 5px;} |
| 949 | .thanks-pay-wrp ul li a span{ font-size: 10px; | 949 | .thanks-pay-wrp ul li a span{ font-size: 10px; |
| 950 | line-height: 13px; | 950 | line-height: 13px; |
| 951 | color: #06034C; | 951 | color: #06034C; |
| 952 | width: 100%; | 952 | width: 100%; |
| 953 | display: block; | 953 | display: block; |
| 954 | float: left; | 954 | float: left; |
| 955 | margin-top: 4px;} | 955 | margin-top: 4px;} |
| 956 | .payments-spc-57{ margin:0 76px;} | 956 | .payments-spc-57{ margin:0 76px;} |
| 957 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} | 957 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} |
| 958 | .thanks-r-section{ width: 444px; | 958 | .thanks-r-section{ width: 444px; |
| 959 | display: block; | 959 | display: block; |
| 960 | float: right; | 960 | float: right; |
| 961 | position: absolute; | 961 | position: absolute; |
| 962 | right: 0; | 962 | right: 0; |
| 963 | bottom: 70px;} | 963 | bottom: 70px;} |
| 964 | .logo-common-wrp { | 964 | .logo-common-wrp { |
| 965 | width: 101px; | 965 | width: 101px; |
| 966 | display: block; | 966 | display: block; |
| 967 | margin: 0 auto; | 967 | margin: 0 auto; |
| 968 | } | 968 | } |
| 969 | .logo-common-wrp a{ width: 100%; display: block;} | 969 | .logo-common-wrp a{ width: 100%; display: block;} |
| 970 | .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} | 970 | .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} |
| 971 | .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} | 971 | .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} |
| 972 | .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} | 972 | .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} |
| 973 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 973 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 974 | left: -10px; | 974 | left: -10px; |
| 975 | top: -10px;} | 975 | top: -10px;} |
| 976 | .back-bt img{ width: 20px; margin-right: 5px;} | 976 | .back-bt img{ width: 20px; margin-right: 5px;} |
| 977 | .back-bt:hover{ text-decoration: none; color:#514DA7;} | 977 | .back-bt:hover{ text-decoration: none; color:#514DA7;} |
| 978 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 978 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 979 | left: -10px; | 979 | left: -10px; |
| 980 | bottom: -10px;} | 980 | bottom: -10px;} |
| 981 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 981 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 982 | right: -10px; | 982 | right: -10px; |
| 983 | bottom: -10px;} | 983 | bottom: -10px;} |
| 984 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 984 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 985 | right: -10px; | 985 | right: -10px; |
| 986 | top: -10px;} | 986 | top: -10px;} |
| 987 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; | 987 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; |
| 988 | box-sizing: border-box; margin-top: 25px;} | 988 | box-sizing: border-box; margin-top: 25px;} |
| 989 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} | 989 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} |
| 990 | .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} | 990 | .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} |
| 991 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; | 991 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; |
| 992 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} | 992 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} |
| 993 | .rating-section li p.wdth{ width: 154px;} | 993 | .rating-section li p.wdth{ width: 154px;} |
| 994 | .rating-list{ display: block; float: right;} | 994 | .rating-list{ display: block; float: right;} |
| 995 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} | 995 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} |
| 996 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} | 996 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} |
| 997 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} | 997 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} |
| 998 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} | 998 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} |
| 999 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} | 999 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} |
| 1000 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} | 1000 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} |
| 1001 | .p-follows li a{ width: 100%; display: block; float: left;} | 1001 | .p-follows li a{ width: 100%; display: block; float: left;} |
| 1002 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} | 1002 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} |
| 1003 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } | 1003 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } |
| 1004 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} | 1004 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} |
| 1005 | /* single mobile */ | 1005 | /* single mobile */ |
| 1006 | .single-mobileInsight{ width: 404px; display: block; height: 721px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; | 1006 | .single-mobileInsight{ width: 404px; display: block; height: 721px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; |
| 1007 | right: 0; | 1007 | right: 0; |
| 1008 | margin: 0 auto; | 1008 | margin: 0 auto; |
| 1009 | bottom: 0; | 1009 | bottom: 0; |
| 1010 | top: unset;} | 1010 | top: unset;} |
| 1011 | .slide-img{ width: 402px; | 1011 | .slide-img{ width: 402px; |
| 1012 | position: absolute; | 1012 | position: absolute; |
| 1013 | bottom: 1px; | 1013 | bottom: 1px; |
| 1014 | left: 0; | 1014 | left: 0; |
| 1015 | right: 0; | 1015 | right: 0; |
| 1016 | margin: 0 auto;} | 1016 | margin: 0 auto;} |
| 1017 | 1017 | ||
| 1018 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; | 1018 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; |
| 1019 | top: 294px; | 1019 | top: 294px; |
| 1020 | right: -357px;} | 1020 | right: -357px;} |
| 1021 | .single-left-Insight-comments{position: absolute; | 1021 | .single-left-Insight-comments{position: absolute; |
| 1022 | width: 423px; | 1022 | width: 423px; |
| 1023 | display: block; | 1023 | display: block; |
| 1024 | top: 0; | 1024 | top: 0; |
| 1025 | left: -332px;} | 1025 | left: -332px;} |
| 1026 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; | 1026 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; |
| 1027 | margin-bottom: -20px;} | 1027 | margin-bottom: -20px;} |
| 1028 | .custom-c-style{border-radius:0px 25px 25px 25px;} | 1028 | .custom-c-style{border-radius:0px 25px 25px 25px;} |
| 1029 | .mobile-screen-one{ width: 404px; display: block;height:721px;position: absolute; border: 1px solid #000000; | 1029 | .mobile-screen-one{ width: 404px; display: block;height:721px;position: absolute; border: 1px solid #000000; |
| 1030 | border-radius: 45px 45px 0 0; | 1030 | border-radius: 45px 45px 0 0; |
| 1031 | bottom: 0; | 1031 | bottom: 0; |
| 1032 | top: unset; | 1032 | top: unset; |
| 1033 | background-position: bottom;} | 1033 | background-position: bottom;} |
| 1034 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} | 1034 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} |
| 1035 | .m-screen-comments{ width: 370px; | 1035 | .m-screen-comments{ width: 370px; |
| 1036 | display: block; | 1036 | display: block; |
| 1037 | position: absolute; | 1037 | position: absolute; |
| 1038 | left: 0; | 1038 | left: 0; |
| 1039 | z-index: 1; | 1039 | z-index: 1; |
| 1040 | margin-left: -230px; | 1040 | margin-left: -230px; |
| 1041 | margin-top: 50px;} | 1041 | margin-top: 50px;} |
| 1042 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} | 1042 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} |
| 1043 | .p-left{ left: 0;} | 1043 | .p-left{ left: 0;} |
| 1044 | .p-right{ right: 0;} | 1044 | .p-right{ right: 0;} |
| 1045 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 840px; height: 100%; bottom: 2px;} | 1045 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 840px; height: 100%; bottom: 2px;} |
| 1046 | .m-screen-right { | 1046 | .m-screen-right { |
| 1047 | width: 370px; | 1047 | width: 370px; |
| 1048 | display: block; | 1048 | display: block; |
| 1049 | position: absolute; | 1049 | position: absolute; |
| 1050 | right: 0; | 1050 | right: 0; |
| 1051 | z-index: 1; | 1051 | z-index: 1; |
| 1052 | margin-right: -207px; | 1052 | margin-right: -207px; |
| 1053 | margin-top: 50px; | 1053 | margin-top: 50px; |
| 1054 | } | 1054 | } |
| 1055 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; | 1055 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; |
| 1056 | bottom: 125px;} | 1056 | bottom: 125px;} |
| 1057 | /* no comments */ | 1057 | /* no comments */ |
| 1058 | .no-comment-count{ width: 100%;} | 1058 | .no-comment-count{ width: 100%;} |
| 1059 | 1059 | ||
| 1060 | 1060 | ||
| 1061 | 1061 | ||
| 1062 | .no-comments-img{ width: 40px; display: block; float: left;} | 1062 | .no-comments-img{ width: 40px; display: block; float: left;} |
| 1063 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} | 1063 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} |
| 1064 | .h-100p{ height: 100%;} | 1064 | .h-100p{ height: 100%;} |
| 1065 | .bord-r{ border-right: 1px solid #A8C2DC;} | 1065 | .bord-r{ border-right: 1px solid #A8C2DC;} |
| 1066 | .ft-comments-group .comments-detail{ position: absolute; | 1066 | .ft-comments-group .comments-detail{ position: absolute; |
| 1067 | padding-left: 50px;} | 1067 | padding-left: 50px;} |
| 1068 | .c-with-photos{ display: block; float: left; margin-left: -120px;} | 1068 | .c-with-photos{ display: block; float: left; margin-left: -120px;} |
| 1069 | .addfrm-spc{ padding-right: 50px;} | 1069 | .addfrm-spc{ padding-right: 50px;} |
| 1070 | .c-product-insight-wrp{ width: 350px; | 1070 | .c-product-insight-wrp{ width: 350px; |
| 1071 | display: block; | 1071 | display: block; |
| 1072 | float: right; | 1072 | float: right; |
| 1073 | position: absolute; | 1073 | position: absolute; |
| 1074 | top: unset; | 1074 | top: unset; |
| 1075 | bottom: 122px; | 1075 | bottom: 122px; |
| 1076 | right: -310px;} | 1076 | right: -310px;} |
| 1077 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} | 1077 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} |
| 1078 | .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1078 | .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} |
| 1079 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} | 1079 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1080 | .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1080 | .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} |
| 1081 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} | 1081 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} |
| 1082 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} | 1082 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} |
| 1083 | .cit-16:hover{color: #EF484F;} | 1083 | .cit-16:hover{color: #EF484F;} |
| 1084 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} | 1084 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} |
| 1085 | .ft-share img{ width: 14px; | 1085 | .ft-share img{ width: 14px; |
| 1086 | display: block; | 1086 | display: block; |
| 1087 | float: left; | 1087 | float: left; |
| 1088 | margin: 8px 7px 0 0px;} | 1088 | margin: 8px 7px 0 0px;} |
| 1089 | .ft-share:hover{color: #EF484F;} | 1089 | .ft-share:hover{color: #EF484F;} |
| 1090 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; | 1090 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; |
| 1091 | left: 0;} | 1091 | left: 0;} |
| 1092 | /* single web screen */ | 1092 | /* single web screen */ |
| 1093 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; | 1093 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; |
| 1094 | left: 0; | 1094 | left: 0; |
| 1095 | right: 0; bottom: 210px; | 1095 | right: 0; bottom: 210px; |
| 1096 | margin: 0 auto;} | 1096 | margin: 0 auto;} |
| 1097 | .web-comment-spc{top: 63px;left: -206px;} | 1097 | .web-comment-spc{top: 63px;left: -206px;} |
| 1098 | .web-ps-insight-spc{ top: 130px; | 1098 | .web-ps-insight-spc{ top: 130px; |
| 1099 | right: -260px;} | 1099 | right: -260px;} |
| 1100 | 1100 | ||
| 1101 | /* screen grab */ | 1101 | /* screen grab */ |
| 1102 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} | 1102 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} |
| 1103 | .screengrab-lspc{top: 113px;} | 1103 | .screengrab-lspc{top: 113px;} |
| 1104 | .screengrab-rspc{top: 92px;right: -362px;} | 1104 | .screengrab-rspc{top: 92px;right: -362px;} |
| 1105 | .view-ticket-wrp-ps{ width: 302px; | 1105 | .view-ticket-wrp-ps{ width: 302px; |
| 1106 | position: absolute; | 1106 | position: absolute; |
| 1107 | z-index: 1; | 1107 | z-index: 1; |
| 1108 | right: -224px; | 1108 | right: -224px; |
| 1109 | top: 82px;} | 1109 | top: 82px;} |
| 1110 | .bc-transparent{ background-image: none !important; border: 0px;} | 1110 | .bc-transparent{ background-image: none !important; border: 0px;} |
| 1111 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} | 1111 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} |
| 1112 | .comments-right-without-bc{ right: -255px;} | 1112 | .comments-right-without-bc{ right: -255px;} |
| 1113 | .screenGrb-comments-wrp{width: 752px;} | 1113 | .screenGrb-comments-wrp{width: 752px;} |
| 1114 | .spc-grbscreen1{ margin-top: 40px;} | 1114 | .spc-grbscreen1{ margin-top: 40px;} |
| 1115 | /* two webscreen */ | 1115 | /* two webscreen */ |
| 1116 | .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; | 1116 | .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; |
| 1117 | right: 0; | 1117 | right: 0; |
| 1118 | margin: 0 auto; | 1118 | margin: 0 auto; |
| 1119 | bottom: 0; | 1119 | bottom: 0; |
| 1120 | top: unset; | 1120 | top: unset; |
| 1121 | background-position: top;} | 1121 | background-position: top;} |
| 1122 | .two-webs-l-spc{ margin-left: -342px; | 1122 | .two-webs-l-spc{ margin-left: -342px; |
| 1123 | margin-top: 37px;} | 1123 | margin-top: 37px;} |
| 1124 | .two-screen-user-photo-bottom { | 1124 | .two-screen-user-photo-bottom { |
| 1125 | width: 127px; | 1125 | width: 127px; |
| 1126 | display: block; | 1126 | display: block; |
| 1127 | position: absolute; | 1127 | position: absolute; |
| 1128 | bottom: 76px; | 1128 | bottom: 76px; |
| 1129 | left: -254px; | 1129 | left: -254px; |
| 1130 | } | 1130 | } |
| 1131 | .two-webscreen-r-insight { | 1131 | .two-webscreen-r-insight { |
| 1132 | width: 423px; | 1132 | width: 423px; |
| 1133 | display: block; | 1133 | display: block; |
| 1134 | position: absolute; | 1134 | position: absolute; |
| 1135 | top: 51px; | 1135 | top: 51px; |
| 1136 | right: 3px; | 1136 | right: 3px; |
| 1137 | } | 1137 | } |
| 1138 | .custom-selected-author-style { | 1138 | .custom-selected-author-style { |
| 1139 | border-radius: 0px 25px 25px 25px; | 1139 | border-radius: 0px 25px 25px 25px; |
| 1140 | border: 2px solid #F9CF35; position: relative; | 1140 | border: 2px solid #F9CF35; position: relative; |
| 1141 | } | 1141 | } |
| 1142 | .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1142 | .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} |
| 1143 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} | 1143 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1144 | .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1144 | .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} |
| 1145 | .custom-selected-author-style .rect { | 1145 | .custom-selected-author-style .rect { |
| 1146 | width: 25px; | 1146 | width: 25px; |
| 1147 | display: block; | 1147 | display: block; |
| 1148 | position: absolute; | 1148 | position: absolute; |
| 1149 | top: 0; | 1149 | top: 0; |
| 1150 | left: 0; | 1150 | left: 0; |
| 1151 | } | 1151 | } |
| 1152 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} | 1152 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} |
| 1153 | .author-two .author-two-photo{ width: 200px; display: block;} | 1153 | .author-two .author-two-photo{ width: 200px; display: block;} |
| 1154 | .two-author-desktop{ width: 913px; | 1154 | .two-author-desktop{ width: 913px; |
| 1155 | display: block; | 1155 | display: block; |
| 1156 | height: 525px; | 1156 | height: 525px; |
| 1157 | position: absolute; | 1157 | position: absolute; |
| 1158 | background-image:url('../images/two-author-desktop.svg'); | 1158 | background-image:url('../images/two-author-desktop.svg'); |
| 1159 | background-repeat: no-repeat; | 1159 | background-repeat: no-repeat; |
| 1160 | left: 0; | 1160 | left: 0; |
| 1161 | right: 0; | 1161 | right: 0; |
| 1162 | margin: 0 auto; | 1162 | margin: 0 auto; |
| 1163 | bottom: 0; | 1163 | bottom: 0; |
| 1164 | top: unset; | 1164 | top: unset; |
| 1165 | background-position: bottom;} | 1165 | background-position: bottom;} |
| 1166 | .author-two-desktop{ position: absolute; | 1166 | .author-two-desktop{ position: absolute; |
| 1167 | top: -130px; | 1167 | top: -130px; |
| 1168 | left: -134px; | 1168 | left: -134px; |
| 1169 | width: 428px;} | 1169 | width: 428px;} |
| 1170 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} | 1170 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} |
| 1171 | .author-one-desktop{ position: absolute; | 1171 | .author-one-desktop{ position: absolute; |
| 1172 | top: -163px; | 1172 | top: -163px; |
| 1173 | right: -201px; | 1173 | right: -201px; |
| 1174 | width: 428px;} | 1174 | width: 428px;} |
| 1175 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} | 1175 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} |
| 1176 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} | 1176 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} |
| 1177 | .desktop-two-logo-spc{ bottom: 40%;} | 1177 | .desktop-two-logo-spc{ bottom: 40%;} |
| 1178 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} | 1178 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} |
| 1179 | .author-two-head-spc{ margin-top: 56px !important;} | 1179 | .author-two-head-spc{ margin-top: 56px !important;} |
| 1180 | .sign-wrp{ width: 100%; display: block; float: left;} | 1180 | .sign-wrp{ width: 100%; display: block; float: left;} |
| 1181 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } | 1181 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } |
| 1182 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} | 1182 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} |
| 1183 | .cust-user2-style{ border-radius:25px 0 25px 25px} | 1183 | .cust-user2-style{ border-radius:25px 0 25px 25px} |
| 1184 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} | 1184 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} |
| 1185 | .single-chat-c-left{left: -405px;} | 1185 | .single-chat-c-left{left: -405px;} |
| 1186 | .single-chat-c-right{top: 244px;right: -404px;} | 1186 | .single-chat-c-right{top: 244px;right: -404px;} |
| 1187 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} | 1187 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} |
| 1188 | .help-view-ticket-right{display: block; | 1188 | .help-view-ticket-right{display: block; |
| 1189 | float: right; | 1189 | float: right; |
| 1190 | right: -84px; | 1190 | right: -84px; |
| 1191 | position: absolute; | 1191 | position: absolute; |
| 1192 | z-index: 1; | 1192 | z-index: 1; |
| 1193 | top: 51px; | 1193 | top: 51px; |
| 1194 | width: 423px;} | 1194 | width: 423px;} |
| 1195 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} | 1195 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} |
| 1196 | .two-author-all-comments{width: 100%; display: block; float:left;} | 1196 | .two-author-all-comments{width: 100%; display: block; float:left;} |
| 1197 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} | 1197 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} |
| 1198 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} | 1198 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} |
| 1199 | .a2-set{ width: 282px; | 1199 | .a2-set{ width: 282px; |
| 1200 | height: 258px; | 1200 | height: 258px; |
| 1201 | position: absolute; | 1201 | position: absolute; |
| 1202 | left: -370px; | 1202 | left: -370px; |
| 1203 | bottom: -50px;} | 1203 | bottom: -50px;} |
| 1204 | .a2true-set{ width: 268px; | 1204 | .a2true-set{ width: 268px; |
| 1205 | height: 319px; | 1205 | height: 319px; |
| 1206 | position: absolute; | 1206 | position: absolute; |
| 1207 | right: -440px; | 1207 | right: -440px; |
| 1208 | bottom: -103px;} | 1208 | bottom: -103px;} |
| 1209 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} | 1209 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} |
| 1210 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } | 1210 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } |
| 1211 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; | 1211 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; |
| 1212 | float: right;} | 1212 | float: right;} |
| 1213 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; | 1213 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; |
| 1214 | transition-property: right; | 1214 | transition-property: right; |
| 1215 | -webkit-transition-property: right; | 1215 | -webkit-transition-property: right; |
| 1216 | -moz-transition-property: right; | 1216 | -moz-transition-property: right; |
| 1217 | -o-transition-property: right; | 1217 | -o-transition-property: right; |
| 1218 | 1218 | ||
| 1219 | transition-duration: 0.3s; | 1219 | transition-duration: 0.3s; |
| 1220 | -webkit-transition-duration: 0.3s; | 1220 | -webkit-transition-duration: 0.3s; |
| 1221 | -moz-transition-duration: 0.3s; | 1221 | -moz-transition-duration: 0.3s; |
| 1222 | -o-transition-duration: 0.3s; | 1222 | -o-transition-duration: 0.3s; |
| 1223 | 1223 | ||
| 1224 | transition-timing-function: linear; | 1224 | transition-timing-function: linear; |
| 1225 | -webkit-transition-timing-function: linear; | 1225 | -webkit-transition-timing-function: linear; |
| 1226 | -moz-transition-timing-function: linear; | 1226 | -moz-transition-timing-function: linear; |
| 1227 | -o-transition-timing-function: linear; | 1227 | -o-transition-timing-function: linear; |
| 1228 | right: -500px; | 1228 | right: -500px; |
| 1229 | 1229 | ||
| 1230 | } | 1230 | } |
| 1231 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} | 1231 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} |
| 1232 | .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} | 1232 | .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} |
| 1233 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} | 1233 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} |
| 1234 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} | 1234 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} |
| 1235 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} | 1235 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} |
| 1236 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} | 1236 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} |
| 1237 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } | 1237 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } |
| 1238 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} | 1238 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} |
| 1239 | .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} | 1239 | .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} |
| 1240 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} | 1240 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} |
| 1241 | .user-photo{width: 109px; | 1241 | .user-photo{width: 109px; |
| 1242 | display: block; | 1242 | display: block; |
| 1243 | float: left;} | 1243 | float: left;} |
| 1244 | .cat-minus{ right: -11px !important; | 1244 | .cat-minus{ right: -11px !important; |
| 1245 | margin-left: unset !important;} | 1245 | margin-left: unset !important;} |
| 1246 | .mt-50{ margin-top: 50px;} | 1246 | .mt-50{ margin-top: 50px;} |
| 1247 | .sub-menu-user{ width: 150px; | 1247 | .sub-menu-user{ width: 150px; |
| 1248 | display: block; | 1248 | display: block; |
| 1249 | position: absolute; | 1249 | position: absolute; |
| 1250 | background: #fff; | 1250 | background: #fff; |
| 1251 | right: 0px; | 1251 | right: 0px; |
| 1252 | border: 1px solid #eaeaea; | 1252 | border: 1px solid #eaeaea; |
| 1253 | border-radius: 5px; | 1253 | border-radius: 5px; |
| 1254 | padding: 5px; | 1254 | padding: 5px; |
| 1255 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1255 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1256 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1256 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1257 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1257 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1258 | } | 1258 | } |
| 1259 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } | 1259 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } |
| 1260 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} | 1260 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} |
| 1261 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} | 1261 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} |
| 1262 | .sub-menu-user ul li a:hover{color:#514DA7;} | 1262 | .sub-menu-user ul li a:hover{color:#514DA7;} |
| 1263 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} | 1263 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} |
| 1264 | .bounced-user-comments li{ display: block; float: left; position: relative;} | 1264 | .bounced-user-comments li{ display: block; float: left; position: relative;} |
| 1265 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} | 1265 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} |
| 1266 | .bounced-user-comments .b-user-head img{ width: 26px; | 1266 | .bounced-user-comments .b-user-head img{ width: 26px; |
| 1267 | display: block; | 1267 | display: block; |
| 1268 | float: left; | 1268 | float: left; |
| 1269 | position: absolute; | 1269 | position: absolute; |
| 1270 | left:-13px;} | 1270 | left:-13px;} |
| 1271 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} | 1271 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} |
| 1272 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} | 1272 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} |
| 1273 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} | 1273 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} |
| 1274 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} | 1274 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} |
| 1275 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; | 1275 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; |
| 1276 | height: 3px; | 1276 | height: 3px; |
| 1277 | display: block; | 1277 | display: block; |
| 1278 | background: #ccc; | 1278 | background: #ccc; |
| 1279 | float: left; | 1279 | float: left; |
| 1280 | } | 1280 | } |
| 1281 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; | 1281 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; |
| 1282 | width: auto; | 1282 | width: auto; |
| 1283 | height: auto; | 1283 | height: auto; |
| 1284 | padding: 3px 7px; | 1284 | padding: 3px 7px; |
| 1285 | display: block; | 1285 | display: block; |
| 1286 | border-radius: 3px; | 1286 | border-radius: 3px; |
| 1287 | margin-top: -2px;} | 1287 | margin-top: -2px;} |
| 1288 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} | 1288 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} |
| 1289 | .bc_border{} | 1289 | .bc_border{} |
| 1290 | .info_bc_spc{ float: left;} | 1290 | .info_bc_spc{ float: left;} |
| 1291 | .info_bc_spc li{ padding:0px; color: #514DA7;} | 1291 | .info_bc_spc li{ padding:0px; color: #514DA7;} |
| 1292 | .info_bc_spc li a{color: #514DA7; opacity: 1;} | 1292 | .info_bc_spc li a{color: #514DA7; opacity: 1;} |
| 1293 | .info_bc_spc li img{ margin-top: 4px;} | 1293 | .info_bc_spc li img{ margin-top: 4px;} |
| 1294 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} | 1294 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} |
| 1295 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} | 1295 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} |
| 1296 | .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} | 1296 | .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} |
| 1297 | .ft-normal{ font-weight: 500 !important;} | 1297 | .ft-normal{ font-weight: 500 !important;} |
| 1298 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} | 1298 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} |
| 1299 | 1299 | ||
| 1300 | /* placeholder */ | 1300 | /* placeholder */ |
| 1301 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ | 1301 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ |
| 1302 | font-size: 10px; color: #000; opacity: 0.7; | 1302 | font-size: 10px; color: #000; opacity: 0.7; |
| 1303 | } | 1303 | } |
| 1304 | 1304 | ||
| 1305 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 1305 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 1306 | font-size: 10px; color: #000; opacity: 0.7; | 1306 | font-size: 10px; color: #000; opacity: 0.7; |
| 1307 | } | 1307 | } |
| 1308 | 1308 | ||
| 1309 | .joined_wrapper .add_rply input::placeholder { | 1309 | .joined_wrapper .add_rply input::placeholder { |
| 1310 | font-size: 10px; color: #000; opacity: 0.7; | 1310 | font-size: 10px; color: #000; opacity: 0.7; |
| 1311 | } | 1311 | } |
| 1312 | 1312 | ||
| 1313 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} | 1313 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} |
| 1314 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } | 1314 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } |
| 1315 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} | 1315 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} |
| 1316 | .full-width{ width: 100%; display: block; float: left;} | 1316 | .full-width{ width: 100%; display: block; float: left;} |
| 1317 | .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} | 1317 | .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} |
| 1318 | .child-full-width .b-user-head{ padding-left: 70px;} | 1318 | .child-full-width .b-user-head{ padding-left: 70px;} |
| 1319 | .child-full-width .b-user-head img{ left:33px;} | 1319 | .child-full-width .b-user-head img{ left:33px;} |
| 1320 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} | 1320 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} |
| 1321 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} | 1321 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} |
| 1322 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} | 1322 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} |
| 1323 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} | 1323 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} |
| 1324 | .comments-footer{ width: 100%; display: block; float: left;} | 1324 | .comments-footer{ width: 100%; display: block; float: left;} |
| 1325 | .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} | 1325 | .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} |
| 1326 | .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} | 1326 | .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} |
| 1327 | .add_comments_chat img{ width: 15px;} | 1327 | .add_comments_chat img{ width: 15px;} |
| 1328 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} | 1328 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} |
| 1329 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} | 1329 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} |
| 1330 | button:focus{ border:0px; outline: none;} | 1330 | button:focus{ border:0px; outline: none;} |
| 1331 | .short_by{left: -100px !important;} | 1331 | .short_by{left: -100px !important;} |
| 1332 | input:focus{ outline: none;} | 1332 | input:focus{ outline: none;} |
| 1333 | .comments-footer textarea:focus{ outline: none;} | 1333 | .comments-footer textarea:focus{ outline: none;} |
| 1334 | .close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;} | 1334 | .close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;} |
| 1335 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} | 1335 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} |
| 1336 | .close_chat_bx:hover{ background-color: #ccc;} | 1336 | .close_chat_bx:hover{ background-color: #ccc;} |
| 1337 | /* chat box close */ | 1337 | /* chat box close */ |
| 1338 | .cht_close{ | 1338 | .cht_close{ |
| 1339 | transition-property: right; | 1339 | transition-property: right; |
| 1340 | -webkit-transition-property: right; | 1340 | -webkit-transition-property: right; |
| 1341 | -moz-transition-property: right; | 1341 | -moz-transition-property: right; |
| 1342 | -o-transition-property: right; | 1342 | -o-transition-property: right; |
| 1343 | 1343 | ||
| 1344 | transition-duration: 0.3s; | 1344 | transition-duration: 0.3s; |
| 1345 | -webkit-transition-duration: 0.3s; | 1345 | -webkit-transition-duration: 0.3s; |
| 1346 | -moz-transition-duration: 0.3s; | 1346 | -moz-transition-duration: 0.3s; |
| 1347 | -o-transition-duration: 0.3s; | 1347 | -o-transition-duration: 0.3s; |
| 1348 | 1348 | ||
| 1349 | transition-timing-function: linear; | 1349 | transition-timing-function: linear; |
| 1350 | -webkit-transition-timing-function: linear; | 1350 | -webkit-transition-timing-function: linear; |
| 1351 | -moz-transition-timing-function: linear; | 1351 | -moz-transition-timing-function: linear; |
| 1352 | -o-transition-timing-function: linear; | 1352 | -o-transition-timing-function: linear; |
| 1353 | right: 0px; | 1353 | right: 0px; |
| 1354 | } | 1354 | } |
| 1355 | .p-left-0{ padding-left:0px !important;} | 1355 | .p-left-0{ padding-left:0px !important;} |
| 1356 | .ps_right{ float: right !important; position: static !important;} | 1356 | .ps_right{ float: right !important; position: static !important;} |
| 1357 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } | 1357 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } |
| 1358 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} | 1358 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} |
| 1359 | .ct-width{ width: 400px;} | 1359 | .ct-width{ width: 400px;} |
| 1360 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} | 1360 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} |
| 1361 | .testi-photos-ct .comments-detail{padding-right: 40px;} | 1361 | .testi-photos-ct .comments-detail{padding-right: 40px;} |
| 1362 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} | 1362 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} |
| 1363 | .right-corner { border-radius: 25px 25px 2px 25px;} | 1363 | .right-corner { border-radius: 25px 25px 2px 25px;} |
| 1364 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} | 1364 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} |
| 1365 | .dynamic-thoughts { width: 200px; display: block; } | 1365 | .dynamic-thoughts { width: 200px; display: block; } |
| 1366 | .two-screen-spc-top{ top: 100px; right: -286px;} | 1366 | .two-screen-spc-top{ top: 100px; right: -286px;} |
| 1367 | .joined_wrapper{ position: relative;} | 1367 | .joined_wrapper{ position: relative;} |
| 1368 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} | 1368 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} |
| 1369 | .reply-Wdth{ width: 64px;} | 1369 | .reply-Wdth{ width: 64px;} |
| 1370 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} | 1370 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} |
| 1371 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} | 1371 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} |
| 1372 | .full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;} | 1372 | .full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;} |
| 1373 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } | 1373 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } |
| 1374 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} | 1374 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} |
| 1375 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} | 1375 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} |
| 1376 | .full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;} | 1376 | .full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;} |
| 1377 | .update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;} | 1377 | .update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;} |
| 1378 | .update_profile span{width: 11px; | 1378 | .update_profile span{width: 11px; |
| 1379 | height: 11px; | 1379 | height: 11px; |
| 1380 | display: inline-block; | 1380 | display: inline-block; |
| 1381 | background: #EF484F; | 1381 | background: #EF484F; |
| 1382 | border-radius: 10px; | 1382 | border-radius: 10px; |
| 1383 | margin: 12px 0 0 0;} | 1383 | margin: 12px 0 0 0;} |
| 1384 | .update_profile:hover{ color: #fff; text-decoration: none;} | 1384 | .update_profile:hover{ color: #fff; text-decoration: none;} |
| 1385 | .top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 13px;} | 1385 | .top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 13px;} |
| 1386 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} | 1386 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} |
| 1387 | .talk-to-me-about{ width: 100%; display: block; float: left;} | 1387 | .talk-to-me-about{ width: 100%; display: block; float: left;} |
| 1388 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} | 1388 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} |
| 1389 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} | 1389 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} |
| 1390 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} | 1390 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} |
| 1391 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} | 1391 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} |
| 1392 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1392 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1393 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} | 1393 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} |
| 1394 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1394 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1395 | .user-views li img.spctp{ margin-top: 2px;} | 1395 | .user-views li img.spctp{ margin-top: 2px;} |
| 1396 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} | 1396 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} |
| 1397 | .action-set img{width: 21px;margin: 16px;} | 1397 | .action-set img{width: 21px;margin: 16px;} |
| 1398 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; | 1398 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; |
| 1399 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; | 1399 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; |
| 1400 | background-position: left bottom; } | 1400 | background-position: left bottom; } |
| 1401 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} | 1401 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} |
| 1402 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} | 1402 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} |
| 1403 | .insight-two-img{width: 100%; position: relative;} | 1403 | .insight-two-img{width: 100%; position: relative;} |
| 1404 | .m-screen-hidden{width: 382px;overflow: hidden; height:702px;margin: 0 auto;} | 1404 | .m-screen-hidden{width: 382px;overflow: hidden; height:702px;margin: 0 auto;} |
| 1405 | .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} | 1405 | .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} |
| 1406 | .s-l-right-section{ width: 300px; display: block; float: left;} | 1406 | .s-l-right-section{ width: 300px; display: block; float: left;} |
| 1407 | .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;} | 1407 | .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;} |
| 1408 | .reset-pass{margin-top: 118px;} | 1408 | .reset-pass{margin-top: 118px;} |
| 1409 | 1409 |
src/assets/css/media.css
| 1 | 1 | ||
| 2 | @media only screen and (min-width :768px) | 2 | @media only screen and (min-width :768px) |
| 3 | and (max-device-width: 1280px) | 3 | and (max-device-width: 1280px) |
| 4 | { | 4 | { |
| 5 | 5 | ||
| 6 | 6 | ||
| 7 | 7 | ||
| 8 | 8 | ||
| 9 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ | 9 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ |
| 10 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } | 10 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } |
| 11 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 11 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 12 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; | 12 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; |
| 13 | top: unset !important;} | 13 | top: unset !important;} |
| 14 | /* no comments */ | 14 | /* no comments */ |
| 15 | 15 | ||
| 16 | 16 | ||
| 17 | 17 | ||
| 18 | 18 | ||
| 19 | /* no comments */ | 19 | /* no comments */ |
| 20 | 20 | ||
| 21 | } | 21 | } |
| 22 | 22 | ||
| 23 | @media screen | 23 | @media screen |
| 24 | and (min-device-width: 768px) | 24 | and (min-device-width: 768px) |
| 25 | and (max-device-width: 1366px) | 25 | and (max-device-width: 1366px) |
| 26 | and (-webkit-min-device-pixel-ratio: 1) { | 26 | and (-webkit-min-device-pixel-ratio: 1) { |
| 27 | .ft-comments-group{padding-top: 12px;} | 27 | .ft-comments-group{padding-top: 12px;} |
| 28 | .comment-frm{margin-top: 12px;} | 28 | .comment-frm{margin-top: 12px;} |
| 29 | .intro-startup .footer-top .top-intro-bt{margin-top: 12px;} | 29 | .intro-startup .footer-top .top-intro-bt{margin-top: 12px;} |
| 30 | .intro-startup .footer-top{ height: 61px;} | 30 | .intro-startup .footer-top{ height: 61px;} |
| 31 | .intro-startup .footer-nav{ height: 66px;} | 31 | .intro-startup .footer-nav{ height: 66px;} |
| 32 | .intro-startup .footer-top .top-intro-bt{width: 212px; margin-left: -21px;} | 32 | .intro-startup .footer-top .top-intro-bt{width: 212px; margin-left: -21px;} |
| 33 | .intro-startup .footer-top .top-intro-bt { | 33 | .intro-startup .footer-top .top-intro-bt { |
| 34 | width: 237px; | 34 | width: 237px; |
| 35 | margin-left: -57px; | 35 | margin-left: -57px; |
| 36 | } | 36 | } |
| 37 | .comment-frm.no-c-frm #open_ct_box{ width: 200px !important;} | 37 | .comment-frm.no-c-frm #open_ct_box{ width: 200px !important;} |
| 38 | .bottom-startup{-ms-transform: scale(0.9); /* IE 9 */ | 38 | .bottom-startup{-ms-transform: scale(0.9); /* IE 9 */ |
| 39 | transform: scale(0.9); /* Standard syntax */ left: -10px;} | 39 | transform: scale(0.9); /* Standard syntax */ left: -10px;} |
| 40 | .epi-bg{bottom: -159px; left: 8.5% !important;} | 40 | .epi-bg{bottom: -159px; left: 8.5% !important;} |
| 41 | .compare-c{-ms-transform: scale(0.8); /* IE 9 */ | 41 | .compare-c{-ms-transform: scale(0.8); /* IE 9 */ |
| 42 | transform: scale(0.8); /* Standard syntax */} | 42 | transform: scale(0.8); /* Standard syntax */} |
| 43 | .popup-wrp{-ms-transform: scale(0.8); /* IE 9 */ | 43 | .popup-wrp{-ms-transform: scale(0.8); /* IE 9 */ |
| 44 | transform: scale(0.8); /* Standard syntax */} | 44 | transform: scale(0.8); /* Standard syntax */} |
| 45 | .popup-set{ margin-top: 0px;} | 45 | .popup-set{ margin-top: 0px;} |
| 46 | .sign-login-wrp{ -ms-transform: scale(0.8); /* IE 9 */ | 46 | .sign-login-wrp{ -ms-transform: scale(0.8); /* IE 9 */ |
| 47 | transform: scale(0.8); /* Standard syntax */ margin-top: 5%; } | 47 | transform: scale(0.8); /* Standard syntax */ margin-top: 5%; } |
| 48 | .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } | 48 | .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } |
| 49 | .form-layout.signup-frm-spc { margin-top: 41px;} | 49 | .form-layout.signup-frm-spc { margin-top: 41px;} |
| 50 | .user-profile{padding-right: 90px;width: 570px !important;} | 50 | .user-profile{padding-right: 90px;width: 570px !important;} |
| 51 | .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 51 | .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 52 | transform: scale(0.8); /* Standard syntax */} | 52 | transform: scale(0.8); /* Standard syntax */} |
| 53 | .ft-comments-group{ width: 100%; } | 53 | .ft-comments-group{ width: 100%; } |
| 54 | 54 | ||
| 55 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ | 55 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ |
| 56 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } | 56 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } |
| 57 | .thanks-wrapper{-ms-transform: scale(0.8); /* IE 9 */ | 57 | .thanks-wrapper{-ms-transform: scale(0.8); /* IE 9 */ |
| 58 | transform: scale(0.8); /* Standard syntax */ bottom: -40px;} | 58 | transform: scale(0.8); /* Standard syntax */ bottom: -40px;} |
| 59 | .single-mobileInsight{-ms-transform: scale(0.8); /* IE 9 */ | 59 | .single-mobileInsight{-ms-transform: scale(0.8); /* IE 9 */ |
| 60 | transform: scale(0.8); /* Standard syntax */ bottom: -65px;} | 60 | transform: scale(0.8); /* Standard syntax */ bottom: -65px;} |
| 61 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 61 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 62 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; | 62 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; |
| 63 | top: unset !important;} | 63 | top: unset !important;} |
| 64 | 64 | ||
| 65 | .s-web-screen-wrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 65 | .s-web-screen-wrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 66 | transform: scale(0.8); /* Standard syntax */ bottom: 80px !important; top: unset; } | 66 | transform: scale(0.8); /* Standard syntax */ bottom: 80px !important; top: unset; } |
| 67 | .screengrab-wrp{ -ms-transform: scale(0.8); /* IE 9 */ | 67 | .screengrab-wrp{ -ms-transform: scale(0.8); /* IE 9 */ |
| 68 | transform: scale(0.8); /* Standard syntax */ bottom: 150px !important; top: unset; } | 68 | transform: scale(0.8); /* Standard syntax */ bottom: 150px !important; top: unset; } |
| 69 | .two-webscreen-insight{ -ms-transform: scale(0.8); /* IE 9 */ | 69 | .two-webscreen-insight{ -ms-transform: scale(0.8); /* IE 9 */ |
| 70 | transform: scale(0.8); /* Standard syntax */ bottom: -57px !important; top: unset; } | 70 | transform: scale(0.8); /* Standard syntax */ bottom: -57px !important; top: unset; } |
| 71 | .smasung-g-10wrp{ -ms-transform: scale(0.8); /* IE 9 */ | 71 | .smasung-g-10wrp{ -ms-transform: scale(0.8); /* IE 9 */ |
| 72 | transform: scale(0.8); /* Standard syntax */ bottom: -66px !important; top: unset; } | 72 | transform: scale(0.8); /* Standard syntax */ bottom: -66px !important; top: unset; } |
| 73 | .two-author-desktop{ -ms-transform: scale(0.8); /* IE 9 */ | 73 | .two-author-desktop{ -ms-transform: scale(0.8); /* IE 9 */ |
| 74 | transform: scale(0.8); /* Standard syntax */ bottom: -48px !important; top: unset; } | 74 | transform: scale(0.8); /* Standard syntax */ bottom: -48px !important; top: unset; } |
| 75 | /* no comments */ | 75 | /* no comments */ |
| 76 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 12px;} | 76 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 12px;} |
| 77 | .wc-spc-lf-tp { padding-top: 112px !important; } | 77 | .wc-spc-lf-tp { padding-top: 112px !important; } |
| 78 | .form-layout.signup-frm-spc { | 78 | .form-layout.signup-frm-spc { |
| 79 | margin-top: 54px !important; | 79 | margin-top: 54px !important; |
| 80 | } | 80 | } |
| 81 | .sign-wrp{-ms-transform: scale(0.8); /* IE 9 */ | 81 | .sign-wrp{-ms-transform: scale(0.8); /* IE 9 */ |
| 82 | transform: scale(0.8); /* Standard syntax */} | 82 | transform: scale(0.8); /* Standard syntax */} |
| 83 | 83 | ||
| 84 | /* no comments */ | 84 | /* no comments */ |
| 85 | } | 85 | } |
| 86 | @media screen | 86 | @media screen |
| 87 | and (min-device-width: 768px) | 87 | and (min-device-width: 768px) |
| 88 | and (max-device-width: 1280px) | 88 | and (max-device-width: 1280px) |
| 89 | and (-webkit-min-device-pixel-ratio: 1) { | 89 | and (-webkit-min-device-pixel-ratio: 1) { |
| 90 | .epi-bg{bottom: -159px; left: 6% !important;} | 90 | .epi-bg{bottom: -159px; left: 6% !important;} |
| 91 | 91 | ||
| 92 | } | 92 | } |
| 93 | /* Desktops and laptops ----------- */ | 93 | /* Desktops and laptops ----------- */ |
| 94 | @media only screen and (min-width : 1050px) | 94 | @media only screen and (min-width : 1050px) |
| 95 | and (max-device-width: 1680px) | 95 | and (max-device-width: 1680px) |
| 96 | { | 96 | { |
| 97 | .epi-bg{ left: 13%;} | 97 | .epi-bg{ left: 13%;} |
| 98 | .popcorn-set{ right: 360px;} | 98 | /* .popcorn-set{ right: 360px;} */ |
| 99 | .ft-comments-group{width: 100%;} | 99 | .ft-comments-group{width: 100%;} |
| 100 | 100 | ||
| 101 | 101 | ||
| 102 | /* no comments */ | 102 | /* no comments */ |
| 103 | 103 | ||
| 104 | 104 | ||
| 105 | 105 | ||
| 106 | 106 | ||
| 107 | /* no comments */ | 107 | /* no comments */ |
| 108 | } | 108 | } |
| 109 | 109 | ||
| 110 | /* ----------- Non-Retina Screens ----------- */ | 110 | /* ----------- Non-Retina Screens ----------- */ |
| 111 | @media screen | 111 | @media screen |
| 112 | and (min-device-width: 1200px) | 112 | and (min-device-width: 1200px) |
| 113 | and (max-device-width: 1400px) | 113 | and (max-device-width: 1400px) |
| 114 | and (-webkit-min-device-pixel-ratio: 1) { | 114 | and (-webkit-min-device-pixel-ratio: 1) { |
| 115 | .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } | 115 | .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } |
| 116 | .user-profile{padding-right: 90px; width: 675px;} | 116 | .user-profile{padding-right: 90px; width: 675px;} |
| 117 | .insights-details{ width: 620px;} | 117 | .insights-details{ width: 620px;} |
| 118 | .episode-intro{ background-position: 101px -266px !important;} | 118 | .episode-intro{ background-position: 101px -266px !important;} |
| 119 | .ft-comments-group{ margin-left:0px;width: 100%;} | 119 | .ft-comments-group{ margin-left:0px;width: 100%;} |
| 120 | 120 | ||
| 121 | 121 | ||
| 122 | 122 | ||
| 123 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} | 123 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} |
| 124 | /* no comments */ | 124 | /* no comments */ |
| 125 | .comment-frm .frm-wdth{ padding-right: 20px;} | 125 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 126 | .c-with-photos{ margin-left: -70px;} | 126 | .c-with-photos{ margin-left: -70px;} |
| 127 | .all-c-space{ padding-left: 104px !important;} | 127 | .all-c-space{ padding-left: 104px !important;} |
| 128 | .addfrm-spc{ padding-right: 60px !important;} | 128 | .addfrm-spc{ padding-right: 60px !important;} |
| 129 | .web-ps-insight-spc{ right: -220px;} | 129 | .web-ps-insight-spc{ right: -220px;} |
| 130 | .s-web-screen-wrp{ bottom: 150px;} | 130 | .s-web-screen-wrp{ bottom: 150px;} |
| 131 | 131 | ||
| 132 | /* no comments */ | 132 | /* no comments */ |
| 133 | 133 | ||
| 134 | } | 134 | } |
| 135 | 135 | ||
| 136 | /* ----------- Retina Screens ----------- */ | 136 | /* ----------- Retina Screens ----------- */ |
| 137 | @media screen | 137 | @media screen |
| 138 | and (min-device-width: 900px) | 138 | and (min-device-width: 900px) |
| 139 | and (max-device-width: 1440px) | 139 | and (max-device-width: 1440px) |
| 140 | and (-webkit-min-device-pixel-ratio: 1) { | 140 | and (-webkit-min-device-pixel-ratio: 1) { |
| 141 | .comment-frm.no-c-frm #open_ct_box{ width: 244px;} | 141 | .comment-frm.no-c-frm #open_ct_box{ width: 244px;} |
| 142 | .comment-frm .add-comment{margin-right: 50px;} | 142 | .comment-frm .add-comment{margin-right: 50px;} |
| 143 | .intro-startup .footer-top .top-intro-bt { | 143 | .intro-startup .footer-top .top-intro-bt { |
| 144 | width: 243px; | 144 | width: 243px; |
| 145 | margin-left: -40px; | 145 | margin-left: -40px; |
| 146 | } | 146 | } |
| 147 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} | 147 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} |
| 148 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } | 148 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
| 149 | .form-layout.signup-frm-spc { margin-top: 114px; float:right;} | 149 | .form-layout.signup-frm-spc { margin-top: 114px; float:right;} |
| 150 | .user-profile{padding-right: 90px; width: 675px;} | 150 | .user-profile{padding-right: 90px; width: 675px;} |
| 151 | .insights-details{ width: 620px;} | 151 | .insights-details{ width: 620px;} |
| 152 | .episode-intro{ background-position: 101px -266px !important;} | 152 | .episode-intro{ background-position: 101px -266px !important;} |
| 153 | .spot-light-top{ left: -170px;} | 153 | .spot-light-top{ left: -170px;} |
| 154 | .popcorn-set { | 154 | /* .popcorn-set { |
| 155 | right: 160px; | 155 | right: 160px; |
| 156 | } | 156 | } */ |
| 157 | .ft-comments-group{ margin-left:0px; width: 100%;} | 157 | .ft-comments-group{ margin-left:0px; width: 100%;} |
| 158 | .comment-frm .frm-wdth{ padding-right: 20px;} | 158 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 159 | 159 | ||
| 160 | 160 | ||
| 161 | 161 | ||
| 162 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} | 162 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} |
| 163 | /* no comments */ | 163 | /* no comments */ |
| 164 | 164 | ||
| 165 | .c-with-photos{ margin-left: -70px;} | 165 | .c-with-photos{ margin-left: -70px;} |
| 166 | .all-c-space{ padding-left: 104px !important;} | 166 | .all-c-space{ padding-left: 104px !important;} |
| 167 | .addfrm-spc{ padding-right: 60px !important;} | 167 | .addfrm-spc{ padding-right: 60px !important;} |
| 168 | .web-ps-insight-spc{ right: -220px;} | 168 | .web-ps-insight-spc{ right: -220px;} |
| 169 | .s-web-screen-wrp{ bottom: 150px;} | 169 | .s-web-screen-wrp{ bottom: 150px;} |
| 170 | /* no comments */ | 170 | /* no comments */ |
| 171 | } | 171 | } |
| 172 | 172 | ||
| 173 | @media screen | 173 | @media screen |
| 174 | and (min-device-width: 1050px) | 174 | and (min-device-width: 1050px) |
| 175 | and (max-device-width: 1440px) | 175 | and (max-device-width: 1440px) |
| 176 | and (-webkit-min-device-pixel-ratio: 1) { | 176 | and (-webkit-min-device-pixel-ratio: 1) { |
| 177 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } | 177 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
| 178 | .form-layout.signup-frm-spc { margin-top: 114px;} | 178 | .form-layout.signup-frm-spc { margin-top: 114px;} |
| 179 | .user-profile{padding-right: 90px; width: 675px;} | 179 | .user-profile{padding-right: 90px; width: 675px;} |
| 180 | .insights-details{ width: 620px;} | 180 | .insights-details{ width: 620px;} |
| 181 | .episode-intro{ background-position: 101px -266px !important;} | 181 | .episode-intro{ background-position: 101px -266px !important;} |
| 182 | .epi-bg { | 182 | .epi-bg { |
| 183 | left: 7%; | 183 | left: 7%; |
| 184 | } | 184 | } |
| 185 | .ft-comments-group{ margin-left:0px; width: 100%;} | 185 | .ft-comments-group{ margin-left:0px; width: 100%;} |
| 186 | 186 | ||
| 187 | .comment-frm .frm-wdth{ padding-right: 20px;} | 187 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 188 | 188 | ||
| 189 | 189 | ||
| 190 | /* no comments */ | 190 | /* no comments */ |
| 191 | 191 | ||
| 192 | .c-with-photos{ margin-left: -70px;} | 192 | .c-with-photos{ margin-left: -70px;} |
| 193 | .all-c-space{ padding-left: 104px !important;} | 193 | .all-c-space{ padding-left: 104px !important;} |
| 194 | .addfrm-spc{ padding-right: 60px !important;} | 194 | .addfrm-spc{ padding-right: 60px !important;} |
| 195 | .web-ps-insight-spc{ right: -220px;} | 195 | .web-ps-insight-spc{ right: -220px;} |
| 196 | .s-web-screen-wrp{ bottom: 150px;} | 196 | .s-web-screen-wrp{ bottom: 150px;} |
| 197 | /* no comments */ | 197 | /* no comments */ |
| 198 | } | 198 | } |
| 199 | 199 | ||
| 200 | /* mobile */ | 200 | /* mobile */ |
| 201 | /* Portrait and Landscape */ | 201 | /* Portrait and Landscape */ |
| 202 | @media only screen | 202 | @media only screen |
| 203 | and (min-device-width: 320px) | 203 | and (min-device-width: 320px) |
| 204 | and (max-device-width: 960px) | 204 | and (max-device-width: 960px) |
| 205 | and (-webkit-min-device-pixel-ratio: 2) { | 205 | and (-webkit-min-device-pixel-ratio: 2) { |
| 206 | 206 | ||
| 207 | .insights-wrp{ padding: 0 20px 0 20px;} | 207 | .insights-wrp{ padding: 0 20px 0 20px;} |
| 208 | .insights-searh { | 208 | .insights-searh { |
| 209 | width: 300px;} | 209 | width: 300px;} |
| 210 | .insights-list-filter li{ margin: 0 3px 9px 3px;} | 210 | .insights-list-filter li{ margin: 0 3px 9px 3px;} |
| 211 | .main-wrp{ padding-left: 15px; padding-right: 15px;} | 211 | .main-wrp{ padding-left: 15px; padding-right: 15px;} |
| 212 | .wc-spc-lf-tp { | 212 | .wc-spc-lf-tp { |
| 213 | padding-top: 52px; | 213 | padding-top: 52px; |
| 214 | padding-left: 28px; | 214 | padding-left: 28px; |
| 215 | padding-bottom:50px; | 215 | padding-bottom:50px; |
| 216 | } | 216 | } |
| 217 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 217 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 218 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 218 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 219 | } | 219 | } |
| 220 | 220 | ||
| 221 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 221 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 222 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 222 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 223 | } | 223 | } |
| 224 | 224 | ||
| 225 | .insights-searh input::placeholder { | 225 | .insights-searh input::placeholder { |
| 226 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 226 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 227 | } | 227 | } |
| 228 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 228 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 229 | .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;} | 229 | .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;} |
| 230 | 230 | ||
| 231 | .navbar-toggler{ padding: 0px; margin-top: -10px; | 231 | .navbar-toggler{ padding: 0px; margin-top: -10px; |
| 232 | width: 40px; | 232 | width: 40px; |
| 233 | height: 40px; | 233 | height: 40px; |
| 234 | float: right; box-shadow: 0px; outline: 0px;} | 234 | float: right; box-shadow: 0px; outline: 0px;} |
| 235 | .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;} | 235 | .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;} |
| 236 | 236 | ||
| 237 | .col-reverse{display: flex; | 237 | .col-reverse{display: flex; |
| 238 | flex-direction: column-reverse;} | 238 | flex-direction: column-reverse;} |
| 239 | .reset-pass-spc { | 239 | .reset-pass-spc { |
| 240 | margin-top: 20px; | 240 | margin-top: 20px; |
| 241 | } | 241 | } |
| 242 | /* profile */ | 242 | /* profile */ |
| 243 | .inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;} | 243 | .inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;} |
| 244 | .user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;} | 244 | .user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;} |
| 245 | .data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;} | 245 | .data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;} |
| 246 | .card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;} | 246 | .card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;} |
| 247 | .add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;} | 247 | .add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;} |
| 248 | .talk-to-me{ margin-bottom: 30px;} | 248 | .talk-to-me{ margin-bottom: 30px;} |
| 249 | .profile-data-wrp{ position: relative;} | 249 | .profile-data-wrp{ position: relative;} |
| 250 | .user-profile-photo { | 250 | .user-profile-photo { |
| 251 | position: absolute; | 251 | position: absolute; |
| 252 | right: 82px; | 252 | right: 82px; |
| 253 | top: 16px; | 253 | top: 16px; |
| 254 | } | 254 | } |
| 255 | .replies-wrp{ width: 100%; margin-left: 0px;} | 255 | .replies-wrp{ width: 100%; margin-left: 0px;} |
| 256 | .replies { padding-top: 100px;} | 256 | .replies { padding-top: 100px;} |
| 257 | .inner-wrp h1{ width: 100%; display: block; float: left;} | 257 | .inner-wrp h1{ width: 100%; display: block; float: left;} |
| 258 | .verified-team {width: 129px; display: block;margin-top: 7px;position: unset; margin-left: 0px;} | 258 | .verified-team {width: 129px; display: block;margin-top: 7px;position: unset; margin-left: 0px;} |
| 259 | .profile-tab li { float: left; padding-bottom: 10px; margin-right: 0;margin-bottom: 20px;} | 259 | .profile-tab li { float: left; padding-bottom: 10px; margin-right: 0;margin-bottom: 20px;} |
| 260 | .profile-tab li a{ font-size: 17px;} | 260 | .profile-tab li a{ font-size: 17px;} |
| 261 | .members-wrp{ padding:50px 0 50px 0px; width: 100%;} | 261 | .members-wrp{ padding:50px 0 50px 0px; width: 100%;} |
| 262 | .members-wrp .member-list{ width: 298px;} | 262 | .members-wrp .member-list{ width: 298px;} |
| 263 | .members-wrp .member-list a span h1{ margin-top:0px;} | 263 | .members-wrp .member-list a span h1{ margin-top:0px;} |
| 264 | .insights-spc { | 264 | .insights-spc { |
| 265 | padding: 0 0px; | 265 | padding: 0 0px; |
| 266 | } | 266 | } |
| 267 | .insights-list { | 267 | .insights-list { |
| 268 | list-style-type: none; | 268 | list-style-type: none; |
| 269 | margin: 0px; | 269 | margin: 0px; |
| 270 | padding: 0px; | 270 | padding: 0px; |
| 271 | width: auto; | 271 | width: auto; |
| 272 | display: block; | 272 | display: block; |
| 273 | float: left; | 273 | float: left; |
| 274 | margin-top: -10px; | 274 | margin-top: -10px; |
| 275 | margin-left: 11px; | 275 | margin-left: 11px; |
| 276 | } | 276 | } |
| 277 | .insights-details{ width: 100%;} | 277 | .insights-details{ width: 100%;} |
| 278 | .insights-profile{ right: 12px;} | 278 | .insights-profile{ right: 12px;} |
| 279 | } | 279 | } |
| 280 | 280 | ||
| 281 | /* tab */ | 281 | /* tab */ |
| 282 | /* Portrait and Landscape */ | 282 | /* Portrait and Landscape */ |
| 283 | @media only screen | 283 | @media only screen |
| 284 | and (min-device-width: 1024px) | 284 | and (min-device-width: 1024px) |
| 285 | and (max-device-width: 1366px) | 285 | and (max-device-width: 1366px) |
| 286 | and (-webkit-min-device-pixel-ratio: 2) { | 286 | and (-webkit-min-device-pixel-ratio: 2) { |
| 287 | .main-wrp{background-position: bottom -10px left -100px !important;} | 287 | .main-wrp{background-position: bottom -10px left -100px !important;} |
| 288 | .replies-wrp{ width: 760px;} | 288 | .replies-wrp{ width: 760px;} |
| 289 | .insights-spc { | 289 | .insights-spc { |
| 290 | padding: 0 30px; | 290 | padding: 0 30px; |
| 291 | } | 291 | } |
| 292 | .insights-details { | 292 | .insights-details { |
| 293 | width: 490px; | 293 | width: 490px; |
| 294 | } | 294 | } |
| 295 | 295 | ||
| 296 | } | 296 | } |
| 297 | /* Portrait and Landscape */ | 297 | /* Portrait and Landscape */ |
| 298 | @media only screen | 298 | @media only screen |
| 299 | and (min-width: 1024px) | 299 | and (min-width: 1024px) |
| 300 | and (max-height: 1366px) | 300 | and (max-height: 1366px) |
| 301 | and (orientation: landscape) | 301 | and (orientation: landscape) |
| 302 | and (-webkit-min-device-pixel-ratio: 1.5) { | 302 | and (-webkit-min-device-pixel-ratio: 1.5) { |
| 303 | .insights-details { | 303 | .insights-details { |
| 304 | width: 620px; | 304 | width: 620px; |
| 305 | } | 305 | } |
| 306 | } | 306 | } |
| 307 | @media only screen | 307 | @media only screen |
| 308 | and (min-device-width: 1024px) | 308 | and (min-device-width: 1024px) |
| 309 | and (max-device-width: 1024px) | 309 | and (max-device-width: 1024px) |
| 310 | and (orientation: portrait) | 310 | and (orientation: portrait) |
| 311 | and (-webkit-min-device-pixel-ratio: 2) { | 311 | and (-webkit-min-device-pixel-ratio: 2) { |
| 312 | .replies-wrp{ width: 760px;} | 312 | .replies-wrp{ width: 760px;} |
| 313 | } | 313 | } |
| 314 | /* / | 314 | /* / |
| 315 | 315 | ||
| 316 | /* Portrait */ | 316 | /* Portrait */ |
| 317 | @media only screen | 317 | @media only screen |
| 318 | and (min-device-width: 768px) | 318 | and (min-device-width: 768px) |
| 319 | and (max-device-width: 1024px) | 319 | and (max-device-width: 1024px) |
| 320 | and (orientation: portrait) | 320 | and (orientation: portrait) |
| 321 | and (-webkit-min-device-pixel-ratio: 1) { | 321 | and (-webkit-min-device-pixel-ratio: 1) { |
| 322 | .col-reverse{ | 322 | .col-reverse{ |
| 323 | flex-direction:unset;} | 323 | flex-direction:unset;} |
| 324 | .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} | 324 | .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} |
| 325 | .card-warpper{ float: left;} | 325 | .card-warpper{ float: left;} |
| 326 | .add-card-warpper{ float: left; margin-top: 0px;} | 326 | .add-card-warpper{ float: left; margin-top: 0px;} |
| 327 | .user-profile{ width: 540px; | 327 | .user-profile{ width: 540px; |
| 328 | margin-left: 30px; margin-top: 0px;} | 328 | margin-left: 30px; margin-top: 0px;} |
| 329 | .replies-wrp{ width: 100%; margin-left: 0px;} | 329 | .replies-wrp{ width: 100%; margin-left: 0px;} |
| 330 | .replies { padding-top: 100px;} | 330 | .replies { padding-top: 100px;} |
| 331 | .profile-tab li a{ font-size: 17px;} | 331 | .profile-tab li a{ font-size: 17px;} |
| 332 | .profile-tab li{ margin-right: 15px;} | 332 | .profile-tab li{ margin-right: 15px;} |
| 333 | .members-wrp .member-list{ margin-right: 50px;} | 333 | .members-wrp .member-list{ margin-right: 50px;} |
| 334 | .insights-spc { | 334 | .insights-spc { |
| 335 | padding: 0 70px; | 335 | padding: 0 70px; |
| 336 | } | 336 | } |
| 337 | } | 337 | } |
| 338 | /* Portrait and Landscape */ | 338 | /* Portrait and Landscape */ |
| 339 | @media only screen | 339 | @media only screen |
| 340 | and (min-device-width: 768px) | 340 | and (min-device-width: 768px) |
| 341 | and (max-device-width: 1024px) | 341 | and (max-device-width: 1024px) |
| 342 | and (-webkit-min-device-pixel-ratio: 1) { | 342 | and (-webkit-min-device-pixel-ratio: 1) { |
| 343 | .main-wrp{background-position: bottom -10px left -130px !important;} | 343 | .main-wrp{background-position: bottom -10px left -130px !important;} |
| 344 | .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} | 344 | .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} |
| 345 | .user-profile{padding-right: 0px; width: 380px;} | 345 | .user-profile{padding-right: 0px; width: 380px;} |
| 346 | .card-warpper{margin-bottom: 40px; margin-right: 25px;} | 346 | .card-warpper{margin-bottom: 40px; margin-right: 25px;} |
| 347 | .profile-tab li a{ font-size: 17px;} | 347 | .profile-tab li a{ font-size: 17px;} |
| 348 | .profile-tab li{ margin-right: 15px;} | 348 | .profile-tab li{ margin-right: 15px;} |
| 349 | .members-wrp{ width: 700px;} | 349 | .members-wrp{ width: 700px;} |
| 350 | .members-wrp .member-list{ width: 320px; margin-right: 25px;} | 350 | .members-wrp .member-list{ width: 320px; margin-right: 25px;} |
| 351 | .insights-details { | 351 | .insights-details { |
| 352 | width:520px; | 352 | width:520px; |
| 353 | } | 353 | } |
| 354 | .insights-wrp{ padding: 0 50px 0 40px;} | 354 | .insights-wrp{ padding: 0 50px 0 40px;} |
| 355 | } | 355 | } |
| 356 | 356 | ||
| 357 | 357 |
src/components/AuthorReadingBreak.vue
| File was created | 1 | <template> | |
| 2 | <main class="landing-page"> | ||
| 3 | <div class="container-fluid episode-intro app-discovery-bg"> | ||
| 4 | <Header></Header> | ||
| 5 | |||
| 6 | <!-- menu wrapper --> | ||
| 7 | <div class="intro-startup"> | ||
| 8 | |||
| 9 | |||
| 10 | <div class="single-author-comments"> | ||
| 11 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> | ||
| 12 | <div class="ct-l-400"> | ||
| 13 | <!-- <div class="single-author-li-comments" > --> | ||
| 14 | <div class="right-corner font-style"> | ||
| 15 | <p> | ||
| 16 | {{ currentSlideData.payload.metaData.description }} | ||
| 17 | </p> | ||
| 18 | |||
| 19 | </div> | ||
| 20 | <!-- comments box --> | ||
| 21 | <!-- </div> --> | ||
| 22 | </div> | ||
| 23 | <img | ||
| 24 | class="s-user-comments m-0" | ||
| 25 | :src="currentSlideData.payload.metaData.authorImage" | ||
| 26 | /> | ||
| 27 | <div class="comments-a-wrp ct-width"> | ||
| 28 | <div class="single-author-li-comments" > | ||
| 29 | <div class="a-intro-comments"> | ||
| 30 | <p> | ||
| 31 | {{ currentSlideData.payload.comments[0].comment }} | ||
| 32 | </p> | ||
| 33 | <ul class="rly-comment-set"> | ||
| 34 | |||
| 35 | </ul> | ||
| 36 | </div> | ||
| 37 | <!-- comments box --> | ||
| 38 | </div> | ||
| 39 | <!-- single author comments --> | ||
| 40 | <div class="single-author-li-comments" > | ||
| 41 | <div class="a-intro-comments"> | ||
| 42 | <p> | ||
| 43 | {{ currentSlideData.payload.comments[1].comment }} | ||
| 44 | </p> | ||
| 45 | <ul class="rly-comment-set"> | ||
| 46 | |||
| 47 | </ul> | ||
| 48 | </div> | ||
| 49 | </div> | ||
| 50 | </div> | ||
| 51 | </div> | ||
| 52 | |||
| 53 | <div class="footer-nav"> | ||
| 54 | <div class="footer-top"> | ||
| 55 | <ul class="top-intro-bt ps_right"> | ||
| 56 | <li> | ||
| 57 | <a href="javascript:void(0);" @click="goBack" | ||
| 58 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | ||
| 59 | > | ||
| 60 | </li> | ||
| 61 | <li> | ||
| 62 | <a href="javascript:void(0);" @click="goNext" | ||
| 63 | ><img src="../assets/images/skip-next.svg" /> Skip to next | ||
| 64 | slide</a | ||
| 65 | > | ||
| 66 | </li> | ||
| 67 | </ul> | ||
| 68 | </div> | ||
| 69 | <!-- footer top --> | ||
| 70 | <div class="footer-bottom"> | ||
| 71 | <ul> | ||
| 72 | <li></li> | ||
| 73 | <li></li> | ||
| 74 | </ul> | ||
| 75 | </div> | ||
| 76 | <!-- footer top --> | ||
| 77 | </div> | ||
| 78 | <!-- footer --> | ||
| 79 | </div> | ||
| 80 | <!-- body wrapper --> | ||
| 81 | </div> | ||
| 82 | <!-- main wrapper --> | ||
| 83 | </main> | ||
| 84 | </template> | ||
| 85 | |||
| 86 | <script> | ||
| 87 | import Vue from "vue"; | ||
| 88 | import router from "../router"; | ||
| 89 | import Header from "./Header"; | ||
| 90 | |||
| 91 | export default { | ||
| 92 | components: { | ||
| 93 | Header: Header, | ||
| 94 | }, | ||
| 95 | name: "AuthorReadingBreak", | ||
| 96 | |||
| 97 | data() { | ||
| 98 | return { | ||
| 99 | allSlide: [], | ||
| 100 | currentSlideIndex: null, | ||
| 101 | currentSlideData: null, | ||
| 102 | }; | ||
| 103 | }, | ||
| 104 | mounted() { | ||
| 105 | var allSlideData = localStorage.getItem( | ||
| 106 | "spotlight_slide" + this.$route.params.caseStudyId | ||
| 107 | ); | ||
| 108 | if (allSlideData) { | ||
| 109 | this.allSlide = JSON.parse(allSlideData); | ||
| 110 | this.getCurrentSlideData(); | ||
| 111 | } | ||
| 112 | }, | ||
| 113 | methods: { | ||
| 114 | getCurrentSlideData() { | ||
| 115 | var i = this.allSlide.findIndex( | ||
| 116 | (slide_) => slide_.slideId == this.$route.params.slideId | ||
| 117 | ); | ||
| 118 | this.currentSlideIndex = i; | ||
| 119 | this.currentSlideData = this.allSlide[i]; | ||
| 120 | console.log( "currentSlideData", this.currentSlideData); | ||
| 121 | }, | ||
| 122 | goNext() { | ||
| 123 | this.currentSlideIndex++; | ||
| 124 | this.$router.push({ | ||
| 125 | name: this.allSlide[this.currentSlideIndex].ur, | ||
| 126 | params: { | ||
| 127 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | ||
| 128 | slideId: this.allSlide[this.currentSlideIndex].slideId, | ||
| 129 | }, | ||
| 130 | }); | ||
| 131 | }, | ||
| 132 | goBack() { | ||
| 133 | this.currentSlideIndex--; | ||
| 134 | this.$router.push({ | ||
| 135 | name: this.allSlide[this.currentSlideIndex].ur, | ||
| 136 | params: { | ||
| 137 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | ||
| 138 | slideId: this.allSlide[this.currentSlideIndex].slideId, | ||
| 139 | }, | ||
| 140 | }); | ||
| 141 | }, | ||
| 142 | goToLogin() { | ||
| 143 | this.$router.push("/login"); | ||
| 144 | }, | ||
| 145 | goToSignUp() { | ||
| 146 | this.$router.push("/"); | ||
| 147 | }, | ||
| 148 | goToProfile() { | ||
| 149 | this.$router.push("/profile"); | ||
| 150 | }, | ||
| 151 | |||
| 152 | commentExistCheck(i) { | ||
| 153 | console.log(this.commentList[i].comment); | ||
| 154 | var returnValue = false; | ||
| 155 | if (this.commentList[i].comment) { | ||
| 156 | returnValue = true; | ||
| 157 | } | ||
| 158 | return returnValue; | ||
| 159 | }, | ||
| 160 | }, | ||
| 161 | }; | ||
| 162 | </script> | ||
| 163 | <style > | ||
| 164 | .font-style{ | ||
| 165 | color:#35338C; | ||
| 166 | font-size:2rem; | ||
| 167 | } | ||
| 168 | |||
| 169 | </style> |
src/components/AuthorReadingNow.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid episode-intro app-discovery-bg"> | 3 | <div class="container-fluid episode-intro app-discovery-bg"> |
| 4 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 4 | <Header></Header> |
| 5 | <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> | 5 | |
| 6 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | ||
| 7 | <span class="navbar-toggler-icon"></span> | ||
| 8 | <span class="navbar-toggler-icon"></span> | ||
| 9 | <span class="navbar-toggler-icon"></span> | ||
| 10 | </button> | ||
| 11 | <div class="user-profile-photo insights-profile"> | ||
| 12 | <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a> | ||
| 13 | </div> | ||
| 14 | </nav> | ||
| 15 | <!-- menu wrapper --> | 6 | <!-- menu wrapper --> |
| 16 | <div class="intro-startup"> | 7 | <div class="intro-startup"> |
| 17 | <div class="spot-light-top"> | 8 | <div class="spot-light-top"> |
| 18 | <img src="../assets/images/spot-light-top.svg" /> | 9 | <img src="../assets/images/spot-light-top.svg" /> |
| 19 | <div class="app-discovery"> | 10 | <div class="app-discovery"> |
| 20 | <div class="top-user"> | 11 | <div class="top-user"> |
| 21 | <img src="../assets/images/app-photo.svg" /> | 12 | <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/> |
| 13 | <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/> | ||
| 14 | <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/> | ||
| 15 | <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/> | ||
| 16 | <!-- <img src="../assets/images/app-photo.svg" /> --> | ||
| 22 | </div><!-- top user --> | 17 | </div><!-- top user --> |
| 23 | <h1>App Discovery</h1> | 18 | <h1>{{currentSlideData.payload.metaData.title}}</h1> |
| 24 | <h2>01</h2> | 19 | <h2>{{currentSlideData.payload.metaData.count}}</h2> |
| 25 | <img src="../assets/images/discovery.svg" class="discovery-app-img" /> | 20 | <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" /> |
| 26 | </div><!-- app Disovery --> | 21 | </div><!-- app Disovery --> |
| 27 | 22 | ||
| 28 | </div><!-- spot light top --> | 23 | </div><!-- spot light top --> |
| 29 | <img src="../assets/images/popcorn-set.svg" class="popcorn-set" /> | 24 | <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" /> |
| 30 | <div class="footer-nav"> | 25 | <div class="footer-nav"> |
| 31 | <div class="footer-top"> | 26 | <div class="footer-top"> |
| 32 | <ul class="top-intro-bt"> | 27 | <ul class="top-intro-bt ps_right"> |
| 33 | <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | 28 | <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> |
| 34 | <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | 29 | <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> |
| 35 | </ul> | 30 | </ul> |
| 36 | </div><!-- footer top --> | 31 | </div><!-- footer top --> |
| 37 | <div class="footer-bottom"> | 32 | <div class="footer-bottom"> |
| 38 | <ul> | 33 | <ul> |
| 39 | <li class="active"></li> | 34 | <li></li> |
| 40 | <li></li> | 35 | <li></li> |
| 41 | </ul> | 36 | </ul> |
| 42 | </div><!-- footer top --> | 37 | </div><!-- footer top --> |
| 43 | </div><!-- footer --> | 38 | </div><!-- footer --> |
| 44 | 39 | ||
| 45 | </div> | 40 | </div> |
| 46 | <!-- body wrapper --> | 41 | <!-- body wrapper --> |
| 47 | </div> | 42 | </div> |
| 48 | <!-- main wrapper --> | 43 | <!-- main wrapper --> |
| 49 | </main> | 44 | </main> |
| 50 | </template> | 45 | </template> |
| 51 | 46 | ||
| 52 | <script> | 47 | <script> |
| 53 | import Vue from "vue"; | 48 | import Vue from "vue"; |
| 54 | import router from "../router"; | 49 | import router from "../router"; |
| 50 | import Header from "./Header"; | ||
| 55 | 51 | ||
| 56 | export default { | 52 | export default { |
| 53 | components: { | ||
| 54 | Header: Header, | ||
| 55 | }, | ||
| 57 | name: "AuthorReadingNow", | 56 | name: "AuthorReadingNow", |
| 58 | 57 | ||
| 59 | data() { | 58 | data() { |
| 60 | return {}; | 59 | |
| 60 | return { | ||
| 61 | allSlide:[], | ||
| 62 | currentSlideIndex:null, | ||
| 63 | currentSlideData:null, | ||
| 64 | }; | ||
| 65 | }, | ||
| 66 | mounted() { | ||
| 67 | var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); | ||
| 68 | if (allSlideData) { | ||
| 69 | this.allSlide = JSON.parse(allSlideData); | ||
| 70 | this.getCurrentSlideData(); | ||
| 71 | } | ||
| 72 | |||
| 61 | }, | 73 | }, |
| 62 | mounted() {}, | ||
| 63 | methods: { | 74 | methods: { |
| 75 | getCurrentSlideData(){ | ||
| 76 | var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); | ||
| 77 | this.currentSlideIndex = i; | ||
| 78 | this.currentSlideData = this.allSlide[i] | ||
| 79 | console.log( this.allSlide[0],"currentSlideData",this.currentSlideData) | ||
| 80 | |||
| 81 | }, | ||
| 82 | goNext(){ | ||
| 83 | this.currentSlideIndex++ | ||
| 84 | this.$router.push({ | ||
| 85 | name: this.allSlide[this.currentSlideIndex].ur, | ||
| 86 | params: { | ||
| 87 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | ||
| 88 | slideId: this.allSlide[this.currentSlideIndex].slideId, | ||
| 89 | }, | ||
| 90 | }); | ||
| 91 | |||
| 92 | }, | ||
| 93 | goBack(){ | ||
| 94 | this.currentSlideIndex-- | ||
| 95 | this.$router.push({ | ||
| 96 | name: this.allSlide[this.currentSlideIndex].ur, | ||
| 97 | params: { | ||
| 98 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | ||
| 99 | slideId: this.allSlide[this.currentSlideIndex].slideId, | ||
| 100 | }, | ||
| 101 | }); | ||
| 102 | |||
| 103 | }, | ||
| 64 | goToLogin() { | 104 | goToLogin() { |
| 65 | this.$router.push("/login"); | 105 | this.$router.push("/login"); |
| 66 | }, | 106 | }, |
src/components/Profile.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <!-- profile --> | 3 | <!-- profile --> |
| 4 | <div class="popup-wrp" style="display: none"> | 4 | <div class="popup-wrp" style="display: none"> |
| 5 | <div class="overlay" @click="hideDialog"></div> | 5 | <div class="overlay" @click="hideDialog"></div> |
| 6 | <div class="popup-set" id="add-profile" style="display: none"> | 6 | <div class="popup-set" id="add-profile" style="display: none"> |
| 7 | <div class="popup-header"> | 7 | <div class="popup-header"> |
| 8 | <div class="user-photo common_color"> | 8 | <div class="user-photo common_color"> |
| 9 | <img :src="userData.profilePic" /> | 9 | <img :src="userData.profilePic" /> |
| 10 | </div> | 10 | </div> |
| 11 | <!-- header user --> | 11 | <!-- header user --> |
| 12 | 12 | ||
| 13 | <ul> | 13 | <ul> |
| 14 | <li> | 14 | <li> |
| 15 | <a href="javasript:void(0);" | 15 | <a href="javasript:void(0);" |
| 16 | ><img src="../assets/images/upload-cloud.svg" /><span | 16 | ><img src="../assets/images/upload-cloud.svg" /><span |
| 17 | >Upload Avatar</span></a> | 17 | >Upload Avatar</span></a> |
| 18 | </li> | 18 | </li> |
| 19 | <li> | 19 | <li> |
| 20 | <a href="javasript:void(0);" @click="getRandomAvatar()" | 20 | <a href="javasript:void(0);" @click="getRandomAvatar()" |
| 21 | ><img src="../assets/images/randomise.svg" /><span | 21 | ><img src="../assets/images/randomise.svg" /><span |
| 22 | >Randomise Avatar</span | 22 | >Randomise Avatar</span |
| 23 | ></a | 23 | ></a |
| 24 | > | 24 | > |
| 25 | </li> | 25 | </li> |
| 26 | </ul> | 26 | </ul> |
| 27 | </div> | 27 | </div> |
| 28 | <!-- header --> | 28 | <!-- header --> |
| 29 | <div class="popup-body"> | 29 | <div class="popup-body"> |
| 30 | <form class="popup-forms"> | 30 | <form class="popup-forms"> |
| 31 | <div class="row"> | 31 | <div class="row"> |
| 32 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 32 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 33 | <div class="form-group floating-label"> | 33 | <div class="form-group floating-label"> |
| 34 | <input | 34 | <input |
| 35 | type="text" | 35 | type="text" |
| 36 | class="form-control" | 36 | class="form-control" |
| 37 | v-model="userData.firstName" | 37 | v-model="userData.firstName" |
| 38 | placeholder=" " | 38 | placeholder=" " |
| 39 | id="fname" | 39 | id="fname" |
| 40 | /> | 40 | /> |
| 41 | <label for="fname">First Name</label> | 41 | <label for="fname">First Name</label> |
| 42 | </div> | 42 | </div> |
| 43 | </div> | 43 | </div> |
| 44 | <!-- input --> | 44 | <!-- input --> |
| 45 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 45 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 46 | <div class="form-group floating-label"> | 46 | <div class="form-group floating-label"> |
| 47 | <input | 47 | <input |
| 48 | type="text" | 48 | type="text" |
| 49 | class="form-control" | 49 | class="form-control" |
| 50 | value="" | 50 | value="" |
| 51 | placeholder=" " | 51 | placeholder=" " |
| 52 | id="lname" | 52 | id="lname" |
| 53 | v-model="userData.lastName" | 53 | v-model="userData.lastName" |
| 54 | /> | 54 | /> |
| 55 | <label for="lname" class="lname">Last Name</label> | 55 | <label for="lname" class="lname">Last Name</label> |
| 56 | </div> | 56 | </div> |
| 57 | </div> | 57 | </div> |
| 58 | <!-- input --> | 58 | <!-- input --> |
| 59 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | 59 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> |
| 60 | <div class="form-group floating-label"> | 60 | <div class="form-group floating-label"> |
| 61 | <input | 61 | <input |
| 62 | type="text" | 62 | type="text" |
| 63 | class="form-control" | 63 | class="form-control" |
| 64 | value="" | 64 | value="" |
| 65 | v-model="userData.designation" | 65 | v-model="userData.designation" |
| 66 | placeholder=" " | 66 | placeholder=" " |
| 67 | id="designation" | 67 | id="designation" |
| 68 | /> | 68 | /> |
| 69 | <label for="designation">Designation</label> | 69 | <label for="designation">Designation</label> |
| 70 | </div> | 70 | </div> |
| 71 | </div> | 71 | </div> |
| 72 | <!-- input --> | 72 | <!-- input --> |
| 73 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 73 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 74 | <div class="form-group floating-label"> | 74 | <div class="form-group floating-label"> |
| 75 | <input | 75 | <input |
| 76 | type="text" | 76 | type="text" |
| 77 | class="form-control" | 77 | class="form-control" |
| 78 | v-model="userData.organisation" | 78 | v-model="userData.organisation" |
| 79 | id="company" | 79 | id="company" |
| 80 | placeholder=" " | 80 | placeholder=" " |
| 81 | /> | 81 | /> |
| 82 | <label for="company">Company</label> | 82 | <label for="company">Company</label> |
| 83 | </div> | 83 | </div> |
| 84 | </div> | 84 | </div> |
| 85 | <!-- input --> | 85 | <!-- input --> |
| 86 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 86 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 87 | <div class="form-group floating-label"> | 87 | <div class="form-group floating-label"> |
| 88 | <textarea | 88 | <textarea |
| 89 | type="text" | 89 | type="text" |
| 90 | class="form-control" | 90 | class="form-control" |
| 91 | value="" | 91 | value="" |
| 92 | v-model="userData.bio" | 92 | v-model="userData.bio" |
| 93 | id="yourself" | 93 | id="yourself" |
| 94 | placeholder=" " | 94 | placeholder=" " |
| 95 | ></textarea> | 95 | ></textarea> |
| 96 | <label for="yourself" | 96 | <label for="yourself" |
| 97 | >Tell others a little about yourself</label | 97 | >Tell others a little about yourself</label |
| 98 | > | 98 | > |
| 99 | </div> | 99 | </div> |
| 100 | </div> | 100 | </div> |
| 101 | <!-- input --> | 101 | <!-- input --> |
| 102 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 102 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 103 | <p class="things">Three things that you talk more about</p> | 103 | <p class="things">Three things that you talk more about</p> |
| 104 | 104 | ||
| 105 | <ul class="interests"> | 105 | <ul class="interests"> |
| 106 | <li v-for="(interest, i) in userData.interests" :key="i"> | 106 | <li v-for="(interest, i) in userData.interests" :key="i"> |
| 107 | <span>{{ interest }}</span> | 107 | <span>{{ interest }}</span> |
| 108 | <a | 108 | <a |
| 109 | href="javascript:void(0);" | 109 | href="javascript:void(0);" |
| 110 | @click="removeInterest(i)" | 110 | @click="removeInterest(i)" |
| 111 | class="cat-minus" | 111 | class="cat-minus" |
| 112 | ><img src="../assets/images/minus.svg" | 112 | ><img src="../assets/images/minus.svg" |
| 113 | /></a> | 113 | /></a> |
| 114 | </li> | 114 | </li> |
| 115 | <li> | 115 | <li> |
| 116 | <input | 116 | <input |
| 117 | class="" | 117 | class="" |
| 118 | placeholder="Add interest" | 118 | placeholder="Add interest" |
| 119 | v-on:keyup.enter="addInterest" | 119 | v-on:keyup.enter="addInterest" |
| 120 | v-model="interestName" | 120 | v-model="interestName" |
| 121 | /> | 121 | /> |
| 122 | <a href="javascript:void(0);" @click="addInterest()" | 122 | <a href="javascript:void(0);" @click="addInterest()" |
| 123 | ><img src="../assets/images/plus-circle.svg" | 123 | ><img src="../assets/images/plus-circle.svg" |
| 124 | /></a> | 124 | /></a> |
| 125 | </li> | 125 | </li> |
| 126 | </ul> | 126 | </ul> |
| 127 | </div> | 127 | </div> |
| 128 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 128 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 129 | <p class="things">Choose Background color</p> | 129 | <p class="things">Choose Background color</p> |
| 130 | 130 | ||
| 131 | <ul class="colors"> | 131 | <ul class="colors"> |
| 132 | <li> | 132 | <li> |
| 133 | <a | 133 | <a |
| 134 | href="javascript:void(0);" | 134 | href="javascript:void(0);" |
| 135 | id="#C4C4C4" | 135 | id="#C4C4C4" |
| 136 | class="silver" | 136 | class="silver" |
| 137 | @click="changeColor('#C4C4C4')" | 137 | @click="changeColor('#C4C4C4')" |
| 138 | ></a> | 138 | ></a> |
| 139 | </li> | 139 | </li> |
| 140 | <li> | 140 | <li> |
| 141 | <a | 141 | <a |
| 142 | href="javascript:void(0);" | 142 | href="javascript:void(0);" |
| 143 | id="#FFF6D7" | 143 | id="#FFF6D7" |
| 144 | class="milk-punch" | 144 | class="milk-punch" |
| 145 | @click="changeColor('#FFF6D7')" | 145 | @click="changeColor('#FFF6D7')" |
| 146 | ></a> | 146 | ></a> |
| 147 | </li> | 147 | </li> |
| 148 | <li> | 148 | <li> |
| 149 | <a | 149 | <a |
| 150 | href="javascript:void(0);" | 150 | href="javascript:void(0);" |
| 151 | id="#BDDBFF" | 151 | id="#BDDBFF" |
| 152 | class="french-pass" | 152 | class="french-pass" |
| 153 | @click="changeColor('#BDDBFF')" | 153 | @click="changeColor('#BDDBFF')" |
| 154 | ></a> | 154 | ></a> |
| 155 | </li> | 155 | </li> |
| 156 | <li> | 156 | <li> |
| 157 | <a | 157 | <a |
| 158 | href="javascript:void(0);" | 158 | href="javascript:void(0);" |
| 159 | id="#C0FAFE" | 159 | id="#C0FAFE" |
| 160 | class="cyan-french-pass" | 160 | class="cyan-french-pass" |
| 161 | @click="changeColor('#C0FAFE')" | 161 | @click="changeColor('#C0FAFE')" |
| 162 | ></a> | 162 | ></a> |
| 163 | </li> | 163 | </li> |
| 164 | <li> | 164 | <li> |
| 165 | <a | 165 | <a |
| 166 | href="javascript:void(0);" | 166 | href="javascript:void(0);" |
| 167 | id="#FFDBDC" | 167 | id="#FFDBDC" |
| 168 | class="cosmos" | 168 | class="cosmos" |
| 169 | @click="changeColor('#FFDBDC')" | 169 | @click="changeColor('#FFDBDC')" |
| 170 | ></a> | 170 | ></a> |
| 171 | </li> | 171 | </li> |
| 172 | <li> | 172 | <li> |
| 173 | <a | 173 | <a |
| 174 | href="javascript:void(0);" | 174 | href="javascript:void(0);" |
| 175 | id="#FEE6AC" | 175 | id="#FEE6AC" |
| 176 | class="cape-Honey" | 176 | class="cape-Honey" |
| 177 | @click="changeColor('#FEE6AC')" | 177 | @click="changeColor('#FEE6AC')" |
| 178 | ></a> | 178 | ></a> |
| 179 | </li> | 179 | </li> |
| 180 | <li> | 180 | <li> |
| 181 | <a | 181 | <a |
| 182 | href="javascript:void(0);" | 182 | href="javascript:void(0);" |
| 183 | id="#E5DFF0" | 183 | id="#E5DFF0" |
| 184 | class="snuff" | 184 | class="snuff" |
| 185 | @click="changeColor('#E5DFF0')" | 185 | @click="changeColor('#E5DFF0')" |
| 186 | ></a> | 186 | ></a> |
| 187 | </li> | 187 | </li> |
| 188 | <li> | 188 | <li> |
| 189 | <a | 189 | <a |
| 190 | href="javascript:void(0);" | 190 | href="javascript:void(0);" |
| 191 | id="#DFE7EF" | 191 | id="#DFE7EF" |
| 192 | class="catskillWhite" | 192 | class="catskillWhite" |
| 193 | @click="changeColor('#DFE7EF')" | 193 | @click="changeColor('#DFE7EF')" |
| 194 | ></a> | 194 | ></a> |
| 195 | </li> | 195 | </li> |
| 196 | <li> | 196 | <li> |
| 197 | <a | 197 | <a |
| 198 | href="javascript:void(0);" | 198 | href="javascript:void(0);" |
| 199 | id="#FFF" | 199 | id="#FFF" |
| 200 | class="white" | 200 | class="white" |
| 201 | @click="changeColor('#FFF')" | 201 | @click="changeColor('#FFF')" |
| 202 | ></a> | 202 | ></a> |
| 203 | </li> | 203 | </li> |
| 204 | </ul> | 204 | </ul> |
| 205 | </div> | 205 | </div> |
| 206 | <div class="col-lg-12 mt-50"> | 206 | <div class="col-lg-12 mt-50"> |
| 207 | <p class="notifications"> | 207 | <p class="notifications"> |
| 208 | Recieve notifications when you recieve a comment/ Upvote | 208 | Recieve notifications when you recieve a comment/ Upvote |
| 209 | </p> | 209 | </p> |
| 210 | <div class="switch-bt-wrp"> | 210 | <div class="switch-bt-wrp"> |
| 211 | <label class="switch-btn"> | 211 | <label class="switch-btn"> |
| 212 | <input type="checkbox" class="toggle-btn" /> | 212 | <input type="checkbox" class="toggle-btn" /> |
| 213 | <span class="rounded-toggle"></span> | 213 | <span class="rounded-toggle"></span> |
| 214 | </label> | 214 | </label> |
| 215 | <span class="onoff">on/off</span> | 215 | <span class="onoff">on/off</span> |
| 216 | </div> | 216 | </div> |
| 217 | </div> | 217 | </div> |
| 218 | <div class="col-lg-12"> | 218 | <div class="col-lg-12"> |
| 219 | <p class="add-socail-ch"> | 219 | <p class="add-socail-ch"> |
| 220 | Add your social Channels <span></span> | 220 | Add your social Channels <span></span> |
| 221 | </p> | 221 | </p> |
| 222 | </div> | 222 | </div> |
| 223 | 223 | ||
| 224 | <div | 224 | <div |
| 225 | class="row" | 225 | class="row" |
| 226 | style="width: 100%" | 226 | style="width: 100%" |
| 227 | v-for="(social, i) in selectedSocialLink" | 227 | v-for="(social, i) in selectedSocialLink" |
| 228 | :key="i" | 228 | :key="i" |
| 229 | > | 229 | > |
| 230 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 230 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 231 | <div class="form-group floating-label"> | 231 | <div class="form-group floating-label"> |
| 232 | <select class="form-group"> | 232 | <select class="form-group"> |
| 233 | <option value="Linkedin">{{ social.displayName }}</option> | 233 | <option value="Linkedin">{{ social.displayName }}</option> |
| 234 | </select> | 234 | </select> |
| 235 | <span class="select-arrow" | 235 | <span class="select-arrow" |
| 236 | ><img src="../assets/images/chevron-down.svg" | 236 | ><img src="../assets/images/chevron-down.svg" |
| 237 | /></span> | 237 | /></span> |
| 238 | </div> | 238 | </div> |
| 239 | </div> | 239 | </div> |
| 240 | <!-- input --> | 240 | <!-- input --> |
| 241 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 241 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 242 | <div class="form-group floating-label"> | 242 | <div class="form-group floating-label"> |
| 243 | <input | 243 | <input |
| 244 | type="text" | 244 | type="text" |
| 245 | class="form-control" | 245 | class="form-control" |
| 246 | value="" | 246 | value="" |
| 247 | placeholder="Paste your profile URL here" | 247 | placeholder="Paste your profile URL here" |
| 248 | id="" | 248 | id="" |
| 249 | v-model="social.fieldValue" | 249 | v-model="social.fieldValue" |
| 250 | /> | 250 | /> |
| 251 | </div> | 251 | </div> |
| 252 | </div> | 252 | </div> |
| 253 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> | 253 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> |
| 254 | <ul class="interests"> | 254 | <ul class="interests"> |
| 255 | <li> | 255 | <li> |
| 256 | <a | 256 | <a |
| 257 | @click="removeSocialLink(i)" | 257 | @click="removeSocialLink(i)" |
| 258 | href="javascript:void(0);" | 258 | href="javascript:void(0);" |
| 259 | class="cat-minus" | 259 | class="cat-minus" |
| 260 | ><img src="../assets/images/minus.svg" | 260 | ><img src="../assets/images/minus.svg" |
| 261 | /></a> | 261 | /></a> |
| 262 | </li> | 262 | </li> |
| 263 | </ul> | 263 | </ul> |
| 264 | </div> | 264 | </div> |
| 265 | </div> | 265 | </div> |
| 266 | <!-- input --> | 266 | <!-- input --> |
| 267 | 267 | ||
| 268 | <!-- input --> | 268 | <!-- input --> |
| 269 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 269 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 270 | <div class="form-group floating-label"> | 270 | <div class="form-group floating-label"> |
| 271 | <select | 271 | <select |
| 272 | class="form-group" | 272 | class="form-group" |
| 273 | v-model="currentLink" | 273 | v-model="currentLink" |
| 274 | v-on:change="addSocialLink(currentLink)" | 274 | v-on:change="addSocialLink(currentLink)" |
| 275 | > | 275 | > |
| 276 | <option value="null">Add another</option> | 276 | <option value="null">Add another</option> |
| 277 | <option | 277 | <option |
| 278 | v-for="(social, i) in socialLink" | 278 | v-for="(social, i) in socialLink" |
| 279 | :key="i" | 279 | :key="i" |
| 280 | :value="social.fieldName" | 280 | :value="social.fieldName" |
| 281 | > | 281 | > |
| 282 | {{ social.displayName }} | 282 | {{ social.displayName }} |
| 283 | </option> | 283 | </option> |
| 284 | </select> | 284 | </select> |
| 285 | <span class="select-arrow" | 285 | <span class="select-arrow" |
| 286 | ><img src="../assets/images/chevron-down.svg" | 286 | ><img src="../assets/images/chevron-down.svg" |
| 287 | /></span> | 287 | /></span> |
| 288 | </div> | 288 | </div> |
| 289 | </div> | 289 | </div> |
| 290 | <!-- input --> | 290 | <!-- input --> |
| 291 | </div> | 291 | </div> |
| 292 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" | 292 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" |
| 293 | >Save</a | 293 | >Save</a |
| 294 | > | 294 | > |
| 295 | </form> | 295 | </form> |
| 296 | </div> | 296 | </div> |
| 297 | <div class="clearfix"></div> | 297 | <div class="clearfix"></div> |
| 298 | </div> | 298 | </div> |
| 299 | <!-- add profile --> | 299 | <!-- add profile --> |
| 300 | </div> | 300 | </div> |
| 301 | <!-- profile --> | 301 | <!-- profile --> |
| 302 | <div class="container-fluid inner-wrp"> | 302 | <div class="container-fluid inner-wrp"> |
| 303 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 303 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 304 | <a class="navbar-brand" href="javasript:void(0);" | 304 | <a class="navbar-brand" href="javasript:void(0);" |
| 305 | ><img src="../assets/images/logo.png" | 305 | ><img src="../assets/images/logo.png" |
| 306 | /></a> | 306 | /></a> |
| 307 | <button | 307 | <button |
| 308 | class="navbar-toggler" | 308 | class="navbar-toggler" |
| 309 | type="button" | 309 | type="button" |
| 310 | data-toggle="collapse" | 310 | data-toggle="collapse" |
| 311 | data-target="#navbarsExample03" | 311 | data-target="#navbarsExample03" |
| 312 | aria-controls="navbarsExample03" | 312 | aria-controls="navbarsExample03" |
| 313 | aria-expanded="false" | 313 | aria-expanded="false" |
| 314 | aria-label="Toggle navigation" | 314 | aria-label="Toggle navigation" |
| 315 | > | 315 | > |
| 316 | <span class="navbar-toggler-icon"></span> | 316 | <span class="navbar-toggler-icon"></span> |
| 317 | <span class="navbar-toggler-icon"></span> | 317 | <span class="navbar-toggler-icon"></span> |
| 318 | <span class="navbar-toggler-icon"></span> | 318 | <span class="navbar-toggler-icon"></span> |
| 319 | </button> | 319 | </button> |
| 320 | 320 | ||
| 321 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 321 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 322 | <ul class="navbar-nav mr-auto"> | 322 | <ul class="navbar-nav mr-auto"> |
| 323 | <li class="nav-item active"> | 323 | <li class="nav-item active"> |
| 324 | <a class="nav-link" href="javasript:void(0);">About</a> | 324 | <a class="nav-link" href="javasript:void(0);">About</a> |
| 325 | </li> | 325 | </li> |
| 326 | <li class="nav-item"> | 326 | <li class="nav-item"> |
| 327 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> | 327 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> |
| 328 | </li> | 328 | </li> |
| 329 | <li class="nav-item"> | 329 | <li class="nav-item"> |
| 330 | <a class="nav-link" href="javasript:void(0);">Stories</a> | 330 | <a class="nav-link" href="javasript:void(0);">Stories</a> |
| 331 | </li> | 331 | </li> |
| 332 | <li class="nav-item"> | 332 | <li class="nav-item"> |
| 333 | <a class="nav-link" href="javasript:void(0);">Library</a> | 333 | <a class="nav-link" href="javasript:void(0);">Library</a> |
| 334 | </li> | 334 | </li> |
| 335 | </ul> | 335 | </ul> |
| 336 | </div> | 336 | </div> |
| 337 | <a | 337 | <a |
| 338 | v-if="this.userData.firstLogin" | 338 | v-if="this.userData.firstLogin" |
| 339 | href="javasript:void(0);" | 339 | href="javasript:void(0);" |
| 340 | @click="addProfileDialog" | 340 | @click="addProfileDialog" |
| 341 | class="update_profile" | 341 | class="update_profile" |
| 342 | ><span></span> Update Profile</a | 342 | ><span></span> Update Profile</a |
| 343 | > | 343 | > |
| 344 | <div class=""> | 344 | <div class=""> |
| 345 | <a | 345 | <a |
| 346 | href="javascript:void(0);" | 346 | href="javascript:void(0);" |
| 347 | class="user-profile-photo common_color" | 347 | class="user-profile-photo common_color" |
| 348 | @click="userprofileshowDialog" | 348 | @click="userprofileshowDialog" |
| 349 | ><img :src="userData.profilePic" | 349 | ><img :src="userData.profilePic" |
| 350 | /></a> | 350 | /></a> |
| 351 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | 351 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> |
| 352 | <ul> | 352 | <ul> |
| 353 | <li> | 353 | <li> |
| 354 | <a href="javascript:void(0);" @click="addProfileDialog" | 354 | <a href="javascript:void(0);" @click="addProfileDialog" |
| 355 | >Edit Profile</a | 355 | >Edit Profile</a |
| 356 | > | 356 | > |
| 357 | </li> | 357 | </li> |
| 358 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | 358 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> |
| 359 | </ul> | 359 | </ul> |
| 360 | </div> | 360 | </div> |
| 361 | </div> | 361 | </div> |
| 362 | </nav> | 362 | </nav> |
| 363 | 363 | ||
| 364 | <!-- <Header></Header> --> | 364 | <!-- <Header></Header> --> |
| 365 | <!-- menu wrapper --> | 365 | <!-- menu wrapper --> |
| 366 | <div class="row profile-tab-spc-top"> | 366 | <div class="row profile-tab-spc-top"> |
| 367 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | 367 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> |
| 368 | <div class="inner-profile-ps common_color"> | 368 | <div class="inner-profile-ps common_color"> |
| 369 | <img :src="userData.profilePic" class="" /> | 369 | <img :src="userData.profilePic" class="" /> |
| 370 | </div> | 370 | </div> |
| 371 | <!-- user profile --> | 371 | <!-- user profile --> |
| 372 | 372 | ||
| 373 | <div class="user-profile"> | 373 | <div class="user-profile"> |
| 374 | <h1> | 374 | <h1> |
| 375 | {{ userData.firstName }} {{ userData.lastName }} | 375 | {{ userData.firstName }} {{ userData.lastName }} |
| 376 | <span | 376 | <span |
| 377 | href="javasript:void(0);" | 377 | href="javasript:void(0);" |
| 378 | class="tags no-cursor no-underline" | 378 | class="tags no-cursor no-underline" |
| 379 | >{{ userData.role }}</span | 379 | >{{ userData.role }}</span |
| 380 | > | 380 | > |
| 381 | </h1> | 381 | </h1> |
| 382 | <ul class="joined-info"> | 382 | <ul class="joined-info"> |
| 383 | <li> | 383 | <li> |
| 384 | <a | 384 | <a |
| 385 | href="javascript:void(0);" | 385 | href="javascript:void(0);" |
| 386 | v-if="!userData.designation && !userData.organisation" | 386 | v-if="!userData.designation && !userData.organisation" |
| 387 | @click="addProfileDialog" | 387 | @click="addProfileDialog" |
| 388 | >Add your work</a | 388 | >Add your work</a |
| 389 | > | 389 | > |
| 390 | <a | 390 | <a |
| 391 | class="no-cursor no-underline" | 391 | class="no-cursor no-underline" |
| 392 | href="javascript:void(0);" | 392 | href="javascript:void(0);" |
| 393 | v-if="userData.designation" | 393 | v-if="userData.designation" |
| 394 | >{{ userData.designation }}</a | 394 | >{{ userData.designation }}</a |
| 395 | > | 395 | > |
| 396 | <a | 396 | <a |
| 397 | class="no-cursor no-underline" | 397 | class="no-cursor no-underline" |
| 398 | href="javascript:void(0);" | 398 | href="javascript:void(0);" |
| 399 | v-if="userData.designation && userData.organisation" | 399 | v-if="userData.designation && userData.organisation" |
| 400 | >at</a | 400 | >at</a |
| 401 | > | 401 | > |
| 402 | <a | 402 | <a |
| 403 | class="no-cursor no-underline" | 403 | class="no-cursor no-underline" |
| 404 | href="javascript:void(0);" | 404 | href="javascript:void(0);" |
| 405 | v-if="userData.organisation" | 405 | v-if="userData.organisation" |
| 406 | >{{ userData.organisation }}</a | 406 | >{{ userData.organisation }}</a |
| 407 | > | 407 | > |
| 408 | <img src="../assets/images/u-info-icon.png" /> <span></span> | 408 | <img src="../assets/images/u-info-icon.png" /> <span></span> |
| 409 | </li> | 409 | </li> |
| 410 | <li> | 410 | <li> |
| 411 | <a href="javasript:void(0);" content="Karma Points" v-tippy> | 411 | <a href="javasript:void(0);" content="Karma Points" v-tippy> |
| 412 | {{ userData.karmaPoints }} Karma</a | 412 | {{ userData.karmaPoints }} Karma</a |
| 413 | > | 413 | > |
| 414 | <span></span> | 414 | <span></span> |
| 415 | </li> | 415 | </li> |
| 416 | <li> | 416 | <li> |
| 417 | <a href="javasript:void(0);" class="no-cursor no-underline" | 417 | <a href="javasript:void(0);" class="no-cursor no-underline" |
| 418 | >Joined on | 418 | >Joined on |
| 419 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a | 419 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a |
| 420 | > | 420 | > |
| 421 | </li> | 421 | </li> |
| 422 | </ul> | 422 | </ul> |
| 423 | <p>{{ userData.bio }}</p> | 423 | <p>{{ userData.bio }}</p> |
| 424 | <div class="talk-to-me-about" v-if="userData.interests.length != 0"> | 424 | <div class="talk-to-me-about" v-if="userData.interests.length != 0"> |
| 425 | <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> | 425 | <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> |
| 426 | </div><!-- talk to me about --> | 426 | </div><!-- talk to me about --> |
| 427 | </div> | 427 | </div> |
| 428 | 428 | ||
| 429 | </div> | 429 | </div> |
| 430 | <!-- user profile --> | 430 | <!-- user profile --> |
| 431 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | 431 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> |
| 432 | <div class="list-style-group" v-if="userData.awards.views != null"> | 432 | <div class="list-style-group" v-if="userData.awards.views != null"> |
| 433 | <p>Awards</p> | 433 | <p>Awards</p> |
| 434 | <ul class="list-style"> | 434 | <ul class="list-style"> |
| 435 | <li> | 435 | <li> |
| 436 | <a href="javascript:void(0);" | 436 | <a href="javascript:void(0);" |
| 437 | ><img src="../assets/images/icon-1.png" | 437 | ><img src="../assets/images/icon-1.png" |
| 438 | /></a> | 438 | /></a> |
| 439 | </li> | 439 | </li> |
| 440 | </ul> | 440 | </ul> |
| 441 | </div> | 441 | </div> |
| 442 | <!-- list style --> | 442 | <!-- list style --> |
| 443 | </div> | 443 | </div> |
| 444 | </div> | 444 | </div> |
| 445 | <div class="clearfix"></div> | 445 | <div class="clearfix"></div> |
| 446 | <div class="row top-brd profile-tab-spc-top"> | 446 | <div class="row top-brd profile-tab-spc-top"> |
| 447 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 447 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 448 | <ul class="profile-tab"> | 448 | <ul class="profile-tab"> |
| 449 | <li class="active c-0"> | 449 | <li class="active c-0"> |
| 450 | <a href="javascript:void(0);" @click="caseDialog" | 450 | <a href="javascript:void(0);" @click="caseDialog" |
| 451 | >Case-studies({{ caseStudies.length }})</a | 451 | >Case-studies({{ caseStudies.length }})</a |
| 452 | > | 452 | > |
| 453 | </li> | 453 | </li> |
| 454 | <li class="rp-all"> | 454 | <li class="rp-all"> |
| 455 | <a href="javascript:void(0);" @click="repliesDialog" | 455 | <a href="javascript:void(0);" @click="repliesDialog" |
| 456 | >Comments/Replies({{this.userComments.length}})</a | 456 | >Comments/Replies({{this.userComments.length}})</a |
| 457 | > | 457 | > |
| 458 | </li> | 458 | </li> |
| 459 | </ul> | 459 | </ul> |
| 460 | </div> | 460 | </div> |
| 461 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> | 461 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> |
| 462 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> | 462 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> |
| 463 | <li><span>Follow</span></li> | 463 | <li><span>Follow</span></li> |
| 464 | <li v-for="(social, i) in selectedSocialLink" :key="i"> | 464 | <li v-for="(social, i) in selectedSocialLink" :key="i"> |
| 465 | <a | 465 | <a |
| 466 | href="javascript:void(0);" | 466 | href="javascript:void(0);" |
| 467 | @click="openUrl(social.fieldValue)" | 467 | @click="openUrl(social.fieldValue)" |
| 468 | class="cursor-pointer" | 468 | class="cursor-pointer" |
| 469 | ><img :src="social.image" | 469 | ><img :src="social.image" |
| 470 | /></a> | 470 | /></a> |
| 471 | </li> | 471 | </li> |
| 472 | </ul> | 472 | </ul> |
| 473 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> | 473 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> |
| 474 | <li> | 474 | <li> |
| 475 | <a | 475 | <a |
| 476 | href="javascript:void(0);" | 476 | href="javascript:void(0);" |
| 477 | @click="addProfileDialog" | 477 | @click="addProfileDialog" |
| 478 | class="active cursor-pointer" | 478 | class="active cursor-pointer" |
| 479 | ><img src="../assets/images/plus.png" | 479 | ><img src="../assets/images/plus.png" |
| 480 | /></a> | 480 | /></a> |
| 481 | <span class="connect-social-channel" | 481 | <span class="connect-social-channel" |
| 482 | >Connect your social channels</span | 482 | >Connect your social channels</span |
| 483 | > | 483 | > |
| 484 | </li> | 484 | </li> |
| 485 | </ul> | 485 | </ul> |
| 486 | </div> | 486 | </div> |
| 487 | </div> | 487 | </div> |
| 488 | <!-- tab style --> | 488 | <!-- tab style --> |
| 489 | <div class="profile-data-wrp"> | 489 | <div class="profile-data-wrp"> |
| 490 | <div class="container-fluid data-wrp" id="case-study-0"> | 490 | <div class="container-fluid data-wrp" id="case-study-0"> |
| 491 | <div class="row" v-if="caseStudies.length == 0"> | 491 | <div class="row" v-if="caseStudies.length == 0"> |
| 492 | <div class="col-6 col-lg-6"> | 492 | <div class="col-6 col-lg-6"> |
| 493 | <div class="full-w-height-profile ex-light seats_bg"> | 493 | <div class="full-w-height-profile ex-light seats_bg"> |
| 494 | <a | 494 | <a |
| 495 | href="javasript:void(0);" | 495 | href="javasript:void(0);" |
| 496 | class="profile-md-bt center-and-spc bt-spc-top" | 496 | class="profile-md-bt center-and-spc bt-spc-top" |
| 497 | @click="openUrl('https://www.productgrowth.org/spotlight')" | 497 | @click="openUrl('https://www.productgrowth.org/spotlight')" |
| 498 | >Explore Spotlights</a | 498 | >Explore Spotlights</a |
| 499 | > | 499 | > |
| 500 | <p>Explore the spotlights others has put together</p> | 500 | <p>Explore the spotlights others has put together</p> |
| 501 | </div> | 501 | </div> |
| 502 | <!-- full width --> | 502 | <!-- full width --> |
| 503 | </div> | 503 | </div> |
| 504 | <!-- col 6 --> | 504 | <!-- col 6 --> |
| 505 | <div class="col-6 col-lg-6"> | 505 | <div class="col-6 col-lg-6"> |
| 506 | <div class="full-w-height-profile ex-light spotlight_bg"> | 506 | <div class="full-w-height-profile ex-light spotlight_bg"> |
| 507 | <img src="../assets/images/add-role.svg" class="add-role" /> | 507 | <img src="../assets/images/add-role.svg" class="add-role" /> |
| 508 | <div class="clearfix"></div> | 508 | <div class="clearfix"></div> |
| 509 | <!-- clearfix --> | 509 | <!-- clearfix --> |
| 510 | <a | 510 | <a |
| 511 | href="javasript:void(0);" | 511 | href="javasript:void(0);" |
| 512 | class="profile-md-bt center-and-spc" | 512 | class="profile-md-bt center-and-spc" |
| 513 | @click=" | 513 | @click=" |
| 514 | openUrl( | 514 | openUrl( |
| 515 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' | 515 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' |
| 516 | ) | 516 | ) |
| 517 | " | 517 | " |
| 518 | >Publish Spotlight</a | 518 | >Publish Spotlight</a |
| 519 | > | 519 | > |
| 520 | <p>Share your own insights through Spotlight</p> | 520 | <p>Share your own insights through Spotlight</p> |
| 521 | </div> | 521 | </div> |
| 522 | <!-- full width --> | 522 | <!-- full width --> |
| 523 | </div> | 523 | </div> |
| 524 | <!-- col 6 --> | 524 | <!-- col 6 --> |
| 525 | </div> | 525 | </div> |
| 526 | 526 | ||
| 527 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> | 527 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> |
| 528 | <div class="container-fluid data-wrp"> | 528 | <div class="container-fluid data-wrp"> |
| 529 | <div class="row"> | 529 | <div class="row"> |
| 530 | <div class="" v-for="(study, i) in caseStudies" :key="i"> | 530 | <div class="" v-for="(study, i) in caseStudies" :key="i"> |
| 531 | <div class="card-warpper" @click="openStudy(study)"> | 531 | <div class="card-warpper" @click="openStudy(study)"> |
| 532 | <div class="company-detail"> | 532 | <div class="company-detail"> |
| 533 | <div class="c-logo"> | 533 | <div class="c-logo"> |
| 534 | <!-- <img src="../assets/images/image 46.png" /> --> | 534 | <!-- <img src="../assets/images/image 46.png" /> --> |
| 535 | <img :src="study.intro.logoURL" /> | 535 | <img :src="study.intro.logoURL" /> |
| 536 | </div> | 536 | </div> |
| 537 | <div class="c-tag"> | 537 | <div class="c-tag"> |
| 538 | <img | 538 | <img |
| 539 | src="../assets/images/retake-blue.svg" | 539 | src="../assets/images/retake-blue.svg" |
| 540 | v-if="study.intro.type == 'Retake'" | 540 | v-if="study.intro.type == 'Retake'" |
| 541 | /> | 541 | /> |
| 542 | <img | 542 | <img |
| 543 | src="../assets/images/behind-blue.svg" | 543 | src="../assets/images/behind-blue.svg" |
| 544 | v-if="study.intro.type == 'Behind-the-scenes'" | 544 | v-if="study.intro.type == 'Behind-the-scenes'" |
| 545 | /> | 545 | /> |
| 546 | <img | 546 | <img |
| 547 | src="../assets/images/critique-blue.svg" | 547 | src="../assets/images/critique-blue.svg" |
| 548 | v-if="study.intro.type == 'Critique'" | 548 | v-if="study.intro.type == 'Critique'" |
| 549 | /> | 549 | /> |
| 550 | <img | 550 | <img |
| 551 | src="../assets/images/juxtapose-blue.svg" | 551 | src="../assets/images/juxtapose-blue.svg" |
| 552 | v-if="study.intro.type == 'Juxtapose'" | 552 | v-if="study.intro.type == 'Juxtapose'" |
| 553 | /> | 553 | /> |
| 554 | </div> | 554 | </div> |
| 555 | </div> | 555 | </div> |
| 556 | 556 | ||
| 557 | <!-- company detail--> | 557 | <!-- company detail--> |
| 558 | <h1>{{ study.intro.name }}</h1> | 558 | <h1>{{ study.intro.name }}</h1> |
| 559 | <div class="user-views"> | 559 | <div class="user-views"> |
| 560 | <ul> | 560 | <ul> |
| 561 | <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li> | 561 | <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li> |
| 562 | <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> | 562 | <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> |
| 563 | <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> | 563 | <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> |
| 564 | </ul> | 564 | </ul> |
| 565 | 565 | ||
| 566 | </div><!-- user views --> | 566 | </div><!-- user views --> |
| 567 | <div class="u-detail"> | 567 | <div class="u-detail"> |
| 568 | <img src="../assets/images/user-2.png" /> | 568 | <img src="../assets/images/user-2.png" /> |
| 569 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> | 569 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> |
| 570 | {{ name }} | 570 | {{ name }} |
| 571 | </h2> | 571 | </h2> |
| 572 | 572 | ||
| 573 | </div> | 573 | </div> |
| 574 | <!-- user detail --> | 574 | <!-- user detail --> |
| 575 | <p> | 575 | <p> |
| 576 | <span v-for="(area, j) in study.focusAreas" :key="j"> | 576 | <span v-for="(area, j) in study.focusAreas" :key="j"> |
| 577 | {{ area }} | 577 | {{ area }} |
| 578 | </span> | 578 | </span> |
| 579 | </p> | 579 | </p> |
| 580 | <ul class="tags-list"> | 580 | <ul class="tags-list"> |
| 581 | <li v-for="(tags, j) in study.insightTags" :key="j"> | 581 | <li v-for="(tags, j) in study.insightTags" :key="j"> |
| 582 | <a | 582 | <a |
| 583 | href="javasript:void(0);" | 583 | href="javasript:void(0);" |
| 584 | class="insight-design" | 584 | class="insight-design" |
| 585 | v-if="tags == 'Design'" | 585 | v-if="tags == 'Design'" |
| 586 | >Design</a | 586 | >Design</a |
| 587 | > | 587 | > |
| 588 | <a | 588 | <a |
| 589 | href="javasript:void(0);" | 589 | href="javasript:void(0);" |
| 590 | class="insight-product" | 590 | class="insight-product" |
| 591 | v-if="tags == 'Product'" | 591 | v-if="tags == 'Product'" |
| 592 | >Product</a | 592 | >Product</a |
| 593 | > | 593 | > |
| 594 | <a | 594 | <a |
| 595 | href="javasript:void(0);" | 595 | href="javasript:void(0);" |
| 596 | class="insight-marketing" | 596 | class="insight-marketing" |
| 597 | v-if="tags == 'Marketing'" | 597 | v-if="tags == 'Marketing'" |
| 598 | >Marketing</a | 598 | >Marketing</a |
| 599 | > | 599 | > |
| 600 | <a | 600 | <a |
| 601 | href="javasript:void(0);" | 601 | href="javasript:void(0);" |
| 602 | class="insight-pricing" | 602 | class="insight-pricing" |
| 603 | v-if="tags == 'Pricing'" | 603 | v-if="tags == 'Pricing'" |
| 604 | >Pricing</a | 604 | >Pricing</a |
| 605 | > | 605 | > |
| 606 | <a | 606 | <a |
| 607 | href="javasript:void(0);" | 607 | href="javasript:void(0);" |
| 608 | class="insight-psychology" | 608 | class="insight-psychology" |
| 609 | v-if="tags == 'Psychology'" | 609 | v-if="tags == 'Psychology'" |
| 610 | >Psychology</a | 610 | >Psychology</a |
| 611 | > | 611 | > |
| 612 | </li> | 612 | </li> |
| 613 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> | 613 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> |
| 614 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> | 614 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> |
| 615 | </ul> | 615 | </ul> |
| 616 | <div class="clearfix"></div> | 616 | <div class="clearfix"></div> |
| 617 | <a href="#" class="action-set"> | 617 | <a href="#" class="action-set"> |
| 618 | <img src="../assets/images/arrow-right-action.svg" /> | 618 | <img src="../assets/images/arrow-right-action.svg" /> |
| 619 | </a> | 619 | </a> |
| 620 | <div class="read-time"> | 620 | <div class="read-time"> |
| 621 | <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> | 621 | <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> |
| 622 | </div><!-- read time --> | 622 | </div><!-- read time --> |
| 623 | </div> | 623 | </div> |
| 624 | <!-- card wrpper --> | 624 | <!-- card wrpper --> |
| 625 | <!-- card wrpper --> | 625 | <!-- card wrpper --> |
| 626 | </div> | 626 | </div> |
| 627 | <!-- all card wrpper --> | 627 | <!-- all card wrpper --> |
| 628 | </div> | 628 | </div> |
| 629 | </div> | 629 | </div> |
| 630 | </div> | 630 | </div> |
| 631 | <!-- data wrp --> | 631 | <!-- data wrp --> |
| 632 | </div> | 632 | </div> |
| 633 | <!-- case study 0 --> | 633 | <!-- case study 0 --> |
| 634 | <div | 634 | <div |
| 635 | class="container-fluid data-wrp" | 635 | class="container-fluid data-wrp" |
| 636 | id="all-replies" | 636 | id="all-replies" |
| 637 | style="display: none" | 637 | style="display: none" |
| 638 | > | 638 | > |
| 639 | <div class="row"> | 639 | <div class="row"> |
| 640 | <div class="replies col-md-12" > | 640 | <div class="replies col-md-12" > |
| 641 | <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" > | 641 | <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" > |
| 642 | <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1> | 642 | <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1> |
| 643 | <ul class="joined-info"> | 643 | <ul class="joined-info"> |
| 644 | <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li> | 644 | <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li> |
| 645 | <li><img src="../assets/images/heart.png" /></li> | 645 | <li><img src="../assets/images/heart.png" /></li> |
| 646 | <li><a href="javasript:void(0);"> {{comments.likes}}</a></li> | 646 | <li><a href="javasript:void(0);"> {{comments.likes}}</a></li> |
| 647 | <li class="comment-spc"> | 647 | <li class="comment-spc"> |
| 648 | <img src="../assets/images/comment.svg" /> | 648 | <img src="../assets/images/comment.svg" /> |
| 649 | </li> | 649 | </li> |
| 650 | <li><a href="javasript:void(0);"> {{comments.replies}}</a></li> | 650 | <li><a href="javasript:void(0);"> {{comments.replies}}</a></li> |
| 651 | </ul> | 651 | </ul> |
| 652 | <p> | 652 | <p> |
| 653 | {{comments.comment}} | 653 | {{comments.comment}} |
| 654 | <!-- I wonder what the difference between “<strong> | 654 | <!-- I wonder what the difference between “<strong> |
| 655 | Assistant</strong | 655 | Assistant</strong |
| 656 | >” and “<strong>Pickup and Drop</strong>” are. If they are the | 656 | >” and “<strong>Pickup and Drop</strong>” are. If they are the |
| 657 | same, there are two “call to actions” for the same workflow --> | 657 | same, there are two “call to actions” for the same workflow --> |
| 658 | </p> | 658 | </p> |
| 659 | </div> | 659 | </div> |
| 660 | <!-- replies wrapper --> | 660 | <!-- replies wrapper --> |
| 661 | </div> | 661 | </div> |
| 662 | <!-- all card wrpper --> | 662 | <!-- all card wrpper --> |
| 663 | </div> | 663 | </div> |
| 664 | </div> | 664 | </div> |
| 665 | <!-- all Relpies --> | 665 | <!-- all Relpies --> |
| 666 | </div> | 666 | </div> |
| 667 | <!-- data wrp --> | 667 | <!-- data wrp --> |
| 668 | <!-- body wrapper --> | 668 | <!-- body wrapper --> |
| 669 | </div> | 669 | </div> |
| 670 | </main> | 670 | </main> |
| 671 | </template> | 671 | </template> |
| 672 | 672 | ||
| 673 | <script> | 673 | <script> |
| 674 | import Vue from "vue"; | 674 | import Vue from "vue"; |
| 675 | import router from "../router"; | 675 | import router from "../router"; |
| 676 | import $ from "jquery"; | 676 | import $ from "jquery"; |
| 677 | import axios from "axios"; | 677 | import axios from "axios"; |
| 678 | import Header from "./Header"; | 678 | import Header from "./Header"; |
| 679 | import moment from 'moment'; | 679 | import moment from 'moment'; |
| 680 | 680 | ||
| 681 | export default { | 681 | export default { |
| 682 | name: "Profile", | 682 | name: "Profile", |
| 683 | components: { | 683 | components: { |
| 684 | Header: Header, | 684 | Header: Header, |
| 685 | }, | 685 | }, |
| 686 | data: () => ({ | 686 | data: () => ({ |
| 687 | loggedinFlag: false, | 687 | loggedinFlag: false, |
| 688 | usertoken: null, | 688 | usertoken: null, |
| 689 | currentLink: null, | 689 | currentLink: null, |
| 690 | userData: { | 690 | userData: { |
| 691 | socialMediaProfiles: { | 691 | socialMediaProfiles: { |
| 692 | facebook: null, | 692 | facebook: null, |
| 693 | linkedin: null, | 693 | linkedin: null, |
| 694 | medium: null, | 694 | medium: null, |
| 695 | twitter: null, | 695 | twitter: null, |
| 696 | behance: null, | 696 | behance: null, |
| 697 | dribble: null, | 697 | dribble: null, |
| 698 | github: null, | 698 | github: null, |
| 699 | stackoverflow: null, | 699 | stackoverflow: null, |
| 700 | instagram: null, | 700 | instagram: null, |
| 701 | }, | 701 | }, |
| 702 | awards: { | 702 | awards: { |
| 703 | views: null, | 703 | views: null, |
| 704 | likes: null, | 704 | likes: null, |
| 705 | comments: null, | 705 | comments: null, |
| 706 | }, | 706 | }, |
| 707 | verified: true, | 707 | verified: true, |
| 708 | phoneNo: null, | 708 | phoneNo: null, |
| 709 | bio: null, | 709 | bio: null, |
| 710 | designation: null, | 710 | designation: null, |
| 711 | organisation: null, | 711 | organisation: null, |
| 712 | bgColor: null, | 712 | bgColor: null, |
| 713 | interests: [], | 713 | interests: [], |
| 714 | karmaPoints: null, | 714 | karmaPoints: null, |
| 715 | socialLogin: null, | 715 | socialLogin: null, |
| 716 | firstLogin: null, | 716 | firstLogin: null, |
| 717 | notification: null, | 717 | notification: null, |
| 718 | profilePic: null, | 718 | profilePic: null, |
| 719 | role: null, | 719 | role: null, |
| 720 | name: null, | 720 | name: null, |
| 721 | email: null, | 721 | email: null, |
| 722 | firstName: null, | 722 | firstName: null, |
| 723 | lastName: null, | 723 | lastName: null, |
| 724 | }, | 724 | }, |
| 725 | caseStudies: [], | 725 | caseStudies: [], |
| 726 | interestName: null, | 726 | interestName: null, |
| 727 | oldId: null, | 727 | oldId: null, |
| 728 | currentSocialLinkName: null, | 728 | currentSocialLinkName: null, |
| 729 | showCompany: false, | 729 | showCompany: false, |
| 730 | showDesignation: false, | 730 | showDesignation: false, |
| 731 | socialLink: [ | 731 | socialLink: [ |
| 732 | { | 732 | { |
| 733 | displayName: "Facebook", | 733 | displayName: "Facebook", |
| 734 | fieldName: "facebook", | 734 | fieldName: "facebook", |
| 735 | fieldValue: null, | 735 | fieldValue: null, |
| 736 | image: require(`../assets/images/facebook.png`), | 736 | image: require(`../assets/images/facebook.png`), |
| 737 | }, | 737 | }, |
| 738 | { | 738 | { |
| 739 | displayName: "Linkedin", | 739 | displayName: "Linkedin", |
| 740 | fieldName: "linkedin", | 740 | fieldName: "linkedin", |
| 741 | fieldValue: null, | 741 | fieldValue: null, |
| 742 | image: require(`../assets/images/linkedin.png`), | 742 | image: require(`../assets/images/linkedin.png`), |
| 743 | }, | 743 | }, |
| 744 | { | 744 | { |
| 745 | displayName: "Medium", | 745 | displayName: "Medium", |
| 746 | fieldName: "medium", | 746 | fieldName: "medium", |
| 747 | fieldValue: null, | 747 | fieldValue: null, |
| 748 | image: require(`../assets/images/medium.png`), | 748 | image: require(`../assets/images/medium.png`), |
| 749 | }, | 749 | }, |
| 750 | { | 750 | { |
| 751 | displayName: "Twitter", | 751 | displayName: "Twitter", |
| 752 | fieldName: "twitter", | 752 | fieldName: "twitter", |
| 753 | fieldValue: null, | 753 | fieldValue: null, |
| 754 | image: require(`../assets/images/twitter.png`), | 754 | image: require(`../assets/images/twitter.png`), |
| 755 | }, | 755 | }, |
| 756 | { | 756 | { |
| 757 | displayName: "Behance", | 757 | displayName: "Behance", |
| 758 | fieldName: "behance", | 758 | fieldName: "behance", |
| 759 | fieldValue: null, | 759 | fieldValue: null, |
| 760 | image: require(`../assets/images/behance.png`), | 760 | image: require(`../assets/images/behance.png`), |
| 761 | }, | 761 | }, |
| 762 | { | 762 | { |
| 763 | displayName: "Dribble", | 763 | displayName: "Dribble", |
| 764 | fieldName: "dribble", | 764 | fieldName: "dribble", |
| 765 | fieldValue: null, | 765 | fieldValue: null, |
| 766 | image: require(`../assets/images/dribbble.png`), | 766 | image: require(`../assets/images/dribbble.png`), |
| 767 | }, | 767 | }, |
| 768 | { | 768 | { |
| 769 | displayName: "Github", | 769 | displayName: "Github", |
| 770 | fieldName: "github", | 770 | fieldName: "github", |
| 771 | fieldValue: null, | 771 | fieldValue: null, |
| 772 | image: require(`../assets/images/github.png`), | 772 | image: require(`../assets/images/github.png`), |
| 773 | }, | 773 | }, |
| 774 | { | 774 | { |
| 775 | displayName: "Stackoverflow", | 775 | displayName: "Stackoverflow", |
| 776 | fieldName: "stackoverflow", | 776 | fieldName: "stackoverflow", |
| 777 | fieldValue: null, | 777 | fieldValue: null, |
| 778 | image: require(`../assets/images/stack overflow.png`), | 778 | image: require(`../assets/images/stack overflow.png`), |
| 779 | }, | 779 | }, |
| 780 | { | 780 | { |
| 781 | displayName: "Instagram", | 781 | displayName: "Instagram", |
| 782 | fieldName: "instagram", | 782 | fieldName: "instagram", |
| 783 | fieldValue: null, | 783 | fieldValue: null, |
| 784 | image: require(`../assets/images/instagram.png`), | 784 | image: require(`../assets/images/instagram.png`), |
| 785 | }, | 785 | }, |
| 786 | ], | 786 | ], |
| 787 | selectedSocialLink: [], | 787 | selectedSocialLink: [], |
| 788 | userComments:[], | 788 | userComments:[], |
| 789 | }), | 789 | }), |
| 790 | 790 | ||
| 791 | mounted() { | 791 | mounted() { |
| 792 | this.userData = {}; | 792 | this.userData = {}; |
| 793 | // this.socialLink = []; | 793 | // this.socialLink = []; |
| 794 | this.userData.interests = []; | 794 | this.userData.interests = []; |
| 795 | var userdata = localStorage.getItem("spotlight_usertoken"); | 795 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 796 | if (userdata) { | 796 | if (userdata) { |
| 797 | userdata = JSON.parse(userdata); | 797 | userdata = JSON.parse(userdata); |
| 798 | this.usertoken = userdata.token; | 798 | this.usertoken = userdata.token; |
| 799 | this.getProfile(); | 799 | this.getProfile(); |
| 800 | this.getCaseStudies(); | 800 | this.getCaseStudies(); |
| 801 | this.getUserComments(); | 801 | this.getUserComments(); |
| 802 | }else{ | 802 | }else{ |
| 803 | this.logout(); | 803 | this.logout(); |
| 804 | } | 804 | } |
| 805 | }, | 805 | }, |
| 806 | methods: { | 806 | methods: { |
| 807 | goToSignUp() { | 807 | goToSignUp() { |
| 808 | this.$router.push("/"); | 808 | this.$router.push("/"); |
| 809 | }, | 809 | }, |
| 810 | goToReset() { | 810 | goToReset() { |
| 811 | this.$router.push("/reset"); | 811 | this.$router.push("/reset"); |
| 812 | }, | 812 | }, |
| 813 | logout() { | 813 | logout() { |
| 814 | localStorage.removeItem("spotlight_usertoken"); | 814 | localStorage.removeItem("spotlight_usertoken"); |
| 815 | localStorage.removeItem("spotlight_email"); | 815 | localStorage.removeItem("spotlight_email"); |
| 816 | this.$router.push("/login"); | 816 | this.$router.push("/login"); |
| 817 | }, | 817 | }, |
| 818 | dateGenerator(curreDate){ | 818 | dateGenerator(curreDate){ |
| 819 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 819 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 820 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 820 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 821 | var result = todayDate.diff(endDate, 'days'); | 821 | var result = todayDate.diff(endDate, 'days'); |
| 822 | return result; | 822 | return result; |
| 823 | }, | 823 | }, |
| 824 | prefillSocialLink(links) { | 824 | prefillSocialLink(links) { |
| 825 | var keys = []; | 825 | var keys = []; |
| 826 | keys = Object.keys(links); | 826 | keys = Object.keys(links); |
| 827 | keys.forEach((link_) => { | 827 | keys.forEach((link_) => { |
| 828 | console.log(link_, ":", links[link_]); | 828 | console.log(link_, ":", links[link_]); |
| 829 | if (links[link_] != null) { | 829 | if (links[link_] != null) { |
| 830 | var i = this.socialLink.findIndex( | 830 | var i = this.socialLink.findIndex( |
| 831 | (links_) => links_.fieldName == link_ | 831 | (links_) => links_.fieldName == link_ |
| 832 | ); | 832 | ); |
| 833 | if (i != -1) { | 833 | if (i != -1) { |
| 834 | this.selectedSocialLink.push({ | 834 | this.selectedSocialLink.push({ |
| 835 | displayName: this.socialLink[i].displayName, | 835 | displayName: this.socialLink[i].displayName, |
| 836 | fieldName: this.socialLink[i].fieldName, | 836 | fieldName: this.socialLink[i].fieldName, |
| 837 | image: this.socialLink[i].image, | 837 | image: this.socialLink[i].image, |
| 838 | fieldValue: links[link_], | 838 | fieldValue: links[link_], |
| 839 | }); | 839 | }); |
| 840 | } | 840 | } |
| 841 | } | 841 | } |
| 842 | }); | 842 | }); |
| 843 | console.log("links-- are--", links); | 843 | console.log("links-- are--", links); |
| 844 | }, | 844 | }, |
| 845 | addSocialLink(id) { | 845 | addSocialLink(id) { |
| 846 | this.currentLink = null; | 846 | this.currentLink = null; |
| 847 | var i = this.selectedSocialLink.findIndex( | 847 | var i = this.selectedSocialLink.findIndex( |
| 848 | (link_) => link_.fieldName == id | 848 | (link_) => link_.fieldName == id |
| 849 | ); | 849 | ); |
| 850 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); | 850 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); |
| 851 | if (i == -1) { | 851 | if (i == -1) { |
| 852 | this.selectedSocialLink.push({ | 852 | this.selectedSocialLink.push({ |
| 853 | displayName: this.socialLink[j].displayName, | 853 | displayName: this.socialLink[j].displayName, |
| 854 | fieldName: this.socialLink[j].fieldName, | 854 | fieldName: this.socialLink[j].fieldName, |
| 855 | image: this.socialLink[j].image, | 855 | image: this.socialLink[j].image, |
| 856 | fieldValue: null, | 856 | fieldValue: null, |
| 857 | }); | 857 | }); |
| 858 | } else { | 858 | } else { |
| 859 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); | 859 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); |
| 860 | } | 860 | } |
| 861 | }, | 861 | }, |
| 862 | removeSocialLink(i) { | 862 | removeSocialLink(i) { |
| 863 | var name = this.selectedSocialLink[i].fieldName; | 863 | var name = this.selectedSocialLink[i].fieldName; |
| 864 | this.userData.socialMediaProfiles[name] = null; | 864 | this.userData.socialMediaProfiles[name] = null; |
| 865 | this.selectedSocialLink.splice(i, 1); | 865 | this.selectedSocialLink.splice(i, 1); |
| 866 | }, | 866 | }, |
| 867 | 867 | ||
| 868 | addInterest() { | 868 | addInterest() { |
| 869 | console.log(this.userData.interests.length, "called", this.interestName); | 869 | console.log(this.userData.interests.length, "called", this.interestName); |
| 870 | if (this.userData.interests.length <= 2) { | 870 | if (this.userData.interests.length <= 2) { |
| 871 | this.userData.interests.push(this.interestName); | 871 | this.userData.interests.push(this.interestName); |
| 872 | this.interestName = null; | 872 | this.interestName = null; |
| 873 | } else { | 873 | } else { |
| 874 | this.$toaster.info("Only 3 interest are allowed"); | 874 | this.$toaster.info("Only 3 interest are allowed"); |
| 875 | } | 875 | } |
| 876 | }, | 876 | }, |
| 877 | removeInterest(i) { | 877 | removeInterest(i) { |
| 878 | console.log("i", i); | 878 | console.log("i", i); |
| 879 | this.userData.interests.splice(i, 1); | 879 | this.userData.interests.splice(i, 1); |
| 880 | console.log(" this.userData", this.userData.interests); | 880 | console.log(" this.userData", this.userData.interests); |
| 881 | }, | 881 | }, |
| 882 | assignClass() { | 882 | assignClass() { |
| 883 | var element = document.getElementById(this.userData.bgColor); | 883 | var element = document.getElementById(this.userData.bgColor); |
| 884 | element.classList.add("active"); | 884 | element.classList.add("active"); |
| 885 | var cols = document.getElementsByClassName("common_color"); | 885 | var cols = document.getElementsByClassName("common_color"); |
| 886 | for (var i = 0; i < cols.length; i++) { | 886 | for (var i = 0; i < cols.length; i++) { |
| 887 | cols[i].style.backgroundColor = this.userData.bgColor; | 887 | cols[i].style.backgroundColor = this.userData.bgColor; |
| 888 | } | 888 | } |
| 889 | }, | 889 | }, |
| 890 | createString(list){ | 890 | createString(list){ |
| 891 | var name = ""; | 891 | var name = ""; |
| 892 | list.forEach(element => { | 892 | list.forEach(element => { |
| 893 | name = name+','+element; | 893 | name = name+','+element; |
| 894 | }); | 894 | }); |
| 895 | 895 | ||
| 896 | console.log("name is",name); | 896 | console.log("name is",name); |
| 897 | return name.substring(1);; | 897 | return name.substring(1);; |
| 898 | }, | 898 | }, |
| 899 | changeColor(clr) { | 899 | changeColor(clr) { |
| 900 | console.log(this.oldId, "clr", clr); | 900 | console.log(this.oldId, "clr", clr); |
| 901 | var element = document.getElementById(clr); | 901 | var element = document.getElementById(clr); |
| 902 | element.classList.add("active"); | 902 | element.classList.add("active"); |
| 903 | var removeelement = document.getElementById(this.oldId); | 903 | var removeelement = document.getElementById(this.oldId); |
| 904 | removeelement.classList.remove("active"); | 904 | removeelement.classList.remove("active"); |
| 905 | this.oldId = clr; | 905 | this.oldId = clr; |
| 906 | var cols = document.getElementsByClassName("common_color"); | 906 | var cols = document.getElementsByClassName("common_color"); |
| 907 | for (var i = 0; i < cols.length; i++) { | 907 | for (var i = 0; i < cols.length; i++) { |
| 908 | cols[i].style.backgroundColor = clr; | 908 | cols[i].style.backgroundColor = clr; |
| 909 | } | 909 | } |
| 910 | this.userData.bgColor = clr; | 910 | this.userData.bgColor = clr; |
| 911 | }, | 911 | }, |
| 912 | getProfile() { | 912 | getProfile() { |
| 913 | axios | 913 | axios |
| 914 | .get("/profile", { | 914 | .get("/profile", { |
| 915 | headers: { | 915 | headers: { |
| 916 | Authorization: "Bearer " + this.usertoken, | 916 | Authorization: "Bearer " + this.usertoken, |
| 917 | }, | 917 | }, |
| 918 | }) | 918 | }) |
| 919 | .then((response) => { | 919 | .then((response) => { |
| 920 | if (!response.data.data.socialMediaProfiles) { | 920 | if (!response.data.data.socialMediaProfiles) { |
| 921 | this.userData.socialMediaProfiles = {}; | 921 | this.userData.socialMediaProfiles = {}; |
| 922 | } | 922 | } |
| 923 | this.userData = response.data.data; | 923 | this.userData = response.data.data; |
| 924 | 924 | ||
| 925 | // this.userData = response.data.data; | 925 | // this.userData = response.data.data; |
| 926 | this.oldId = this.userData.bgColor; | 926 | this.oldId = this.userData.bgColor; |
| 927 | console.log(this.oldId, "this.userData.", this.userData); | 927 | console.log(this.oldId, "this.userData.", this.userData); |
| 928 | console.log("this.userData.firstLogin ", this.userData.firstLogin); | 928 | console.log("this.userData.firstLogin ", this.userData.firstLogin); |
| 929 | this.prefillSocialLink(this.userData.socialMediaProfiles); | 929 | this.prefillSocialLink(this.userData.socialMediaProfiles); |
| 930 | if (this.userData.firstLogin == true) { | 930 | if (this.userData.firstLogin == true) { |
| 931 | this.addProfileDialog(); | 931 | this.addProfileDialog(); |
| 932 | } | 932 | } |
| 933 | this.assignClass(); | 933 | this.assignClass(); |
| 934 | console.log(response.data.data); | 934 | console.log(response.data.data); |
| 935 | }) | 935 | }) |
| 936 | .catch((error) => console.log(error)); | 936 | .catch((error) => console.log(error)); |
| 937 | }, | 937 | }, |
| 938 | getRandomAvatar() { | 938 | getRandomAvatar() { |
| 939 | axios | 939 | axios |
| 940 | .get("/randomAvatar", { | 940 | .get("/randomAvatar", { |
| 941 | headers: { | 941 | headers: { |
| 942 | Authorization: "Bearer " + this.usertoken, | 942 | Authorization: "Bearer " + this.usertoken, |
| 943 | }, | 943 | }, |
| 944 | }) | 944 | }) |
| 945 | .then((response) => { | 945 | .then((response) => { |
| 946 | this.userData.profilePic = response.data.imageURL; | 946 | this.userData.profilePic = response.data.imageURL; |
| 947 | console.log(response.data.imageURL); | 947 | console.log(response.data.imageURL); |
| 948 | }) | 948 | }) |
| 949 | .catch((error) => console.log(error)); | 949 | .catch((error) => console.log(error)); |
| 950 | }, | 950 | }, |
| 951 | getUserComments() { | 951 | getUserComments() { |
| 952 | axios | 952 | axios |
| 953 | .get("/profile/comments", { | 953 | .get("/profile/comments", { |
| 954 | headers: { | 954 | headers: { |
| 955 | Authorization: "Bearer " + this.usertoken, | 955 | Authorization: "Bearer " + this.usertoken, |
| 956 | }, | 956 | }, |
| 957 | }) | 957 | }) |
| 958 | .then((response) => { | 958 | .then((response) => { |
| 959 | this.userComments = response.data.data; | 959 | this.userComments = response.data.data; |
| 960 | console.log(response.data); | 960 | console.log(response.data); |
| 961 | }) | 961 | }) |
| 962 | .catch((error) => console.log(error)); | 962 | .catch((error) => console.log(error)); |
| 963 | }, | 963 | }, |
| 964 | getCaseStudies() { | 964 | getCaseStudies() { |
| 965 | axios | 965 | axios |
| 966 | .get("/caseStudy/all", { | 966 | .get("/caseStudy/all", { |
| 967 | headers: { | 967 | headers: { |
| 968 | Authorization: "Bearer " + this.usertoken, | 968 | Authorization: "Bearer " + this.usertoken, |
| 969 | }, | 969 | }, |
| 970 | }) | 970 | }) |
| 971 | .then((response) => { | 971 | .then((response) => { |
| 972 | console.log(response.data.data.caseStudies); | 972 | console.log(response.data.data.caseStudies); |
| 973 | this.caseStudies = response.data.data.caseStudies; | 973 | this.caseStudies = response.data.data.caseStudies; |
| 974 | }) | 974 | }) |
| 975 | .catch((error) => console.log(error)); | 975 | .catch((error) => console.log(error)); |
| 976 | }, | 976 | }, |
| 977 | openStudy(payload) { | 977 | openStudy(payload) { |
| 978 | console.log("payload-", payload); | 978 | console.log("payload-", payload); |
| 979 | payload.intro.date = payload.createdAt; | 979 | payload.intro.date = payload.createdAt; |
| 980 | payload.intro.focusPoint = payload.focusAreas; | 980 | payload.intro.focusPoint = payload.focusAreas; |
| 981 | axios | 981 | axios |
| 982 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 982 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 983 | headers: { | 983 | headers: { |
| 984 | Authorization: "Bearer " + this.usertoken, | 984 | Authorization: "Bearer " + this.usertoken, |
| 985 | }, | 985 | }, |
| 986 | }) | 986 | }) |
| 987 | .then((response) => { | 987 | .then((response) => { |
| 988 | this.createSlide(payload, response.data.data); | 988 | this.createSlide(payload, response.data.data); |
| 989 | }) | 989 | }) |
| 990 | .catch((error) => console.log(error)); | 990 | .catch((error) => console.log(error)); |
| 991 | }, | 991 | }, |
| 992 | 992 | ||
| 993 | createSlide(payload, slides) { | 993 | createSlide(payload, slides) { |
| 994 | var finalSlides = []; | 994 | var finalSlides = []; |
| 995 | slides.forEach((slides_) => { | 995 | slides.forEach((slides_) => { |
| 996 | var url = this.assignRoutes(slides_.templateId); | 996 | var url = this.assignRoutes(slides_.templateId); |
| 997 | var obj = { | 997 | var obj = { |
| 998 | forward: true, | 998 | forward: true, |
| 999 | backward: true, | 999 | backward: true, |
| 1000 | ur: url, | 1000 | ur: url, |
| 1001 | slideId: slides_._id, | 1001 | slideId: slides_._id, |
| 1002 | caseStudyId: slides_.caseStudyId, | 1002 | caseStudyId: slides_.caseStudyId, |
| 1003 | payload: { | 1003 | payload: { |
| 1004 | metaData: slides_.metaData, | 1004 | metaData: slides_.metaData, |
| 1005 | comments: slides_.comments, | 1005 | comments: slides_.comments, |
| 1006 | insight: slides_.insight ? slides_.insight : null, | 1006 | insight: slides_.insight ? slides_.insight : null, |
| 1007 | }, | 1007 | }, |
| 1008 | }; | 1008 | }; |
| 1009 | // slides_ | 1009 | // slides_ |
| 1010 | finalSlides.push(obj); | 1010 | finalSlides.push(obj); |
| 1011 | }); | 1011 | }); |
| 1012 | console.log("payload", payload); | 1012 | console.log("payload", payload); |
| 1013 | // add first slide at begining | 1013 | // add first slide at begining |
| 1014 | finalSlides.unshift({ | 1014 | finalSlides.unshift({ |
| 1015 | forward: true, | 1015 | forward: true, |
| 1016 | backward: false, | 1016 | backward: false, |
| 1017 | ur: "EpisodeIntro", | 1017 | ur: "EpisodeIntro", |
| 1018 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 1018 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 1019 | caseStudyId: payload._id, | 1019 | caseStudyId: payload._id, |
| 1020 | payload: { | 1020 | payload: { |
| 1021 | metaData: payload.intro, | 1021 | metaData: payload.intro, |
| 1022 | comments: [], | 1022 | comments: [], |
| 1023 | }, | 1023 | }, |
| 1024 | }); | 1024 | }); |
| 1025 | finalSlides.push({ | 1025 | finalSlides.push({ |
| 1026 | forward: true, | 1026 | forward: true, |
| 1027 | backward: false, | 1027 | backward: false, |
| 1028 | ur: "Outro", | 1028 | ur: "Outro", |
| 1029 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 1029 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 1030 | caseStudyId: payload._id, | 1030 | caseStudyId: payload._id, |
| 1031 | payload: { | 1031 | payload: { |
| 1032 | metaData: payload.outro, | 1032 | metaData: payload.outro, |
| 1033 | comments: [], | 1033 | comments: [], |
| 1034 | }, | 1034 | }, |
| 1035 | }); | 1035 | }); |
| 1036 | 1036 | ||
| 1037 | console.log(finalSlides); | 1037 | console.log(finalSlides); |
| 1038 | console.log("payload", payload); | 1038 | console.log("payload", payload); |
| 1039 | localStorage.setItem( | 1039 | localStorage.setItem( |
| 1040 | "spotlight_slide" + payload._id, | 1040 | "spotlight_slide" + payload._id, |
| 1041 | JSON.stringify(finalSlides) | 1041 | JSON.stringify(finalSlides) |
| 1042 | ); | 1042 | ); |
| 1043 | this.$router.push({ | 1043 | this.$router.push({ |
| 1044 | name: "EpisodeIntro", | 1044 | name: "EpisodeIntro", |
| 1045 | params: { | 1045 | params: { |
| 1046 | caseStudyId: finalSlides[0].caseStudyId, | 1046 | caseStudyId: finalSlides[0].caseStudyId, |
| 1047 | slideId: finalSlides[0].slideId, | 1047 | slideId: finalSlides[0].slideId, |
| 1048 | }, | 1048 | }, |
| 1049 | }); | 1049 | }); |
| 1050 | }, | 1050 | }, |
| 1051 | assignRoutes(tempId) { | 1051 | assignRoutes(tempId) { |
| 1052 | // /episode-intro | 1052 | // /episode-intro |
| 1053 | // /outro | 1053 | // /outro |
| 1054 | var routes = [ | 1054 | var routes = [ |
| 1055 | { | 1055 | { |
| 1056 | url: "AuthorIntro", | 1056 | url: "AuthorIntro", |
| 1057 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 1057 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 1058 | }, | 1058 | }, |
| 1059 | { | 1059 | { |
| 1060 | url: "NoScreenshotSingleAuthor", | 1060 | url: "NoScreenshotSingleAuthor", |
| 1061 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 1061 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 1062 | }, | 1062 | }, |
| 1063 | { | 1063 | { |
| 1064 | url: "SingleMobileScreenInsightTwo", | 1064 | url: "SingleMobileScreenInsightTwo", |
| 1065 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 1065 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 1066 | }, | 1066 | }, |
| 1067 | { | 1067 | { |
| 1068 | url: "TwoScreenWithoutInsight", | 1068 | url: "TwoScreenWithoutInsight", |
| 1069 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 1069 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 1070 | }, | 1070 | }, |
| 1071 | { | 1071 | { |
| 1072 | url: "noscreenshotSingleautho", | 1072 | url: "noscreenshotSingleautho", |
| 1073 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 1073 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 1074 | }, | 1074 | }, |
| 1075 | { | 1075 | { |
| 1076 | url: "SingleMobileScreenInsightOne", | 1076 | url: "SingleMobileScreenInsightOne", |
| 1077 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 1077 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 1078 | }, | 1078 | }, |
| 1079 | { | 1079 | { |
| 1080 | url: "TwoScreenWithInsight", | 1080 | url: "TwoScreenWithInsight", |
| 1081 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 1081 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 1082 | }, | 1082 | }, |
| 1083 | { | ||
| 1084 | url: "AuthorReadingNow", | ||
| 1085 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | ||
| 1086 | }, | ||
| 1087 | { | ||
| 1088 | url: "AuthorReadingBreak", | ||
| 1089 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | ||
| 1090 | }, | ||
| 1083 | ]; | 1091 | ]; |
| 1084 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 1092 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 1085 | return routes[i].url; | 1093 | return routes[i].url; |
| 1086 | }, | 1094 | }, |
| 1087 | saveProfile() { | 1095 | saveProfile() { |
| 1088 | var obj = {}; | 1096 | var obj = {}; |
| 1089 | if (this.userData.firstLogin == true) { | 1097 | if (this.userData.firstLogin == true) { |
| 1090 | this.userData.firstLogin = false; | 1098 | this.userData.firstLogin = false; |
| 1091 | } | 1099 | } |
| 1092 | this.userData.name = | 1100 | this.userData.name = |
| 1093 | this.userData.firstName + " " + this.userData.lastName; | 1101 | this.userData.firstName + " " + this.userData.lastName; |
| 1094 | obj = Object.assign(obj, this.userData); | 1102 | obj = Object.assign(obj, this.userData); |
| 1095 | // if(!obj.socialMediaProfiles){ | 1103 | // if(!obj.socialMediaProfiles){ |
| 1096 | // obj.socialMediaProfiles = {}; | 1104 | // obj.socialMediaProfiles = {}; |
| 1097 | // } | 1105 | // } |
| 1098 | this.selectedSocialLink.forEach((element) => { | 1106 | this.selectedSocialLink.forEach((element) => { |
| 1099 | var key = element.fieldName; | 1107 | var key = element.fieldName; |
| 1100 | obj.socialMediaProfiles[key] = element.fieldValue; | 1108 | obj.socialMediaProfiles[key] = element.fieldValue; |
| 1101 | }); | 1109 | }); |
| 1102 | delete obj.createdAt; | 1110 | delete obj.createdAt; |
| 1103 | delete obj.email; | 1111 | delete obj.email; |
| 1104 | delete obj.role; | 1112 | delete obj.role; |
| 1105 | delete obj.verified; | 1113 | delete obj.verified; |
| 1106 | delete obj.updatedAt; | 1114 | delete obj.updatedAt; |
| 1107 | delete obj.__v; | 1115 | delete obj.__v; |
| 1108 | delete obj._id; | 1116 | delete obj._id; |
| 1109 | delete obj.karmaPoints; | 1117 | delete obj.karmaPoints; |
| 1110 | delete obj.awards; | 1118 | delete obj.awards; |
| 1111 | delete obj.socialLogin; | 1119 | delete obj.socialLogin; |
| 1112 | delete obj.phoneNo; | 1120 | delete obj.phoneNo; |
| 1113 | axios | 1121 | axios |
| 1114 | .put("/profile", obj, { | 1122 | .put("/profile", obj, { |
| 1115 | headers: { | 1123 | headers: { |
| 1116 | Authorization: "Bearer " + this.usertoken, | 1124 | Authorization: "Bearer " + this.usertoken, |
| 1117 | }, | 1125 | }, |
| 1118 | }) | 1126 | }) |
| 1119 | .then((response) => { | 1127 | .then((response) => { |
| 1120 | // this.userData = response.data.data; | 1128 | // this.userData = response.data.data; |
| 1121 | this.$toaster.success("Profile Updated"); | 1129 | this.$toaster.success("Profile Updated"); |
| 1122 | this.closeDialog(); | 1130 | this.closeDialog(); |
| 1123 | console.log(response.data.data); | 1131 | console.log(response.data.data); |
| 1124 | }) | 1132 | }) |
| 1125 | .catch((error) => { | 1133 | .catch((error) => { |
| 1126 | if (error.response) { | 1134 | if (error.response) { |
| 1127 | this.$toaster.error(error.response.data.message); | 1135 | this.$toaster.error(error.response.data.message); |
| 1128 | } | 1136 | } |
| 1129 | }); | 1137 | }); |
| 1130 | }, | 1138 | }, |
| 1131 | addProfileDialog() { | 1139 | addProfileDialog() { |
| 1132 | $(".inner-wrp").addClass("body-blur"); | 1140 | $(".inner-wrp").addClass("body-blur"); |
| 1133 | $("#add-social-links").hide(); | 1141 | $("#add-social-links").hide(); |
| 1134 | $(".popup-wrp, #add-profile").show(); | 1142 | $(".popup-wrp, #add-profile").show(); |
| 1135 | }, | 1143 | }, |
| 1136 | nextProfileDialog() { | 1144 | nextProfileDialog() { |
| 1137 | $("#add-profile").hide(); | 1145 | $("#add-profile").hide(); |
| 1138 | $("#add-social-links").show(); | 1146 | $("#add-social-links").show(); |
| 1139 | this.saveProfile(); | 1147 | this.saveProfile(); |
| 1140 | }, | 1148 | }, |
| 1141 | closeDialog() { | 1149 | closeDialog() { |
| 1142 | $(".popup-wrp").hide(); | 1150 | $(".popup-wrp").hide(); |
| 1143 | $(".inner-wrp").removeClass("body-blur"); | 1151 | $(".inner-wrp").removeClass("body-blur"); |
| 1144 | // this.saveProfile(); | 1152 | // this.saveProfile(); |
| 1145 | }, | 1153 | }, |
| 1146 | hideDialog() { | 1154 | hideDialog() { |
| 1147 | $(".popup-wrp").hide(); | 1155 | $(".popup-wrp").hide(); |
| 1148 | $(".inner-wrp").removeClass("body-blur"); | 1156 | $(".inner-wrp").removeClass("body-blur"); |
| 1149 | }, | 1157 | }, |
| 1150 | /// | 1158 | /// |
| 1151 | caseDialog() { | 1159 | caseDialog() { |
| 1152 | $(".rp-all").removeClass("active"); | 1160 | $(".rp-all").removeClass("active"); |
| 1153 | $(".c-0").addClass("active"); | 1161 | $(".c-0").addClass("active"); |
| 1154 | $("#all-replies").hide(); | 1162 | $("#all-replies").hide(); |
| 1155 | $("#case-study-0").show(); | 1163 | $("#case-study-0").show(); |
| 1156 | }, | 1164 | }, |
| 1157 | repliesDialog() { | 1165 | repliesDialog() { |
| 1158 | $(".c-0").removeClass("active"); | 1166 | $(".c-0").removeClass("active"); |
| 1159 | $(".rp-all").addClass("active"); | 1167 | $(".rp-all").addClass("active"); |
| 1160 | $("#case-study-0").hide(); | 1168 | $("#case-study-0").hide(); |
| 1161 | $("#all-replies").show(); | 1169 | $("#all-replies").show(); |
| 1162 | }, | 1170 | }, |
| 1163 | 1171 | ||
| 1164 | userprofileshowDialog() { | 1172 | userprofileshowDialog() { |
| 1165 | $("#userprofileshow").toggle(); | 1173 | $("#userprofileshow").toggle(); |
| 1166 | }, | 1174 | }, |
| 1167 | openUrl(url) { | 1175 | openUrl(url) { |
| 1168 | window.open(url); | 1176 | window.open(url); |
| 1169 | }, | 1177 | }, |
| 1170 | }, | 1178 | }, |
| 1171 | }; | 1179 | }; |
| 1172 | </script> | 1180 | </script> |
| 1173 | <style> | 1181 | <style> |
| 1174 | .no-cursor { | 1182 | .no-cursor { |
| 1175 | cursor: default !important; | 1183 | cursor: default !important; |
| 1176 | } | 1184 | } |
| 1177 | .no-underline { | 1185 | .no-underline { |
| 1178 | text-decoration: none !important; | 1186 | text-decoration: none !important; |
| 1179 | } | 1187 | } |
| 1180 | .position-left { | 1188 | .position-left { |
| 1181 | left: 15px !important; | 1189 | left: 15px !important; |
| 1182 | } | 1190 | } |
| 1183 | .padding-right { | 1191 | .padding-right { |
| 1184 | padding-right: 0px !important; | 1192 | padding-right: 0px !important; |
| 1185 | } | 1193 | } |
| 1186 | 1194 | ||
| 1187 | .social-link-right { | 1195 | .social-link-right { |
| 1188 | display: flex; | 1196 | display: flex; |
| 1189 | flex-flow: column wrap; | 1197 | flex-flow: column wrap; |
| 1190 | align-content: flex-end; | 1198 | align-content: flex-end; |
| 1191 | } | 1199 | } |
| 1192 | </style> | 1200 | </style> |
| 1193 | 1201 |
src/router/index.js
| 1 | import Vue from 'vue' | 1 | import Vue from 'vue' |
| 2 | import Router from 'vue-router' | 2 | import Router from 'vue-router' |
| 3 | import { authGuard } from "../auth/authGuard" | 3 | import { authGuard } from "../auth/authGuard" |
| 4 | import LandingPage from '@/components/LandingPage' | 4 | import LandingPage from '@/components/LandingPage' |
| 5 | import SignUp from '@/components/SignUp' | 5 | import SignUp from '@/components/SignUp' |
| 6 | import Reset from '@/components/Reset' | 6 | import Reset from '@/components/Reset' |
| 7 | import Profile from '@/components/Profile' | 7 | import Profile from '@/components/Profile' |
| 8 | import welcome from '@/components/welcome' | 8 | import welcome from '@/components/welcome' |
| 9 | import Intermediate from '@/components/Intermediate' | 9 | import Intermediate from '@/components/Intermediate' |
| 10 | import Insight from '@/components/Insight' | 10 | import Insight from '@/components/Insight' |
| 11 | import ProductInsight from '@/components/ProductInsight' | 11 | import ProductInsight from '@/components/ProductInsight' |
| 12 | import EpisodeIntro from '@/components/EpisodeIntro' | 12 | import EpisodeIntro from '@/components/EpisodeIntro' |
| 13 | import AuthorIntro from '@/components/AuthorIntro' | 13 | import AuthorIntro from '@/components/AuthorIntro' |
| 14 | import AuthorReadingNow from '@/components/AuthorReadingNow' | 14 | import AuthorReadingNow from '@/components/AuthorReadingNow' |
| 15 | import AuthorReadingBreak from '@/components/AuthorReadingBreak' | ||
| 15 | import SingleAuthor from '@/components/SingleAuthor' | 16 | import SingleAuthor from '@/components/SingleAuthor' |
| 16 | import Outro from '@/components/outro' | 17 | import Outro from '@/components/outro' |
| 17 | import SingleMobileInsight from '@/components/SingleMobileInsight' | 18 | import SingleMobileInsight from '@/components/SingleMobileInsight' |
| 18 | import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight' | 19 | import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight' |
| 19 | import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne' | 20 | import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne' |
| 20 | import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne' | 21 | import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne' |
| 21 | import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo' | 22 | import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo' |
| 22 | import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight' | 23 | import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight' |
| 23 | import TwoScreenWithInsight from '@/components/TwoScreenWithInsight' | 24 | import TwoScreenWithInsight from '@/components/TwoScreenWithInsight' |
| 24 | import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments' | 25 | import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments' |
| 25 | import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight' | 26 | import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight' |
| 26 | import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor' | 27 | import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor' |
| 27 | import TwoAuthor from '@/components/TwoAuthor' | 28 | import TwoAuthor from '@/components/TwoAuthor' |
| 28 | import TwoAuthorDesktop from '@/components/TwoAuthorDesktop' | 29 | import TwoAuthorDesktop from '@/components/TwoAuthorDesktop' |
| 29 | import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow' | 30 | import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow' |
| 30 | import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments' | 31 | import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments' |
| 31 | import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor' | 32 | import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor' |
| 32 | import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor' | 33 | import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor' |
| 33 | import ToAddYourComment from '@/components/ToAddYourComment' | 34 | import ToAddYourComment from '@/components/ToAddYourComment' |
| 34 | import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard' | 35 | import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard' |
| 35 | import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat' | 36 | import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat' |
| 36 | import Otp from '@/components/Otp' | 37 | import Otp from '@/components/Otp' |
| 37 | import ChangePassword from '@/components/ChangePassword' | 38 | import ChangePassword from '@/components/ChangePassword' |
| 38 | import noscreenshotSingleautho from '@/components/noscreenshotSingleautho' | 39 | import noscreenshotSingleautho from '@/components/noscreenshotSingleautho' |
| 39 | 40 | ||
| 40 | 41 | ||
| 41 | import router from '../router' | 42 | import router from '../router' |
| 42 | Vue.use(Router) | 43 | Vue.use(Router) |
| 43 | 44 | ||
| 44 | export default new Router({ | 45 | export default new Router({ |
| 45 | mode: 'history', | 46 | mode: 'history', |
| 46 | routes: [{ | 47 | routes: [{ |
| 47 | path: '/login', | 48 | path: '/login', |
| 48 | name: 'LandingPage', | 49 | name: 'LandingPage', |
| 49 | component: LandingPage, | 50 | component: LandingPage, |
| 50 | // beforeEnter: function(to, from, next) { | 51 | // beforeEnter: function(to, from, next) { |
| 51 | // var userdata = localStorage.getItem('spotlight_usertoken') | 52 | // var userdata = localStorage.getItem('spotlight_usertoken') |
| 52 | // if (userdata) { | 53 | // if (userdata) { |
| 53 | // router.push({ name: 'Welcome' }) | 54 | // router.push({ name: 'Welcome' }) |
| 54 | // } | 55 | // } |
| 55 | // next() | 56 | // next() |
| 56 | // } | 57 | // } |
| 57 | }, | 58 | }, |
| 58 | { | 59 | { |
| 59 | path: '/', | 60 | path: '/', |
| 60 | name: 'SignUp', | 61 | name: 'SignUp', |
| 61 | component: SignUp, | 62 | component: SignUp, |
| 62 | }, | 63 | }, |
| 63 | { | 64 | { |
| 64 | path: '/intermediate', | 65 | path: '/intermediate', |
| 65 | name: 'Intermediate', | 66 | name: 'Intermediate', |
| 66 | component: Intermediate | 67 | component: Intermediate |
| 67 | }, | 68 | }, |
| 68 | { | 69 | { |
| 69 | path: '/reset', | 70 | path: '/reset', |
| 70 | name: 'Reset', | 71 | name: 'Reset', |
| 71 | component: Reset, | 72 | component: Reset, |
| 72 | }, | 73 | }, |
| 73 | { | 74 | { |
| 74 | path: '/profile', | 75 | path: '/profile', |
| 75 | name: 'Profile', | 76 | name: 'Profile', |
| 76 | component: Profile, | 77 | component: Profile, |
| 77 | }, | 78 | }, |
| 78 | { | 79 | { |
| 79 | path: '/insight', | 80 | path: '/insight', |
| 80 | name: 'Insight', | 81 | name: 'Insight', |
| 81 | component: Insight, | 82 | component: Insight, |
| 82 | }, | 83 | }, |
| 83 | { | 84 | { |
| 84 | path: '/product-insight', | 85 | path: '/product-insight', |
| 85 | name: 'ProductInsight', | 86 | name: 'ProductInsight', |
| 86 | component: ProductInsight, | 87 | component: ProductInsight, |
| 87 | }, | 88 | }, |
| 88 | { | 89 | { |
| 89 | path: '/episode-intro/:caseStudyId/:slideId', | 90 | path: '/episode-intro/:caseStudyId/:slideId', |
| 90 | name: 'EpisodeIntro', | 91 | name: 'EpisodeIntro', |
| 91 | component: EpisodeIntro, | 92 | component: EpisodeIntro, |
| 92 | }, | 93 | }, |
| 93 | , | 94 | , |
| 94 | { | 95 | { |
| 95 | path: '/author-intro/:caseStudyId/:slideId', | 96 | path: '/author-intro/:caseStudyId/:slideId', |
| 96 | name: 'AuthorIntro', | 97 | name: 'AuthorIntro', |
| 97 | component: AuthorIntro, | 98 | component: AuthorIntro, |
| 98 | }, | 99 | }, |
| 99 | { | 100 | { |
| 100 | path: '/author-reading-now', | 101 | path: '/author-reading-now/:caseStudyId/:slideId', |
| 101 | name: 'AuthorReadingNow', | 102 | name: 'AuthorReadingNow', |
| 102 | component: AuthorReadingNow, | 103 | component: AuthorReadingNow, |
| 103 | }, | 104 | }, |
| 104 | { | 105 | { |
| 106 | path: '/author-reading-break/:caseStudyId/:slideId', | ||
| 107 | name: 'AuthorReadingBreak', | ||
| 108 | component: AuthorReadingBreak, | ||
| 109 | }, | ||
| 110 | { | ||
| 105 | path: '/single-author', | 111 | path: '/single-author', |
| 106 | name: 'SingleAuthor', | 112 | name: 'SingleAuthor', |
| 107 | component: SingleAuthor, | 113 | component: SingleAuthor, |
| 108 | }, | 114 | }, |
| 109 | { | 115 | { |
| 110 | path: '/outro/:caseStudyId/:slideId', | 116 | path: '/outro/:caseStudyId/:slideId', |
| 111 | name: 'Outro', | 117 | name: 'Outro', |
| 112 | component: Outro, | 118 | component: Outro, |
| 113 | }, | 119 | }, |
| 114 | { | 120 | { |
| 115 | path: '/single-mobile-insight', | 121 | path: '/single-mobile-insight', |
| 116 | name: 'SingleMobileInsight', | 122 | name: 'SingleMobileInsight', |
| 117 | component: SingleMobileInsight, | 123 | component: SingleMobileInsight, |
| 118 | }, | 124 | }, |
| 119 | { | 125 | { |
| 120 | path: '/two-screen-without-insight/:caseStudyId/:slideId', | 126 | path: '/two-screen-without-insight/:caseStudyId/:slideId', |
| 121 | name: 'TwoScreenWithoutInsight', | 127 | name: 'TwoScreenWithoutInsight', |
| 122 | component: TwoScreenWithoutInsight, | 128 | component: TwoScreenWithoutInsight, |
| 123 | }, | 129 | }, |
| 124 | { | 130 | { |
| 125 | path: '/single-m-screen-insight-one/:caseStudyId/:slideId', | 131 | path: '/single-m-screen-insight-one/:caseStudyId/:slideId', |
| 126 | name: 'SingleMobileScreenInsightOne', | 132 | name: 'SingleMobileScreenInsightOne', |
| 127 | component: SingleMobileScreenInsightOne, | 133 | component: SingleMobileScreenInsightOne, |
| 128 | }, | 134 | }, |
| 129 | { | 135 | { |
| 130 | path: '/single-m-screen-insight-two/:caseStudyId/:slideId', | 136 | path: '/single-m-screen-insight-two/:caseStudyId/:slideId', |
| 131 | name: 'SingleMobileScreenInsightTwo', | 137 | name: 'SingleMobileScreenInsightTwo', |
| 132 | component: SingleMobileScreenInsightTwo, | 138 | component: SingleMobileScreenInsightTwo, |
| 133 | }, | 139 | }, |
| 134 | { | 140 | { |
| 135 | path: '/single-web-screen-insight-one', | 141 | path: '/single-web-screen-insight-one', |
| 136 | name: 'SingleWebScreenInsightOne', | 142 | name: 'SingleWebScreenInsightOne', |
| 137 | component: SingleWebScreenInsightOne, | 143 | component: SingleWebScreenInsightOne, |
| 138 | }, | 144 | }, |
| 139 | { | 145 | { |
| 140 | path: '/single-screengrab-one-insight', | 146 | path: '/single-screengrab-one-insight', |
| 141 | name: 'SingleScreengrabOneInsight', | 147 | name: 'SingleScreengrabOneInsight', |
| 142 | component: SingleScreengrabOneInsight, | 148 | component: SingleScreengrabOneInsight, |
| 143 | }, | 149 | }, |
| 144 | { | 150 | { |
| 145 | path: '/two-screen-with-insight/:caseStudyId/:slideId', | 151 | path: '/two-screen-with-insight/:caseStudyId/:slideId', |
| 146 | name: 'TwoScreenWithInsight', | 152 | name: 'TwoScreenWithInsight', |
| 147 | component: TwoScreenWithInsight, | 153 | component: TwoScreenWithInsight, |
| 148 | }, | 154 | }, |
| 149 | { | 155 | { |
| 150 | path: '/two-screengrab-with-comments', | 156 | path: '/two-screengrab-with-comments', |
| 151 | name: 'TwoScreengrabWithComments', | 157 | name: 'TwoScreengrabWithComments', |
| 152 | component: TwoScreengrabWithComments, | 158 | component: TwoScreengrabWithComments, |
| 153 | }, | 159 | }, |
| 154 | { | 160 | { |
| 155 | path: '/two-webscreen-with-insight', | 161 | path: '/two-webscreen-with-insight', |
| 156 | name: 'TwoWebScreenWithInsight', | 162 | name: 'TwoWebScreenWithInsight', |
| 157 | component: TwoWebScreenWithInsight, | 163 | component: TwoWebScreenWithInsight, |
| 158 | }, | 164 | }, |
| 159 | { | 165 | { |
| 160 | path: '/noscreenshot-single-author/:caseStudyId/:slideId', | 166 | path: '/noscreenshot-single-author/:caseStudyId/:slideId', |
| 161 | name: 'NoScreenshotSingleAuthor', | 167 | name: 'NoScreenshotSingleAuthor', |
| 162 | component: NoScreenshotSingleAuthor, | 168 | component: NoScreenshotSingleAuthor, |
| 163 | }, | 169 | }, |
| 164 | { | 170 | { |
| 165 | path: '/two-author-intro', | 171 | path: '/two-author-intro', |
| 166 | name: 'TwoAuthor', | 172 | name: 'TwoAuthor', |
| 167 | component: TwoAuthor, | 173 | component: TwoAuthor, |
| 168 | }, | 174 | }, |
| 169 | { | 175 | { |
| 170 | path: '/two-author-desktop', | 176 | path: '/two-author-desktop', |
| 171 | name: 'TwoAuthorDesktop', | 177 | name: 'TwoAuthorDesktop', |
| 172 | component: TwoAuthorDesktop, | 178 | component: TwoAuthorDesktop, |
| 173 | }, | 179 | }, |
| 174 | { | 180 | { |
| 175 | path: '/two-author-reading-now', | 181 | path: '/two-author-reading-now', |
| 176 | name: 'TwoAuthorReadingNow', | 182 | name: 'TwoAuthorReadingNow', |
| 177 | component: TwoAuthorReadingNow, | 183 | component: TwoAuthorReadingNow, |
| 178 | }, | 184 | }, |
| 179 | { | 185 | { |
| 180 | path: '/single-mobile-screen-chat-comments', | 186 | path: '/single-mobile-screen-chat-comments', |
| 181 | name: 'SingleMobileScreenChatComments', | 187 | name: 'SingleMobileScreenChatComments', |
| 182 | component: SingleMobileScreenChatComments, | 188 | component: SingleMobileScreenChatComments, |
| 183 | }, | 189 | }, |
| 184 | { | 190 | { |
| 185 | path: '/two-screen-with-two-author', | 191 | path: '/two-screen-with-two-author', |
| 186 | name: 'TwoScreensWithTwoAuthor', | 192 | name: 'TwoScreensWithTwoAuthor', |
| 187 | component: TwoScreensWithTwoAuthor, | 193 | component: TwoScreensWithTwoAuthor, |
| 188 | }, | 194 | }, |
| 189 | { | 195 | { |
| 190 | path: '/no-screenshot-two-author', | 196 | path: '/no-screenshot-two-author', |
| 191 | name: 'NoScreenshotTwoAuthor', | 197 | name: 'NoScreenshotTwoAuthor', |
| 192 | component: NoScreenshotTwoAuthor, | 198 | component: NoScreenshotTwoAuthor, |
| 193 | }, | 199 | }, |
| 194 | { | 200 | { |
| 195 | path: '/to-add-your-comment', | 201 | path: '/to-add-your-comment', |
| 196 | name: 'ToAddYourComment', | 202 | name: 'ToAddYourComment', |
| 197 | component: ToAddYourComment, | 203 | component: ToAddYourComment, |
| 198 | }, | 204 | }, |
| 199 | { | 205 | { |
| 200 | path: '/reading-flow-bounce-board', | 206 | path: '/reading-flow-bounce-board', |
| 201 | name: 'ReadingFlowBounceBoard', | 207 | name: 'ReadingFlowBounceBoard', |
| 202 | component: ReadingFlowBounceBoard, | 208 | component: ReadingFlowBounceBoard, |
| 203 | }, | 209 | }, |
| 204 | { | 210 | { |
| 205 | path: '/reading-flow-bounce-board-chat', | 211 | path: '/reading-flow-bounce-board-chat', |
| 206 | name: 'ReadingFlowBounceBoard_chat', | 212 | name: 'ReadingFlowBounceBoard_chat', |
| 207 | component: ReadingFlowBounceBoard_chat, | 213 | component: ReadingFlowBounceBoard_chat, |
| 208 | }, | 214 | }, |
| 209 | { | 215 | { |
| 210 | path: '/otp/:flag', | 216 | path: '/otp/:flag', |
| 211 | name: 'Otp', | 217 | name: 'Otp', |
| 212 | component: Otp, | 218 | component: Otp, |
| 213 | }, | 219 | }, |
| 214 | { | 220 | { |
| 215 | path: '/changepassword', | 221 | path: '/changepassword', |
| 216 | name: 'ChangePassword', | 222 | name: 'ChangePassword', |
| 217 | component: ChangePassword, | 223 | component: ChangePassword, |
| 218 | }, | 224 | }, |
| 219 | { | 225 | { |
| 220 | path: '/noscreenshot-s-autho/:caseStudyId/:slideId', | 226 | path: '/noscreenshot-s-autho/:caseStudyId/:slideId', |
| 221 | name: 'noscreenshotSingleautho', | 227 | name: 'noscreenshotSingleautho', |
| 222 | component: noscreenshotSingleautho, | 228 | component: noscreenshotSingleautho, |
| 223 | }, | 229 | }, |
| 224 | ], | 230 | ], |
| 225 | scrollBehavior(to, from, savedPosition) { | 231 | scrollBehavior(to, from, savedPosition) { |
| 226 | this.seen = false | 232 | this.seen = false |
| 227 | return { x: 0, y: 0 } | 233 | return { x: 0, y: 0 } |
| 228 | } | 234 | } |
| 229 | }) | 235 | }) |
| 230 | 236 | ||
| 231 | // noscreenshot-s-autho | 237 | // noscreenshot-s-autho |
| 232 | //two-screen-without-insight | 238 | //two-screen-without-insight |
| 233 | //single-m-screen-insight-one | 239 | //single-m-screen-insight-one |
| 234 | //two-screen-with-insight | 240 | //two-screen-with-insight |