.panel-promo-closebutton > .toolbarbutton-text {
padding: 0;
- margin: 0;
}
/* ::::: content area ::::: */
margin: 7px 0;
}
+/* Css transform highlighter */
+
+svg|polygon.css-transform-transformed {
+ fill: #9C9CFF;
+ opacity: 0.8;
+}
+
+svg|polygon.css-transform-untransformed {
+ fill: #A09090;
+ opacity: 0.8;
+}
+
+svg|polygon.css-transform-transformed,
+svg|polygon.css-transform-untransformed,
+svg|line.css-transform-line {
+ stroke: #E7ADE7;
+ stroke-dasharray: 5 3;
+ stroke-width: 2;
+}
+
/* === END highlighter.inc.css === */
#full-screen-warning-message {
.panel-subview-header,
.subviewbutton.panel-subview-footer {
+ box-sizing: border-box;
+/* min-height: 41px; */
padding: 3px;
}
#PanelUI-customize,
#PanelUI-quit {
margin: 0;
- padding: 10px 0;
- min-height: 2em;
+ padding: 11px 0;
+ box-sizing: border-box;
+ min-height: 40px;
box-shadow: none;
border: none;
border-radius: 0;
- License, v. 2.0. If a copy of the MPL was not distributed with this\r
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">\r
<path fill="#9C9CFF" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5\r
S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62\r
- License, v. 2.0. If a copy of the MPL was not distributed with this\r
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">\r
<path fill="#FF0000" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894\r
z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0\r
<?xml version="1.0" encoding="utf-8"?>\r
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve">\r
<rect y="40" display="none" fill="#000000" width="84" height="160"/>\r
- License, v. 2.0. If a copy of the MPL was not distributed with this\r
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">\r
<path fill="#C09070" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5\r
S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62\r
<?xml version="1.0" encoding="utf-8"?>\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
\r
<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
- License, v. 2.0. If a copy of the MPL was not distributed with this\r
<?xml version="1.0" encoding="utf-8"?>\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
\r
<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
- License, v. 2.0. If a copy of the MPL was not distributed with this\r
background-position: -14px -14px;
}
+.theme-twisty[invisible] {
+ visibility: hidden;
+}
+
.theme-checkbox {
display: inline-block;
border: 0;
/* === BEGIN toolbars.inc.css === */
+/* Toolbars */
+.devtools-toolbar,
+.devtools-sidebar-tabs > tabs {
+}
+
.devtools-toolbar {
}
padding: 2px;
}
-devtools-menulist:-moz-focusring,
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton {
+}
+
+.devtools-menulist:-moz-focusring,
.devtools-toolbarbutton:-moz-focusring {
outline: 1px dotted #008484;
}
-.devtools-toolbarbutton > .toolbarbutton-icon {
+.devtools-toolbarbutton[standalone] {
+}
+.devtools-toolbarbutton[label][standalone] {
}
-.devtools-toolbarbutton:not([label]) {
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
min-width: 20px;
}
display: none;
}
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
- /*-moz-box-orient: horizontal;*/
+.devtools-toolbar .devtools-toolbarbutton {
}
-.devtools-menulist,
-.devtools-toolbarbutton {
+.devtools-toolbarbutton > .toolbarbutton-icon {
}
-.devtools-toolbarbutton:not([checked]):hover:active {
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+ /*-moz-box-orient: horizontal;*/
}
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked] {
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
}
-.devtools-toolbarbutton[checked] {
+.devtools-toolbarbutton[type=menu-button] {
}
-.devtools-toolbarbutton[checked]:hover:active {
+.devtools-menulist > .menulist-dropmarker {
}
-.devtools-option-toolbarbutton {
- list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
-/* background: none;
- border: none; */
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
}
-.devtools-option-toolbarbutton:hover,
-.devtools-option-toolbarbutton[open=true] {
- list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
+.devtools-menulist,
+.devtools-toolbarbutton {
}
-.devtools-menulist > .menulist-label-box {
- text-align: center;
+/* Text-only buttons */
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
+/* background-color: rgba(0, 0, 0, .2); / Splitter */
}
-.devtools-menulist > .menulist-dropmarker {
+/* Button States */
+.devtools-toolbarbutton:hover,
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
+/* background: rgba(0, 0, 0, .3); / Splitters */
}
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+.devtools-toolbarbutton:hover:active,
+.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+/* background: rgba(0, 0, 0, .4); / Splitters */
}
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+/* Menu type buttons and checked states */
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true],
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+/* background: rgba(29, 79, 115, .7); /*Select highlight blue /
+ color: #f5f7fa; */
}
-.devtools-toolbarbutton[type=menu-button] {
- padding: 0 1px;
- -moz-box-align: stretch;
+.devtools-toolbarbutton[checked=true]:hover {
}
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
- -moz-box-align: center;
+.devtools-option-toolbarbutton {
+ list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
+/* background: none;
+ border: none; */
+}
+
+.devtools-option-toolbarbutton:hover,
+.devtools-option-toolbarbutton[open=true] {
+ list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
}
/* Toolbar button groups */
.devtools-toolbarbutton-group > .devtools-toolbarbutton {
}
-.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-of-type {
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
}
-.devtools-toolbarbutton-group {
-/*
- margin: 0 2px;
- -moz-padding-end: 2px;
- border-left: 3px solid #000000;
- border-right: 3px solid #000000;
-*/
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+}
+
+.devtools-separator + .devtools-toolbarbutton {
}
/* Text input */
}
.devtools-searchinput {
-/* padding-top: 3px;
- padding-bottom: 3px;*/
+/* margin-top: 1px;
+ margin-bottom: 1px;
+ padding: 0;*/
-moz-padding-start: 22px;
-moz-padding-end: 12px;
background-position: 8px center;
#toolbox-dock-side:hover {
}
-#toolbox-controls-separator {
+.devtools-separator {
+ margin: 0 2px;
width: 2px;
}
-#toolbox-buttons:empty + #toolbox-controls-separator,
-#toolbox-controls-separator[invisible] {
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
visibility: hidden;
}
+#toolbox-controls-separator {
+ margin: 0;
+}
+
/* Command buttons */
.command-button {
/* Toolbar controls */
-.devtools-sidebar-tabs > tabs > tab {
-/* min-height: 24px !important;
- padding: 0 !important; */
-}
-
#toggle-panes {
list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
color: #FF9F00;
}
+#notice-perf-message {
+ margin-top: 2px;
+}
+
#requests-menu-perf-notice-button {
min-width: 30px;
- min-height: 28px;
+ min-height: 26px;
margin: 0;
list-style-image: url("profiler-stopwatch.svg");
}
display: none;
}
+#requests-menu-reload-notice-button {
+ min-height: 26px;
+ margin: 0;
+}
+
/* Network requests table */
#requests-menu-toolbar {
-moz-margin-end: 6px;
}
-#requests-menu-reload-notice-button {
- min-height: 2em;
-}
-
/* Shaders pane */
#shaders-pane {
}
.stylesheet-sidebar {
- width: 230px;
-}
+ width: 237px;
+ -moz-border-start: 1px solid;
-.stylesheet-sidebar {
- border-left: 1px solid #9C9CFF;
+ border-color: #9C9CFF; /* Splitters */
}
.media-rule-label {
- border-bottom: 1px solid #A09090;
+ border-bottom: 1px solid #A09090; /* Grey */
}
.media-rule-label {
cursor: pointer;
}
+.media-rule-line {
+ -moz-padding-start: 4px;
+}
+
.media-condition-unmatched {
color: #8050B0;
}
transition: opacity .5s ease-out 0s;
}
-@media (min-resolution: 2dppx) {
- .web-audio-inspector .error {
- background-image: url(alerticon-warning@2x.png);
- }
-}
-
#inspector-pane-toggle {
background: none;
box-shadow: none;
-moz-user-focus: normal;
}
-.webconsole-filter-button[checked] {
- /* color: white !important; */
-}
-
.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
content: "";
display: inline-block;
}
/* Replace these values with CSS variables as available */
-.theme-dark .jsterm-input-container {
- background-color: #000000; /* tabToolbarBackgroundColor */
- border-color: #9C9CFF; /* mainBackgroundColor */
-}
-
-.theme-dark .jsterm-input-node {
- color: #E7ADE7; /* textColor */
-}
-
-.theme-dark .jsterm-complete-node {
- color: #A09090; /* commentColor */
-}
-
-.theme-dark .navigation-marker .url {
- background: #000000; /* mainBackgroundColor */
-}
-
-.theme-dark .inlined-variables-view iframe {
- border-color: #A09090;
-}
-
-.theme-dark .stacktrace {
- border-color: #A09090;
-}
-
-.theme-light .jsterm-input-container {
+.jsterm-input-container {
background-color: #000000; /* tabToolbarBackgroundColor */
border-color: #9C9CFF; /* mainBackgroundColor */
}
-.theme-light .jsterm-input-node {
+.jsterm-input-node {
color: #E7ADE7; /* textColor */
}
-.theme-light .jsterm-complete-node {
+.jsterm-complete-node {
color: #A09090; /* commentColor */
}
-.theme-light .navigation-marker .url {
+.navigation-marker .url {
background: #000000; /* mainBackgroundColor */
}
-.theme-light .inlined-variables-view iframe {
+.inlined-variables-view iframe {
border-color: #A09090;
}
-.theme-dark .stacktrace {
+.stacktrace {
border-color: #A09090;
}
.message > .timestamp {
display: none;
}
- .toolbarbutton-text {
+ .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
display: none;
}
.hud-console-filter-toolbar .webconsole-filter-button {
min-width: 25px;
}
.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
- width: 16px;
- height: 16px;
+ width: 12px;
+ height: 12x;
margin-left: 1px;
}
.toolbarbutton-menubutton-dropmarker {
.breadcrumbs-widget-container {
-moz-margin-start: 2px;
-moz-margin-start: 2px;
- max-height: 25px; /* Set max-height for proper sizing on linux */
- height: 25px; /* Set height to prevent starting small waiting for content */
- /* A fake 1px-shadow is included in the border-images of the
- breadcrumbs-widget-items, to match toolbar-buttons style.
- This negative margin compensates the extra row of pixels created
- by the shadow.*/
-/* margin: -1px 0;*/
+ max-height: 24px; /* Set max-height for proper sizing on linux */
+ height: 24px; /* Set height to prevent starting small waiting for content */
}
.scrollbutton-up,
#breadcrumb-separator-after,
#breadcrumb-separator-normal {
width: 12px;
- height: 25px;
+ height: 24px;
overflow: hidden;
}
content: "";
display: block;
width: 25px;
- height: 25px;
+ height: 24px;
transform: translateX(-18px) rotate(45deg);
box-sizing: border-box;
}
.breadcrumbs-widget-item {
background-color: #000000;
- min-height: 25px;
+ min-height: 24px;
min-width: 65px;
margin: 0;
padding: 0 8px 0 20px;
color: inherit !important;
}
-.variable-or-property > .title > .arrow {
- -moz-margin-start: 3px;
+.variables-view-container .theme-twisty {
+ margin: 2px;
+}
+
+.variable-or-property > .title > .theme-twisty {
+ -moz-margin-start: 5px;
}
.variable-or-property:not([untitled]) > .variables-view-element-details {
/* Variables and properties searching */
-.variables-view-searchinput {
- min-height: 24px;
-}
-
.variable-or-property[unmatched] {
border: none;
margin: 0;
}
-/* Expand/collapse arrow */
-
-.arrow {
- background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
- width: 9px;
- height: 16px;
- -moz-margin-start: 5px;
- -moz-margin-end: 5px;
-}
-
-.variables-view-scope > .title > .arrow {
- background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
-}
-
-.arrow[open] {
- background-image: url("chrome://global/skin/tree/twisty-open.gif");
-}
-
-.variables-view-scope > .title > .arrow[open] {
- background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
-}
+/* Canvas graphs */
-.arrow[invisible] {
- visibility: hidden;
+.graph-widget-container {
+ position: relative;
}
-/* Canvas graphs */
-
.graph-widget-canvas {
width: 100%;
height: 100%;
/* Line graph widget */
-.line-graph-widget-container {
- position: relative;
-}
-
.line-graph-widget-canvas {
- background: #0088cc;
+ background: #000000;
}
.line-graph-widget-gutter {
color: #FF9F00;
}
+/* Bar graph widget */
+
+.bar-graph-widget-canvas {
+ background: #000000;
+}
+
+.bar-graph-widget-legend {
+ position: absolute;
+ top: 4px;
+ left: 8px;
+ color: #A09090;
+ font-size: 80%;
+}
+
+.bar-graph-widget-legend-item {
+ float: left;
+ -moz-margin-end: 8px;
+}
+
+.bar-graph-widget-legend-item > [view="color"],
+.bar-graph-widget-legend-item > [view="label"] {
+ vertical-align: middle;
+}
+
+.bar-graph-widget-legend-item > [view="color"] {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border: 1px solid #9C9CFF;
+ border-radius: 1px;
+ -moz-margin-end: 4px;
+}
+
+.bar-graph-widget-legend-item > [view="label"] {
+/* text-shadow: 1px 0px rgba(255,255,255,0.8),
+ -1px 0px rgba(255,255,255,0.8),
+ 0px -1px rgba(255,255,255,0.8),
+ 0px 1px rgba(255,255,255,0.8);*/
+}
+
/* Charts */
.generic-chart-container {
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+ id="icons-enhanced-tiles"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0"
+ y="0"
+ width="288"
+ height="32"
+ viewBox="0 0 288 32">
+
+ <defs>
+ <style type="text/css"><![CDATA[
+ /* Glyph Styles */
+
+ .glyphShape-style {
+ fill: #FFCF00;
+ }
+
+ .glyphShape-style-pin {
+ fill: #FFCF00;
+ }
+
+ .glyphShape-style-hover-gear {
+ fill: #000000;
+ }
+
+ .glyphShape-style-hover-pin {
+ fill: #000000;
+ }
+
+ .glyphShape-style-hover-delete {
+ fill: #FF0000;
+ }
+
+ .glyphShape-style-hover-active {
+ fill: #000000;
+ }
+
+ /* Circle Background Styles */
+
+ .glyphShape-style-circle {
+ fill: #000000;
+ }
+ .glyphShape-style-circle-hover {
+ fill: #FFCF00;
+ }
+ .glyphShape-style-circle-active {
+ fill: #FF9F00;
+ }
+
+ .glyphShape-style-circle-dropshadow {
+ fill: #A09090;
+ fill-opacity: .5;
+ filter: url(#filter-shadow-drop);
+ }
+ ]]></style>
+
+ <filter id="filter-shadow-drop" x="-10%" y="-10%" width="120%" height="120%">
+ <feOffset in="SourceAlpha" dx="0" dy=".75" result="filter-shadow-drop-offset" />
+ <feGaussianBlur in="filter-shadow-drop-offset" stdDeviation="1" result="filter-shadow-drop-blur"/>
+ </filter>
+
+ <path id="glyphShape-gear" d="M28,16c0-1.7,0.9-3.1,2-3.3c-0.4-1.5-0.9-2.9-1.7-4.2c-0.9,0.7-2.6,0.3-3.8-0.9c-1.2-1.2-1.6-2.8-0.9-3.8 c-1.3-0.8-2.7-1.4-4.2-1.7c-0.2,1.1-1.6,2-3.3,2S13,3.1,12.8,2c-1.5,0.4-2.9,0.9-4.2,1.7c0.7,0.9,0.3,2.6-0.9,3.8 c-1.4,1.1-3,1.5-4,0.9C2.9,9.7,2.4,11.2,2,12.7c1.1,0.2,2,1.6,2,3.3s-0.9,3.1-2,3.3c0.4,1.5,0.9,2.9,1.7,4.2 c0.9-0.7,2.6-0.3,3.8,0.9c1.2,1.2,1.6,2.8,0.9,3.8c1.3,0.8,2.7,1.4,4.2,1.7c0.2-1.1,1.6-2,3.3-2s3.1,0.9,3.3,2 c1.5-0.4,2.9-0.9,4.2-1.7c-0.7-0.9-0.3-2.6,0.9-3.8c1.3-1.2,2.8-1.6,3.8-0.9c0.8-1.3,1.4-2.7,1.7-4.2C28.9,19.1,28,17.7,28,16z M16,24c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S20.4,24,16,24z" />
+
+ <circle id="glyphShape-circle" cx="16" cy="16" r="14" />
+
+ <path id="glyphShape-pin" d="M19,15v-5h2V7H11v3h2v5l-3,2v2h5c0,4.5,0.4,8,1,8s1-3.5,1-8h5v-2L19,15z" />
+ <polygon id="glyphShape-delete" points="23,11 21,9 16,14 11,9 9,11 14,16 9,21 11,23 16,18 21,23 23,21 18,16" />
+
+ </defs>
+
+ <g id="icon-gear-default">
+ <use xlink:href="#glyphShape-gear" class="glyphShape-style" />
+ </g>
+
+ <g id="icon-gear-default" transform="translate(32)">
+ <use xlink:href="#glyphShape-gear" class="glyphShape-style-hover-gear" />
+ </g>
+
+ <g id="icon-pin-default" transform="translate(64)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle" />
+ <use xlink:href="#glyphShape-pin" class="glyphShape-style" />
+ </g>
+
+ <g id="icon-pin-hover" transform="translate(96)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-hover" />
+ <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-pin" />
+ </g>
+
+ <g id="icon-pin-hover-active" transform="translate(128)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-active" />
+ <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-active" />
+ </g>
+
+ <g id="icon-delete-default" transform="translate(160)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle" />
+ <use xlink:href="#glyphShape-delete" class="glyphShape-style" />
+ </g>
+
+ <g id="icon-delete-hover" transform="translate(192)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-hover" />
+ <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-delete" />
+ </g>
+
+ <g id="icon-delete-hover-active" transform="translate(224)">
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow" />
+ <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-active" />
+ <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-active" />
+ </g>
+
+ <g id="icon-pin-default" transform="translate(256)">
+ <use xlink:href="#glyphShape-pin" class="glyphShape-style-pin" />
+ </g>
+
+</svg>
}
/* SCROLLBOX */
-#newtab-scrollbox:not([page-disabled]),
-#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
+#newtab-scrollbox:not([page-disabled]) {
color: #FF9F00;
background-color: #000000;
}
+#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
+ background: inherit;
+}
+
/* UNDO */
#newtab-undo-container {
padding: 4px 3px;
-moz-image-region: rect(0, 32px, 16px, 16px);
}
-#newtab-undo-close-button > .toolbarbutton-text {
- display: none;
-}
-
#newtab-undo-close-button:-moz-focusring {
outline: 1px dotted;
}
background-position: -232px 0;
}
+/* CUSTOMIZE */
+#newtab-customize-button,
+.newtab-customize {
+ background-color: transparent;
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0);
+ background-size: 28px;
+ border: none;
+ border-radius: 3px;
+ height: 28px;
+ width: 28px;
+}
+
+#newtab-customize-button:-moz-any(:hover, :active, [active]) {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
+ background-color: #FFCF00;
+}
+
/* ROWS */
.newtab-row {
margin-bottom: 20px;
}
.newtab-cell:empty {
- border: 1px dashed;
+ outline: 2px dashed #A09090;
+ -moz-outline-radius: 2px;
}
.newtab-row > .newtab-cell:last-child {
background-color: #002121;
}
+/* LINKS */
+.newtab-link {
+ border-radius: 3px;
+}
+
/* THUMBNAILS */
.newtab-thumbnail {
background-origin: padding-box;
background-clip: padding-box;
background-repeat: no-repeat;
background-size: cover;
+ transition: opacity 100ms ease-out;
+}
+
+.newtab-site:hover .newtab-thumbnail.enhanced-content {
+ opacity: 0;
}
.newtab-site[type=affiliate] .newtab-thumbnail,
+.newtab-site[type=enhanced] .newtab-thumbnail,
.newtab-site[type=organic] .newtab-thumbnail,
.newtab-site[type=sponsored] .newtab-thumbnail {
background-position: center center;
}
/* TITLES */
+.newtab-sponsored,
.newtab-title {
padding: 0 8px;
background-color: rgba(255,159,0,.8);
-moz-padding-end: 24px;
}
-/* CONTROLS */
-.newtab-control {
- width: 24px;
- height: 24px;
- padding: 1px 2px 3px;
- border: none;
- background: transparent url("chrome://browser/skin/newtab/controls.png");
+.newtab-site:hover .newtab-title {
+ background-color: #FFCF00;
}
-.newtab-control-pin:hover {
- background-position: -24px 0;
+.newtab-site[pinned] .newtab-title {
+ padding: 0 15px;
}
-.newtab-control-pin:active {
- background-position: -48px 0;
+.newtab-site[pinned] .newtab-title::before {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
+ background-size: 10px;
+ content: "";
+ height: 17px;
+ left: 0;
+ position: absolute;
+ width: 10px;
}
-.newtab-control-pin[pinned] {
- background-position: -72px 0;
+.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before {
+ left: auto;
+ right: 0;
}
-.newtab-control-pin[pinned]:hover {
- background-position: -96px 0;
-}
-
-.newtab-control-pin[pinned]:active {
- background-position: -120px 0;
+/* CONTROLS */
+.newtab-control {
+ background-color: transparent;
+ background-size: 24px;
+ border: none;
+ height: 24px;
+ width: 24px;
}
-.newtab-control-block {
- background-position: -144px 0;
+.newtab-control-pin,
+.newtab-site[pinned] .newtab-control-pin:hover:active {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
}
-.newtab-control-block:hover {
- background-position: -168px 0;
+.newtab-control-pin:hover,
+.newtab-site[pinned] .newtab-control-pin:hover {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
}
-.newtab-control-block:active {
- background-position: -192px 0;
+.newtab-control-pin:hover:active,
+.newtab-site[pinned] .newtab-control-pin {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
}
-.newtab-control-sponsored {
- background-position: -249px -1px;
+.newtab-control-block {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
}
-.newtab-control-sponsored:hover {
- background-position: -265px -1px;
+.newtab-control-block:hover {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
}
-.newtab-control-sponsored[panelShown] {
- background-position: -281px -1px;
+.newtab-control-block:hover:active {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
}
color: #000000;
}
+#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
+ border-top: 1px dotted #000000;
+ border-bottom: 1px dotted #000000;
+}
+
.category-name {
line-height: 22px;
font-size: 1.25rem;
overflow-y: auto;
border-top-left-radius: 0;
border-top-right-radius: 0;
+ height: 500px;
}
#handersView > listheader > treecol {