CSS   26
style review
Guest on 26th May 2023 12:53:07 AM


  1. .wsm_free_review-notice{
  2.   padding: 15px 15px 15px 0;
  3.   background-color: #fff;
  4.   border-radius: 3px;
  5.   margin: 20px 20px 0 0;
  6.   border-left: 4px solid rgb(67, 129, 228);
  7.   border-top: 1px solid #ccd0d4;
  8.   border-bottom: 1px solid #ccd0d4;
  9.   border-right: 1px solid #ccd0d4;
  10. }
  11. .wsm_free_review-notice:after{
  12.   content: '';
  13.   display: table;
  14.   clear: both;
  15. }
  16. .wsm_free_review-thumbnail{
  17.   width: 114px;
  18.   float: left;
  19.   line-height: 80px;
  20.   text-align: center;
  21.   border-right: 4px solid transparent;
  22. }
  23. .wsm_free_review-thumbnail img{
  24.   width: 68px;
  25.   vertical-align: middle;
  26. }
  27. .wsm_free_review-text{
  28.   overflow: hidden;
  29. }
  30. .wsm_free_review-text h3{
  31.   font-size: 24px;
  32.   margin: 0 0 5px;
  33.   font-weight: 400;
  34.   line-height: 1.3;
  35. }
  36. .wsm_free_review-text p{
  37.   font-size: 13px;
  38.   margin: 0 0 5px;
  39. }
  40. .wsm_free_review-ul{
  41.   margin: 0;
  42.   padding: 0;
  43. }
  44. .wsm_free_review-ul li{
  45.   display: inline-block;
  46.   margin-right: 15px;
  47. }
  48. .wsm_free_review-ul li a{
  49.   display: inline-block;
  50.   color: #10738B;
  51.   text-decoration: none;
  52.   padding-left: 26px;
  53.   position: relative;
  54. }
  55. .wsm_free_review-ul li a span{
  56.   position: absolute;
  57.   left: 0;
  58.   top: -2px;
  59. }
  60. .wsm_free_dasboard-pro-link{
  61.   color: #0cbb0c;
  62. }
  63.  
  64. /* LoginPress Add-ons CSS @since 1.1.3 */
  65.  
  66. .wsm_free_alert-notice{
  67.   background: #fff;
  68.   margin: 20px 20px 0 0;
  69.   position: relative;
  70.   display: flex;
  71.   align-items: center;
  72.   clear: both;
  73. }
  74. .wsm_free_alert-notice>*{
  75.   -webkit-box-sizing: border-box;
  76.   box-sizing: border-box;
  77. }
  78. .wsm_free_alert-notice:after{
  79.   content: '';
  80.   display: table;
  81.   clear: both;
  82. }
  83. .wsm_free_alert-thumbnail{
  84.   width: 300px;
  85.   text-align: center;
  86.   position: relative;
  87. }
  88. .wsm_free_alert-thumbnail img{
  89.   width: 250px;
  90.   vertical-align: middle;
  91. }
  92. .wsm_free_alert-text{
  93.   padding: 16px 80px 16px 80px;
  94.   overflow: hidden;
  95.   background: #1a5fa4;
  96.   position: relative;
  97.   flex: 1;
  98. }
  99. .black_friday_notic .wsm_free_alert-text {
  100.   padding: 16px 10px 16px 80px;
  101. }
  102. .black_friday{
  103.   background: #000 !important;
  104.       text-align: center;
  105. }
  106. .black_friday:after{
  107.   display: none;
  108. }
  109. .black_friday_notic .wsm_free_alert-text {
  110.   display: flex;
  111.   align-items: center;
  112. }
  113. .black_friday_notic .wsm_free_alert-button-section {
  114.   width: 450px;
  115. }
  116. .wsm_free_addon-notice-link:focus{
  117.   outline: none;
  118.   box-shadow: none;
  119. }
  120. .wsm_free_alert-text:after{
  121.   width: 80px;
  122.   height: 100%;
  123.   background: #fff;
  124.   content: '';
  125.   position: absolute;
  126.   top: 0;
  127.   right: -40px;
  128.   transform: skewX(-20deg);
  129.   z-index: 1;
  130. }
  131. .wsm_free_alert-text:before{
  132.   width: 80px;
  133.   height: 100%;
  134.   background: #fff;
  135.   content: '';
  136.   position: absolute;
  137.   top: 0;
  138.   left: -40px;
  139.   transform: skewX(-20deg);
  140.   z-index: 1;
  141. }
  142. .wsm_free_alert-text h3{
  143.   font-size: 20px;
  144.   line-height: 24px;
  145.   margin: 0 0 10px;
  146.   color: #fff;
  147. }
  148. .wsm_free_alert-text p{
  149.   font-size: 16px;
  150.   margin: 0;
  151.   color: #fff;
  152. }
  153. .black_friday_sale_btn .wsm_free_alert-button {
  154. display: inline-block;
  155. padding: 24px 20px;
  156. font-size: 38px;
  157. background-color: #24afe9;
  158. color: #000;
  159. border-radius: 0px;
  160. text-decoration: none;
  161. font-weight: bold;
  162. }
  163. .wsm_free_alert-button-section{
  164.   width: 300px;
  165.   text-align: center;
  166.   position: relative;
  167. }
  168. .wsm_free_alert-button{
  169.   height: auto;
  170.   padding: 0;
  171.   color: #1a5fa4;
  172.   border: 0;
  173.   border-radius: 5px;
  174.   background: none;
  175.   font-size: 16px;
  176.   font-weight: bold;
  177.   text-decoration: underline;
  178.   cursor: pointer;
  179. }
  180. .wsm_free_alert-button:focus{
  181.   outline: none;
  182.   box-shadow: none;
  183. }
  184. .wp-core-ui .wsm_free_alert-notice.notice.is-dismissible{
  185.   padding: 0px;
  186.   border-left: 0px;
  187. }
  188. .wsm_free_alert-notice .notice-dismiss{
  189.   text-decoration: none;
  190.   z-index: 1;
  191. }
  192. .wsm_free_addon-notice-link{
  193.   display: flex;
  194.   align-items: center;
  195.   flex: 1;
  196.   text-decoration: none;
  197. }
  198. .wsm_free_notice-logo{
  199.   width: 72px;
  200.   text-align: center;
  201.   position: relative;
  202.   margin: 10px;
  203. }
  204. .wsm_free_notice-logo img{
  205.   width: 50px;
  206.   vertical-align: middle;
  207. }
  208.  
  209. .wsm_free_notice-discription{
  210.   overflow: hidden;
  211.   width: calc(100% - 50px);
  212. }
  213. .wsm_free_notification.wsm_free_notice-success{
  214.   border:1px solid #6ab074;
  215.   background: #e6f0e8;
  216.   margin: 36px 20px 0 0;
  217.   display: -webkit-box;
  218.   display: -ms-flexbox;
  219.   display: flex;
  220.   -webkit-box-align: center;
  221.       -ms-flex-align: center;
  222.           align-items: center;
  223. }
  224. .wsm_free_notice-success .wsm_free_notice-discription p{
  225.   color: #21573a;
  226. }
  227. .wsm_free_notification.wsm_free_notice-success .wsm_free_notification-close:before{
  228.   color: #21573a;
  229. }
  230. @media screen and (max-width: 1300px) {
  231.   .wsm_free_alert-thumbnail{
  232.     width: 200px;
  233.   }
  234.   .wsm_free_alert-thumbnail img{
  235.     width: 170px;
  236.   }
  237.   .wsm_free_alert-button-section{
  238.     width: 200px;
  239.   }
  240. }
  241. @media screen and (max-width: 1100px) {
  242.   .wsm_free_alert-thumbnail{
  243.     display: none;
  244.   }
  245.   .wsm_free_alert-thumbnail img{
  246.     width: 150px;
  247.   }
  248.   .wsm_free_alert-text{
  249.     padding-left: 30px;
  250.   }
  251.   .wsm_free_alert-text:before,.wsm_free_alert-text:after{
  252.     display: none;
  253.   }
  254. }
  255. @media screen and (max-width: 782px) {
  256.   .wsm_free_alert-text{
  257.     padding-right: 40px;
  258.     padding-bottom: 50px;
  259.   }
  260.   .wsm_free_alert-button-section{
  261.     width: auto;
  262.     text-align: left;
  263.   }
  264.   .wsm_free_alert-button-section{
  265.     position: absolute;
  266.     bottom: 20px;
  267.     left: 33px;
  268.   }
  269.   .wsm_free_alert-button{
  270.     color: #fff;
  271.   }
  272.   .wsm_free_alert-notice .notice-dismiss:before{
  273.     color: #fff;
  274.   }
  275.   .black_friday_sale_btn .wsm_free_alert-button{
  276.     width: 310px;
  277.     text-align: center;
  278.   }
  279. }
Raw Paste

Login or Register to edit or fork this paste. It's free.