1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/responsivedesign.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,173 @@
1.4 +%if 0
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +%endif
1.9 +
1.10 +/* Responsive Mode */
1.11 +
1.12 +.browserContainer[responsivemode] {
1.13 + background: #222 url("chrome://browser/skin/devtools/responsive-background.png");
1.14 + padding: 0 20px 20px 20px;
1.15 +}
1.16 +
1.17 +.browserStack[responsivemode] {
1.18 + box-shadow: 0 0 7px black;
1.19 +}
1.20 +
1.21 +.devtools-responsiveui-toolbar {
1.22 + -moz-appearance: none;
1.23 + background: transparent;
1.24 + /* text color is textColor from dark theme, since no theme is applied to
1.25 + * the responsive toolbar.
1.26 + */
1.27 + color: hsl(210,30%,85%);
1.28 + margin: 10px 0;
1.29 + padding: 0;
1.30 + box-shadow: none;
1.31 + border-bottom-width: 0;
1.32 +}
1.33 +
1.34 +.devtools-responsiveui-menulist,
1.35 +.devtools-responsiveui-toolbarbutton {
1.36 + -moz-appearance: none;
1.37 + -moz-box-align: center;
1.38 + min-width: 32px;
1.39 + min-height: 22px;
1.40 + text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
1.41 + border: 1px solid hsla(210,8%,5%,.45);
1.42 + border-radius: 0;
1.43 + background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
1.44 + 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);
1.45 + margin: 0 3px;
1.46 + color: inherit;
1.47 +}
1.48 +
1.49 +.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
1.50 + -moz-box-orient: horizontal;
1.51 +}
1.52 +
1.53 +.devtools-responsiveui-menulist:-moz-focusring,
1.54 +.devtools-responsiveui-toolbarbutton:-moz-focusring {
1.55 + outline: 1px dotted hsla(210,30%,85%,0.7);
1.56 + outline-offset: -4px;
1.57 +}
1.58 +
1.59 +.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
1.60 + display: none;
1.61 +}
1.62 +
1.63 +.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
1.64 + border-color: hsla(210,8%,5%,.6);
1.65 + background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
1.66 + 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);
1.67 +}
1.68 +
1.69 +.devtools-responsiveui-menulist[open=true],
1.70 +.devtools-responsiveui-toolbarbutton[open=true],
1.71 +.devtools-responsiveui-toolbarbutton[checked=true] {
1.72 + border-color: hsla(210,8%,5%,.6) !important;
1.73 + background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
1.74 + 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);
1.75 +}
1.76 +
1.77 +.devtools-responsiveui-toolbarbutton[checked=true] {
1.78 + color: hsl(208,100%,60%);
1.79 +}
1.80 +
1.81 +.devtools-responsiveui-toolbarbutton[checked=true]:hover {
1.82 + background-color: transparent !important;
1.83 +}
1.84 +
1.85 +.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
1.86 + background-color: hsla(210,8%,5%,.2) !important;
1.87 +}
1.88 +
1.89 +.devtools-responsiveui-menulist > .menulist-label-box {
1.90 + text-align: center;
1.91 +}
1.92 +
1.93 +.devtools-responsiveui-menulist > .menulist-dropmarker {
1.94 + -moz-appearance: none;
1.95 + display: -moz-box;
1.96 + background-color: transparent;
1.97 + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
1.98 + -moz-box-align: center;
1.99 + border-width: 0;
1.100 + min-width: 16px;
1.101 +}
1.102 +
1.103 +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
1.104 + -moz-appearance: none;
1.105 + color: inherit;
1.106 + border-width: 0;
1.107 + -moz-border-end: 1px solid hsla(210,8%,5%,.45);
1.108 + box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
1.109 +}
1.110 +
1.111 +.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
1.112 + box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
1.113 +}
1.114 +
1.115 +.devtools-responsiveui-toolbarbutton[type=menu-button] {
1.116 + padding: 0 1px;
1.117 + -moz-box-align: stretch;
1.118 +}
1.119 +
1.120 +.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
1.121 +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
1.122 + -moz-appearance: none !important;
1.123 + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
1.124 + -moz-box-align: center;
1.125 + padding: 0 3px;
1.126 +}
1.127 +
1.128 +.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
1.129 +.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
1.130 + margin-left: 0;
1.131 +}
1.132 +
1.133 +.devtools-responsiveui-close {
1.134 + list-style-image: url("chrome://browser/skin/devtools/close.png");
1.135 +}
1.136 +
1.137 +.devtools-responsiveui-rotate {
1.138 + list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
1.139 +}
1.140 +
1.141 +.devtools-responsiveui-touch {
1.142 + list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
1.143 + -moz-image-region: rect(0px,16px,16px,0px);
1.144 +}
1.145 +
1.146 +.devtools-responsiveui-touch[checked] {
1.147 + -moz-image-region: rect(0px,32px,16px,16px);
1.148 +}
1.149 +
1.150 +.devtools-responsiveui-screenshot {
1.151 + list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
1.152 +}
1.153 +
1.154 +.devtools-responsiveui-resizebarV {
1.155 + width: 7px;
1.156 + height: 24px;
1.157 + cursor: ew-resize;
1.158 + transform: translate(12px, -12px);
1.159 + background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
1.160 +}
1.161 +
1.162 +.devtools-responsiveui-resizebarH {
1.163 + width: 24px;
1.164 + height: 7px;
1.165 + cursor: ns-resize;
1.166 + transform: translate(-12px, 12px);
1.167 + background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
1.168 +}
1.169 +
1.170 +.devtools-responsiveui-resizehandle {
1.171 + width: 16px;
1.172 + height: 16px;
1.173 + cursor: se-resize;
1.174 + transform: translate(12px, 12px);
1.175 + background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
1.176 +}
