X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fbrowser.css;h=be874fa3ce34ed2395cf85431c3cdabbb3bce2e9;hp=b40dde7588b710b8817f6d5dc9e19bc03e53b6b3;hb=f897a590a135f4de8227cc5cc228bd0b60885c05;hpb=c1d2ce3eaa44d719906dbac174a64279a4094b47 diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index b40dde75..be874fa3 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -7,6 +7,7 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); +@namespace svg url("http://www.w3.org/2000/svg"); toolbar { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar"); @@ -61,8 +62,8 @@ menubar { /* margin-top: 3px;*/ } -#main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar, -#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar { +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar, +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar { /* margin-top: 15px;*/ } @@ -126,13 +127,6 @@ menubar { visibility: visible; } -/* Make the menu inherit the toolbar's color. On non-compositor (Aero Basic, XP modern, classic) - * this is defined above, but only for tabsintitlebar. Otherwise (Aero Glass, Windows 8), - * this is hardcoded to black in browser-aero.css, even without tabsintitlebar. */ - #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) { -/* color: inherit; */ - } - #nav-bar { /* Position the toolbar above the bottom of background tabs */ position: relative; @@ -1268,7 +1262,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-bri #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon { /* padding: 2px 6px; border: 1px solid; border-color: transparent; @@ -1328,19 +1322,20 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { */ } -window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon { } +#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text, #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container, -window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon, +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon { } -#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text, @@ -1388,21 +1383,40 @@ window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([o border-radius: 10000px 0 0 10000px; } -window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button { +/* pre-31 forward button */ +window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button { transition: opacity 150ms ease-out; } -window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true], -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled=true] { +window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] { opacity: 0; } -window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar], -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded-by-urlbar] { +window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] { visibility: hidden; } +/* post-31 forward button */ +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button { + transition: margin-left,opacity 150ms ease-out; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] { + margin-left: -30px !important; + opacity: 0; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] { + /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ + transition-delay: 100s; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] { + /* when not hovered anymore, trigger a new transition to hide the forward button immediately */ + margin-left: -30.01px !important; + opacity: 0; +} + #back-button { /* padding-top: 3px !important; padding-bottom: 3px !important; @@ -1445,8 +1459,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/ } -#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, -#forward-button:-moz-locale-dir(rtl) { +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } /* @@ -1587,68 +1600,94 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded /* background-color: white;*/ } -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper { +/* pre-31 forward button */ +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper { padding-left: 22px; -moz-margin-start: -22px; position: relative; pointer-events: none; } -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar { +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar { /* -moz-border-start: none; margin-left: 0; */ pointer-events: all; } -window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar { +/* The next rule is a workaround to deal with the above rules in post-31 */ +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #forward-button { + pointer-events: all; +} + +window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar { transition: margin-left 150ms ease-out; } -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) { +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) { /* border-top-left-radius: 0; border-bottom-left-radius: 0; */ } -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { /* border-top-right-radius: 0; border-bottom-right-radius: 0; */ } -window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] { +window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper { /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/ } -window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar { +window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar { margin-left: -22px; } -window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar { +window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar { /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ transition-delay: 100s; } -window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar { +window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar { /* when not hovered anymore, trigger a new transition to hide the forward button immediately */ margin-left: -22.01px; } window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl), -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl), +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { + /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */ + transform: scaleX(-1); +} + +/* post-31 forward button */ +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar { + -moz-border-start: none; +/* margin-left: 0;*/ +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) { +/* border-top-left-radius: 0; + border-bottom-left-radius: 0; */ +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { +/* border-top-right-radius: 0; + border-bottom-right-radius: 0; */ +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper { +/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/ + -moz-margin-start: -5px; +} + window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl), window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { - /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */ + /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */ transform: scaleX(-1); } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) { + -moz-box-direction: reverse; +} + html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder { color: #E7ADE7; @@ -1749,25 +1788,29 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box -moz-margin-end: 1px; } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; +} + window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { padding-left: 2px; - transition: padding-left; + transition: padding-left; /* pre-31 */ } window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { padding-right: 2px; - transition: padding-right; + transition: padding-right; /* pre-31 */ } window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar > +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { /* forward button hiding is delayed when hovered */ transition-delay: 100s; @@ -1775,7 +1818,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar > +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ padding-left: 2.01px; @@ -1783,7 +1826,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hove window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl), -window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar > +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ padding-right: 2.01px; @@ -1924,8 +1967,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hove -moz-image-region: rect(0, 16px, 16px, 0); } -window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon, -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon { +window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon { /* -moz-margin-end: 1px;*/ } @@ -2478,16 +2520,6 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { /* End selected tab */ -/* Background tabs */ - -/* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top - of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by - the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */ -#main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) { -} - -/* End background tabs */ - /* Tab pointer-events */ /* .tabbrowser-tab { @@ -2519,6 +2551,16 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { /* === END tabs.inc.css === */ +/* Background tabs: + * + * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top + * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by + * the titlebar. We don't need this in fullscreen since window dragging is not an issue there. + */ +#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([selected=true]) { +/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/ +} + /* Tab DnD indicator */ .tab-drop-indicator { list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png"); @@ -2933,6 +2975,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { } /* Notification icon box */ +#notification-popup .panel-promo-box { +/* margin: 10px -10px -10px; */ +} + #notification-popup-box { position: relative; background-color: #000000; @@ -3163,6 +3209,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar /* Sync Panel */ .sync-panel-icon { + height:32px; width: 32px; background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat; } @@ -3178,7 +3225,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar #sync-error-panel-title, #sync-start-panel-title { + font-size: 120%; font-weight: bold; + margin-bottom: 5px; } #sync-start-panel-subtitle, @@ -3220,11 +3269,40 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar /* === BEGIN highlighter.inc.css === */ -/* Highlighter */ +/* Box model highlighter */ +svg|g.box-model-container { + opacity: 0.4; +} + +svg|polygon.box-model-content { + fill: #008484; +} + +svg|polygon.box-model-padding { + fill: #9C9CFF; +} + +svg|polygon.box-model-border { + fill: #FFCF00; +} + +svg|polygon.box-model-margin { + fill: #A09090; +} + +svg|polygon.box-model-content, +svg|polygon.box-model-padding, +svg|polygon.box-model-border, +svg|polygon.box-model-margin { + stroke: none; +} -.highlighter-outline { - box-shadow: 0 0 0 1px black; - outline: 1px dashed #A09090; +svg|line.box-model-guide-top, +svg|line.box-model-guide-right, +svg|line.box-model-guide-bottom, +svg|line.box-model-guide-left { + stroke: #E7ADE7; + stroke-dasharray: 5 3; } /* Highlighter - Node Infobar */