browser/metro/theme/firstruncontent.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 %filter substitution
michael@0 6 %include defines.inc
michael@0 7
michael@0 8 /* Disable firstrun in some cases */
michael@0 9 #stack[startpage] .firstrun-content {
michael@0 10 display: none;
michael@0 11 }
michael@0 12
michael@0 13 @media (max-width: 900px) {
michael@0 14 .firstrun-content {
michael@0 15 display: none;
michael@0 16 }
michael@0 17 }
michael@0 18
michael@0 19 /* bg transparent pane --------------- */
michael@0 20
michael@0 21 #firstrun-bg-pane {
michael@0 22 position: absolute;
michael@0 23 background-color: rgba(0, 0, 0, .8);
michael@0 24 left: 0;
michael@0 25 right: 0;
michael@0 26 top: 0;
michael@0 27 bottom: 0;
michael@0 28 }
michael@0 29
michael@0 30 /* Got it button ---------------------- */
michael@0 31
michael@0 32 #firstrun-gotit {
michael@0 33 position: fixed;
michael@0 34 bottom: calc(@toolbar_height@ + 64px);
michael@0 35 left: 64px;
michael@0 36 }
michael@0 37
michael@0 38 #firstrun-gotit:-moz-locale-dir(rtl) {
michael@0 39 left: auto;
michael@0 40 right: 64px;
michael@0 41 }
michael@0 42
michael@0 43 .firstrun-button {
michael@0 44 padding: 15px 45px;
michael@0 45 font-family: "Segoe UI", sans-serif;
michael@0 46 font-size: 25px;
michael@0 47 background-image: -moz-linear-gradient(0deg, rgb(255, 128, 0) 0%, rgb(255, 149, 0) 100%);
michael@0 48 border: 0;
michael@0 49 color: #FFF;
michael@0 50 }
michael@0 51
michael@0 52 /* Instructions arrows ---------------- */
michael@0 53
michael@0 54 .instruction-arrow {
michael@0 55 width: 76px;
michael@0 56 height: 76px;
michael@0 57 background-repeat: no-repeat;
michael@0 58 }
michael@0 59
michael@0 60 .instruction-arrow.arrow-top,
michael@0 61 .instruction-arrow.arrow-down,
michael@0 62 .instruction-arrow.arrow-down-reverse {
michael@0 63 background-image: url("chrome://browser/skin/images/arrow-top-light.png");
michael@0 64 }
michael@0 65
michael@0 66 .instruction-arrow.arrow-down,
michael@0 67 .instruction-arrow.arrow-down-reverse:-moz-locale-dir(rtl) {
michael@0 68 transform: rotate(180deg);
michael@0 69 }
michael@0 70
michael@0 71 .instruction-arrow.arrow-down-reverse,
michael@0 72 .instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
michael@0 73 transform: rotate(180deg) scaleX(-1);
michael@0 74 }
michael@0 75
michael@0 76 .instruction-arrow.arrow-back,
michael@0 77 .instruction-arrow.arrow-forward {
michael@0 78 background-image: url("chrome://browser/skin/images/arrow-left-light.png");
michael@0 79 }
michael@0 80
michael@0 81 .instruction-arrow.arrow-forward,
michael@0 82 .instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
michael@0 83 transform: rotate(180deg) scaleY(-1);
michael@0 84 }
michael@0 85
michael@0 86 .instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
michael@0 87 transform: none;
michael@0 88 }
michael@0 89
michael@0 90 /* Instructions text ------------------ */
michael@0 91
michael@0 92 .instruction-content-container {
michael@0 93 width: 380px;
michael@0 94 vertical-align: bottom;
michael@0 95 }
michael@0 96
michael@0 97 #instruction-back .instruction-content-container,
michael@0 98 #instruction-plus .instruction-content-container {
michael@0 99 width: 320px;
michael@0 100 }
michael@0 101
michael@0 102 .instruction-label {
michael@0 103 font-size: 18px;
michael@0 104 color: #BBB;
michael@0 105 line-height: 22px;
michael@0 106 }
michael@0 107
michael@0 108 #instruction-tabs {
michael@0 109 position: fixed;
michael@0 110 top: 10px;
michael@0 111 left: 50%;
michael@0 112 transform: translateX(-50%);
michael@0 113 }
michael@0 114
michael@0 115 #instruction-back {
michael@0 116 position: fixed;
michael@0 117 top: 50%;
michael@0 118 left: 100px;
michael@0 119 }
michael@0 120
michael@0 121 #instruction-back:-moz-locale-dir(rtl) {
michael@0 122 left: auto;
michael@0 123 right: 100px;
michael@0 124 }
michael@0 125
michael@0 126 #instruction-plus {
michael@0 127 position: fixed;
michael@0 128 top: 50%;
michael@0 129 right: 100px;
michael@0 130 }
michael@0 131
michael@0 132 #instruction-plus:-moz-locale-dir(rtl) {
michael@0 133 right: auto;
michael@0 134 left: 100px;
michael@0 135 }
michael@0 136
michael@0 137 #instruction-star {
michael@0 138 position: fixed;
michael@0 139 bottom: @toolbar_height@;
michael@0 140 right: 145px;
michael@0 141 }
michael@0 142
michael@0 143 #instruction-star:-moz-locale-dir(rtl) {
michael@0 144 right: auto;
michael@0 145 left: 145px;
michael@0 146 }
michael@0 147
michael@0 148 #instruction-star .instruction-label {
michael@0 149 max-width: 250px;
michael@0 150 }
michael@0 151
michael@0 152 #instruction-star .instruction-content-container:-moz-locale-dir(rtl) {
michael@0 153 -moz-box-align: start;
michael@0 154 vertical-align: top;
michael@0 155 }
michael@0 156
michael@0 157 #instruction-pin {
michael@0 158 position: fixed;
michael@0 159 bottom: @toolbar_height@;
michael@0 160 right: 10px;
michael@0 161 }
michael@0 162
michael@0 163 #instruction-pin:-moz-locale-dir(rtl) {
michael@0 164 right: auto;
michael@0 165 left: 10px;
michael@0 166 }
michael@0 167
michael@0 168 #instruction-pin .instruction-label {
michael@0 169 max-width: 250px;
michael@0 170 margin-bottom: 20px;
michael@0 171 }
michael@0 172
michael@0 173 #instruction-pin .instruction-arrow {
michael@0 174 -moz-margin-end: 65px;
michael@0 175 }
michael@0 176
michael@0 177 /* Higher resolution images ---------------------- */
michael@0 178
michael@0 179 @media (min-resolution: @min_res_140pc@) {
michael@0 180 /* Load 140% image when scaled by 140% */
michael@0 181 .instruction-arrow.arrow-top,
michael@0 182 .instruction-arrow.arrow-down,
michael@0 183 .instruction-arrow.arrow-down-reverse {
michael@0 184 background-image: url("chrome://browser/skin/images/arrow-top-light@1.4x.png");
michael@0 185 }
michael@0 186
michael@0 187 .instruction-arrow.arrow-back,
michael@0 188 .instruction-arrow.arrow-forward {
michael@0 189 background-image: url("chrome://browser/skin/images/arrow-left-light@1.4x.png");
michael@0 190 }
michael@0 191 }
michael@0 192
michael@0 193 @media (min-resolution: @min_res_180pc@) {
michael@0 194 /* Load 180% image when scaled by 180% */
michael@0 195 .instruction-arrow.arrow-top,
michael@0 196 .instruction-arrow.arrow-down,
michael@0 197 .instruction-arrow.arrow-down-reverse {
michael@0 198 background-image: url("chrome://browser/skin/images/arrow-top-light@1.8x.png");
michael@0 199 }
michael@0 200
michael@0 201 .instruction-arrow.arrow-back,
michael@0 202 .instruction-arrow.arrow-forward {
michael@0 203 background-image: url("chrome://browser/skin/images/arrow-left-light@1.8x.png");
michael@0 204 }
michael@0 205 }

mercurial