X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fpreferences%2Fin-content%2Fpreferences.css;h=3bc88e7ba71890408d86270d266d532b14c0087e;hp=1777433592fde1968cb8b55ba2703ea09d1f15f3;hb=5a199ba1b9eca2066fdf892fe1d4ac96b3b5d19f;hpb=e64883579c16c1c431ffd39cb7af0d551e10dd6f

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