make popup notifications and arrow panels work and look better
authorRobert Kaiser <kairo@kairo.at>
Sun, 19 Jun 2011 00:05:51 +0000 (02:05 +0200)
committerRobert Kaiser <kairo@kairo.at>
Sun, 19 Jun 2011 00:05:51 +0000 (02:05 +0200)
EarlyBlue/global/button.css
EarlyBlue/global/notification.css
EarlyBlue/global/popup.css
LCARStrek/global/button.css
LCARStrek/global/notification.css
LCARStrek/global/popup.css

index c8972b6ca169ea12e57eb80be175e3d6669ba75e..1178039efb17364e3e07986830768327f96ac22a 100644 (file)
@@ -125,11 +125,23 @@ button[disabled="true"] > .button-box {
 
 /* ::::: menu/menu-button buttons ::::: */
 
-button[type="menu-button"] {
+.button-menubutton-button,
+.button-menubutton-button:hover:active,
+.button-menubutton-button[open="true"],
+.button-menubutton-button[disabled="true"] {
   margin: 0px;
+  background-color: transparent;
   border: none;
 }
 
+button[type="menu-button"]:hover:active > .button-menubutton-button > .button-box,
+button[type="menu-button"][open="true"] > .button-menubutton-button > .button-box {
+  padding-top: 1px;
+  padding-bottom: 0px;
+  -moz-padding-start: 3px;
+  -moz-padding-end: 2px;
+}
+
 .button-menu-dropmarker,
 .button-menubutton-dropmarker {
   margin: 1px;
@@ -146,7 +158,6 @@ button[type="menu-button"] {
   -moz-margin-end: 0;
 }
 
-
 /* ::::: plain buttons ::::: */
 
 button.plain {
index 42f38eb9f6d332658c17805bb2d08ab64a5ad97d..351a6bb9d0ebc766b2e2b4ba00e178995f94f065 100644 (file)
@@ -59,8 +59,8 @@ notification[type="critical"] .messageImage {
 }
 
 .popup-notification-closebutton {
-  -moz-margin-end: -14px;
-  margin-top: -10px;
+  -moz-margin-end: -5px;
+  margin-top: -5px;
 }
 
 .popup-notification-closeitem {
index b312935798b2f87d7e7ba7b8e61ad7496659a0e6..d0c7bdc50b2b511ef6455a1e775e071a2d689e63 100644 (file)
@@ -48,6 +48,8 @@ panel {
 }
 
 panel[type="arrow"] {
+  background: transparent;
+  border: none;
   -moz-transition: opacity 300ms;
 }
 
@@ -64,42 +66,43 @@ panel[type="arrow"][side="right"] {
 }
 
 .panel-arrowcontent {
-  border-radius: 6px;
+  border: 1px outset #CCD0DD;
+  background-color: #CCD0DD;
   padding: 6px;
   margin: 3px;
 }
 
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-bottom: -13px;
-  margin-top: -4px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: -8px;
+  margin-top: -6px;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-top: -12px;
-  margin-bottom: -4px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: -8px;
+  margin-bottom: -6px;
 }
 
 .panel-arrow[side="left"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-right: -12px;
-  margin-left: -4px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-right: -8px;
+  margin-left: -6px;
 }
 
 .panel-arrow[side="right"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
   -moz-transform: scaleX(-1);
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: -12px;
-  margin-right: -4px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: -8px;
+  margin-right: -6px;
 }
 
 tooltip {
index 34fc8ae7b57a0de35efdaa730f4acd6559930e79..f8cd97f1fd89bbe9714d4eb3b85471f6663405de 100644 (file)
@@ -147,17 +147,42 @@ button[disabled="true"] > .button-box {
 
 /* ::::: menu/menu-button buttons ::::: */
 
-button[type="menu-button"] {
+.button-menubutton-button,
+.button-menubutton-button:hover,
+.button-menubutton-button:hover:active,
+.button-menubutton-button[open="true"],
+.button-menubutton-button[disabled="true"] {
   margin: 0px;
-  border: none;
+  background-color: transparent;
+}
+
+button[type="menu-button"]:hover:active > .button-menubutton-button > .button-box,
+button[type="menu-button"][open="true"] > .button-menubutton-button > .button-box {
+  padding-top: 2px;
+  padding-bottom: 1px;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 3px;
+}
+
+button[type="menu-button"]:hover > .button-menubutton-button,
+button[type="menu-button"]:hover:active > .button-menubutton-button,
+button[type="menu-button"][open="true"] > .button-menubutton-button {
+  color: #000000;
 }
 
 .button-menu-dropmarker,
 .button-menubutton-dropmarker {
-  border-radius: 3px;
-  margin: 1px;
+  margin: 2px;
   width: 11px;
   height: 11px;
+  background-color: transparent;
+  border: none;
+}
+
+button[type="menu-button"]:hover > .button-menubutton-dropmarker,
+button[type="menu-button"]:hover:active > .button-menubutton-dropmarker,
+button[type="menu-button"][open="true"] > .button-menubutton-dropmarker {
+  list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 }
 
 /* ::::: plain buttons ::::: */
index 601b23d2a1d22ac11e437230a8f89da8018a8bc4..74d8fef9348f07eb0cf5a8338499bcaaa55eb34e 100644 (file)
@@ -66,8 +66,8 @@ notification[type="critical"] .messageImage {
 }
 
 .popup-notification-closebutton {
-  -moz-margin-end: -14px;
-  margin-top: -10px;
+  -moz-margin-end: -5px;
+  margin-top: -5px;
 }
 
 .popup-notification-closeitem {
index d4b60d1da48fc6c58e38c3b15256a96fca5d0802..83ca10db9c7b014b0762e2dca08a9ac693e2f049 100644 (file)
@@ -52,6 +52,8 @@ panel {
 }
 
 panel[type="arrow"] {
+  background: transparent;
+  border: none;
   -moz-transition: opacity 300ms;
 }
 
@@ -68,6 +70,8 @@ panel[type="arrow"][side="right"] {
 }
 
 .panel-arrowcontent {
+  border: 1px solid #FF9F00;
+  background-color: #000000;
   border-radius: 6px;
   padding: 6px;
   margin: 3px;
@@ -75,35 +79,35 @@ panel[type="arrow"][side="right"] {
 
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-bottom: -13px;
-  margin-top: -4px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: -8px;
+  margin-top: -6px;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-top: -12px;
-  margin-bottom: -4px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: -8px;
+  margin-bottom: -6px;
 }
 
 .panel-arrow[side="left"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-right: -12px;
-  margin-left: -4px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-right: -8px;
+  margin-left: -6px;
 }
 
 .panel-arrow[side="right"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
   -moz-transform: scaleX(-1);
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: -12px;
-  margin-right: -4px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: -8px;
+  margin-right: -6px;
 }
 
 tooltip {