/**/ /**/ .ws5_like-Wrapper{ margin-block: 1rem; display: flex; align-items: center; } .ws5_like-Wrapper .spinner{ display: none; } .ws5_like-Wrapper .spinner.loader, .ws5_like-Wrapper .spinner.loader:before, .ws5_like-Wrapper .spinner.loader:after { border-radius: 50%; width: 2.5em; height: 2.5em; animation-fill-mode: both; animation: bblFadInOut 1.8s infinite ease-in-out; } .ws5_like-Wrapper .spinner.loader { color: #525252; font-size: 4px; position: relative; top: -11px; left: 25px; text-indent: -9999em; transform: translateZ(0); animation-delay: -0.16s; } .ws5_like-Wrapper .spinner.loader:before, .ws5_like-Wrapper .spinner.loader:after { content: ''; position: absolute; top: 0; } .ws5_like-Wrapper .spinner.loader:before { left: -3.5em; animation-delay: -0.32s; } .ws5_like-Wrapper .spinner.loader:after { left: 3.5em; } @keyframes bblFadInOut { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em } 40% { box-shadow: 0 2.5em 0 0 } } /**/ .ws5_like-Wrapper{ margin-block: 1rem; } .ws5_like-Wrapper .button-tooltip{ position: relative; display: inline-block; } .ws5_like-Wrapper .button-tooltip button { display: flex; gap: 4px; background-color:#f5f7fa; color: #525252; border: 1px solid #f5f7fa; border-radius: 2px; font-size: 0.87rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; outline: none; box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 1px 0px; min-width: 45px; height:40px; justify-content: center; align-items: center; } [data-page="41"] .ws5_like-Wrapper .button-tooltip button { min-width: 40px; height:32px; } .ws5_like-Wrapper .button-tooltip button.liked{ /**/ } .ws5_like-Wrapper .button-tooltip button .txt_wrp { padding-top: 5px; } .ws5_like-Wrapper .button-tooltip button .icon_wrp svg { width: 20px; transition: all 0.5s ease-in-out; position: relative; } .ws5_like-Wrapper .ws5_wbs_like_btn .icon_wrp svg.filled { transition: transform 0.5s ease; } .ws5_like-Wrapper .ws5_wbs_like_btn.liked .icon_wrp svg.empty { display: none; opacity: 0; } .ws5_like-Wrapper .ws5_wbs_like_btn.liked .icon_wrp svg.filled { display: inline-block; opacity: 1; } .ws5_like-Wrapper .ws5_wbs_like_btn.disliked .icon_wrp svg.empty { display: inline-block; opacity: 1; } .ws5_like-Wrapper .ws5_wbs_like_btn.disliked .icon_wrp svg.filled { display: none; opacity: 0; } .ws5_like-Wrapper .ws5_wbs_like_btn.disliked:hover .icon_wrp svg.empty { display: none; opacity: 0; } .ws5_like-Wrapper .ws5_wbs_like_btn.disliked:hover .icon_wrp svg.filled { display: inline-block; opacity: 1; animation: beatingHeart 1.2s infinite; } .ws5_like-Wrapper .ws5_wbs_like_btn.liked:hover .icon_wrp svg.empty { /**/ } .ws5_like-Wrapper .ws5_wbs_like_btn.liked:hover .icon_wrp svg.filled { /**/ } @keyframes beatingHeart { 0% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } } .ws5_like-Wrapper .button-tooltip button .txt_wrp { line-height: 1.2; } [data-page="41"] .ws5_like-Wrapper .button-tooltip button .txt_wrp { font-weight: 600; } /**/ [data-page="41"] .ws5_like-Wrapper .button-tooltip button:hover:not(:disabled){ box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 6px 0px; } /**/ .ws5_like-Wrapper .button-tooltip button:disabled { background-color: var(--ws5_tocBgColorId); cursor: not-allowed; color: #888; opacity: 0.5; } .ws5_like-Wrapper .button-tooltip button:disabled .icon_wrp svg { fill: white; } /**/ .ws5_like-Wrapper .button-tooltip .tooltip-text { visibility: hidden; width: max-content; max-width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 6px 10px; position: absolute; z-index: 10; bottom: 125%; /**/ left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 12px; pointer-events: none; } @media (max-width: 767.98px) { .ws5_like-Wrapper.preview .button-tooltip .tooltip-text{ transform: translateX(-14%); bottom: 119%; } } @media (max-width: 992.98px) { [data-page="7"] .ws5_like-Wrapper.preview .button-tooltip .tooltip-text, [data-page="42"] .ws5_like-Wrapper.preview .button-tooltip .tooltip-text{ transform: translateX(-14%); bottom: 119%; } } /**/ .ws5_like-Wrapper .button-tooltip .tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } @media (max-width: 767.98px) { .ws5_like-Wrapper.preview .button-tooltip .tooltip-text::after{ left: 14%; } } /**/ .ws5_like-Wrapper .button-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /**/ .ws5_like-Wrapper.preview{ position: absolute; top: 0.5rem; left: 1rem; z-index: 2; margin: 0; } [data-page="7"] .ws5_like-Wrapper.preview , [data-page="42"] .ws5_like-Wrapper.preview{ top: 0rem; left: 0.5rem; } @media (min-width: 768px) { [data-page="7"] .firstNewsWrapper .ws5_like-Wrapper , [data-page="42"] .firstNewsWrapper .ws5_like-Wrapper{ top: 1.5rem; left: 1.5rem; } [data-page="7"] .firstNewsWrapper.firstNewsWrapperPremium .ws5_like-Wrapper , [data-page="42"] .firstNewsWrapper.firstNewsWrapperPremium .ws5_like-Wrapper{ top: 1.5rem; left: 1rem; } } @media (max-width: 767.98px) { [data-page="7"] .ws5_like-Wrapper.preview , [data-page="42"] .ws5_like-Wrapper.preview{ top: 0rem; left: 1rem; } [data-page="7"] .firstNewsWrapper .ws5_like-Wrapper , [data-page="42"] .firstNewsWrapper .ws5_like-Wrapper{ top: 0rem; left: 0rem; } .ws5_like-Wrapper.preview{ top: 0rem; left: 1rem; padding: 0rem; } } .ws5_like-Wrapper.preview .ws5_wbs_like_btn{ gap: 1px; padding: 3px; min-width: 40px; width: 40px; height: 40px; box-shadow: none; border: none; background: transparent; justify-content: center; align-items: center; } .ws5_like-Wrapper.preview .button-tooltip button.ws5_wbs_like_btn:disabled{ opacity: 0.8; } .ws5_like-Wrapper.preview .button-tooltip button.ws5_wbs_like_btn .icon_wrp svg{ width: 25px; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool{ cursor: pointer; position: relative; display: inline-block; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool:hover span{ opacity: 1; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool .txt_wrp{ opacity: 0; color: #fff; min-width: 35px; padding: 2px; background: rgb(255, 110, 110); text-align: center; position: absolute; border-radius: 2px; display: flex; justify-content: center; align-items: center; height: 25px; transition: opacity 1s; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool .txt_wrp::after{ content: ''; border-width: 5px; position: absolute; border-style: solid; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool .txt_wrp.R-st{ top: 1px; left: 32px; border-color: transparent rgb(255, 110, 110) transparent transparent; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool .txt_wrp.R-st::after{ top: 28%; right: 100%; border-color: transparent rgb(255, 110, 110) transparent transparent; } .ws5_like-Wrapper.preview .ws5_wbs_like_btn .ws5_tool .ws5_like_counter{ font-weight: 500; } .ws5_blogBuster_index-news-wrapper .ws5_like-Wrapper.preview{ top: 1px; left: 1px; } .ws5_blogBuster_index-news-wrapper .ws5_like-Wrapper.preview button.ws5_wbs_like_btn{ /**/ } .ws5_blogBuster_index-news-wrapper .ws5_like-Wrapper.preview .tooltip-text{ top:105%; bottom: unset; left: 80px; } .ws5_blogBuster_index-news-wrapper .ws5_like-Wrapper.preview .tooltip-text::after{ top:unset; bottom:100%; transform: rotate(180deg); left:9%; } @media(max-width:767.98px){ .ws5_blogBuster_index-news-wrapper .ws5_like-Wrapper.preview .tooltip-text{ left: 22px; } } /**/ .ws5_like-Wrapper.slider-Footer{ margin: 0; } .ws5_like-Wrapper.slider-Footer .ws5_wbs_like_btn{ padding: 0; background: transparent; min-width: auto; width: auto; height: auto; justify-content: flex-start; align-items: flex-start; box-shadow: none; border: none; } .ws5_like-Wrapper.slider-Footer .ws5_wbs_like_btn .icon_wrp{ display: flex; align-items: end; } .ws5_like-Wrapper.slider-Footer .ws5_wbs_like_btn .icon_wrp .txt_wrp{ padding: 0; margin-left: 3px; } .ws5_like-Wrapper.slider-Footer .ws5_wbs_like_btn .icon_wrp svg{ width: 20px; } .ws5_like-Wrapper.slider-Footer .tooltip-text{ transform: translateX(-14%); bottom: 119%; } .ws5_like-Wrapper.slider-Footer .button-tooltip .tooltip-text::after{ left: 14%; } /**/ /**/