first part of synching LCARStrek with windows theme changes in Firefox 28 cycle

[themes.git] / LCARStrek / browser / preferences / in-content / preferences.css

diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index 1777433592fde1968cb8b55ba2703ea09d1f15f3..3bc88e7ba71890408d86270d266d532b14c0087e 100644 (file)
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -6,10 +6,6 @@
 \r
 @namespace html "http://www.w3.org/1999/xhtml";\r
 \r
-#preferences-home {\r
-  display: block;\r
-}\r
-\r
 #header {\r
   margin-bottom: 18px;\r
 }\r
@@ -18,90 +14,112 @@
   -moz-margin-start: 10px;\r
 }\r
 \r
-.landingButton {\r
-  -moz-box-align: center;\r
-  -moz-box-orient: vertical;\r
+caption {\r
+  font-size: 1.667rem;\r
 }\r
 \r
-.landingButton:hover {\r
-  cursor: pointer;\r
+.main-content {\r
+  max-width: 800px;\r
 }\r
 \r
-.landingButton-label {\r
-  margin-top: 4px;\r
+prefpane {\r
+  padding: 0;\r
 }\r
 \r
-.landingButton-icon {\r
-  display: block;\r
-  width: 32px;\r
-  height: 32px;\r
-  background-image: url("chrome://browser/skin/preferences/Options.png");\r
-  background-repeat: no-repeat;\r
+prefpane > .content-box {\r
+  overflow: auto;\r
 }\r
 \r
-.preference-icon {\r
-  display: block;\r
-  width: 32px;\r
-  height: 32px;\r
-  background-image: url("chrome://browser/skin/preferences/Options.png");\r
-  background-repeat: no-repeat;\r
-  margin: 0 20px;\r
+/* Category List */\r
+\r
+#categories {\r
+  -moz-appearance: none;\r
+  border: none;\r
+  -moz-margin-end: -1px;\r
+  background-color: transparent;\r
+  position: relative;\r
+  margin-top: 31px;\r
 }\r
 \r
-.preference-icon[type="general"],\r
-.landingButton-icon[type="general"] {\r
-  background-position: 0 0;\r
+.category {\r
+  -moz-appearance: none;\r
+  background-color: transparent;\r
+  color: #FF9F00;\r
+  padding: 10px 4px;\r
+  border-width: 1px;\r
+  border-style: solid;\r
+  border-color: transparent;\r
+  -moz-padding-end: 8px;\r
+  -moz-box-align: center;\r
+  overflow: hidden;\r
+  min-height: 0;\r
+  height: 52px;\r
 }\r
 \r
-.preference-icon[type="content"],\r
-.landingButton-icon[type="content"] {\r
-  background-position: -64px 0;\r
+.category:-moz-locale-dir(ltr) {\r
+  border-top-left-radius: 5px;\r
+  border-bottom-left-radius: 5px;\r
 }\r
 \r
-.preference-icon[type="applications"],\r
-.landingButton-icon[type="applications"] {\r
-  background-position: -96px 0;\r
+.category:-moz-locale-dir(rtl) {\r
+  border-top-right-radius: 5px;\r
+  border-bottom-right-radius: 5px;\r
 }\r
 \r
-.preference-icon[type="privacy"],\r
-.landingButton-icon[type="privacy"] {\r
-  background-position: -128px 0;\r
+.category[selected] {\r
+  background-color: #008484;\r
+  color: #FFCF00;\r
+  border-color: #9C9CFF;\r
+  /* -moz-border-end-color: transparent; */\r
 }\r
 \r
-.preference-icon[type="security"],\r
-.landingButton-icon[type="security"] {\r
-  background-position: -160px 0;\r
+.category-name {\r
+  font-size: 1.5rem;\r
+  -moz-padding-end: 24px;\r
 }\r
 \r
-.preference-icon[type="advanced"],\r
-.landingButton-icon[type="advanced"] {\r
-  background-position: -192px 0;\r
+/* Maximize the size of the viewport when the window is small */\r
+@media (max-width: 800px) {\r
+  .category-name {\r
+    display: none;\r
+  }\r
 }\r
 \r
-.preference-icon[type="sync"],\r
-.landingButton-icon[type="sync"] {\r
-  background-image: url("chrome://browser/skin/preferences/Options-sync.png");\r
+.category-icon {\r
+  width: 32px;\r
+  height: 32px;\r
+  margin: 0 6px;\r
+  -moz-margin-start: 6px;\r
+  -moz-margin-end: 5px;\r
+  list-style-image: url("chrome://browser/skin/preferences/Options.png");\r
 }\r
 \r
-caption {\r
-  font-size: 20px;\r
+#category-general > .category-icon {\r
+  -moz-image-region: rect(0, 32px, 32px, 0);\r
 }\r
 \r
-.heading {\r
-  height: 50px;\r
-  background-color: #FF9F00;\r
-  color: #000000;\r
-  border-radius: 5px;\r
-  margin-bottom: 15px;\r
-  -moz-box-align: center;\r
+#category-content > .category-icon {\r
+  -moz-image-region: rect(0, 96px,  32px, 64px)\r
 }\r
 \r
-prefpane {\r
-  padding: 0;\r
+#category-application > .category-icon {\r
+  -moz-image-region: rect(0, 128px,  32px, 96px)\r
 }\r
 \r
-prefpane > .content-box {\r
-  overflow: auto;\r
+#category-privacy > .category-icon {\r
+  -moz-image-region: rect(0, 160px,  32px, 128px)\r
+}\r
+\r
+#category-security > .category-icon {\r
+  -moz-image-region: rect(0, 192px,  32px, 160px)\r
+}\r
+\r
+#category-advanced > .category-icon {\r
+  -moz-image-region: rect(0, 224px, 32px, 192px)\r
+}\r
+\r
+#category-sync > .category-icon {\r
+  list-style-image: url("chrome://browser/skin/preferences/Options-sync.png");\r
 }\r
 \r
 /* Applications Pane Styles */\r