tor-browser

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

Message.css (2372B)

      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 .message--level-error {
      6  --message-background-color: var(--error-background);
      7  --message-border-color: var(--error-border);
      8  --message-color: var(--error-text);
      9  --message-icon-color: var(--error-icon);
     10 }
     11 
     12 .message--level-info {
     13  --message-background-color: var(--grey-20);
     14  --message-border-color: transparent;
     15  --message-color: var(--grey-90);
     16  --message-icon-color: var(--grey-90);
     17 }
     18 
     19 .message--level-warning {
     20  --message-background-color: var(--warning-background);
     21  --message-border-color: var(--warning-border);
     22  --message-color: var(--warning-text);
     23  --message-icon-color: var(--warning-icon);
     24 }
     25 
     26 /*
     27 * Layout of the message
     28 *
     29 *  +--------+-----------------+----------+
     30 *  | Icon   | Message content | closing  |
     31 *  |        | (several lines) | button   |
     32 *  |        | (     ...     ) |(optional)|
     33 *  +--------+-----------------+----------+
     34 */
     35 .message {
     36  background-color: var(--message-background-color);
     37  border: 1px solid var(--message-border-color);
     38  border-radius: var(--border-radius-small);
     39  color: var(--message-color);
     40  display: grid;
     41  grid-column-gap: var(--base-unit);
     42  grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
     43  grid-template-areas: "icon body button";
     44  margin: calc(var(--base-unit) * 2) 0;
     45  padding: var(--base-unit);
     46  -moz-context-properties: fill;
     47  /* Messages always have a background color that is suited for light scheme, so force
     48     the color scheme to avoid contrast issues on other elements (e.g. links) */
     49  color-scheme: light;
     50 }
     51 
     52 .message__icon {
     53  margin: var(--base-unit);
     54  fill: var(--message-icon-color);
     55  grid-area: icon;
     56 }
     57 
     58 .message__body {
     59  align-self: center;
     60  font-size: var(--message-font-size);
     61  font-weight: normal;
     62  grid-area: body;
     63  line-height: 1.6;
     64 }
     65 
     66 .message__button {
     67  grid-area: button;
     68  fill: var(--message-icon-color);
     69 }
     70 
     71 .message__button:hover {
     72  /* reverse colors with icon when hover state */
     73  background-color: var(--message-icon-color);
     74  fill: var(--message-background-color);
     75 }
     76 
     77 .message__button:active {
     78  /* reverse colors with text when active state */
     79  background-color: var(--message-color);
     80  fill: var(--message-background-color);
     81 }