X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fcustomizableui%2FpanelUIOverlay.css;h=1f0c04a92c7368096009b8b7e1a312c2a0d35ab1;hp=1346de4259848fa04348d8ceca095720bd9911ed;hb=86d9f20ae79924670564d61613f483ff6714730b;hpb=5401f433c81e15242767be2df7f86a5c7d99a86d diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index 1346de42..1f0c04a9 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -5,7 +5,7 @@ /* === BEGIN panelUIOverlay.inc.css === */ #PanelUI-popup #PanelUI-contents:empty { - height: 128px; + height: 128px; } #PanelUI-popup #PanelUI-contents:empty::before { @@ -15,8 +15,26 @@ width: 64px; height: 64px; position: absolute; - animation: moveX 3.05s linear 0s infinite alternate, - moveY 3.4s linear 0s infinite alternate; + transition: transform 1s ease-out; + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:active:empty::before { + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; } #PanelUI-popup #PanelUI-contents:empty:hover::before { @@ -33,13 +51,23 @@ } } -@keyframes moveX { +@keyframes whimsyMoveX { + /* These values are adjusted for the padding on the panel. */ + from { margin-left: -9px; } to { margin-left: calc(100% - 55px); } +} + +@keyframes whimsyMoveXRTL { /* These values are adjusted for the padding on the panel. */ - from { margin-left: -15px; } to { margin-left: calc(100% - 49px); } + from { margin-right: -9px; } to { margin-right: calc(100% - 55px); } } -@keyframes moveY { + +@keyframes whimsyMoveY { /* These values are adjusted for the padding and height of the panel. */ - from { margin-top: -6px; } to { margin-top: 58px; } + from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); } +} + +@keyframes whimsyRotate { + to { transform: perspective(5000px) rotateY(360deg); } } #customization-panelHolder { @@ -55,7 +83,6 @@ .panel-subviews { padding: 4px; - background-color: #000000; -moz-margin-start: 38px; } @@ -83,11 +110,13 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan #PanelUI-popup .panel-subview-body { margin: -4px; - padding: 2px 4px; + padding: 4px 4px; } .panel-subview-header, .subviewbutton.panel-subview-footer { + box-sizing: border-box; +/* min-height: 41px; */ padding: 3px; } @@ -189,7 +218,6 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; - -moz-padding-start: 8px; display: -moz-box; } @@ -201,9 +229,17 @@ panelview:not([mainview]) .toolbarbutton-text, padding-bottom: 0; } +.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child { + border-radius: 4px 4px 0 0; +} + +.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child { + border-radius: 0 0 4px 4px; +} + #PanelUI-contents { display: block; - flex: auto; + flex: 1 0 main-size; margin-left: auto; margin-right: auto; max-width: 22.35em; @@ -299,7 +335,7 @@ toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-ico border-radius: 0 0 2px 0; } -.panel-combined-button[disabled] > .toolbarbutton-icon { +#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon { /* opacity: .5; */ } @@ -350,6 +386,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container, .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container, .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .panel-customization-placeholder-child > .toolbarbutton-icon { @@ -421,7 +458,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { display: flex; border-top: 1px solid #9C9CFF; } -+ + #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner { position: relative; } @@ -441,8 +478,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #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; @@ -493,11 +531,11 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-fxa-status { - list-style-image: url("chrome://browser/skin/sync-horizontalbar.png"); + list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png"); } #PanelUI-fxa-status[status="active"] { - list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png"); + list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png"); } #PanelUI-customize { @@ -589,13 +627,11 @@ panelview .toolbarbutton-1, .widget-overflow-list .toolbarbutton-1, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { -/* padding: 2px 6px; +/* padding: 0 6px; background-color: hsla(210,4%,10%,0); border-radius: 2px; border-style: solid; border-color: hsla(210,4%,10%,0);*/ - transition-property: background-color, border-color; - transition-duration: 150ms; } panelview .toolbarbutton-1, @@ -606,8 +642,8 @@ panelview .toolbarbutton-1, } .subviewbutton.panel-subview-footer { -/* border-radius: 0;*/ - border: none; +/* border-radius: 0; */ + margin: 2px 0 0; } .subviewbutton.panel-subview-footer > .menu-text { @@ -632,14 +668,14 @@ panelview .toolbarbutton-1, } .subviewbutton:not(.panel-subview-footer) { -/* margin: 2px 0;*/ + margin: 0; } .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, /* Bookmark items need a more specific selector. */ .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { -/* font-size: 1.1em;*/ +/* font: menu;*/ } .PanelUI-subView .subviewbutton[shortcut]::after { @@ -659,8 +695,8 @@ panelview .toolbarbutton-1, } .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) { - margin-left: 4px; - margin-right: 4px; +/* margin-left: 4px; + margin-right: 4px;*/ } panelview .toolbarbutton-1, @@ -669,28 +705,28 @@ panelview .toolbarbutton-1, } /* -panelview .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]), -toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]), +panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, +toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], -.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]), +.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover { background-color: hsla(210,4%,10%,.08); border-color: hsla(210,4%,10%,.11); } -.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]) { +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover { border-color: hsla(210,4%,10%,.11); } -panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)), -toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)), +panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]), +toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active), menu.subviewbutton:not([disabled])[_moz-menuactive]:active, menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active, -.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)), +.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active), .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) - > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)) { + > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) { background-color: hsla(210,4%,10%,.12); border-color: hsla(210,4%,10%,.14); box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; @@ -710,15 +746,15 @@ menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover, border-top: 1px solid hsla(210,4%,10%,.12); } -menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) { +menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active), +.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) { background-color: hsla(210,4%,10%,.15); border-top: 1px solid hsla(210,4%,10%,.12); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } #BMB_bookmarksPopup .subviewbutton { - font: inherit; + font: menu; font-weight: normal; } @@ -738,22 +774,23 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],: padding-bottom: 0px; } -#BMB_bookmarksPopup menupopup { - padding-top: 2px; +#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator { + / Hide bottom separator as the styled footer includes a top border serving the same purpose / + display: none; } -#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator { - / Hide bottom separator as the styled footer includes a top border serving the same purpose. - * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes - * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force - * a minimum height, and then negative-margin that single pixel into oblivion. That seems - * to be enough to make scrollbox happy. - / - -moz-appearance: none; - visibility: hidden; - min-height: 1px; - margin: -1px 0 0; - border: none; +/ Popups with only one item don't have a footer / +#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox, +/ These popups never have a footer / +#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox, +#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox { + / And so they need some bottom padding: / + padding-bottom: 4px; +} + +/ Disabled (empty) item is always alone and never has an icon, so fix its left padding / +#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton { + padding-left: 6px; } */ @@ -775,20 +812,20 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],: .PanelUI-subView menuseparator.small-separator, .PanelUI-subView toolbarseparator.small-separator { - margin-left: 5px; - margin-right: 5px; +/* margin-left: 5px; + margin-right: 5px;*/ } .cui-widget-panelview menuseparator.small-separator { - margin-left: 10px; - margin-right: 10px; +/* margin-left: 10px; + margin-right: 10px;*/ } .subviewbutton > .menu-accel-container { -moz-box-pack: start; -moz-margin-start: 10px; -moz-margin-end: auto; -/* color: hsl(0,0%,50%);*/ + color: #A09090; } #PanelUI-historyItems > toolbarbutton { @@ -830,13 +867,13 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button 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, @@ -1002,21 +1039,193 @@ toolbarbutton[overflowedItem=true] { background-repeat: no-repeat; } +.subviewbutton[checked="true"]:-moz-locale-dir(rtl) { + background-position: top 5px right 4px; +} + .subviewbutton[checked="true"]:hover { background-image: url("chrome://global/skin/menu/menu-check-hover.gif"); } -.PanelUI-subView .menu-iconic-left { - -moz-appearance: none; +.subbiewbutton > .menu-iconic-left { -moz-margin-end: 3px; } -.PanelUI-subView menuitem[checked="true"] > .menu-iconic-left { +menuitem[checked="true"].subviewbutton > .menu-iconic-left { visibility: hidden; } +.panel-mainview[panelid=customizationui-widget-panel], +#customizationui-widget-multiview > .panel-viewcontainer, +#customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; + color: #FF9F00; +} + +#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer, +#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack, +#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview, +/* NB: currentsubview attribute is temporary as a safe workaround for a layout problem with this + * panel. Do not rely on it, it *will* go away again. */ +#PanelUI-multiView[currentsubview="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-subviews, +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; +} + +#PanelUI-panicView.cui-widget-panelview { + min-width: 280px; +} + +#PanelUI-panic-timeframe { + padding: 15px; + border-bottom: 1px solid #A09090; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon, +#PanelUI-panic-timeframe-icon-small { + background-color: transparent; + -moz-margin-end: 10px; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header.png); + max-height: 48px; + width: 48px; +} + +#PanelUI-panic-timeframe-icon-small { + list-style-image: url(chrome://browser/skin/panic-panel/header-small.png); + max-height: 32px; + width: 32px; +} + +/* current attribute is only set when in use as a subview instead of a main view */ +#PanelUI-panicView[current] #PanelUI-panic-timeframe-icon { + display: none; +} + +#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small { + display: none; +} + +#panic-button-success-header, +#PanelUI-panic-header { + -moz-box-align: center; + margin-bottom: 5px; +} + +#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header { + margin-bottom: 0; +} + +#PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl), +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +/* +.subviewradio { +} + +.subviewradio@buttonStateHover@ { +} + +.subviewradio[selected], +.subviewradio[selected]:hover, +.subviewradio@buttonStateActive@ { +} + +.subviewradio > .radio-check { +} + +.subviewradio > .radio-check[selected] { +} +*/ + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: #A09090; + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + -moz-padding-start: 20px; + padding-top: 2px; + padding-bottom: 2px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-color: transparent; + background-position: center left; +} + +.PanelUI-panic-actionlist:-moz-locale-dir(rtl) { + background-position: center right; +} + +#PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0); +} + +#PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16); +} + +#PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32); +} + +#PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48); +} + +#PanelUI-panic-warning { + color: #FF0000; + text-align: center; + width: 100%; + margin-top: 20px; +} + +#PanelUI-panic-view-button { + background-color: #FF0000; + color: #000000; +} + +#PanelUI-panic-view-button:hover { + background-color: #FFCF00; +} + +#PanelUI-panic-view-button:hover:active { + background-color: #FF9F00; +} + +#PanelUI-panic-view-button > .toolbarbutton-text { + text-align: center; + text-shadow: none; +} + +#panic-button-success-closebutton { +} + +#panic-button-success-closebutton:hover { +} + +#panic-button-success-closebutton:hover:active { +} + /* === END panelUIOverlay.inc.css === */ +.panel-subviews { + background-color: #000000; +} + #PanelUI-contents #zoom-out-btn { padding-left: 12px; padding-right: 12px; @@ -1052,10 +1261,6 @@ toolbarbutton[overflowedItem=true] { /* padding-top: 4px;*/ } -#BMB_bookmarksPopup .menu-text { -/* color: #000;*/ -} - /* bookmark panel separator */ #BMB_bookmarksPopup menuseparator { padding-top: 0; @@ -1095,6 +1300,10 @@ menuitem[type="checkbox"].subviewbutton { 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; } @@ -1107,10 +1316,6 @@ menuitem[type="checkbox"].subviewbutton { -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. */ @@ -1122,14 +1327,14 @@ toolbarbutton.social-provider-menuitem > .toolbarbutton-icon { .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon { visibility: hidden; } -/* + menu.subviewbutton > .menu-right { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png"); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url("chrome://global/skin/menu/menu-arrow.gif"); +} +menu.subviewbutton:hover > .menu-right, +menu.subviewbutton[_moz-menuactive="true"] > .menu-right { + list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif"); } - menu[disabled="true"].subviewbutton > .menu-right { - -moz-image-region: rect(0, 32px, 16px, 16px); + list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif"); } -*/ \ No newline at end of file