browser/themes/shared/devtools/responsivedesign.inc.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.

     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
     7 /* Responsive Mode */
     9 .browserContainer[responsivemode] {
    10   background: #222 url("chrome://browser/skin/devtools/responsive-background.png");
    11   padding: 0 20px 20px 20px;
    12 }
    14 .browserStack[responsivemode] {
    15   box-shadow: 0 0 7px black;
    16 }
    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 }
    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 }
    46 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
    47   -moz-box-orient: horizontal;
    48 }
    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 }
    56 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
    57   display: none;
    58 }
    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 }
    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 }
    74 .devtools-responsiveui-toolbarbutton[checked=true] {
    75   color: hsl(208,100%,60%);
    76 }
    78 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
    79   background-color: transparent !important;
    80 }
    82 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
    83   background-color: hsla(210,8%,5%,.2) !important;
    84 }
    86 .devtools-responsiveui-menulist > .menulist-label-box {
    87   text-align: center;
    88 }
    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 }
   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 }
   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 }
   112 .devtools-responsiveui-toolbarbutton[type=menu-button] {
   113   padding: 0 1px;
   114   -moz-box-align: stretch;
   115 }
   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 }
   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 }
   130 .devtools-responsiveui-close {
   131   list-style-image: url("chrome://browser/skin/devtools/close.png");
   132 }
   134 .devtools-responsiveui-rotate {
   135   list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
   136 }
   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 }
   143 .devtools-responsiveui-touch[checked] {
   144   -moz-image-region: rect(0px,32px,16px,16px);
   145 }
   147 .devtools-responsiveui-screenshot {
   148   list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
   149 }
   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 }
   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 }
   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 }

mercurial