background-image: url("chrome://browser/skin/devtools/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 {
+ width: 40px;
+ height: 30px;
+ list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
+}
+
+.devtools-responsiveui-sleep-button {
+ -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-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: 2dppx) {
.devtools-responsiveui-resizebarV {
background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
#PanelUI-contents {
display: block;
- flex: 1 0 auto;
+ flex: 1 0 main-size;
margin-left: auto;
margin-right: auto;
max-width: 22.35em;
toolbarbutton[panel-multiview-anchor="true"] {
background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
- background-position: right 5px center;
+ background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
background-repeat: no-repeat;
}
toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
- background-position: left 5px center;
+ background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
}
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
height: 18px;
}
+menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
+/* transform: scaleX(-1); */
+}
+
.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
padding: 0 6px;
}
-moz-padding-start: 0;
}
-.subviewbutton.bookmark-item > .toolbarbutton-icon {
- -moz-margin-start: 3px;
-}
-
/* subviewbutton entries for social sidebars have images that come from external
/* sources, and are not guaranteed to be the size we want, so force the size on
/* those icons. */
}
.permission-table-header > div:first-child {
- text-align: left;
+ text-align: start;
padding-left: 10px;
flex-basis: 30%;
}
}
.permission > div:first-child {
- text-align: left;
+ text-align: start;
padding: 3px 10px;
flex-basis: 30%;
font-weight: bold;
display: flex;
padding: 15px 10px;
display: block;
- text-align: left;
+ text-align: start;
flex-grow: 1;
}
.gcli-menu-more {
font-size: 80%;
- text-align: right;
+ text-align: end;
-moz-padding-end: 8px;
}
}
.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
- text-align: right;
+ text-align: end;
}
/* Rest of the dark and light theme */
-moz-border-end-width: 0;
}
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
- -moz-margin-start: 0;
-}
-
.devtools-sidebar-tabs > tabs > tab {
}
.devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
}
-.devtools-sidebar-tabs > tabs > tab[selected] {
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected]:hover {
-}
-
+.devtools-sidebar-tabs > tabs > tab[selected],
.devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
}
color: #FF9F00; /* Light foreground text */
}
+.trace-item.black-boxed {
+ color: #A09090;
+}
+
.trace-item.selected-matching {
background-color: #004242; /* Select highlight blue at 40% alpha */
}
.ruleview-rule-source {
-moz-padding-start: 5px;
- text-align: right;
+ text-align: end;
float: right;
-moz-user-select: none;
}
stroke-width: 1px;
fill: none;
- stroke: #9C9CFF; /* Grey foreground text */
+ stroke: #A09090; /* Grey foreground text */
+}
+
+/* AudioParam connection edges */
+g.edgePath.param-connection {
+ stroke-dasharray: 5,5;
+}
+
+.edgePath.param-connection path {
+ stroke: #A09090; /* Grey foreground text */
+}
+
+/* Labels in AudioParam connection should have background that match
+ * the main background so there's whitespace around the label, on top of the
+ * dotted lines. */
+g.edgeLabel rect {
+ fill: #000000;
+}
+g.edgeLabel tspan {
+ fill: #9C9CFF; /* Grey foreground text */
}
/* Audio Nodes */
* Inspector Styles
*/
+#web-audio-inspector-title {
+ margin: 6px;
+}
+
.web-audio-inspector .error {
background-image: url("alerticon-warning.png");
background-size: 13px 12px;
.message {
display: flex;
- flex: 0 0 auto;
+ flex: none;
padding: 0 7px;
width: 100%;
box-sizing: border-box;
}
.message > .timestamp {
- flex: 0 0 auto;
+ flex: none;
color: #8050B0;
margin: 4px 6px 0 0;
}
.message > .indent {
- flex: 0 0 auto;
+ flex: none;
}
.message > .icon {
- flex: 0 0 auto;
+ flex: none;
margin: 3px 6px 0 0;
padding: 0 4px;
height: 1em;
/* The red bubble that shows the number of times a message is repeated */
.message-repeats {
-moz-user-select: none;
- flex: 0 0 auto;
+ flex: none;
margin: 2px 6px;
padding: 0 6px;
height: 1.25em;
.message-location {
display: flex;
- flex: 0 0 auto;
+ flex: none;
align-self: flex-start;
justify-content: flex-end;
width: 10em;
}
.message-location > .line-number {
- flex: 0 0 auto;
+ flex: none;
}
.hud-msg-node[selected="true"] > .webconsole-timestamp,
.message-flex-body > .message-body {
display: block;
- flex: 1 1 auto;
+ flex: 1 1 main-size;
vertical-align: middle;
}
}
.message[category=network] .method {
- flex: 0 0 auto;
+ flex: none;
}
.message[category=network]:not(.navigation-marker) .url {
- flex: 1 1 auto;
+ flex: 1 1 main-size;
/* Make sure the URL is very small initially, let flex change width as needed. */
width: 100px;
min-width: 5em;
}
.message[category=network] .status {
- flex: 0 0 auto;
+ flex: none;
-moz-margin-start: 6px;
}
.stacktrace .function {
display: block;
- flex: 1 1 auto;
+ flex: 1 1 main-size;
}
.cm-s-mozilla a[class] {
padding-right: 4px;
color: #FF9F00;
white-space: nowrap;
- text-align: right;
+ text-align: end;
vertical-align: top;
width: 10%;
}
bottom: 0 !important;
}
-.newtab-site[type=sponsored] .newtab-title {
- -moz-padding-end: 24px;
-}
-
.newtab-site:hover .newtab-title {
background-color: #FFCF00;
}
dialog,
window,
prefwindow,
-.windowDialog,
-page {
+.windowDialog {
background-color: #000000;
}
-* {
- -moz-user-select: text;
-}
-
-treecol {
- /* override the * rule to let the treecol be sortable */
- -moz-user-select: none;
-}
-
-caption {
-}
-
-caption > label {
-}
-
.main-content {
padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
overflow: auto;
color: #FF9F00;
}
-prefpane > .content-box {
- max-width: 800px;
- overflow: visible;
-}
-
-/* groupboxes */
-
-groupbox {
-}
-
-groupbox label {
-}
-
-/* tabpanels and tabs */
-
-tabpanels {
-}
-
-tabs {
-}
-
-.tabs-left,
-.tabs-right {
-}
-
-tab {
-}
-
-tab[selected] {
-}
-
-.tab-text {
-}
-
-tab:not([selected]):hover > .tab-middle > .tab-text {
-}
-
-tab:not([selected]):hover:active > .tab-middle > .tab-text {
-}
-
-tab[selected] > .tab-middle > .tab-text {
-}
-
-/* buttons and menulists */
-
-button,
-menulist {
-}
-
-button:not([disabled]):hover,
-menulist:not([disabled]):hover {
-}
-
-button:not([disabled]):hover:active,
-menulist[open="true"]:not([disabled]) {
-}
-
-button[disabled],
-menulist[disabled] {
-}
-
-button > .button-box,
-menulist > .menulist-label-box {
-}
-
-button[type="menu"] > .button-box > .button-menu-dropmarker {
-}
-/*
-.help-button {
- min-width: 30px;
- border-radius: 2px;
- border: 1px solid #C1C1C1;
- background-color: #FFCB00;
- background-image: none;
- box-shadow: none;
-}
-
-.help-button:not([disabled="true"]):hover {
- background-color: #F4C200;
- background-image: none;
-}
-
-.help-button:not([disabled="true"]):hover:active {
- background-color: #EABA00;
- background-image: none;
-}
-
-.close-icon > .button-box,
-.help-button > .button-box {
- padding-top: 0;
- padding-bottom: 0;
- padding-right: 0 !important;
- padding-left: 0 !important;
-}
-*/
-.help-button > .button-box > .button-icon {
- width: 26px;
- height: 26px;
- background-image: url("chrome://browser/skin/preferences/in-content/help-glyph.png");
- background-position: center;
-}
-
-@media (min-resolution: 2dppx) {
- .help-button > .button-box > .button-icon {
- background-size: 26px 26px;
- background-image: url("chrome://browser/skin/preferences/in-content/help-glyph@2x.png");
- }
-}
-
-.help-button > .button-box > .button-text {
- display: none;
-}
-
-.spinbuttons-button {
-}
-
-.spinbuttons-up {
-}
-
-.spinbuttons-down {
-}
-
-.spinbuttons-button > .button-box {
-}
-
-.spinbuttons-up > .button-box > .button-icon {
-}
-
-.spinbuttons-up[disabled] > .button-box > .button-icon {
-}
-
-.spinbuttons-down > .button-box > .button-icon {
-}
-
-.spinbuttons-down[disabled] > .button-box > .button-icon {
-}
-
-menulist:not([editable="true"]) > .menulist-dropmarker {
-}
-
-menulist[disabled]:not([editable="true"]) > .menulist-dropmarker {
-}
-
-menulist > menupopup,
-button[type="menu"] > menupopup {
-}
-
-menulist > menupopup menu,
-menulist > menupopup menuitem,
-button[type="menu"] > menupopup menu,
-button[type="menu"] > menupopup menuitem {
-}
-
-menulist > menupopup > menu[_moz-menuactive="true"],
-menulist > menupopup > menuitem[_moz-menuactive="true"],
-button[type="menu"] > menupopup > menu[_moz-menuactive="true"],
-button[type="menu"] > menupopup > menuitem[_moz-menuactive="true"] {
-}
-
-menulist > menupopup > menu[selected="true"],
-menulist > menupopup > menuitem[selected="true"],
-button[type="menu"] > menupopup > menu[selected="true"],
-button[type="menu"] > menupopup > menuitem[selected="true"] {
-}
-
-menulist > menupopup menuseparator,
-button[type="menu"] > menupopup menuseparator {
-}
-
-/* textboxes */
-
-textbox {
-}
-
-textbox[focused] {
-}
-
-textbox[disabled] {
-}
-
-/* Links */
-
-.text-link,
-.inline-link,
-html|a.inline-link {
-}
-
-.text-link:hover,
-.inline-link:hover {
-}
-
-.text-link:hover:active,
-.inline-link:hover:active {
-}
-
-/* Checkboxes and radio buttons */
-
-.checkbox-check {
-}
-
-.checkbox-check[checked] {
-}
-
-radio {
-}
-
-.radio-check {
-}
-
-.radio-check[selected] {
-}
-
/* Category List */
#categories {
/* header */
-.header {
- border-bottom: 1px solid #A09090;
- margin-bottom: 15px;
- padding-bottom: 15px;
-}
-
#header-advanced {
border-bottom: none;
padding-bottom: 0;
}
-.header-name {
- font-size: 2.5rem;
- font-weight: normal;
- line-height: 40px;
- margin: 0;
-}
-
.indent {
margin-top: 7px;
margin-bottom: 7px;
}
/* General Pane */
-/*
-filefield {
- -moz-appearance: none;
- background-color: transparent;
- border: none;
- padding: 0;
-}
-.fileFieldContentBox {
- background-color: transparent;
+#isNotDefaultLabel {
+ font-weight: bold;
}
-.fileFieldIcon {
- -moz-margin-start: 10px;
- -moz-margin-end: 0;
-}
-
-.fileFieldLabel {
- -moz-margin-start: -26px;
- -moz-padding-start: 36px;
-}
-*/
-
/* Applications Pane Styles */
#applicationsContent {
width: 66ch;
}
-/* needs to be removed with bug 1035625 */
-:-moz-any(dialog, window, prefwindow) resizer {
- display: none;
-}
-
tree:not(#rejectsTree) {
min-height: 15em;
}
margin: 6px;
}
+/* General Pane */
+
+#isNotDefaultLabel {
+ font-weight: bold;
+}
+
/* Content Pane */
#translationAttributionImage {
width: 70px;
padding-right: 0 !important;
padding-left: 0 !important;
}
-
+*/
xul|*.help-button > xul|*.button-box > xul|*.button-icon {
width: 26px;
height: 26px;
xul|*.help-button > xul|*.button-box > xul|*.button-text {
display: none;
}
-
+/*
xul|*.spinbuttons-button {
-moz-margin-start: 10px !important;
-moz-margin-end: 2px !important;
}
*/
/* header */
-/*
+
*|*.header {
- border-bottom: 1px solid #c8c8c8;
+/* border-bottom: 1px solid #A09090;
margin-bottom: 15px;
- padding-bottom: 15px;
+ padding-bottom: 15px; */
}
*|*.header-name {
line-height: 40px;
margin: 0;
}
-*/
+
/* File fields */
/*
xul|filefield {
projects / themes.git / commitdiff
