pastebin

Paste Search Dynamic
Recent pastes
/animations.css
  1. /* Copyright 2018 The Chromium Authors. All rights reserved.
  2.  * Use of this source code is governed by a BSD-style license that can be
  3.  * found in the LICENSE file. */
  4.  
  5. .ripple-container {
  6.   height: 100%;
  7.   left: 0;
  8.   pointer-events: none;
  9.   position: absolute;
  10.   top: 0;
  11.   width: 100%;
  12.   z-index: 100;
  13. }
  14.  
  15. .ripple-effect-mask {
  16.   height: 0;
  17.   left: 0;
  18.   overflow: hidden;
  19.   position: absolute;
  20.   top: 0;
  21.   width: 0;
  22. }
  23.  
  24. .ripple-effect {
  25.   background-color: rgba(var(--GB600-rgb), .1);
  26.   border-radius: 50%;
  27.   height: 1px;
  28.   pointer-events: none;
  29.   transition: width, height, margin, background-color 400ms 250ms;
  30.   transition-duration: 400ms;
  31.   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  32.   width: 1px;
  33. }
  34.  
  35. @media (prefers-color-scheme: dark) {
  36.   .ripple-effect {
  37.     background-color: rgba(var(--GB300-rgb), .32);
  38.   }
  39. }
  40.  
  41. button.primary .ripple-effect {
  42.   background-color: rgba(255, 255, 255, .32);
  43. }
  44.  
  45. @media (prefers-color-scheme: dark) {
  46.   button.primary .ripple-effect {
  47.     background-color: rgba(0, 0, 0, .08);
  48.   }
  49. }
  50.  
  51. button.paper {
  52.   border: none;
  53.   border-radius: 4px;
  54.   font-size: 12px;
  55.   font-weight: 500;
  56.   line-height: 1.6;
  57.   min-height: 32px;
  58.   padding: 0 16px;
  59.   position: relative;
  60.   transition-duration: 200ms;
  61.   transition-property: background-color, color, box-shadow, border;
  62.   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  63. }
  64.  
  65. button.paper:not(:disabled) {
  66.   cursor: pointer;
  67. }
  68.  
  69. button.paper:disabled {
  70.   transition: none;
  71. }
  72.  
  73. button.paper.primary {
  74.   background-color: rgb(var(--GB600-rgb));
  75.   color: white;
  76. }
  77.  
  78. @media (prefers-color-scheme: dark) {
  79.   button.paper.primary {
  80.     background-color: rgb(var(--GB300-rgb));
  81.     color: rgb(var(--GG900-rgb));
  82.   }
  83. }
  84.  
  85. button.paper.primary:disabled {
  86.   background-color: rgb(var(--GG100-rgb));
  87.   color: rgb(var(--GG600-rgb));
  88. }
  89.  
  90. @media (prefers-color-scheme: dark) {
  91.   button.paper.primary:disabled {
  92.     background-color: rgb(var(--GG800-rgb));
  93.     color: rgb(var(--GG600-rgb));
  94.   }
  95. }
  96.  
  97. button.paper.primary:hover:not(:disabled) {
  98.   background-color: rgb(41, 123, 231);
  99.   box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
  100.       0 1px 3px 1px rgba(var(--GB500-rgb), .15);
  101. }
  102.  
  103. @media (prefers-color-scheme: dark) {
  104.   button.paper.primary:hover:not(:disabled) {
  105.     background-color: rgb(133, 173, 238);
  106.   }
  107. }
  108.  
  109. button.paper.primary:active:not(:disabled) {
  110.   box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
  111.       0 3px 6px 2px rgba(var(--GB500-rgb), .15);
  112. }
  113.  
  114. @media (prefers-color-scheme: dark) {
  115.   button.paper.primary:active:not(:disabled) {
  116.     background-color: rgb(115, 160, 223);
  117.     box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
  118.         0 3px 6px 2px rgba(var(--GB500-rgb), .15);
  119.   }
  120. }
  121.  
  122. button.paper.secondary {
  123.   background-color: white;
  124.   border: 1px solid rgb(var(--GG300-rgb));
  125.   color: rgb(var(--GB600-rgb));
  126. }
  127.  
  128. @media (prefers-color-scheme: dark) {
  129.   button.paper.secondary {
  130.     background-color: transparent;
  131.     border-color: rgb(var(--GG700-rgb));
  132.     color: rgb(var(--GB300-rgb));
  133.   }
  134. }
  135.  
  136. button.paper.secondary:disabled {
  137.   border-color: rgb(var(--GG100-rgb));
  138.   color: rgb(var(--GG600-rgb));
  139. }
  140.  
  141. @media (prefers-color-scheme: dark) {
  142.   button.paper.secondary:disabled {
  143.     border-color: rgb(var(--GG800-rgb));
  144.     color: rgb(var(--GG600-rgb));
  145.   }
  146. }
  147.  
  148. button.paper.secondary:hover:not(:disabled) {
  149.   background-color: rgba(var(--GB500-rgb), .04);
  150.   border-color: rgb(var(--GB100-rgb));
  151. }
  152.  
  153. @media (prefers-color-scheme: dark) {
  154.   button.paper.secondary:hover:not(:disabled) {
  155.     background-color: rgba(var(--GB300-rgb), .04);
  156.     border-color: rgba(var(--GB300-rgb), .5);
  157.     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3),
  158.         0 1px 3px 1px rgba(0, 0, 0, .15);
  159.   }
  160. }
  161.  
  162. button.paper.secondary:active:not(:disabled) {
  163.   background-color: white;
  164.   border-color: white;
  165.   box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), .3),
  166.       0 3px 6px 2px rgba(var(--GG800-rgb), .15);
  167. }
  168.  
  169. @media (prefers-color-scheme: dark) {
  170.   button.paper.secondary:active:not(:disabled) {
  171.     background-color: rgba(var(--GB300-rgb), .08);
  172.     border-color: rgba(var(--GB300-rgb), .5);
  173.     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3),
  174.         0 3px 6px 2px rgba(0, 0, 0, .15);
  175.     }
  176. }
Parsed in 0.032 seconds