modification: add theming variables (#152)

2025-12-22 20:51:58 +00:00 · 2021-03-01 18:33:47 +01:00
parent ee94d72b65
commit 2b60954fe4
13 changed files with 147 additions and 94 deletions
--- a/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss
+++ b/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss
@@ -8,4 +8,3 @@

 $navbar_background_image: unset;
 $navbar_background_color: #ffffff;
-
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less
@@ -13,68 +13,68 @@

 #login-tug-logo {
  & g {
-    fill: #e4154b;
+    fill: @tugrazRed;
  }
 }

 #login-tug-logo:hover {
  & g {
-    fill: #231f20;
+    fill: @tugrazBlack;
  }
 }

 .accounts-link {
  margin: 5%;
-  color: #fff;
-  border: 1px solid #fff;
+  color: @primaryLink;
+  border: 1px solid @primaryLink;
  background-color: transparent;
 }

 .accounts-link :hover {
  font-size: smaller !important;
-  color: white;
-  background-color: #000000 !important;
+  color: @primaryLink;
+  background-color: @primaryLinkHoverBackground !important;
 }

 .tu-button-style button {
  cursor: pointer;
-  border: 1px solid #fff;
+  border: 1px solid @primaryButton;
  background-color: transparent;
  height: 29px;
-  color: #fff;
+  color: @primaryButton;
  font-family: "Source Sans Pro";
  font-weight: 300;
  font-size: 16px;
 }
 .tu-button-style button:hover {
  cursor: pointer;
-  color: white;
-  background-color: #000000 !important;
+  color: @primaryButton;
+  background-color: @primaryButtonHoverBackground !important;
 }

 .form-accounts {
  margin: 15%;
  text-align: left !important;
  & i {
-    color: #fff !important;
+    color: @primaryFormAccounts !important;
  }
  & label {
    display: flex !important;
    font-weight: 300 !important;
-    color: white !important;
+    color: @primaryFormAccounts !important;
  }
  & input {
    border: 0px none !important;
    padding: 0px !important;
-    border-bottom: 1px solid white !important;
+    border-bottom: 1px solid @primaryFormAccounts !important;
    background-color: transparent !important;
-    color: white !important;
+    color: @primaryFormAccounts !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  & input::placeholder {
    opacity: 1 !important;
-    color: silver !important;
+    color: @formAccountsInputPlaceholder !important;
  }
  & th {
    display: block;
@@ -85,7 +85,7 @@
 }

 .field > input::selection {
-  background: #50a2ce;
+  background: @fieldInputSelectionBackground;
 }

 .accounts-header {
@@ -96,7 +96,7 @@
 login and sign-up pages form background color
 */
 .sign-form {
-  background-color: #245b78 !important;
+  background-color: @signInBackground !important;
  padding: 0 !important;
  height: 100%;
 }
@@ -104,10 +104,10 @@ login and sign-up pages form background color
 .tug-button-login {
  display: flex;
  align-items: center;
-  fill: #e4154b;
+  fill: @tugrazRed;
 }
 .tug-button-login :hover {
-  fill: #000000;
+  fill: @primaryButtonHoverBackground;
 }
 .login-page-button {
  margin: 5%;
@@ -118,20 +118,20 @@ login and sign-up pages form background color
    cursor: pointer;
  }
  & a:hover {
-    background-color: #000;
-    color: #fff !important;
+    background-color: @primaryLinkHoverBackground;
+    color: @primaryLink !important;
    text-decoration: none;
  }
 }

 .login-page-button-white {
-  color: #fff !important;
+  color: @primaryButton !important;
  font-family: "Source Sans Pro";
  font-size: initial;
 }

 .login-page-button-black {
-  color: #000 !important;
+  color: @primaryButtonInverted !important;
  font-family: "Source Sans Pro";
  font-size: initial;
 }
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
@@ -7,7 +7,7 @@
 */

 #footer {
-    color: #5E5E5E;
+    color: @footerGrey;

    /*background-image: url("/static/images/footer.jpg");*/
    -webkit-background-size: 100% 100%;
@@ -22,18 +22,18 @@
    background-attachment: fixed;

    &.footer-bottom {
-      background-color: #f2f2f2;
+      background-color: @footerBottomBackground;
      padding-top: 15px;
      padding-bottom: 15px;
      font-size: 16px;
 
      a {
        text-decoration: none;
-        color: #5E5E5E;
+        color: @footerGrey;
 
        &:hover, &:focus {
-          color: #ffffff;
-          background-color: #000000;
+          color: @primaryLink;
+          background-color: @primaryLinkHoverBackground;
        }
      }
    }
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less
@@ -22,12 +22,12 @@ h2 {
 }

 .record-version {
-  color: #777777;
-  background-color: #f2f2f2 !important;
+  color: @greyDark;
+  background-color: @recordVersionBackground !important;
 }

 .random-records-frontpage article {
-  border-bottom: 1px solid rgba(34,36,38,.15);
+  border-bottom: 1px solid @randomRecordsFrontpageArticle;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
 }
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
@@ -10,7 +10,7 @@
  width: 18px;
  height: 18px;
  vertical-align: top;
-  fill: #e4154b;
+  fill: @tugrazRed;
 }

 /*****logo section******/
@@ -18,18 +18,18 @@
  vertical-align: middle;
  white-space: nowrap;
  & a {
-    fill: #e4154b;
+    fill: @tugrazRed;
  }
 }

 .affiliation-logo :hover {
  text-decoration: none;
-  fill: #000000;
-  color: #000000;
+  fill: @primaryLinkHoverBackground;
+  color: @primaryLinkHoverBackground;
 }

 .affiliation {
-  background-color: white;
+  background-color: @primaryLink;
  display: table;
  margin: 0 auto 80px;
  max-width: 1060px;
@@ -78,12 +78,12 @@ a {
 .short-menu-right {
  display: table-cell;
  width: 50%;
-  color: #000000;
+  color: @primaryLinkInverted;
 }

 .short-menu-right :hover {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
 }

 .short-menu-right-button {
@@ -104,15 +104,15 @@ a {
  & a {
    padding: 5px;
    background-color: transparent;
-    color: #000;
+    color: @primaryLinkInverted;
    text-decoration: none;
  }
 }

 .short-menu-left-lang:hover {
  & a {
-    background-color: #000;
-    color: #fff;
+    background-color: @primaryLinkHoverBackground;
+    color: @primaryLink;
    text-decoration: none;
  }
 }
@@ -126,7 +126,7 @@ a {
    & svg {
      & g {
        stroke-linejoin: round;
-        stroke: #000;
+        stroke: @primaryLinkInverted;
        stroke-miterlimit: 10;
        stroke-width: 2;
        fill: none;
@@ -137,11 +137,11 @@ a {

 .search-icon-header:hover {
  & a {
-    background-color: #000;
+    background-color: @primaryLinkHoverBackground;
    text-decoration: none;
    & svg {
      & g {
-        stroke: #fff;
+        stroke: @primaryLink;
      }
    }
  }
@@ -150,7 +150,7 @@ a {
 .short-menu-left-search {
  display: inline-block;
  margin: 12px 9px 6px 0;
-  color: #000000;
+  color: @primaryLinkInverted;
 }

 .short-menu-right-main-menu {
@@ -181,8 +181,8 @@ svg:not(:root) {
 }

 .main-menu-entry a:hover {
-  background-color: #000;
-  color: #fff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
  text-decoration: none;
 }

@@ -191,7 +191,7 @@ svg:not(:root) {
 }

 .main-menu-underline-line {
-  border: 2px solid #e0e1e2 !important;
+  border: 2px solid @greyLight !important;
  border-radius: 0;
 }

@@ -200,13 +200,13 @@ svg:not(:root) {
 }

 .affiliation-text a:hover {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
  text-decoration: none;
 }

 .main-menu {
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid @primaryLinkInverted;
  box-sizing: border-box;
  height: 39px;
  margin-top: -1px;
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less
@@ -1,5 +1,5 @@
 .ui.inverted.header{
-    color:#000;
+    color: @primaryLinkInverted;
 }

 .login-page-button {
@@ -10,14 +10,14 @@
      cursor: pointer;
    }
    & a:hover {
-      background-color: #000;
-      color: #fff !important;
+      background-color: @primaryLinkHoverBackground;
+      color: @primaryLink !important;
      text-decoration: none;
    }
  }

 .text-color{
-    color: #000;
+    color: @primaryLinkInverted;
 }

@media (max-width: 767px) {
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less
@@ -14,5 +14,5 @@
 }

 .text-muted {
-    color: #777;
+    color: @greyDark;
 }
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
@@ -12,7 +12,7 @@
 * to #ffffff
 ***/
 .section-content-light-bg {
-  background-color: #ffffff;
+  background-color: @primaryBackground;
 }

 /***
@@ -21,7 +21,7 @@
 * to #000000
 ***/
 .section-title {
-  color: #000000;
+  color: @primaryText;
 }


@@ -32,7 +32,7 @@
 ***/
 .cover-page {
  //text-align: center;
-  background-color: #ffffff;
+  background-color: @primaryBackground;
 }


@@ -42,7 +42,7 @@
 * To #000000
 ***/
 .panel-free-title {
-  color: #000000;
+  color: @primaryText;
 }


@@ -75,16 +75,16 @@ pre {
 ***/
 /*.ui.button,*/
 .ui.search.button {
-  background-color:#e4154b;
+  background-color: @tugrazRed;
 }

 .ui.button:hover,
 .ui.search.button:hover {
-  background-color:#000000;
+  background-color: @primaryButtonHoverBackground;
 }

 .ui.button:hover {
-  color:#fff;
+  color: @primaryButton;
 }

 /***
@@ -123,3 +123,33 @@ pre {
 .ui.label {
  font-weight: 400;
 }
+
+.ui.label.access-right {
+  float: right;
+  color: @accessRight;
+  background-color: white;
+
+  &.open {
+    color: @accessRightOpen;
+    background-color: white;
+
+  }
+
+  &.restricted {
+    color: @accessRightRestricted;
+    background-color: white;
+
+  }
+
+  &.embargoed {
+    color: @accessRightEmbargoed;
+    background-color: white;
+
+  }
+
+  &.closed {
+    color: @accessRightClosed;
+    background-color: white;
+
+  }
+}
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less
@@ -5,11 +5,6 @@
 * it under the terms of the MIT License; see LICENSE file for more details.
 */

-.access-right {
-  color: #e9711c;
-  float: right;
-}
-
 .title .dropdown {
  display: none;
 }
@@ -21,6 +16,6 @@
 .label.label-keyword {
  font-size: 0.71428571rem;
  font-weight: 400;
-  background-color: #E8E8E8;
+  background-color: @labelKeywordBackground;
  border: unset;
 }
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
@@ -14,7 +14,7 @@
 }

 .creator:not(:last-child):after {
-  color: #777;
+  color: @greyDark;
  content: ';';
 }

@@ -26,20 +26,3 @@
 .identifiers {
  display: inline;
 }
-
-.ui.access-right {
-  color: #FFFFFF;
-
-  &.open {
-    color: @accessRightOpen;
-  }
-  &.restricted {
-    color: @accessRightRestricted;
-  }
-  &.embargoed {
-    color: @accessRightEmbargoed;
-  }
-  &.closed {
-    color: @accessRightClosed;
-  }
-}
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
@@ -12,11 +12,56 @@
 ***/

 //@import "../invenio_app_rdm/variables.less";
-
 //@navbar_background_image: unset;
 //@navbar_background_color: #ffffff;

-@accessRightOpen: #e9711c;
+
+// badge colors, accessibility
+@accessRight          : #e9711c;
+@accessRightOpen      : #e9711c;
@accessRightRestricted: #fbbd08;
-@accessRightEmbargoed: #db2828;
-@accessRightClosed: #db2828;
+@accessRightEmbargoed : #db2828;
+@accessRightClosed    : #db2828;
+
+// primary colors TU Graz
+@tugrazBlack: #231f20;
+@tugrazRed  : #e4154b;
+
+
+// accent colors
+@greyDark              : #777;
+@greyLight             : #E0E1E2;
+@labelKeywordBackground: #E8E8E8;
+
+
+
+// link and button colors
+@primaryLinkInverted          : #000;
+@primaryLinkBackgroundInverted: #fff;
+@primaryLink                  : #fff;
+@primaryLinkHoverBackground   : #000;
+@primaryButton                : #fff;
+@primaryButtonHoverBackground : #000;
+@primaryButtonInverted        : #000f;
+
+
+
+// general
+@primaryBackground: #fff;
+@primaryText      : #000;
+
+
+
+//account (signin, signup) specific
+@primaryFormAccounts          : #fff;
+@formAccountsInputPlaceholder : silver;
+@fieldInputSelectionBackground: #50a2ce;
+@signInBackground             : #245b78;
+
+// footer specific
+@footerGrey            : #5E5E5E;
+@footerBottomBackground: #f2f2f2;
+
+// record specific
+@recordVersionBackground : #f2f2f2;
+@randomRecordsFrontpageArticle: rgba(34, 36, 38, .15);
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
@@ -93,6 +93,7 @@
                </small>
              </div>
            </div>
+
            <!--Disabled on feb-relase - enable when stable-->
            <!-- <div class="right floated column">
              <span class="access-right">
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html
@@ -56,7 +56,7 @@
            </div>

            <div class="right floated column">
-              <span class="access-right">
+              <span class="ui label access-right">
                <i class="icon lock open"></i>
                {{ record.access.access_right | make_dict_like('access_right') | vocabulary_title('access_right') }}
                {%- for right in record.metadata.rights %}