tor-browser

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

NotificationBox.css (3227B)

      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 /* Layout */
      6 
      7 .notificationbox .notificationInner {
      8  display: flex;
      9  flex-direction: row;
     10  align-items: center;
     11 }
     12 
     13 .notificationInner .messageText {
     14  flex: 1;
     15  width: 0;
     16  overflow: hidden;
     17  text-overflow: ellipsis;
     18  white-space: nowrap;
     19 }
     20 
     21 .notificationInner .messageImage,
     22 .notificationbox .notificationButton,
     23 .notificationbox .messageCloseButton {
     24  flex: none;
     25 }
     26 
     27 .notificationbox .notificationInner:dir(rtl) {
     28  flex-direction: row-reverse;
     29 }
     30 
     31 /* Style */
     32 
     33 .notificationbox .notification {
     34  color: var(--theme-toolbar-color);
     35  background-color: var(--theme-body-background);
     36  text-shadow: none;
     37  border-color: var(--theme-splitter-color);
     38  border-style: solid;
     39  border-width: 0;
     40 }
     41 
     42 .notificationbox.border-top .notification {
     43  border-top-width: 1px;
     44 }
     45 
     46 .notificationbox.border-bottom .notification {
     47  border-bottom-width: 1px;
     48 }
     49 
     50 .notificationbox .notification[data-type="info"] {
     51  color: -moz-DialogText;
     52  background-color: -moz-Dialog;
     53 }
     54 
     55 .notificationbox .notification[data-type="new"] {
     56  color: var(--theme-contrast-color);
     57  background-color: var(--theme-body-alternate-emphasized-background);
     58 }
     59 
     60 /**
     61 * Remove button borders for notifications highlighting New features.
     62 */
     63 .notification[data-type="new"] .notificationButton {
     64  border-radius: 2px;
     65  border-width: 0;
     66  padding: 4px;
     67 }
     68 
     69 .notificationbox .notification[data-type="critical"] {
     70  color: white;
     71  color: var(--theme-text-color-error);
     72  background-color: var(--theme-toolbar-error-background);
     73  padding: 5px 0;
     74 }
     75 
     76 .notificationbox .messageImage {
     77  -moz-context-properties: fill;
     78  fill: currentColor;
     79  background-size: 16px;
     80  width: 16px;
     81  height: 16px;
     82  margin: 6px;
     83 }
     84 
     85 /* Default icons for notifications */
     86 
     87 .notificationbox .messageImage[data-type="info"] {
     88  background-image: url("chrome://devtools/skin/images/info.svg");
     89 }
     90 
     91 .notificationbox .messageImage[data-type="new"] {
     92  background-image: url("chrome://devtools/skin/images/whatsnew.svg");
     93  fill: var(--theme-highlight-blue);
     94 }
     95 
     96 .notificationbox .messageImage[data-type="warning"] {
     97  background-image: url("chrome://devtools/skin/images/alert.svg");
     98  /* Keep the icon colored to make it more eye-catching */
     99  fill: #ffbf00;
    100 }
    101 
    102 .notificationbox .messageImage[data-type="critical"] {
    103  background-image: url("chrome://devtools/skin/images/error.svg");
    104 }
    105 
    106 /* Close button */
    107 
    108 .notificationbox .messageCloseButton {
    109  width: 24px;
    110  height: 24px;
    111  margin: 2px 4px;
    112  background-image: url("chrome://devtools/skin/images/close.svg");
    113  background-position: center;
    114  background-color: transparent;
    115  background-repeat: no-repeat;
    116  border-radius: 2px;
    117  border-width: 0;
    118  -moz-context-properties: fill;
    119  fill: var(--theme-icon-color);
    120 }
    121 
    122 .notificationbox .messageCloseButton:hover {
    123  background-color: var(--theme-button-active-background);
    124 }
    125 
    126 .notificationbox .messageCloseButton:active {
    127  background-color: rgba(170, 170, 170, 0.4); /* --toolbar-tab-hover-active */
    128 }
    129 
    130 .notificationbox.wrapping .notificationInner .messageText {
    131  white-space: normal;
    132 }