pastebin

Paste Search Dynamic
Recent pastes
/single.css
  1. /* Copyright 2015 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. html {
  6.   /* Material Design constants */
  7.   --md-edit-menu-size: 20px;
  8.   --md-fallback-letter-size: 16px;
  9.   --md-favicon-size: 32px;
  10.   --md-icon-margin-bottom: 16px;
  11.   --md-icon-size: 48px;
  12.   --md-max-tiles-row: 5;
  13.   --md-menu-margin-side: 2px;
  14.   --md-menu-margin-top: 4px;
  15.   --md-menu-size: 12px;
  16.   --md-tile-margin: 16px;
  17.   --md-tile-padding-top: 16px;
  18.   --md-tile-size: 112px;
  19.   --md-title-font-size: 12px;
  20.   --md-title-height: 24px;
  21.   --md-title-max-height: 28px;
  22.  
  23.   /* May be overridden by themes (on the body element). */
  24.   --icon-background-color: rgb(var(--GG100-rgb));
  25.   --tile-title-color: rgb(var(--GG800-rgb));
  26. }
  27.  
  28. body {
  29.   background: none transparent;
  30.   color: var(--tile-title-color);
  31.   margin: 0;
  32.   overflow: hidden;
  33.   padding: 0;
  34.   user-select: none;
  35. }
  36.  
  37. a {
  38.   display: block;
  39. }
  40.  
  41. a,
  42. a:active,
  43. a:hover,
  44. a:visited {
  45.   text-decoration: none;
  46. }
  47.  
  48. #most-visited {
  49.   margin-top: 10px;
  50.   text-align: -webkit-center;
  51.   user-select: none;
  52.   width: 100%;
  53. }
  54.  
  55. #mv-tiles,
  56. .mv-tiles-old {
  57.   font-size: 0;
  58.   opacity: 0;
  59.   position: relative;
  60.   transition: opacity 300ms;
  61.   user-select: none;
  62. }
  63.  
  64. .mv-tiles-old {
  65.   left: 0;
  66.   margin: auto;
  67.   position: absolute;
  68.   right: 0;
  69. }
  70.  
  71. .mouse-navigation {
  72.   outline: none;
  73. }
  74.  
  75. .grid-tile-container {
  76.   position: absolute;
  77.   transition: transform 300ms ease-in-out;
  78. }
  79.  
  80. .grid-tile {
  81.   transition: transform 300ms ease-in-out;
  82. }
  83.  
  84. /* Prevent transitions on the held tile in order for it to smoothly follow the
  85.  * mouse. */
  86. .reorder .grid-tile {
  87.   transition-duration: 0s;
  88. }
  89.  
  90. .reorder {
  91.   z-index: 10;  /* Ensure the held tile is visible. */
  92. }
  93.  
  94. .md-tile {
  95.   border-radius: 4px;
  96.   box-sizing: border-box;
  97.   color: rgb(var(--tile-title-color));
  98.   cursor: pointer;
  99.   height: var(--md-tile-size);
  100.   margin-bottom: var(--md-tile-margin);
  101.   opacity: 1;
  102.   padding-top: var(--md-tile-padding-top);
  103.   position: relative;
  104.   transition-property:
  105.       background, background-color, border-color, box-shadow, opacity, filter;
  106.   width: var(--md-tile-size);
  107. }
  108.  
  109. .md-empty-tile {
  110.   display: none;
  111. }
  112.  
  113. body:not(.reordering) .md-tile:hover,
  114. .reorder .md-tile {
  115.   background-color: rgba(var(--GG900-rgb), .06);
  116. }
  117.  
  118. @media (prefers-color-scheme: dark) {
  119.   body:not(.reordering) .md-tile:hover,
  120.   .reorder .md-tile {
  121.     background-color: rgba(255, 255, 255, .1);
  122.   }
  123. }
  124.  
  125. body.dark-theme:not(.reordering) .md-tile:hover,
  126. body.dark-theme .reorder .md-tile {
  127.   background-color: rgba(255, 255, 255, .1);
  128. }
  129.  
  130. body:not(.reordering) .md-tile:hover .md-menu {
  131.   opacity: 1;
  132.   transition-delay: 500ms;
  133. }
  134.  
  135. body.dark-theme:not(.reordering) .md-tile:active + .md-menu::after {
  136.   background-color: rgb(var(--GG400-rgb));
  137.   transition-delay: 0ms;
  138. }
  139.  
  140. .blacklisted {
  141.   margin: 0;
  142.   padding: 0;
  143.   transform: scale(0, 0);
  144.   transition-duration: 200ms;
  145.   transition-property: transform, box-shadow, margin, opacity, padding, width;
  146.   width: 0;
  147. }
  148.  
  149. .md-tile-inner {
  150.   align-items: center;
  151.   display: flex;
  152.   flex-flow: column nowrap;
  153.   height: 100%;
  154.   position: relative;
  155.   width: 100%;
  156.   z-index: -1;
  157. }
  158.  
  159. .md-icon {
  160.   align-items: center;
  161.   background-color: var(--icon-background-color);
  162.   border-radius: 50%;
  163.   display: flex;
  164.   height: var(--md-icon-size);
  165.   justify-content: center;
  166.   margin-bottom: var(--md-icon-margin-bottom);
  167.   width: var(--md-icon-size);
  168. }
  169.  
  170. .md-add-icon {
  171.   background-image: url(chrome-search://most-visited/add_link.svg);
  172.   background-position: center;
  173.   background-repeat: no-repeat;
  174. }
  175.  
  176. .use-white-add-icon .md-add-icon {
  177.   background-image: url(chrome-search://most-visited/add_link_white.svg);
  178. }
  179.  
  180. .md-fallback-letter {
  181.   background-color: rgb(var(--GG600-rgb));
  182.   border-radius: 50%;
  183.   color: white;
  184.   font-size: var(--md-fallback-letter-size);
  185.   height: var(--md-favicon-size);
  186.   line-height: var(--md-favicon-size);
  187.   text-align: center;
  188.   width: var(--md-favicon-size);
  189. }
  190.  
  191. .win .md-fallback-letter {
  192.   font-weight: 600;
  193. }
  194.  
  195. .md-title {
  196.   font-size: var(--md-title-font-size);
  197.   font-weight: 500;
  198.   max-height: var(--md-title-max-height);
  199.   overflow: hidden;
  200.   text-align: center;
  201.   text-overflow: ellipsis;
  202.   white-space: nowrap;
  203.   width: 88px;
  204. }
  205.  
  206. .md-title span {
  207.   line-height: var(--md-title-height);
  208. }
  209.  
  210. /* Font weight on Mac and ChromeOS looks heavier on default background and
  211.  * needs to be reduced. */
  212. body.mac-chromeos .md-title {
  213.   font-weight: 400;
  214. }
  215.  
  216. /* Apply when a custom background is set. */
  217. body.custom-background .md-title {
  218.   filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35));
  219. }
  220.  
  221. /* Apply only when a theme with image is installed. */
  222. body.use-title-container .md-title {
  223.   background-color: white;
  224.   /* Necessary for a "pill" shape. Using 50% creates an oval. */
  225.   border-radius: 500px;
  226.   color: rgb(var(--GG800-rgb));
  227.   filter: unset;
  228.   padding: 0 8px;
  229. }
  230.  
  231. .md-menu {
  232.   background-color: transparent;
  233.   border: none;
  234.   cursor: pointer;
  235.   height: var(--md-menu-size);
  236.   margin: var(--md-menu-margin-top) var(--md-menu-margin-side);
  237.   opacity: 0;
  238.   position: absolute;
  239.   right: 0;
  240.   top: 0;
  241.   width: var(--md-menu-size);
  242. }
  243.  
  244. html[dir=rtl] .md-menu {
  245.   left: 0;
  246.   right: auto;
  247. }
  248.  
  249. body:not(.reordering) .md-menu:active,
  250. body:not(.reordering) .md-menu:focus:not(.mouse-navigation) {
  251.   opacity: 1;
  252. }
  253.  
  254. /* We use ::after without content to provide the masked X element. */
  255. .md-menu::after {
  256.   --mask-width: calc(var(--md-menu-size) - 2);
  257.   /* TODO(crbug.com/1012065): Use SVG for the "X" icon. */
  258.   -webkit-mask-image: -webkit-image-set(
  259.       url(chrome-search://most-visited/dont_show.png) 1x,
  260.       url(chrome-search://most-visited/dont_show_2x.png) 2x);
  261.   -webkit-mask-repeat: no-repeat;
  262.   -webkit-mask-size: var(--mask-width);
  263.   background-color: rgb(var(--GG600-rgb));
  264.   content: '';
  265.   display: block;
  266.   height: var(--md-menu-size);
  267.   left: 0;
  268.   position: absolute;
  269.   top: 0;
  270.   width: var(--md-menu-size);
  271. }
  272.  
  273. @media (prefers-color-scheme: dark) {
  274.   .md-menu::after {
  275.     background-color: rgb(var(--GG200-rgb));
  276.   }
  277. }
  278.  
  279. .md-edit-menu {
  280.   height: var(--md-edit-menu-size);
  281.   width: var(--md-edit-menu-size);
  282. }
  283.  
  284. .md-edit-menu::after {
  285.   --mask-width: var(--md-edit-menu-size);
  286.   -webkit-mask-image: url(chrome-search://most-visited/edit_menu.svg);
  287.   height: var(--md-edit-menu-size);
  288.   width: var(--md-edit-menu-size);
  289. }
  290.  
  291. body:not(.reordering) .md-menu:hover::after,
  292. body:not(.reordering) .md-menu:focus::after {
  293.   background-color: rgb(var(--GG700-rgb));
  294. }
  295.  
  296. @media (prefers-color-scheme: dark) {
  297.   body:not(.reordering) .md-menu:hover::after,
  298.   body:not(.reordering) .md-menu:focus::after {
  299.     background-color: rgb(var(--GG400-rgb));
  300.   }
  301. }
  302.  
  303. body.dark-theme .md-tile .md-menu::after,
  304. body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after {
  305.   background-color: white;
  306. }
  307.  
  308. @media (prefers-color-scheme: dark) {
  309.   body.dark-theme .md-tile .md-menu::after,
  310.   body.dark-theme:not(.reordering)
  311.       .md-menu:focus:not(.mouse-navigation)::after {
  312.     background-color: rgb(var(--GG200-rgb));
  313.   }
  314. }
  315.  
  316. body.dark-theme:not(.reordering) .md-menu:active::after,
  317. body.dark-theme:not(.reordering) .md-menu:hover::after,
  318. body.dark-theme:not(.reordering) .md-menu.mouse-navigation:focus::after {
  319.   background-color: rgb(var(--GG300-rgb));
  320. }
  321.  
  322. @media (prefers-color-scheme: dark) {
  323.   body.dark-theme:not(.reordering) .md-menu:active::after,
  324.   body.dark-theme:not(.reordering) .md-menu:hover::after,
  325.   body.dark-theme:not(.reordering) .md-menu.mouse-navigation:focus::after {
  326.     background-color: rgb(var(--GG400-rgb));
  327.   }
  328. }
Parsed in 0.060 seconds