diff --git a/Dockerfile.mug b/Dockerfile.mug index 5043043..c0effb5 100644 --- a/Dockerfile.mug +++ b/Dockerfile.mug @@ -16,6 +16,7 @@ COPY ./templates ${INVENIO_INSTANCE_PATH}/templates/ # Replace variables.less COPY themes/MUG/variables.less /opt/env/lib/python3.12/site-packages/invenio_override/assets/semantic-ui/less/invenio_override/variables.less +COPY themes/MUG/overrides.less /opt/env/lib/python3.12/site-packages/invenio_override/assets/semantic-ui/less/invenio_override/overrides.less RUN invenio collect --verbose && invenio webpack create diff --git a/themes/MUG/overrides.less b/themes/MUG/overrides.less new file mode 100644 index 0000000..075c93f --- /dev/null +++ b/themes/MUG/overrides.less @@ -0,0 +1,227 @@ +/* + * Copyright (C) 2020-2023 Graz University of Technology. + * Copyright (C) 2024 Shared RDM. + * + * invenio-override is free software; you can redistribute it and/or modify it + * under the terms of the MIT License; see LICENSE file for more details. + */ + +/* +section backgrounds and text colors +login background color +login & signup page title + */ +.section-content-light-bg { + background-color: @primaryBackground; +} +.section-title { + color: @primaryText; +} +.cover-page { + background-color: @primaryBackground; +} +.panel-free-title { + color: @primaryText; +} + +/* global font styling */ +*, +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +.ui.button, +.ui.items, +.ui.accordion .title:not(.ui), +.ui.items > .item > .content > .header, +.ui.modal > .header, +.ui.menu, +.ui.header, +.ui.form input[type], +.ui.form input[type]:focus { + font-family: "Source Sans Pro"; +} + +pre { + font-size: 14px; +} + +/* button backgrounds */ +.ui.search.button { + background-color: @overridePrimary; +} + +/* accordion styling */ +.ui.accordion.styled { + .title, + .title.active { + background-color: @greyLight; + color: rgba(0, 0, 0, 0.6); + } +} + +/* hover effects */ +.ui.search.button:hover { + background-color: @overrideSecondary; + color: #ffffff; +} + +/* border radius reset */ +.label-keyword, +.ui.label, +.ui.button, +.ui.rdm-sidebar, +.ui.menu, +.ui.input > input, +.ui.segment, +.ui.selection.dropdown, +.ui.accordion.styled, +.ui.card, +.ui.cards > .card, +.ui.basic.button, +.ui.basic.buttons .button, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button, +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.form input[type], +.ui.form input[type]:focus { + border-radius: 0; +} + +/* Global input focus color override - MUG green instead of default blue */ +.ui.input > input:focus, +.ui.form input[type]:focus { + border-color: @mugSearch !important; +} + +.ui.input > input:hover { + border-color: @mugSearch !important; +} + +/* sidebar styling */ +.ui.rdm-sidebar { + background-color: unset; + box-shadow: unset; +} + +.ui.label { + font-weight: 400; +} + +/* access badge colors */ +.ui.label.access-status { + &.open { + background-color: @accessRightOpen; + } + &.embargoed { + background-color: @accessRightEmbargoed; + } + &.metadata-only { + background-color: @accessRightMetadata; + } +} + +/* font face definitions */ +@font-face { + font-family: "Source Sans Pro"; + src: url("./fonts/SourceSansPro/SourceSansPro-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Source Sans Pro"; + src: url("./fonts/SourceSansPro/SourceSansPro-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; +} + +#alert-content { + display: block !important; +} + +/* UI messages */ +.ui.success.message { + background-color: #f8ffff; + color: #0e576c; +} +.ui.info.message { + background-color: #f8ffff; + color: #0e576c; +} + +/* accordion field titles */ +.ui.accordion.invenio-accordion-field .title { + background-color: @overridePrimary; + color: @ocerridePlabels !important; +} + +/* button styling */ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: @overridePrimaryBt; + color: @greyDark; +} + +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: @hoverOverridePrimaryBt; + color: @greyDark; +} + +.ui.primary.buttons .button, +.ui.primary.button { + background-color: @overridePrimary; + color: @ocerridePlabels !important; + text-shadow: none; +} + +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: @overrideSecondary; + color: #ffffff; + text-shadow: none; +} + +.ui.primary.buttons .button:active, +.ui.primary.button:active, +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: @overrideSecondary; + color: #ffffff; + text-shadow: none; +} + +/* brand and label */ +.ui.menu .brand.active.item, +.ui.brand.menu .active.item { + border-color: @overridePrimary !important; + background-color: @overridePrimary; + color: #ffffff !important; +} + +.ui.primary.label { + background-color: @overridePrimary; + border-color: @overridePrimary; + color: @ocerridePlabels; +} + +#skip-to-main { + display: none !important; +} + +.right-card { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; +} + +.menus { + font-size: 16.8px; +} diff --git a/themes/MUG/variables.less b/themes/MUG/variables.less index fbc3aa5..f2fa7da 100644 --- a/themes/MUG/variables.less +++ b/themes/MUG/variables.less @@ -1,76 +1,89 @@ /* - * copyright (c) 2020-2023 graz university of technology. - * copyright (c) 2024 shared rdm. + * Copyright (C) 2020-2025 Graz University of Technology. * * invenio-override is free software; you can redistribute it and/or modify it - * under the terms of the mit license; see license file for more details. + * under the terms of the MIT License; see LICENSE file for more details. + * */ -/* badge colors, accessibility */ -@accessRight : #e9711c; +/* ====================================== + Default Colors +====================================== */ + +/* Accessibility-related badge colors */ +@accessRight : @overridePrimary; @accessRightOpen : @accessRight; -@accessRightRestricted : #ff7f45; -@accessRightEmbargoed : #db2828; +@accessRightRestricted : #db2828; +@accessRightEmbargoed : #fbbd08; @accessRightClosed : @accessRightEmbargoed; -@accessRightMetadata : #ff7f45; +@accessRightMetadata : #5e5e5e; -/* primary colors */ +/* Primary colors */ @overridePrimary : #007934; @overrideSecondary : #34b233; @ocerridePlabels : #ffffff; -@overridePrimaryBt : #dbdce0; /* override primary button - e.g. create community */ +@overridePrimaryBt : #dbdce0; +@hoverOverridePrimaryBt : #bfc0c2; -/* general */ -@primaryBackground : #fff; -@primaryText : #000; +/* General colors */ +@primaryBackground : #ffffff; +@primaryText : #000000; -/* mug palette */ +/* Accent colors */ +@greyDark : #393b41; +@greyLight : #e0e1e2; +@labelKeywordBackground : #e8e8e8; + +/* MUG-specific palette */ @mugSearch : @overridePrimary; @outlineRecord : @accessRightMetadata; @recordText : #6b6d74; -@hoverOverridePrimaryBt : #bfc0c2; @recordLightText : #94959a; -/* accent colors */ -@greyDark : #393b41; -@greyLight : #e0e1e2; -@labelKeywordBackground : #e8e8e8; +/* ====================================== + UI-specific Colors +====================================== */ -/* ui message colors */ +/* Message styling */ @uiMsgBc : #fcfff5; @uiMsgGc : @overridePrimary; -/* link and button colors */ -@primaryLinkInverted : @primaryText; -@primaryLinkBackgroundInverted : @primaryBackground; +/* Link and button colors */ @primaryLink : @primaryBackground; @primaryLinkHoverBackground : @primaryText; +@primaryLinkInverted : @primaryText; +@primaryLinkBackgroundInverted : @primaryBackground; @primaryButton : @primaryBackground; @primaryButtonHoverBackground : @primaryText; @primaryButtonInverted : @primaryText; -/* account-specific (signin, signup) */ +/* Account-specific styling (signin, signup) */ @primaryFormAccounts : @primaryBackground; @formAccountsInputPlaceholder : silver; -@fieldInputSelectionBackground : #a7dabc; +@fieldInputSelectionBackground : #50A2CE; @signInBackground : #6b6d74; -/* footer specific */ +/* Footer-specific styling */ @footerGrey : #5e5e5e; @footerBottomBackground : #f2f2f2; -/* record specific */ +/* Record-specific styling */ @recordVersionBackground : #f2f2f2; @randomRecordsFrontpageArticle : rgba(34, 36, 38, 0.15); -/* input styling */ -@outlineColor : #a7dabc; +/* ====================================== + Input and Notification Styling +====================================== */ -/* notification styling */ +@outlineColor : #85B7D9; @notificationBackground : #fffaf3; @notificationBorder : #e2d5c2; -/* home stroke */ +/* ====================================== + Specific Component Styling +====================================== */ + +/* Home stroke SVG styling */ .home-stroke polyline { stroke: @overridePrimary; stroke-linecap: square; @@ -78,7 +91,11 @@ fill: none; } -/* hyperlink hover color */ +/* ====================================== + Hyperlink Styling +====================================== */ + +/* Hyperlink hover and focus */ a:focus, a:hover { color: @recordText;