tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

UIButton.css (2157B)


      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 /* these styles com from Photon. Keep in mind that the "default" style is not used
      6   in panels, and we should use the "micro" instead for default, stand-alone buttons. */
      7 
      8 :root.theme-light {
      9  --button-text-color: var(--grey-90);
     10  --button-text-hover-color: var(--grey-90);
     11  --button-text-pressed-color: var(--grey-90);
     12  --button-background-color: var(--grey-90-a10);
     13  --button-background-hover-color: var(--grey-90-a20);
     14  --button-background-pressed-color: var(--grey-90-a30);
     15 }
     16 
     17 :root.theme-dark {
     18  --button-text-color: var(--grey-40);
     19  --button-text-hover-color: var(--grey-30);
     20  --button-text-pressed-color: var(--grey-30);
     21  --button-background-color: var(--grey-10-a20);
     22  --button-background-hover-color: var(--grey-10-a25);
     23  --button-background-pressed-color: var(--grey-10-a30);
     24 }
     25 
     26 .ui-button {
     27  appearance: none;
     28  transition: background-color 0.05s ease-in-out;
     29 
     30  margin: 0;
     31  height: calc(var(--base-unit) * 6);
     32  padding-inline-start: calc(2 * var(--base-unit));
     33  padding-inline-end: calc(2 * var(--base-unit));
     34  border: none;
     35  border-radius: calc(var(--base-unit) / 2);
     36 
     37  color: var(--button-text-color);
     38  background: var(--button-background-color);
     39  font-size: var(--caption-10-font-size);
     40 }
     41 
     42 .ui-button:-moz-focusring {
     43  outline: none;
     44 }
     45 
     46 .ui-button:enabled:hover {
     47  background: var(--button-background-hover-color);
     48  color: var(--button-text-hover-color);
     49 }
     50 
     51 .ui-button:enabled:active {
     52  background: var(--button-background-pressed-color);
     53  color: var(--button-text-pressed-color);
     54 }
     55 
     56 .ui-button:focus {
     57  box-shadow:
     58    0 0 0 1px var(--blue-50) inset,
     59    0 0 0 1px var(--blue-50),
     60    0 0 0 4px var(--blue-50-a30);
     61 }
     62 
     63 .ui-button:disabled {
     64  opacity: 0.4;
     65 }
     66 
     67 /* Note: this "micro" variant here is not the same as the "micro" variant
     68         in Photon docs (since we are using that one for our default size) */
     69 .ui-button--micro {
     70  height: auto;
     71  padding: calc(var(--base-unit) * 0.5) var(--base-unit);
     72 }