gecko-dev/devtools/client/themes/responsivedesign.inc.css
2016-06-22 07:57:59 +02:00

352 lines
9.8 KiB
CSS

%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
/* Responsive Mode */
.browserContainer[responsivemode] {
background-color: #222;
padding: 0 20px 20px 20px;
}
.browserStack[responsivemode] {
box-shadow: 0 0 7px black;
}
.devtools-responsiveui-toolbar {
-moz-appearance: none;
background: transparent;
/* text color is textColor from dark theme, since no theme is applied to
* the responsive toolbar.
*/
color: hsl(210,30%,85%);
margin: 10px 0;
padding: 0;
box-shadow: none;
border-bottom-width: 0;
}
.devtools-responsiveui-textinput {
-moz-appearance: none;
background: #333;
color: #fff;
border: 1px solid #111;
border-radius: 2px;
padding: 0 5px;
width: 200px;
margin: 0;
}
.devtools-responsiveui-textinput[attention] {
border-color: #38ace6;
background: rgba(56,172,230,0.4);
}
.devtools-responsiveui-menulist,
.devtools-responsiveui-toolbarbutton {
-moz-appearance: none;
-moz-box-align: center;
min-width: 32px;
min-height: 22px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: 0;
background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
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);
margin: 0 3px;
color: inherit;
}
.devtools-responsiveui-menulist .menulist-editable-box {
-moz-appearance: none;
background-color: transparent;
}
.devtools-responsiveui-menulist html|*.menulist-editable-input {
-moz-appearance: none;
color: inherit;
text-align: center;
}
.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
background: hsla(212,7%,57%,.35);
}
.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
}
.devtools-responsiveui-menulist:-moz-focusring,
.devtools-responsiveui-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.7);
outline-offset: -4px;
}
.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
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);
}
.devtools-responsiveui-menulist[open=true],
.devtools-responsiveui-toolbarbutton[open=true],
.devtools-responsiveui-toolbarbutton[checked=true] {
border-color: hsla(210,8%,5%,.6) !important;
background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
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);
}
.devtools-responsiveui-toolbarbutton[checked=true] {
color: hsl(208,100%,60%);
}
.devtools-responsiveui-toolbarbutton[checked=true]:hover {
background-color: transparent !important;
}
.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
background-color: hsla(210,8%,5%,.2) !important;
}
.devtools-responsiveui-menulist > .menulist-label-box {
text-align: center;
}
.devtools-responsiveui-menulist > .menulist-dropmarker {
-moz-appearance: none;
display: -moz-box;
background-color: transparent;
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
-moz-box-align: center;
border-width: 0;
min-width: 16px;
}
.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-moz-appearance: none;
color: inherit;
border-width: 0;
border-inline-end: 1px solid hsla(210,8%,5%,.45);
box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
}
.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
}
.devtools-responsiveui-toolbarbutton[type=menu-button] {
padding: 0 1px;
-moz-box-align: stretch;
}
.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
-moz-box-align: center;
padding: 0 3px;
}
.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
margin-left: 0;
}
.devtools-responsiveui-close {
list-style-image: url("chrome://devtools/skin/images/close.svg");
}
.devtools-responsiveui-rotate {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
}
@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-rotate {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
}
}
.devtools-responsiveui-touch {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png");
-moz-image-region: rect(0px,16px,16px,0px);
}
.devtools-responsiveui-touch[checked] {
-moz-image-region: rect(0px,32px,16px,16px);
}
@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-touch {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png");
-moz-image-region: rect(0px,32px,32px,0px);
}
.devtools-responsiveui-touch[checked] {
-moz-image-region: rect(0px,64px,32px,32px);
}
}
.devtools-responsiveui-screenshot {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
}
@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-screenshot {
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png");
}
}
.devtools-responsiveui-resizebarV {
width: 7px;
height: 24px;
cursor: ew-resize;
transform: translate(12px, -12px);
background-size: cover;
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png");
}
.devtools-responsiveui-resizebarH {
width: 24px;
height: 7px;
cursor: ns-resize;
transform: translate(-12px, 12px);
background-size: cover;
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png");
}
.devtools-responsiveui-resizehandle {
width: 16px;
height: 16px;
cursor: se-resize;
transform: translate(12px, 12px);
background-size: cover;
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png");
}
/* FxOS custom mode with additional buttons and phone look'n feel */
/* Hide devtools manual resizer */
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
display: none;
}
/* Gives responsive mode a phone look'n feel */
.browserStack[responsivemode].fxos-mode {
padding: 60px 15px 0;
border-radius: 25px / 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid #FFFFFF;
border-bottom-width: 0;
background-color: #353535;
box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
background-image: linear-gradient(to right, #111 11%, #333 56%);
min-width: 320px;
}
.devtools-responsiveui-hardware-buttons {
-moz-appearance: none;
padding: 20px;
border: 1px solid #FFFFFF;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-width: 0;
box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
background-image: linear-gradient(to right, #111 11%, #333 56%);
}
.devtools-responsiveui-home-button {
-moz-user-focus: ignore;
width: 40px;
height: 30px;
list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
}
.devtools-responsiveui-sleep-button {
-moz-user-focus: ignore;
-moz-appearance: none;
/* compensate browserStack top padding */
margin-top: -67px;
margin-right: 10px;
min-width: 10px;
width: 50px;
height: 5px;
border: 1px solid #444;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-color: transparent;
background-image: linear-gradient(to top, #111 11%, #333 56%);
}
.devtools-responsiveui-sleep-button:hover:active {
background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
}
.devtools-responsiveui-volume-buttons {
margin-left: -29px;
}
.devtools-responsiveui-volume-up-button,
.devtools-responsiveui-volume-down-button {
-moz-user-focus: ignore;
-moz-appearance: none;
border: 1px solid red;
min-width: 8px;
height: 40px;
border: 1px solid #444;
border-right-color: transparent;
background-image: linear-gradient(to right, #111 11%, #333 56%);
}
.devtools-responsiveui-volume-up-button:hover:active,
.devtools-responsiveui-volume-down-button:hover:active {
background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
}
.devtools-responsiveui-volume-up-button {
border-top-left-radius: 12px;
}
.devtools-responsiveui-volume-down-button {
border-bottom-left-radius: 12px;
}
@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-resizebarV {
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
}
.devtools-responsiveui-resizebarH {
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
}
.devtools-responsiveui-resizehandle {
background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
}
}