The Tor Browser / file comparison
comparison: browser/themes/shared/UITour.inc.css
browser/themes/shared/UITour.inc.css
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:7bcc5e1064d6 |
|---|---|
| 1 %if 0 | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 %endif | |
| 6 | |
| 7 /* UI Tour */ | |
| 8 | |
| 9 #UITourHighlightContainer { | |
| 10 -moz-appearance: none; | |
| 11 border: none; | |
| 12 background-color: transparent; | |
| 13 /* This is a buffer to compensate for the movement in the "wobble" effect */ | |
| 14 padding: 4px; | |
| 15 } | |
| 16 | |
| 17 #UITourHighlight { | |
| 18 background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%); | |
| 19 border-radius: 40px; | |
| 20 border: 1px solid white; | |
| 21 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity | |
| 22 on Linux without an X compositor where opacity is either 0 or 1. */ | |
| 23 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49); | |
| 24 min-height: 32px; | |
| 25 min-width: 32px; | |
| 26 } | |
| 27 | |
| 28 #UITourTooltipBody { | |
| 29 -moz-margin-end: 14px; | |
| 30 } | |
| 31 | |
| 32 #UITourTooltipBody > vbox { | |
| 33 padding-top: 4px; | |
| 34 } | |
| 35 | |
| 36 #UITourTooltipIconContainer { | |
| 37 -moz-margin-start: -16px; | |
| 38 } | |
| 39 | |
| 40 #UITourTooltipIcon { | |
| 41 width: 48px; | |
| 42 height: 48px; | |
| 43 -moz-margin-start: 28px; | |
| 44 -moz-margin-end: 28px; | |
| 45 } | |
| 46 | |
| 47 #UITourTooltipTitle, | |
| 48 #UITourTooltipDescription { | |
| 49 max-width: 20rem; | |
| 50 } | |
| 51 | |
| 52 #UITourTooltipTitle { | |
| 53 font-size: 1.45rem; | |
| 54 font-weight: bold; | |
| 55 -moz-margin-start: 0; | |
| 56 -moz-margin-end: 0; | |
| 57 margin: 0 0 9px 0; | |
| 58 } | |
| 59 | |
| 60 #UITourTooltipDescription { | |
| 61 -moz-margin-start: 0; | |
| 62 -moz-margin-end: 0; | |
| 63 font-size: 1.15rem; | |
| 64 line-height: 1.8rem; | |
| 65 margin-bottom: 0; /* Override global.css */ | |
| 66 } | |
| 67 | |
| 68 #UITourTooltipClose { | |
| 69 -moz-appearance: none; | |
| 70 border: none; | |
| 71 background-color: transparent; | |
| 72 min-width: 0; | |
| 73 -moz-margin-start: 4px; | |
| 74 margin-top: -2px; | |
| 75 } | |
| 76 | |
| 77 #UITourTooltipClose > .toolbarbutton-text { | |
| 78 display: none; | |
| 79 } | |
| 80 | |
| 81 #UITourTooltipButtons { | |
| 82 -moz-box-pack: end; | |
| 83 background-color: hsla(210,4%,10%,.07); | |
| 84 border-top: 1px solid hsla(210,4%,10%,.14); | |
| 85 margin: 24px -16px -16px; | |
| 86 padding: 2em 15px; | |
| 87 } | |
| 88 | |
| 89 #UITourTooltipButtons > button { | |
| 90 margin: 0 15px; | |
| 91 } | |
| 92 | |
| 93 #UITourTooltipButtons > button:first-child { | |
| 94 -moz-margin-start: 0; | |
| 95 } | |
| 96 | |
| 97 #UITourTooltipButtons > button[image] > .button-box > .button-icon { | |
| 98 width: 16px; | |
| 99 height: 16px; | |
| 100 -moz-margin-end: 5px; | |
| 101 } | |
| 102 | |
| 103 #UITourTooltipButtons > button .button-text { | |
| 104 font-size: 1.15rem; | |
| 105 } | |
| 106 | |
| 107 #UITourTooltipButtons > button:not(.button-link) { | |
| 108 -moz-appearance: none; | |
| 109 background-color: rgb(251,251,251); | |
| 110 border-radius: 3px; | |
| 111 border: 1px solid; | |
| 112 border-color: rgb(192,192,192); | |
| 113 color: rgb(71,71,71); | |
| 114 padding: 4px 30px; | |
| 115 transition-property: background-color, border-color; | |
| 116 transition-duration: 150ms; | |
| 117 } | |
| 118 | |
| 119 #UITourTooltipButtons > button:not(.button-link):not(:active):hover { | |
| 120 background-color: hsla(210,4%,10%,.15); | |
| 121 border-color: hsla(210,4%,10%,.15); | |
| 122 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; | |
| 123 } | |
| 124 | |
| 125 #UITourTooltipButtons > button.button-link { | |
| 126 -moz-appearance: none; | |
| 127 background: transparent; | |
| 128 border: none; | |
| 129 box-shadow: none; | |
| 130 color: rgba(0,0,0,0.35); | |
| 131 padding-left: 10px; | |
| 132 padding-right: 10px; | |
| 133 } | |
| 134 | |
| 135 #UITourTooltipButtons > button.button-link:hover { | |
| 136 color: black; | |
| 137 } | |
| 138 | |
| 139 /* The primary button gets the same color as the customize button. */ | |
| 140 #UITourTooltipButtons > button.button-primary { | |
| 141 background-color: rgb(116,191,67); | |
| 142 color: white; | |
| 143 padding-left: 30px; | |
| 144 padding-right: 30px; | |
| 145 } | |
| 146 | |
| 147 #UITourTooltipButtons > button.button-primary:not(:active):hover { | |
| 148 background-color: rgb(105,173,61); | |
| 149 } |
