The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/responsivedesign.inc.css
browser/themes/shared/devtools/responsivedesign.inc.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:5ff1388647b2 |
|---|---|
| 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 /* Responsive Mode */ | |
| 8 | |
| 9 .browserContainer[responsivemode] { | |
| 10 background: #222 url("chrome://browser/skin/devtools/responsive-background.png"); | |
| 11 padding: 0 20px 20px 20px; | |
| 12 } | |
| 13 | |
| 14 .browserStack[responsivemode] { | |
| 15 box-shadow: 0 0 7px black; | |
| 16 } | |
| 17 | |
| 18 .devtools-responsiveui-toolbar { | |
| 19 -moz-appearance: none; | |
| 20 background: transparent; | |
| 21 /* text color is textColor from dark theme, since no theme is applied to | |
| 22 * the responsive toolbar. | |
| 23 */ | |
| 24 color: hsl(210,30%,85%); | |
| 25 margin: 10px 0; | |
| 26 padding: 0; | |
| 27 box-shadow: none; | |
| 28 border-bottom-width: 0; | |
| 29 } | |
| 30 | |
| 31 .devtools-responsiveui-menulist, | |
| 32 .devtools-responsiveui-toolbarbutton { | |
| 33 -moz-appearance: none; | |
| 34 -moz-box-align: center; | |
| 35 min-width: 32px; | |
| 36 min-height: 22px; | |
| 37 text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); | |
| 38 border: 1px solid hsla(210,8%,5%,.45); | |
| 39 border-radius: 0; | |
| 40 background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box; | |
| 41 box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15); | |
| 42 margin: 0 3px; | |
| 43 color: inherit; | |
| 44 } | |
| 45 | |
| 46 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button { | |
| 47 -moz-box-orient: horizontal; | |
| 48 } | |
| 49 | |
| 50 .devtools-responsiveui-menulist:-moz-focusring, | |
| 51 .devtools-responsiveui-toolbarbutton:-moz-focusring { | |
| 52 outline: 1px dotted hsla(210,30%,85%,0.7); | |
| 53 outline-offset: -4px; | |
| 54 } | |
| 55 | |
| 56 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text { | |
| 57 display: none; | |
| 58 } | |
| 59 | |
| 60 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active { | |
| 61 border-color: hsla(210,8%,5%,.6); | |
| 62 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3)); | |
| 63 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); | |
| 64 } | |
| 65 | |
| 66 .devtools-responsiveui-menulist[open=true], | |
| 67 .devtools-responsiveui-toolbarbutton[open=true], | |
| 68 .devtools-responsiveui-toolbarbutton[checked=true] { | |
| 69 border-color: hsla(210,8%,5%,.6) !important; | |
| 70 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); | |
| 71 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); | |
| 72 } | |
| 73 | |
| 74 .devtools-responsiveui-toolbarbutton[checked=true] { | |
| 75 color: hsl(208,100%,60%); | |
| 76 } | |
| 77 | |
| 78 .devtools-responsiveui-toolbarbutton[checked=true]:hover { | |
| 79 background-color: transparent !important; | |
| 80 } | |
| 81 | |
| 82 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active { | |
| 83 background-color: hsla(210,8%,5%,.2) !important; | |
| 84 } | |
| 85 | |
| 86 .devtools-responsiveui-menulist > .menulist-label-box { | |
| 87 text-align: center; | |
| 88 } | |
| 89 | |
| 90 .devtools-responsiveui-menulist > .menulist-dropmarker { | |
| 91 -moz-appearance: none; | |
| 92 display: -moz-box; | |
| 93 background-color: transparent; | |
| 94 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); | |
| 95 -moz-box-align: center; | |
| 96 border-width: 0; | |
| 97 min-width: 16px; | |
| 98 } | |
| 99 | |
| 100 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { | |
| 101 -moz-appearance: none; | |
| 102 color: inherit; | |
| 103 border-width: 0; | |
| 104 -moz-border-end: 1px solid hsla(210,8%,5%,.45); | |
| 105 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15); | |
| 106 } | |
| 107 | |
| 108 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { | |
| 109 box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15); | |
| 110 } | |
| 111 | |
| 112 .devtools-responsiveui-toolbarbutton[type=menu-button] { | |
| 113 padding: 0 1px; | |
| 114 -moz-box-align: stretch; | |
| 115 } | |
| 116 | |
| 117 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, | |
| 118 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { | |
| 119 -moz-appearance: none !important; | |
| 120 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); | |
| 121 -moz-box-align: center; | |
| 122 padding: 0 3px; | |
| 123 } | |
| 124 | |
| 125 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child, | |
| 126 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child { | |
| 127 margin-left: 0; | |
| 128 } | |
| 129 | |
| 130 .devtools-responsiveui-close { | |
| 131 list-style-image: url("chrome://browser/skin/devtools/close.png"); | |
| 132 } | |
| 133 | |
| 134 .devtools-responsiveui-rotate { | |
| 135 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); | |
| 136 } | |
| 137 | |
| 138 .devtools-responsiveui-touch { | |
| 139 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png"); | |
| 140 -moz-image-region: rect(0px,16px,16px,0px); | |
| 141 } | |
| 142 | |
| 143 .devtools-responsiveui-touch[checked] { | |
| 144 -moz-image-region: rect(0px,32px,16px,16px); | |
| 145 } | |
| 146 | |
| 147 .devtools-responsiveui-screenshot { | |
| 148 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); | |
| 149 } | |
| 150 | |
| 151 .devtools-responsiveui-resizebarV { | |
| 152 width: 7px; | |
| 153 height: 24px; | |
| 154 cursor: ew-resize; | |
| 155 transform: translate(12px, -12px); | |
| 156 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png"); | |
| 157 } | |
| 158 | |
| 159 .devtools-responsiveui-resizebarH { | |
| 160 width: 24px; | |
| 161 height: 7px; | |
| 162 cursor: ns-resize; | |
| 163 transform: translate(-12px, 12px); | |
| 164 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png"); | |
| 165 } | |
| 166 | |
| 167 .devtools-responsiveui-resizehandle { | |
| 168 width: 16px; | |
| 169 height: 16px; | |
| 170 cursor: se-resize; | |
| 171 transform: translate(12px, 12px); | |
| 172 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png"); | |
| 173 } |
