Semantic variables

lakejason0 · Oct 26, 2021 · edf30d0 · edf30d0
1 parent c7746ad
commit edf30d0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 90 deletions.
diff --git a/resources/skin.js b/resources/skin.js
@@ -1,17 +1,18 @@
 /* scripts can go here */
+window.Lakeus = window.Lakeus || {};
+Lakeus.portletOutsideClose = function (id) {
+    $(document).on('click', function (event) {
+        var $target = $(event.target);
+        if ((!$target.closest(id + ' .mw-portlet-body ul').length ||
+            !$target.closest(id + ' .mw-portlet input[type="checkbox"]').length) &&
+            ($(id + ' .mw-portlet-body').css("opacity") == 1)) {
+            $(id + ' input[type="checkbox"]').prop('checked', false);
+        }
+    })
+}
 $(function () {
-    function portletOutsideClose(id) {
-        $(document).on('click', function (event) {
-            var $target = $(event.target);
-            if ((!$target.closest(id + ' .mw-portlet-body ul').length ||
-                !$target.closest(id + ' .mw-portlet input[type="checkbox"]').length) &&
-                ($(id + ' .mw-portlet-body').css("opacity") == 1)) {
-                $(id + ' input[type="checkbox"]').prop('checked', false);
-            }
-        })
-    }
-    portletOutsideClose('#p-personal');
-    portletOutsideClose('#p-cactions');
-    portletOutsideClose('#p-lang');
-    portletOutsideClose('#p-variants');
+    Lakeus.portletOutsideClose('#p-personal');
+    Lakeus.portletOutsideClose('#p-cactions');
+    Lakeus.portletOutsideClose('#p-lang');
+    Lakeus.portletOutsideClose('#p-variants');
 });
diff --git a/resources/skin.less b/resources/skin.less
@@ -136,8 +136,8 @@ a {
   margin-left: 10px;
 
   #searchInput {
-    background-image: url( 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3Esearch%3C%2Ftitle%3E%3Cg%20fill%3D%22%2354595d%22%3E%3Cpath%20d%3D%22M7.5%2013a5.5%205.5%200%20100-11%205.5%205.5%200%20000%2011zm4.55.46A7.43%207.43%200%20017.5%2015a7.5%207.5%200%20115.96-2.95l6.49%206.49-1.41%201.41-6.49-6.49z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E' );
-    background-color: #fff;
+    background-image: url( 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3Esearch%3C%2Ftitle%3E%3Cg%20fill%3D%22%2354595d%22%3E%3Cpath%20d%3D%22M7.5%2013a5.5%205.5%200%20100-11%205.5%205.5%200%20000%2011zm4.55.46A7.43%207.43%200%20017.5%2015a7.5%207.5%200%20115.96-2.95l6.49%206.49-1.41%201.41-6.49-6.49z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E' ); /* TODO: Variablize */
+    background-color: #fff; /* TODO: Variablize */
     background-size: 18px;
     -webkit-appearance: none;
 
@@ -150,10 +150,10 @@ a {
     }
     margin-top: 0;
     height: 2.25em;
-    border: solid 1px @color-gray-2;
+    border: solid 1px @border-color-search-bar;
     border-radius: 2px;
     padding: 7px 0 7px 29px;
-    box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
+    box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 ); /* TODO: Variablize */
     outline: 0;
     background-position: left 6px center;
     background-repeat: no-repeat;
@@ -240,7 +240,7 @@ a {
   width: 20px;
 
   h3 {
-    background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg== );
+    background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg== ); /* TODO: Variablize */
     text-indent: -999px;
     background-repeat: no-repeat;
     height: 100%;
@@ -419,7 +419,7 @@ main {
 
   &__tagline {
     clear: both;
-    color: @color-base;
+    color: @color-tagline;
     font-size: 0.85em;
     margin-bottom: 12px;
     line-height: 20px;
@@ -533,7 +533,7 @@ div.editOptions {
       position: absolute;
       overflow-y: auto;
       z-index: 2;
-      box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @color-gray;
+      box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @border-color-portlet-body; /* TODO: Variablize */
       border-radius: 3px;
       right: 0;
       min-width: 200px;
@@ -580,12 +580,12 @@ div.editOptions {
 .mw-portlet-lang,
 .mw-portlet-variants {
   margin-top: 10px;
-  border-bottom: 1px solid @color-gray-2;
+  border-bottom: 1px solid @border-color-header-tab;
 
   a {
     font-size: 0.85em;
     margin: 0 5px;
-    color: @color-base;
+    color: @color-accent-header-tab;
     font-weight: bold;
     padding-bottom: 6px;
     display: inline-block;
@@ -594,7 +594,7 @@ div.editOptions {
 
 .mw-portlet-namespaces {
   li.selected {
-    border-bottom: 2px solid @color-base;
+    border-bottom: 2px solid @color-accent-header-tab;
     margin-bottom: -1px;
   }
 }
@@ -604,38 +604,6 @@ div.editOptions {
     display: none;
   }
 }
-/* .mw-portlet-views {
-  flex-grow: 1;
-
-  ul {
-    display: flex;
-    height: 3em;
-    justify-content: space-between;
-  }
-
-  li:first-child {
-    justify-content: flex-start;
-  }
-
-  li:hover {
-    background-color: rgba(0,0,0,0.03);
-  }
-} */
-
-/*
-.mw-portlet-cactions h3,
-.mw-portlet-views li {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 0;
-  overflow: hidden;
-  flex-basis: auto;
-  font-weight: normal;
-  font-size: 100%;
-  padding: 0;
-}
-*/
 
 .mw-portlet-variants .mw-portlet-body ul {
   min-width: 120px;
@@ -644,7 +612,7 @@ div.editOptions {
 .mw-portlet-cactions h3,
 .mw-portlet-cactions li a,
 .mw-portlet-views li a {
-  color: @color-base;
+  color: @color-accent-header-tab;
   text-decoration: none;
 }
 
@@ -654,44 +622,13 @@ div.editOptions {
   font-size: 0.85em;
   margin: 0 5px;
   padding: 0 0 0 0;
-  color: @color-base;
+  color: @color-accent-header-tab;
   font-weight: bold;
   display: inline-block;
   overflow: visible;
 }
 
-/* CATEGORIES
-#catlinks {
-  font-size: 0;
-  border: none;
-  background: none;
-  margin: 40px 0 10px 0;
-  padding: 0;
-
-  .mw-normal-catlinks > a {
-    display: none;
-  }
-
-  ul {
-    margin: 0;
-    font-size: 14px;
-  }
-
-  li {
-    display: inline-block;
-    border: 0;
-  }
-
-  a {
-    padding: 5px 10px;
-    margin-right: 5px;
-    display: block;
-    background-color: @color-gray-2;
-    color: @color-base;
-    box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
-  }
-}
-*/
+/* CATEGORIES */
 
 #catlinks {
   margin: 10px 0;

diff --git a/resources/themeDesigner.js b/resources/themeDesigner.js
@@ -0,0 +1 @@
+window.Lakeus = window.Lakeus || {};
diff --git a/resources/variables.less b/resources/variables.less
@@ -20,10 +20,15 @@
   --border-color-content: #ccc;
   --border-color-toggle-list: #ddd;
   --border-color-search-suggestions: #c8ccd1;
+  --border-color-search-bar: var(--color-gray-2);
+  --border-color-portlet-body: var(--color-gray);
+  --border-color-header-tab: var(--color-gray-2);
   --subheader-color-toggle-list: rgba( 0, 0, 0, 0.6 );
   --logo-text-color-toggle-list: inherit;
   --color-search-suggestions-text: #000;
   --color-search-suggestions-text-current: #fff;
+  --color-tagline: var(--color-base);
+  --color-accent-header-tab: var(--color-base);
   --color-header: white;
   --color-base: #54595d;
   --color-gray: #a2a9b1;
@@ -55,10 +60,15 @@
 @border-color-content: var( --border-color-content );
 @border-color-toggle-list: var( --border-color-toggle-list );
 @border-color-search-suggestions: var(--border-color-search-suggestions);
+@border-color-search-bar: var( --border-color-search-bar );
+@border-color-portlet-body: var( --border-color-portlet-body );
+@border-color-header-tab: var( --border-color-header-tab );
 @subheader-color-toggle-list: var( --subheader-color-toggle-list );
 @logo-text-color-toggle-list: var( --logo-text-color-toggle-list );
 @color-search-suggestions-text: var( --color-search-suggestions-text );
 @color-search-suggestions-text-current: var( --color-search-suggestions-text-current );
+@color-tagline: var( --color-tagline );
+@color-accent-header-tab: var( --color-accent-header-tab );
 @color-header: var( --color-header );
 @color-base: var( --color-base );
 @color-gray: var( --color-gray );