From: Robert Kaiser Date: Sun, 20 Sep 2015 22:47:29 +0000 (+0200) Subject: make newTab and inspector tool work well from 40 up to 43 nightly X-Git-Tag: LCARStrek-2.37^0 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=1f756abf03f98e18ecac7bc2d4e6d58682a47076;p=themes.git make newTab and inspector tool work well from 40 up to 43 nightly --- diff --git a/LCARStrek/browser/devtools/add.svg b/LCARStrek/browser/devtools/add.svg new file mode 100644 index 00000000..a9c169ce --- /dev/null +++ b/LCARStrek/browser/devtools/add.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index 8c0f9a5a..a6f7eabc 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -419,6 +419,12 @@ div.CodeMirror span.eval-text { .devtools-searchinput { background-color: #000000; color: #E7ADE7; + border: 1px solid #9C9CFF; +} + +.devtools-textinput:focus, +.devtools-searchinput:focus { + border-color: #008484; } .CodeMirror-Tern-fname { diff --git a/LCARStrek/browser/devtools/layoutview.css b/LCARStrek/browser/devtools/layoutview.css index ed74d93c..0c295a3a 100644 --- a/LCARStrek/browser/devtools/layoutview.css +++ b/LCARStrek/browser/devtools/layoutview.css @@ -6,43 +6,313 @@ 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

*/ + +#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 { @@ -52,4 +322,18 @@ .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; +} diff --git a/LCARStrek/browser/devtools/pseudo-class.svg b/LCARStrek/browser/devtools/pseudo-class.svg new file mode 100644 index 00000000..5c41473d --- /dev/null +++ b/LCARStrek/browser/devtools/pseudo-class.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css index 00ee6f91..182a97ac 100644 --- a/LCARStrek/browser/devtools/ruleview.css +++ b/LCARStrek/browser/devtools/ruleview.css @@ -245,3 +245,25 @@ .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; +} diff --git a/LCARStrek/browser/magnifier-hover.png b/LCARStrek/browser/magnifier-hover.png new file mode 100644 index 00000000..c011e8b2 Binary files /dev/null and b/LCARStrek/browser/magnifier-hover.png differ diff --git a/LCARStrek/browser/magnifier-hover@2x.png b/LCARStrek/browser/magnifier-hover@2x.png new file mode 100644 index 00000000..68172a97 Binary files /dev/null and b/LCARStrek/browser/magnifier-hover@2x.png differ diff --git a/LCARStrek/browser/magnifier.png b/LCARStrek/browser/magnifier.png index bcce4ad2..35009601 100644 Binary files a/LCARStrek/browser/magnifier.png and b/LCARStrek/browser/magnifier.png differ diff --git a/LCARStrek/browser/magnifier@2x.png b/LCARStrek/browser/magnifier@2x.png index 6aef26a1..12616e4e 100644 Binary files a/LCARStrek/browser/magnifier@2x.png and b/LCARStrek/browser/magnifier@2x.png differ diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css index 37cbe79d..f1455c73 100644 --- a/LCARStrek/browser/newtab/newTab.css +++ b/LCARStrek/browser/newtab/newTab.css @@ -252,6 +252,30 @@ body { } /* 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; @@ -266,20 +290,88 @@ body { } #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"); +} diff --git a/LCARStrek/browser/search-indicator-magnifying-glass.svg b/LCARStrek/browser/search-indicator-magnifying-glass.svg new file mode 100644 index 00000000..a34e82b5 --- /dev/null +++ b/LCARStrek/browser/search-indicator-magnifying-glass.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css index 3ad5e539..9bcb30ab 100644 --- a/LCARStrek/global/in-content/info-pages.css +++ b/LCARStrek/global/in-content/info-pages.css @@ -18,7 +18,8 @@ body { max-width: 52em; } -.container.flex { +.container.flex, +.container.restore-chosen { display: flex; flex-direction: column; flex-grow: 1;