browser/themes/shared/UITour.css

   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 @namespace html url("http://www.w3.org/1999/xhtml");
   6
   7 /* UI Tour */
   8
   9 #UITourHighlightContainer {
  10   appearance: none;
  11
  12   /* Resets the native styles in windows and macOS */
  13   border: none;
  14   background-color: transparent;
  15   -moz-window-shadow: none;
  16
  17   --panel-border-color: transparent;
  18   --panel-background: transparent;
  19   /* This is a buffer to compensate for the movement in the "wobble" effect,
  20      and for the box-shadow of #UITourHighlight. */
  21   --panel-padding: 4px;
  22   /* Compensate the displacement caused by padding. */
  23   margin: -4px;
  24 }
  25
  26 #UITourHighlight {
  27   background-color: rgba(0, 200, 215, 0.3);
  28   min-height: 24px;
  29   min-width: 24px;
  30 }
  31
  32 #UITourHighlight.rounded-highlight {
  33   border-radius: 4px;
  34 }
  35
  36 #UITourTooltipBody {
  37   align-items: flex-start;
  38 }
  39
  40 #UITourTooltipTitleContainer {
  41   align-items: flex-start;
  42   margin-bottom: 10px;
  43 }
  44
  45 #UITourTooltipIcon {
  46   width: 48px;
  47   height: 48px;
  48   margin-inline-end: 10px;
  49 }
  50
  51 #UITourTooltipTitle,
  52 #UITourTooltipDescription {
  53   max-width: 20rem;
  54 }
  55
  56 #UITourTooltipTitle {
  57   font-size: 1.45rem;
  58   font-weight: bold;
  59   margin: 0;
  60 }
  61
  62 #UITourTooltipDescription {
  63   margin-inline: 0;
  64   font-size: 1.15rem;
  65   line-height: 1.8rem;
  66   margin-bottom: 0; /* Override global.css */
  67 }
  68
  69 #UITourTooltipClose {
  70   position: relative;
  71   appearance: none;
  72   border: none;
  73   background-color: transparent;
  74   min-width: 0;
  75   margin-inline-start: 4px;
  76   margin-top: -2px;
  77 }
  78
  79 #UITourTooltipClose > .toolbarbutton-text {
  80   display: none;
  81 }
  82
  83 #UITourTooltipButtons {
  84   justify-content: flex-end;
  85   background-color: var(--arrowpanel-dimmed);
  86   border-top: 1px solid var(--panel-separator-color);
  87   margin: 10px -16px -16px;
  88   padding: 16px;
  89 }
  90
  91 #UITourTooltipButtons > label,
  92 #UITourTooltipButtons > button {
  93   margin: 0 15px;
  94 }
  95
  96 #UITourTooltipButtons > label:first-child,
  97 #UITourTooltipButtons > button:first-child {
  98   margin-inline-start: 0;
  99 }
 100
 101 #UITourTooltipButtons > label:last-child,
 102 #UITourTooltipButtons > button:last-child {
 103   margin-inline-end: 0;
 104 }
 105
 106 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
 107   width: 16px;
 108   height: 16px;
 109   margin-inline-end: 5px;
 110 }
 111
 112 #UITourTooltipButtons > label,
 113 #UITourTooltipButtons > button .button-text {
 114   font-size: 1.15rem;
 115 }
 116
 117 #UITourTooltipButtons > button:not(.button-link) {
 118   appearance: none;
 119   background-color: rgb(251,251,251);
 120   border-radius: 3px;
 121   border: 1px solid;
 122   border-color: rgb(192,192,192);
 123   color: rgb(71,71,71);
 124   padding: 4px 30px;
 125   transition-property: background-color, border-color;
 126   transition-duration: 150ms;
 127 }
 128
 129 #UITourTooltipButtons > button:not(.button-link, :active):hover {
 130   background-color: hsla(210,4%,10%,.15);
 131   border-color: hsla(210,4%,10%,.15);
 132   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
 133 }
 134
 135 #UITourTooltipButtons > label,
 136 #UITourTooltipButtons > button.button-link:not(:hover) {
 137   appearance: none;
 138   background: transparent;
 139   border: none;
 140   box-shadow: none;
 141   color: var(--panel-disabled-color);
 142   padding-inline: 10px;
 143 }
 144
 145 /* The primary button gets the same color as the customize button. */
 146 #UITourTooltipButtons > button.button-primary {
 147   background-color: rgb(116,191,67);
 148   color: white;
 149   padding-inline: 30px;
 150 }
 151
 152 #UITourTooltipButtons > button.button-primary:not(:active):hover {
 153   background-color: rgb(105,173,61);
 154 }