Merge pull request #67 from ImperialCollegeLondon/feature/branding

Feature/branding
ImperialCollegeLondon · Sep 20, 2024 · 537d19a · 537d19a
2 parents b6c1a5d + 181227a
commit 537d19a
Show file tree

Hide file tree

Showing 55 changed files with 2,026 additions and 157 deletions.
diff --git a/assets/less/site/collections/form.overrides b/assets/less/site/collections/form.overrides
@@ -0,0 +1,5 @@
+.ui.form {
+    input {
+        border-radius: 0;
+    }
+}
diff --git a/assets/less/site/collections/grid.overrides b/assets/less/site/collections/grid.overrides
@@ -0,0 +1,4 @@
+.invenio-administration.ui.grid > .side-bar.column {
+  background-color: @lavender;
+  border-right: 2px solid @primaryColor;
+}
diff --git a/assets/less/site/collections/menu.overrides b/assets/less/site/collections/menu.overrides
@@ -0,0 +1,129 @@
+/***********************************************
+         Invenio App RDM Menu Overrides
+***********************************************/
+
+#invenio-nav.ui.menu {
+    margin-top: 2rem;
+    .ui.menu {
+        background-color: transparent;
+        box-shadow: none;
+        .item {
+            text-decoration: underline;
+            text-decoration-color: @primaryColor;
+            a:not(.ui.button) {
+                display: inline-block;
+                color: @primaryColor;
+                padding: 2rem 1rem;
+                text-decoration: underline;
+                text-decoration-color: @primaryColor;
+                &:hover {
+                    color: @black;
+                    text-decoration: underline;
+                    text-decoration-color: @black;
+                }
+            }
+            a:not(.ui.button):has(.icon) {
+                text-decoration: none;
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+        }
+        &.transition.visible {
+            a.item {
+                text-decoration: none;
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}
+
+#rdm-burger-toggle {
+    font-size: 20px;
+    position: absolute;
+    right: -1.5rem;
+    top: calc(50%);
+    border: none;
+
+    #rdm-burger-menu-icon {
+        .navicon {
+            background: @primaryColor;
+            color: @primaryColor;
+            &:hover {
+                color: @black;
+            }
+        }
+    }
+}
+
+.ui.secondary.pointing.menu .item {
+    padding: @itemVerticalPadding @itemHorizontalPadding;
+    &.active {
+        border-color: @primaryColor;
+        font-weight: @fontSemibold;
+    }
+    &:hover {
+        border-color: @black;
+    }
+}
+
+.ui.menu {
+    box-shadow: none;
+}
+
+.ui.vertical.menu {
+    .ui.header.item {
+        font-weight: @fontSemibold;
+    }
+    a.item {
+        i {
+            text-decoration: none !important;
+        }
+        color: @darkTextColor;
+        font-weight: @fontRegular;
+        text-decoration: none;
+    }
+}
+
+.invenio-administration .side-menu-toggle {
+    color: @primaryColor;
+}
+
+#invenio-admin-home-nav {
+    box-shadow: none;
+    background: @lavender;
+    border-right: 2px @primaryColor solid;
+}
+
+.invenio-administration #invenio-admin-top-nav.ui.menu {
+    background: @white;
+}
+
+.ui.dropdown .menu.visible.transition {
+    min-width: min-content;
+    .item:not(.disabled) {
+        width: 100%;
+        text-decoration: none;
+        &:hover, &:focus {
+            background-color: @whiteSmoke;
+        }
+    }
+    .item.disabled:not(.active) {
+        background-color: transparent;
+        color: @slateGray;
+        &:hover, &:focus {
+            i {
+                text-decoration: none !important;
+            }
+            color: @slateGray;
+            background-color: transparent;
+            font-weight: @fontRegular;
+            text-decoration: none;
+        }
+    }
+    .item:not(.active) {
+        background-color: @whiteSmoke;
+    }
+}
diff --git a/assets/less/site/collections/message.variables b/assets/less/site/collections/message.variables
@@ -0,0 +1,26 @@
+.ui.message {
+    background-color: @white;
+    color: @black;
+    margin-bottom: .5rem;
+    &.positive {
+        background-color: @greenBackground;
+        border: 1px solid @green;
+        .header {
+            color: @green;
+        }
+    }
+    &.warning {
+        border: 1px solid @darkOrange;
+        background: @orangeBackground;
+        .header {
+            color: @brown;
+        }
+    }
+    &.negative {
+        background-color: @redBackground;
+        border: 1px solid red;
+        .header {
+            color: @red;
+        }
+    }
+}
diff --git a/assets/less/site/collections/table.overrides b/assets/less/site/collections/table.overrides
@@ -0,0 +1,7 @@
+.ui.table thead th {
+    background-color: @lavender;
+}
+
+.ui.table tbody tr td.collapsing > .ui.buttons {
+    flex-wrap: wrap;
+}
diff --git a/assets/less/site/collections/table.variables b/assets/less/site/collections/table.variables
@@ -0,0 +1 @@
+@headerBackground: @lavender;
diff --git a/assets/less/site/elements/button.overrides b/assets/less/site/elements/button.overrides
@@ -0,0 +1,127 @@
+.ui.button,
+.ui.basic.buttons .button,
+.ui.basic.button {
+    background-color: @defaultButtonBackgroundColor;
+    &:not(.search),
+    &:not(#skip-to-main){
+        border-style: solid !important;
+        border-width: 1px !important;
+    }
+    border-color: @defaultButtonBorderColor;
+    color: @defaultButtonTextColor;
+    &:hover {
+        background: @black;
+        color: @white;
+    }
+}
+
+.ui.button.primary:not(.disabled),
+.ui.button.positive:not(.disabled) {
+    background-color: @primaryButtonBackgroundColor;
+    border-color: @primaryButtonBorderColor;
+    color: @primaryButtonTextColor !important;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @primaryButtonBackgroundColorHovered;
+        border-color: @primaryButtonBorderColorHovered;
+        color: @primaryButtonTextColorHovered !important;
+    }
+}
+
+.ui.button.disabled {
+    background-color: @disabledButtonBackgroundColor;
+    border-color: @disabledButtonBorderColor;
+    color: @disabledButtonTextColor !important;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @disabledButtonBackgroundColor;
+        border-color: @disabledButtonBorderColor;
+        color: @disabledButtonTextColor !important;
+    }
+}
+
+div.ui.card.access-right .ui.two.buttons .ui.active.button.positive {
+    background-color: @green;
+    border-color: @green;
+    color: @white;
+}
+
+.ui.button.secondary {
+    background-color: @primaryButtonBackgroundColor;
+    border-color: @defaultButtonBorderColor;
+    color: @primaryButtonTextColor;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @primaryButtonBackgroundColorHovered;
+        border-color: @defaultButtonBorderColorHovered;
+        color: @primaryButtonTextColorHovered;
+    }
+}
+
+.ui.button.negative,
+.ui.button.red {
+    background-color: @negativeButtonBackgroundColor;
+    border-color: @negativeButtonBorderColor;
+    color: @negativeButtonTextColor;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @negativeButtonBackgroundColorHovered;
+        border-color: @negativeButtonBorderColorHovered;
+        color: @negativeButtonTextColorHovered;
+    }
+}
+
+#skip-to-main {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	color: @black;
+	background: @whiteSmoke;
+	border: none;
+	font-weight: 400;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	transform: translateY(-100%);
+	transition: transform 0.25s ease-out;
+	z-index: 100;
+
+	&:focus {
+		position: absolute;
+		left: 0px;
+		transform: none;
+		background: @whiteSmoke;
+		outline: 0;
+	}
+}
+
+.ui.button.search {
+    border: none;
+    &:hover {
+        i.icon.search {
+            color: @white;
+        }
+    }
+}
+
+.ui.basic.buttons {
+    .ui.button:not(.active),
+    .ui.basic.button:not(.active){
+        background-color: @white !important;
+        box-shadow: none !important;
+        border: 1px solid rgba(34, 36, 38, 0.15) !important;
+        color: @black !important;
+        &:hover {
+            background: @whiteSmoke !important;        }
+    }
+    .active.button,
+    .ui.button.active,
+    .ui.basic.button.active {
+        background-color: @black !important;
+        border: 1px @black !important;
+        color: @white !important;
+    }
+}
diff --git a/assets/less/site/elements/button.variables b/assets/less/site/elements/button.variables
@@ -0,0 +1,55 @@
+@searchButtonColor: @whiteSmoke;
+@searchButtonColorHover: @black;
+
+@fontWeight: @fontRegular;
+
+/*-------------------------------
+default button
+--------------------------------*/
+
+@defaultButtonBackgroundColor: @white;
+@defaultButtonBorderColor: @black;
+@defaultButtonTextColor: @black;
+@defaultButtonBackgroundColorHovered: @black;
+@defaultButtonBorderColorHovered: @black;
+@defaultButtonTextColorHovered: @whiteSmoke;
+
+/*------------------------------
+primary button
+--------------------------------*/
+@primaryButtonBackgroundColor: @primaryColor;
+@primaryButtonBorderColor: @primaryColor;
+@primaryButtonTextColor: @white;
+@primaryButtonBackgroundColorHovered: @black;
+@primaryButtonBorderColorHovered: @black;
+@primaryButtonTextColorHovered: @white;
+
+/*-------------------------------
+secondary button
+--------------------------------*/
+
+@secondaryButtonBackgroundColor: @white;
+@secondaryButtonBorderColor: @primaryColor;
+@secondaryButtonTextColor: @primaryColor;
+@secondaryButtonBackgroundColorHovered: @primaryColor;
+@secondaryButtonBorderColorHovered: @primaryColor;
+@secondaryButtonTextColorHovered: @white;
+
+/*-------------------------------
+negative button
+--------------------------------*/
+
+@negativeButtonBackgroundColor: @white;
+@negativeButtonBorderColor: @red;
+@negativeButtonTextColor: @red;
+@negativeButtonBackgroundColorHovered: @red;
+@negativeButtonBorderColorHovered: @red;
+@negativeButtonTextColorHovered: @white;
+
+/*-------------------------------
+disabled button
+--------------------------------*/
+
+@disabledButtonBackgroundColor: @whiteSmoke;
+@disabledButtonBorderColor: @darkGray;
+@disabledButtonTextColor: @darkGray;
diff --git a/assets/less/site/elements/container.overrides b/assets/less/site/elements/container.overrides
@@ -0,0 +1,12 @@
+.ui.container.frontpage-header {
+    background-color: @frontpageSearchBarBackgroundColor !important;
+}
+
+.ui.container.page-subheader {
+    padding-inline: @itemVerticalPadding @itemHorizontalPadding;
+    display: flex;
+    align-items: center;
+    &-outer {
+        background-color: @subheaderColor;
+    }
+}