--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <style>
+ use[id^="add"]:not(:target) {
+ display: none;
+ }
+ </style>
+ <g id="add-shape" fill="currentColor">
+ <rect x="3" y="7" width="10" height="2" />
+ <rect x="7" y="3" width="2" height="10" />
+ </g>
+ </defs>
+ <use xlink:href="#add-shape" id="add" color="#FFCF00"/>
+ <use xlink:href="#add-shape" id="add-checked" color="#000000"/>
+</svg>
\ No newline at end of file
.devtools-searchinput {
background-color: #000000;
color: #E7ADE7;
+ border: 1px solid #9C9CFF;
+}
+
+.devtools-textinput:focus,
+.devtools-searchinput:focus {
+ border-color: #008484;
}
.CodeMirror-Tern-fname {
box-sizing: border-box;
}
+body {
+ /* The view will grow bigger as the window gets resized, until 400px */
+ max-width: 400px;
+ margin: 0px auto;
+ padding: 0;
+ /* "Contain" the absolutely positioned #main element */
+ position: relative;
+}
+
+/* Header: contains the position and size of the element */
+
+#header {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 4px 14px;
+ display: -moz-box;
+ vertical-align: top;
+}
+
+#header:-moz-dir(rtl) {
+ -moz-box-direction: reverse;
+}
+
+#header > span {
+ display: -moz-box;
+}
+
+#element-size {
+ -moz-box-flex: 1;
+}
+
+#element-size:-moz-dir(rtl) {
+ -moz-box-pack: end;
+}
+
+@media (max-height: 228px) {
+ #header {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-top: 10px;
+ margin-bottom: 8px;
+ }
+}
+
+/* Main: contains the box-model regions */
+
#main {
+ position: absolute;
+ box-sizing: border-box;
+ /* The regions are semi-transparent, so the white background is partly
+ visible */
background-color: #FF9F00;
- border-color: #A09090;
- border-style: dotted;
color: var(--theme-selection-color);
+ /* Make sure there is some space between the window's edges and the regions */
+ margin: 0 14px 10px 14px;
+ width: calc(100% - 2 * 14px);
}
.margin,
.size {
- color: var(--theme-selection-color);
+/* color: var(--theme-highlight-blue); */
}
+/* Regions are 3 nested elements with wide borders and outlines */
+
#content {
- background-color: #008484;
+ height: 25px;
+}
+
+#margins,
+#borders,
+#padding {
+ border-color: var(-theme-splitter-color);
+ border-width: 25px;
+ border-style: solid;
+ outline: dotted 1px var(-theme-splitter-color);
}
-#padding,
#margins {
+ /* This opacity applies to all of the regions, since they are nested */
+ opacity: .8;
}
-#padding {
- background-color: #9C9CFF;
- border-color: #9C9CFF;
+/* Respond to window size change by changing the size of the regions */
+
+@media (max-height: 228px) {
+ #content {
+ height: 18px;
+ }
+
+ #margins,
+ #borders,
+ #padding {
+ border-width: 18px;
+ }
}
-#borders {
- background-color: #FFCF00;
+/* Regions colors */
+
+#margins {
border-color: #FFCF00;
}
-#margins {
- background-color: #A09090;
+#borders {
border-color: #A09090;
}
+#padding {
+ border-color: #8050B0;
+}
+
+#content {
+ background-color: #008484;
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#main > p {
+ position: absolute;
+ pointer-events: none;
+}
+
+#main > p {
+ margin: 0;
+ text-align: center;
+}
+
+#main > p > span {
+ vertical-align: middle;
+ pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.top,
+.bottom {
+ width: calc(100% - 2px);
+ text-align: center;
+}
+
+.padding.top {
+ top: 55px;
+}
+
+.padding.bottom {
+ bottom: 57px;
+}
+
+.border.top {
+ top: 30px;
+}
+
+.border.bottom {
+ bottom: 31px;
+}
+
+.margin.top {
+ top: 5px;
+}
+
+.margin.bottom {
+ bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right {
+ top: 22px;
+ line-height: 132px;
+}
+
+.size {
+ width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left {
+ width: 25px;
+}
+
+.padding.left {
+ left: 52px;
+}
+
+.padding.right {
+ right: 51px;
+}
+
+.border.left {
+ left: 26px;
+}
+
+.border.right {
+ right: 26px;
+}
+
+.margin.right {
+ right: 0;
+}
+
+.margin.left {
+ left: 0;
+}
+
+.rotate.left:not(.editing) {
+ transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+ transform: rotate(90deg);
+}
+
+/* Coordinates should be different when the window is small, because we make
+ the regions smaller then */
+
+@media (max-height: 228px) {
+ .padding.top {
+ top: 37px;
+ }
+
+ .padding.bottom {
+ bottom: 38px;
+ }
+
+ .border.top {
+ top: 19px;
+ }
+
+ .border.bottom {
+ bottom: 20px;
+ }
+
+ .margin.top {
+ top: 1px;
+ }
+
+ .margin.bottom {
+ bottom: 2px;
+ }
+
+ .size,
+ .margin.left,
+ .margin.right,
+ .border.left,
+ .border.right,
+ .padding.left,
+ .padding.right {
+ line-height: 80px;
+ }
+
+ .margin.right,
+ .margin.left,
+ .border.left,
+ .border.right,
+ .padding.right,
+ .padding.left {
+ width: 21px;
+ }
+
+ .padding.left {
+ left: 35px;
+ }
+
+ .padding.right {
+ right: 35px;
+ }
+
+ .border.left {
+ left: 16px;
+ }
+
+ .border.right {
+ right: 17px;
+ }
+}
+
+/* Legend, displayed inside regions */
+
+.legend {
+ position: absolute;
+ margin: 5px 6px;
+ z-index: 1;
+}
+
+.legend[data-box="margin"] {
+ color: #000000;
+}
+
+@media (max-height: 228px) {
+ .legend {
+ margin: 2px 6px;
+ }
+}
+
+/* Editable fields */
+
.editable {
border: 1px dashed transparent;
+ -moz-user-select: text;
}
.editable:hover {
.styleinspector-propertyeditor {
border: 1px solid #008484;
padding: 0;
-}
\ No newline at end of file
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.size > span {
+ cursor: default;
+}
+
+/* Hide all values when the view is inactive */
+
+body.inactive > #header > #element-position,
+body.inactive > #header > #element-size,
+body.inactive > #main > p {
+ visibility: hidden;
+}
--- /dev/null
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <style>
+ use[id^="pseudo-class"]:not(:target) {
+ display: none;
+ }
+ </style>
+ <rect id="class-block-maskBG" width="8" height="8" fill="#fff"/>
+ <rect id="class-block" width="8" height="8" rx="1" ry="1"/>
+ <mask id="mask-block-solid">
+ <use xlink:href="#class-block-maskBG"/>
+ <use xlink:href="#class-block" transform="translate(3 3)" fill="#000"/>
+ </mask>
+ <g id="pseudo-class-shape">
+ <rect x=".5" y=".5" width="7" height="7" rx="1" ry="1" mask="url(#mask-block-solid)" fill="none" stroke="currentColor" stroke-width="1"/>
+ <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" fill-opacity=".4"/>
+ <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" transform="translate(4 4)"/>
+ <g transform="translate(8 8)" fill="currentColor">
+ <path d="M2.5,0C2.2,0,2,0.2,2,0.5C2,0.8,2.2,1,2.5,1C2.8,1,3,0.8,3,0.5 C3,0.2,2.8,0,2.5,0z M4.5,0C4.2,0,4,0.2,4,0.5C4,0.8,4.2,1,4.5,1C4.8,1,5,0.8,5,0.5C5,0.2,4.8,0,4.5,0z M0.5,6C0.8,6,1,5.8,1,5.5 C1,5.2,0.8,5,0.5,5C0.2,5,0,5.2,0,5.5C0,5.8,0.2,6,0.5,6z M0.5,4C0.8,4,1,3.8,1,3.5C1,3.2,0.8,3,0.5,3C0.2,3,0,3.2,0,3.5 C0,3.8,0.2,4,0.5,4z M7.5,2C7.2,2,7,2.2,7,2.5C7,2.8,7.2,3,7.5,3C7.8,3,8,2.8,8,2.5C8,2.2,7.8,2,7.5,2z M7.5,4C7.2,4,7,4.2,7,4.5 C7,4.8,7.2,5,7.5,5C7.8,5,8,4.8,8,4.5C8,4.2,7.8,4,7.5,4z M5.5,7C5.2,7,5,7.2,5,7.5C5,7.8,5.2,8,5.5,8C5.8,8,6,7.8,6,7.5 C6,7.2,5.8,7,5.5,7z M3.5,7C3.2,7,3,7.2,3,7.5C3,7.8,3.2,8,3.5,8C3.8,8,4,7.8,4,7.5C4,7.2,3.8,7,3.5,7z M0.5,2C0.8,2,1,1.8,1,1.5v-1 C1,0.2,0.8,0,0.5,0C0.2,0,0,0.2,0,0.5v1C0,1.8,0.2,2,0.5,2z M8,0.5C8,0.2,7.8,0,7.5,0h-1C6.2,0,6,0.2,6,0.5C6,0.8,6.2,1,6.5,1h1 C7.8,1,8,0.8,8,0.5z M7.5,6C7.2,6,7,6.2,7,6.5v1C7,7.8,7.2,8,7.5,8C7.8,8,8,7.8,8,7.5v-1C8,6.2,7.8,6,7.5,6z M1.5,7h-1 C0.2,7,0,7.2,0,7.5C0,7.8,0.2,8,0.5,8h1C1.8,8,2,7.8,2,7.5C2,7.2,1.8,7,1.5,7z"/>
+ <use xlink:href="#class-block" fill-opacity=".2"/>
+ </g>
+ </g>
+ </defs>
+ <use xlink:href="#pseudo-class-shape" id="pseudo-class" color="#FFCF00"/>
+ <use xlink:href="#pseudo-class-shape" id="pseudo-class-checked" color="#000000"/>
+</svg>
.ruleview-selectorhighlighter.highlighted {
background-position: -16px 0;
}
+
+#pseudo-class-panel:not([hidden]) {
+ border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+#ruleview-add-rule-button::before {
+ background-image: url("chrome://browser/skin/devtools/add.svg#add");
+ background-size: cover;
+}
+#ruleview-add-rule-button:hover::before {
+ background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
+}
+
+#pseudo-class-panel-toggle::before {
+ background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+ background-size: cover;
+}
+#pseudo-class-panel-toggle:hover::before,
+#pseudo-class-panel-toggle[checked]::before {
+ background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
+ filter: none !important;
+}
}
/* SEARCH */
+#newtab-search-logo:hover {
+ background-color: #FFCF00;
+ border: none;
+}
+#newtab-search-logo[active] {
+ background-color: #FF9F00;
+ border: none;
+}
+#newtab-search-logo {
+ background-image: url("chrome://browser/skin/magnifier.png");
+}
+#newtab-search-logo.magnifier[active],
+#newtab-search-logo.magnifier:hover {
+ background-image: url("chrome://browser/skin/magnifier-hover.png");
+}
+/* Newer versions only */
+#newtab-search-icon {
+ background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
+}
+#newtab-search-logo.magnifier[active],
+#newtab-search-logo.magnifier:hover {
+ background-image: url("chrome://browser/skin/magnifier-hover.png");
+}
+
#newtab-search-text {
border: 1px solid #9C9CFF;
background-color: #000000;
}
#newtab-search-submit {
- background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+ background-image: none;
background-color: #C09070;
+ color: #000000;
+ box-shadow: none;
border-radius: 0 300px 300px 0;
border: none;
-moz-margin-start: 3px;
}
#newtab-search-text:focus + #newtab-search-submit,
#newtab-search-text[autofocus] + #newtab-search-submit {
- background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+ background-image: none;
background-color: #008484;
+ color: #000000;
box-shadow: none;
}
#newtab-search-text + #newtab-search-submit:hover {
- background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") no-repeat scroll center center;
+ background-image: none;
background-color: #FFCF00;
+ color: #000000;
box-shadow: none;
}
+/* Newer versions only */
+#newtab-search-submit[value=""],
+#newtab-search-text:focus + #newtab-search-submit[value=""],
+#newtab-search-text[autofocus] + #newtab-search-submit[value=""],
+#newtab-search-text + #newtab-search-submit[value=""]:hover {
+ background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
+}
+
+/* CUSTOMIZE */
+#newtab-customize-overlay {
+ background: #A09090;
+}
+
+#newtab-customize-panel,
+#newtab-customize-panel-anchor,
+#newtab-customize-panel-inner-wrapper,
+.newtab-customize-panel-item,
+.newtab-customize-complex-option {
+ background-color: #000000;
+}
+
+#newtab-customize-title {
+ color: #9C9CFF;
+ background-color: #000000;
+}
+
+.newtab-customize-panel-item[selected],
+.newtab-customize-panel-subitem[selected] {
+ color: #FF9F00;
+}
+
+.newtab-customize-panel-item:not([selected]),
+.newtab-customize-panel-subitem:not([selected]) {
+ color: #A09090;
+}
+
+.newtab-customize-panel-subitem > .checkbox {
+ background-color: #000000;
+ border-color: #A09090;
+}
+
+.newtab-customize-panel-subitem[selected] > .checkbox {
+ background-color: #000000;
+ background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
+ color: #FF9F00;
+}
+
+.newtab-customize-panel-item:not(:first-child),
+.newtab-search-panel-engine {
+ border-top: 1px solid #A09090;
+}
+
+.newtab-customize-complex-option:hover > .selectable:not([selected]),
+.selectable:hover:not([selected]),
+.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
+.newtab-customize-panel-item:hover:not([selected]) {
+ background-color: #FFCF00;
+ color: #000000;
+}
+
+.newtab-customize-complex-option:hover > .selectable:not([selected]),
+.selectable:hover:not([selected]) {
+ background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");
+}
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path fill="#A09090" d="M21.7,20.3l-1.4,1.4l-5.4-5.4c-1.3,1-3,1.7-4.9,1.7 c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8c0,1.8-0.6,3.5-1.7,4.9L21.7,20.3z M10,4c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6 S13.3,4,10,4z"/>
+</svg>
max-width: 52em;\r
}\r
\r
-.container.flex {\r
+.container.flex,\r
+.container.restore-chosen {\r
display: flex;\r
flex-direction: column;\r
flex-grow: 1;\r
projects / themes.git / commitdiff
