bousaid

Ticker.less

Aug 25th, 2019
214
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .ehdaa-box
  2. {
  3.     margin: 20px 0;
  4. }
  5. .breaking-news-ticker
  6. {
  7.     display: block;
  8.     width: 100%;
  9.     border: solid 1px @xf-borderColorLight;
  10.     background: @xf-contentBg;
  11.     height: 40px;
  12.     box-sizing: border-box;
  13.     position: relative;
  14.     line-height: 40px;
  15.     overflow: hidden;
  16.     text-align: -webkit-auto;
  17.     font-size: 14px;  
  18. }
  19.  
  20. .breaking-news-ticker.bn-fixed-top{
  21.   position: fixed;
  22.   right: 0;
  23.   left: 0;
  24.   top: 0;
  25. }
  26. .breaking-news-ticker.bn-fixed-bottom{
  27.   position: fixed;
  28.   left: 0;
  29.   right: 0;
  30.   bottom: 0;
  31. }
  32.  
  33. .tickerRow-main {
  34.     flex: 1;
  35.     min-width: 0;
  36.     vertical-align: top;
  37. }
  38. .tickerRow-extra{
  39.     float: right;
  40. }
  41. .tickerTime {
  42.     display: inline-block;
  43.     padding-right: 10px;
  44.     font-size: 13px;
  45.     position: relative;
  46.     z-index: 1;
  47. }
  48. .tickerRow-figure {
  49.     display: flex;
  50.     vertical-align: top;
  51.     white-space: nowrap;
  52.     word-wrap: normal;
  53.     text-align: center;
  54.     margin-left: 5px;
  55. }
  56. .bn-label
  57. {
  58.     right: 0;
  59.     top: 0;
  60.     bottom: 0;
  61.     height: 100%;
  62.     position: absolute;
  63.     .xf-bm_tri_css();
  64.     text-align: center;
  65.     z-index: 3;
  66. }
  67.  
  68. .bn-news
  69. {
  70.     position: absolute;
  71.     left: 0;
  72.     top: 0;
  73.     bottom: 0;
  74.     height: 100%;
  75.     right: 0;
  76.     overflow: hidden;
  77.     margin-left: 5px;
  78. }
  79. .bn-news ul
  80. {
  81.     display: block;
  82.     height: 100%;
  83.     list-style: none;
  84.     padding: 0;
  85.     margin: 0;
  86.     right: 0;
  87.     bottom: 0;
  88.     width: 100%;
  89.     position: absolute;
  90.    
  91.     > li {
  92.         white-space: nowrap;
  93.         overflow:hidden !important;
  94.         text-overflow: ellipsis;
  95.         text-decoration: none;
  96.         -webkit-transition: color .2s linear;
  97.         -moz-transition: color .2s linear;
  98.         -o-transition: color .2s linear;
  99.         transition: color .2s linear;
  100.         position: absolute;
  101.         width: 100%;
  102.         display: none;
  103.     }      
  104. }
  105.  
  106.  
  107. .bn-loader-text{
  108.   padding: 0 10px;
  109. }
  110. .bn-seperator{
  111.   display: inline-block;
  112.   float: right;
  113.   margin-left: 15px;
  114.   width: 30px;
  115.   height: 40px;
  116.   background-position: center;
  117.   background-size: contain;
  118.   background-repeat: no-repeat;
  119.   position: relative;
  120. }
  121. .bn-seperator.bn-news-dot
  122. {
  123.     margin-left: 0;
  124.    
  125.     &:after
  126.     {
  127.         content: '';
  128.         position: absolute;
  129.         width: 8px;
  130.         height: 8px;
  131.         background: #333;
  132.         border-radius: 50%;
  133.         top: 50%;
  134.         margin-top: -4px;
  135.         right: 50%;
  136.         margin-right: -4px;
  137.     }
  138. }
  139.  
  140. .bn-prefix
  141. {
  142.     color: #d65d7a;
  143.     margin-left: 15px;
  144.     padding-right: 10px;
  145. }
  146. .bn-positive{
  147.   color: #0b8457;
  148.   font-weight: bold;
  149. }
  150. .bn-negative{
  151.   color: #dc2f2f;
  152.   font-weight: bold;
  153. }
  154.  
  155. .bn-controls
  156. {
  157.     width: auto;
  158.     left: 0;
  159.     top: 0;
  160.     bottom: 0;
  161.     height: 100%;
  162.     position: absolute;
  163.     -webkit-touch-callout: none;
  164.     -webkit-user-select: none;
  165.     -khtml-user-select: none;
  166.     -moz-user-select: none;
  167.     -ms-user-select: none;
  168.     user-select: none;
  169.    
  170.     & button
  171.     {
  172.         width: 30px;
  173.         float: right;
  174.         height: 100%;
  175.         cursor: pointer;
  176.         border:none;
  177.         border-right: solid 1px @xf-borderColorHeavy;
  178.         text-align: center;
  179.         background-color: @xf-contentAltBg;
  180.         background: linear-gradient(0deg, @xf-majorHeadingBg, mix(@xf-majorHeadingBg, @xf-contentBg, 50%));
  181.         outline: none;
  182.         text-align: center;
  183.  
  184.         &:hover
  185.         {
  186.             background: @xf-contentBg;
  187.             text-decoration: none;
  188.         }
  189.        
  190.     }
  191. }
  192.  
  193. .bn-arrow
  194. {
  195.     margin: 0;
  196.     display: inline-block;
  197.     height: 8px;
  198.     position: relative;
  199.     width: 8px;
  200.     top: -2px;
  201.    
  202.     &:after
  203.     {
  204.         border-bottom-style: solid;
  205.         border-bottom-width: 2px;
  206.         border-left-style: solid;
  207.         border-left-width: 2px;
  208.         content: '';
  209.         display: inline-block;
  210.         height: 8px;
  211.         right: 0;
  212.         position: absolute;
  213.         top: 0;
  214.         width: 8px;
  215.         border-color: @xf-buttonBg;
  216.     }
  217.    
  218.     &:before
  219.     {
  220.         background-color: @xf-buttonBg;      
  221.     }
  222.    
  223.     &.bn-next
  224.     {
  225.         -moz-transform: rotate(315deg);
  226.         -ms-transform: rotate(315deg);
  227.         -webkit-transform: rotate(315deg);
  228.         transform: rotate(315deg);
  229.         right:-3px;
  230.     }
  231.    
  232.     &.bn-prev
  233.     {
  234.         -moz-transform: rotate(135deg);
  235.         -ms-transform: rotate(135deg);
  236.         -webkit-transform: rotate(135deg);
  237.         transform: rotate(135deg);
  238.         right: 3px;
  239.     }
  240. }
  241.  
  242. .bn-play
  243. {
  244.     position: relative;
  245.     background: @xf-buttonBg;
  246.     width: 0;
  247.     height: 12px;
  248.     display: inline-block;
  249.     margin-right: -5px;
  250.    
  251.     &:after
  252.     {
  253.         right: 100%;
  254.         top: 50%;
  255.         border: solid transparent;
  256.         content: " ";
  257.         height: 0;
  258.         width: 0;
  259.         position: absolute;
  260.         pointer-events: none;
  261.         border-right-color: @xf-buttonBg;
  262.         border-width: 8px;
  263.         margin-top: -8px;
  264.     }
  265. }
  266.  
  267. .bn-pause
  268. {
  269.     position: relative;
  270.     width: 0;
  271.     height: 14px;
  272.     display: inline-block;
  273.     top: 1px;
  274.     right:-1px;
  275.    
  276.     &:before
  277.     {
  278.         position: absolute;
  279.         content: "";
  280.         width: 2px;
  281.         height: 100%;
  282.         right: 3px;
  283.         background-color: @xf-buttonBg;
  284.     }
  285.    
  286.     &:after
  287.     {
  288.         position: absolute;
  289.         content: "";
  290.         width: 2px;
  291.         height: 100%;
  292.         right: -3px;
  293.         background-color: @xf-buttonBg;
  294.     }
  295. }
  296.  
  297.  
  298.  
  299. .bn-direction-rtl
  300. {
  301.     direction: rtl;
  302.    
  303.     .bn-label
  304.     {
  305.         right: auto;
  306.         left: 0;
  307.     }
  308.    
  309.     .bn-controls
  310.     {
  311.         left: auto;
  312.         right: 0;
  313.         text-align: center;
  314.     }
  315.    
  316.     .bn-seperator
  317.     {
  318.         margin-right: 15px;
  319.         margin-left: 0;
  320.         float: left;
  321.     }
  322.    
  323.     .bn-prefix
  324.     {
  325.         margin-right: 15px;
  326.         margin-left: 0;
  327.         padding-right: 0;
  328.         padding-left: 10px;
  329.     }
  330.    
  331.     .bn-controls button
  332.     {
  333.         border-right: none;
  334.         border-left: solid 1px @xf-borderColorLight;
  335.     }
  336. }
  337.  
  338.  
  339. .bn-effect-scroll .bn-news ul
  340. {
  341.     display: block;
  342.     width: 100%;
  343.     position: relative;
  344.    
  345.     > li
  346.     {
  347.         display: list-item;
  348.         float: right;
  349.         position: relative;
  350.         width: auto;
  351.     }
  352. }
  353.  
  354. .bn-effect-scroll.bn-direction-rtl .bn-news ul li
  355. {
  356.     float: left;
  357. }
RAW Paste Data