You are here

Home » API reference » Share Everywhere 8

share_everywhere.css in Share Everywhere 8

Same filename and directory in other branches
  1. 2.x css/share_everywhere.css
@-webkit-keyframes se-animation-left-inactive {
  0% {
    left: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    left: -400px;
  }
  100% {
    opacity: 0;
    left: -400px;
  }
}

@-moz-keyframes se-animation-left-inactive {
  0% {
    left: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    left: -400px;
  }
  100% {
    opacity: 0;
    left: -400px;
  }
}

@-o-keyframes se-animation-left-inactive {
  0% {
    left: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    left: -400px;
  }
  100% {
    opacity: 0;
    left: -400px;
  }
}

@keyframes se-animation-left-inactive {
  0% {
    left: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    left: -400px;
  }
  100% {
    opacity: 0;
    left: -400px;
  }
}

@-webkit-keyframes se-animation-left-active {
  0% {
    left: -400px;
    opacity: 0;
  }
  50% {
    left: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@-moz-keyframes se-animation-left-active {
  0% {
    left: -400px;
    opacity: 0;
  }
  50% {
    left: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@-o-keyframes se-animation-left-active {
  0% {
    left: -400px;
    opacity: 0;
  }
  50% {
    left: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes se-animation-left-active {
  0% {
    left: -400px;
    opacity: 0;
  }
  50% {
    left: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@-webkit-keyframes se-animation-right-inactive {
  0% {
    right: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    right: -400px;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}

@-moz-keyframes se-animation-right-inactive {
  0% {
    right: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    right: -400px;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}

@-o-keyframes se-animation-right-inactive {
  0% {
    right: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    right: -400px;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}

@keyframes se-animation-right-inactive {
  0% {
    right: 0;
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    right: -400px;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}

@-webkit-keyframes se-animation-right-active {
  0% {
    right: -400px;
    opacity: 0;
  }
  50% {
    right: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@-moz-keyframes se-animation-right-active {
  0% {
    right: -400px;
    opacity: 0;
  }
  50% {
    right: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@-o-keyframes se-animation-right-active {
  0% {
    right: -400px;
    opacity: 0;
  }
  50% {
    right: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes se-animation-right-active {
  0% {
    right: -400px;
    opacity: 0;
  }
  50% {
    right: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

.se-block .block-title {
  margin: 5px 0;
}

.se-block .block-content .se-like-container {
  height: 20px;
  width: 85px;
}

.se-block .block-content .se-container {
  width: 100%;
}

.se-block .block-content .se-container .se-trigger {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.se-block .block-content .se-container .se-trigger img {
  max-height: 20px;
}

.se-block .block-content .se-container .se-trigger.se-disabled {
  cursor: auto;
}

.se-block .block-content .se-container .se-links-container {
  display: inline-block;
  width: -webkit-calc(100% - 35px);
  width: -moz-calc(100% - 35px);
  width: calc(100% - 35px);
  overflow: hidden;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  height: 20px;
}

.se-block .block-content .se-container .se-links-container .se-links {
  height: 20px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-animation-duration: 0.75s;
     -moz-animation-duration: 0.75s;
       -o-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-direction: alternate;
     -moz-animation-direction: alternate;
       -o-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.se-block .block-content .se-container .se-links-container .se-links .se-link {
  display: inline-block;
  line-height: 0;
}

.se-block .block-content .se-container .se-links-container .se-links .se-link img {
  max-height: 20px;
}

.se-block .block-content .se-container .se-links-container .se-links .se-link.copy:hover, .se-block .block-content .se-container .se-links-container .se-links .se-link.copy:focus {
  cursor: pointer;
}

.se-block.se-has-like .se-container {
  width: -webkit-calc(100% - 85px);
  width: -moz-calc(100% - 85px);
  width: calc(100% - 85px);
}

.se-block.se-align-left .block-title {
  text-align: left;
}

.se-block.se-align-left .block-content .se-like-container {
  text-align: left;
  float: left;
}

.se-block.se-align-left .block-content .se-container {
  float: right;
}

.se-block.se-align-left .block-content .se-container .se-trigger {
  float: left;
}

.se-block.se-align-left .block-content .se-container .se-links-container {
  float: left;
  margin-left: 12px;
}

.se-block.se-align-left .block-content .se-container .se-links-container .se-links {
  text-align: left;
}

.se-block.se-align-left .block-content .se-container .se-links-container .se-links.se-active {
  -webkit-animation-name: se-animation-left-active;
     -moz-animation-name: se-animation-left-active;
       -o-animation-name: se-animation-left-active;
          animation-name: se-animation-left-active;
}

.se-block.se-align-left .block-content .se-container .se-links-container .se-links.se-inactive {
  -webkit-animation-name: se-animation-left-inactive;
     -moz-animation-name: se-animation-left-inactive;
       -o-animation-name: se-animation-left-inactive;
          animation-name: se-animation-left-inactive;
}

.se-block.se-align-right .block-title {
  text-align: right;
}

.se-block.se-align-right .block-content .se-like-container {
  text-align: right;
  float: right;
}

.se-block.se-align-right .block-content .se-container {
  float: left;
}

.se-block.se-align-right .block-content .se-container .se-trigger {
  float: right;
}

.se-block.se-align-right .block-content .se-container .se-links-container {
  float: right;
  margin-right: 12px;
}

.se-block.se-align-right .block-content .se-container .se-links-container .se-links {
  text-align: right;
}

.se-block.se-align-right .block-content .se-container .se-links-container .se-links.se-active {
  -webkit-animation-name: se-animation-right-active;
     -moz-animation-name: se-animation-right-active;
       -o-animation-name: se-animation-right-active;
          animation-name: se-animation-right-active;
}

.se-block.se-align-right .block-content .se-container .se-links-container .se-links.se-inactive {
  -webkit-animation-name: se-animation-right-inactive;
     -moz-animation-name: se-animation-right-inactive;
       -o-animation-name: se-animation-right-inactive;
          animation-name: se-animation-right-inactive;
}

File

css/share_everywhere.css
View source 
  1. @-webkit-keyframes se-animation-left-inactive {

  2.   0% {

  3.     left: 0;

  4.     opacity: 1;

  5.   }

  6.   25% {

  7.     opacity: 0;

  8.   }

  9.   50% {

  10.     left: -400px;

  11.   }

  12.   100% {

  13.     opacity: 0;

  14.     left: -400px;

  15.   }

  16. }

  17. 

  18. @-moz-keyframes se-animation-left-inactive {

  19.   0% {

  20.     left: 0;

  21.     opacity: 1;

  22.   }

  23.   25% {

  24.     opacity: 0;

  25.   }

  26.   50% {

  27.     left: -400px;

  28.   }

  29.   100% {

  30.     opacity: 0;

  31.     left: -400px;

  32.   }

  33. }

  34. 

  35. @-o-keyframes se-animation-left-inactive {

  36.   0% {

  37.     left: 0;

  38.     opacity: 1;

  39.   }

  40.   25% {

  41.     opacity: 0;

  42.   }

  43.   50% {

  44.     left: -400px;

  45.   }

  46.   100% {

  47.     opacity: 0;

  48.     left: -400px;

  49.   }

  50. }

  51. 

  52. @keyframes se-animation-left-inactive {

  53.   0% {

  54.     left: 0;

  55.     opacity: 1;

  56.   }

  57.   25% {

  58.     opacity: 0;

  59.   }

  60.   50% {

  61.     left: -400px;

  62.   }

  63.   100% {

  64.     opacity: 0;

  65.     left: -400px;

  66.   }

  67. }

  68. 

  69. @-webkit-keyframes se-animation-left-active {

  70.   0% {

  71.     left: -400px;

  72.     opacity: 0;

  73.   }

  74.   50% {

  75.     left: 0;

  76.   }

  77.   75% {

  78.     opacity: 1;

  79.   }

  80.   100% {

  81.     opacity: 1;

  82.     left: 0;

  83.   }

  84. }

  85. 

  86. @-moz-keyframes se-animation-left-active {

  87.   0% {

  88.     left: -400px;

  89.     opacity: 0;

  90.   }

  91.   50% {

  92.     left: 0;

  93.   }

  94.   75% {

  95.     opacity: 1;

  96.   }

  97.   100% {

  98.     opacity: 1;

  99.     left: 0;

  100.   }

  101. }

  102. 

  103. @-o-keyframes se-animation-left-active {

  104.   0% {

  105.     left: -400px;

  106.     opacity: 0;

  107.   }

  108.   50% {

  109.     left: 0;

  110.   }

  111.   75% {

  112.     opacity: 1;

  113.   }

  114.   100% {

  115.     opacity: 1;

  116.     left: 0;

  117.   }

  118. }

  119. 

  120. @keyframes se-animation-left-active {

  121.   0% {

  122.     left: -400px;

  123.     opacity: 0;

  124.   }

  125.   50% {

  126.     left: 0;

  127.   }

  128.   75% {

  129.     opacity: 1;

  130.   }

  131.   100% {

  132.     opacity: 1;

  133.     left: 0;

  134.   }

  135. }

  136. 

  137. @-webkit-keyframes se-animation-right-inactive {

  138.   0% {

  139.     right: 0;

  140.     opacity: 1;

  141.   }

  142.   25% {

  143.     opacity: 0;

  144.   }

  145.   50% {

  146.     right: -400px;

  147.   }

  148.   100% {

  149.     opacity: 0;

  150.     right: -400px;

  151.   }

  152. }

  153. 

  154. @-moz-keyframes se-animation-right-inactive {

  155.   0% {

  156.     right: 0;

  157.     opacity: 1;

  158.   }

  159.   25% {

  160.     opacity: 0;

  161.   }

  162.   50% {

  163.     right: -400px;

  164.   }

  165.   100% {

  166.     opacity: 0;

  167.     right: -400px;

  168.   }

  169. }

  170. 

  171. @-o-keyframes se-animation-right-inactive {

  172.   0% {

  173.     right: 0;

  174.     opacity: 1;

  175.   }

  176.   25% {

  177.     opacity: 0;

  178.   }

  179.   50% {

  180.     right: -400px;

  181.   }

  182.   100% {

  183.     opacity: 0;

  184.     right: -400px;

  185.   }

  186. }

  187. 

  188. @keyframes se-animation-right-inactive {

  189.   0% {

  190.     right: 0;

  191.     opacity: 1;

  192.   }

  193.   25% {

  194.     opacity: 0;

  195.   }

  196.   50% {

  197.     right: -400px;

  198.   }

  199.   100% {

  200.     opacity: 0;

  201.     right: -400px;

  202.   }

  203. }

  204. 

  205. @-webkit-keyframes se-animation-right-active {

  206.   0% {

  207.     right: -400px;

  208.     opacity: 0;

  209.   }

  210.   50% {

  211.     right: 0;

  212.   }

  213.   75% {

  214.     opacity: 1;

  215.   }

  216.   100% {

  217.     right: 0;

  218.     opacity: 1;

  219.   }

  220. }

  221. 

  222. @-moz-keyframes se-animation-right-active {

  223.   0% {

  224.     right: -400px;

  225.     opacity: 0;

  226.   }

  227.   50% {

  228.     right: 0;

  229.   }

  230.   75% {

  231.     opacity: 1;

  232.   }

  233.   100% {

  234.     right: 0;

  235.     opacity: 1;

  236.   }

  237. }

  238. 

  239. @-o-keyframes se-animation-right-active {

  240.   0% {

  241.     right: -400px;

  242.     opacity: 0;

  243.   }

  244.   50% {

  245.     right: 0;

  246.   }

  247.   75% {

  248.     opacity: 1;

  249.   }

  250.   100% {

  251.     right: 0;

  252.     opacity: 1;

  253.   }

  254. }

  255. 

  256. @keyframes se-animation-right-active {

  257.   0% {

  258.     right: -400px;

  259.     opacity: 0;

  260.   }

  261.   50% {

  262.     right: 0;

  263.   }

  264.   75% {

  265.     opacity: 1;

  266.   }

  267.   100% {

  268.     right: 0;

  269.     opacity: 1;

  270.   }

  271. }

  272. 

  273. .se-block .block-title {

  274.   margin: 5px 0;

  275. }

  276. 

  277. .se-block .block-content .se-like-container {

  278.   height: 20px;

  279.   width: 85px;

  280. }

  281. 

  282. .se-block .block-content .se-container {

  283.   width: 100%;

  284. }

  285. 

  286. .se-block .block-content .se-container .se-trigger {

  287.   display: inline-block;

  288.   width: 20px;

  289.   height: 20px;

  290.   cursor: pointer;

  291. }

  292. 

  293. .se-block .block-content .se-container .se-trigger img {

  294.   max-height: 20px;

  295. }

  296. 

  297. .se-block .block-content .se-container .se-trigger.se-disabled {

  298.   cursor: auto;

  299. }

  300. 

  301. .se-block .block-content .se-container .se-links-container {

  302.   display: inline-block;

  303.   width: -webkit-calc(100% - 35px);

  304.   width: -moz-calc(100% - 35px);

  305.   width: calc(100% - 35px);

  306.   overflow: hidden;

  307.   -webkit-box-sizing: border-box;

  308.      -moz-box-sizing: border-box;

  309.           box-sizing: border-box;

  310.   position: relative;

  311.   height: 20px;

  312. }

  313. 

  314. .se-block .block-content .se-container .se-links-container .se-links {

  315.   height: 20px;

  316.   position: absolute;

  317.   margin: 0;

  318.   padding: 0;

  319.   list-style: none;

  320.   -webkit-animation-duration: 0.75s;

  321.      -moz-animation-duration: 0.75s;

  322.        -o-animation-duration: 0.75s;

  323.           animation-duration: 0.75s;

  324.   -webkit-animation-iteration-count: 1;

  325.      -moz-animation-iteration-count: 1;

  326.        -o-animation-iteration-count: 1;

  327.           animation-iteration-count: 1;

  328.   -webkit-animation-timing-function: linear;

  329.      -moz-animation-timing-function: linear;

  330.        -o-animation-timing-function: linear;

  331.           animation-timing-function: linear;

  332.   -webkit-animation-direction: alternate;

  333.      -moz-animation-direction: alternate;

  334.        -o-animation-direction: alternate;

  335.           animation-direction: alternate;

  336.   -webkit-animation-fill-mode: forwards;

  337.      -moz-animation-fill-mode: forwards;

  338.        -o-animation-fill-mode: forwards;

  339.           animation-fill-mode: forwards;

  340. }

  341. 

  342. .se-block .block-content .se-container .se-links-container .se-links .se-link {

  343.   display: inline-block;

  344.   line-height: 0;

  345. }

  346. 

  347. .se-block .block-content .se-container .se-links-container .se-links .se-link img {

  348.   max-height: 20px;

  349. }

  350. 

  351. .se-block .block-content .se-container .se-links-container .se-links .se-link.copy:hover, .se-block .block-content .se-container .se-links-container .se-links .se-link.copy:focus {

  352.   cursor: pointer;

  353. }

  354. 

  355. .se-block.se-has-like .se-container {

  356.   width: -webkit-calc(100% - 85px);

  357.   width: -moz-calc(100% - 85px);

  358.   width: calc(100% - 85px);

  359. }

  360. 

  361. .se-block.se-align-left .block-title {

  362.   text-align: left;

  363. }

  364. 

  365. .se-block.se-align-left .block-content .se-like-container {

  366.   text-align: left;

  367.   float: left;

  368. }

  369. 

  370. .se-block.se-align-left .block-content .se-container {

  371.   float: right;

  372. }

  373. 

  374. .se-block.se-align-left .block-content .se-container .se-trigger {

  375.   float: left;

  376. }

  377. 

  378. .se-block.se-align-left .block-content .se-container .se-links-container {

  379.   float: left;

  380.   margin-left: 12px;

  381. }

  382. 

  383. .se-block.se-align-left .block-content .se-container .se-links-container .se-links {

  384.   text-align: left;

  385. }

  386. 

  387. .se-block.se-align-left .block-content .se-container .se-links-container .se-links.se-active {

  388.   -webkit-animation-name: se-animation-left-active;

  389.      -moz-animation-name: se-animation-left-active;

  390.        -o-animation-name: se-animation-left-active;

  391.           animation-name: se-animation-left-active;

  392. }

  393. 

  394. .se-block.se-align-left .block-content .se-container .se-links-container .se-links.se-inactive {

  395.   -webkit-animation-name: se-animation-left-inactive;

  396.      -moz-animation-name: se-animation-left-inactive;

  397.        -o-animation-name: se-animation-left-inactive;

  398.           animation-name: se-animation-left-inactive;

  399. }

  400. 

  401. .se-block.se-align-right .block-title {

  402.   text-align: right;

  403. }

  404. 

  405. .se-block.se-align-right .block-content .se-like-container {

  406.   text-align: right;

  407.   float: right;

  408. }

  409. 

  410. .se-block.se-align-right .block-content .se-container {

  411.   float: left;

  412. }

  413. 

  414. .se-block.se-align-right .block-content .se-container .se-trigger {

  415.   float: right;

  416. }

  417. 

  418. .se-block.se-align-right .block-content .se-container .se-links-container {

  419.   float: right;

  420.   margin-right: 12px;

  421. }

  422. 

  423. .se-block.se-align-right .block-content .se-container .se-links-container .se-links {

  424.   text-align: right;

  425. }

  426. 

  427. .se-block.se-align-right .block-content .se-container .se-links-container .se-links.se-active {

  428.   -webkit-animation-name: se-animation-right-active;

  429.      -moz-animation-name: se-animation-right-active;

  430.        -o-animation-name: se-animation-right-active;

  431.           animation-name: se-animation-right-active;

  432. }

  433. 

  434. .se-block.se-align-right .block-content .se-container .se-links-container .se-links.se-inactive {

  435.   -webkit-animation-name: se-animation-right-inactive;

  436.      -moz-animation-name: se-animation-right-inactive;

  437.        -o-animation-name: se-animation-right-inactive;

  438.           animation-name: se-animation-right-inactive;

  439. }