diff --git a/common/common.scss b/common/common.scss
index d8ef730e683e0f3014b971cb9c67514510de7f52..ba32bad266ccc72b72edeede2ba26b082aa35536 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -54,15 +54,41 @@ body {
background-color: $header_primary;
}
+// HEADER //
.d-header {
height: 5em;
box-shadow: none;
}
+.navigation-topics {
+ .container.list-container {
+ @include border-radius;
+ box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
+ padding: 2em;
+ border-top: 8px solid $primary-medium;
+ margin-top: .8em;
+ }
+}
+
+.menu-panel .d-label {
+ color: $primary;
+}
+
.alert.alert-info {
border-radius: 10px;
}
+// MENU //
+
+.menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
+.menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
+ background-color: var(--primary-medium-low);
+}
+
+.user-menu .quick-access-panel li:hover {
+ background-color: var(--tertiary-low);
+}
+
// Text //
p {
color: var(--primary);
@@ -162,25 +188,6 @@ p {
}
}
-.navigation-topics {
-
- .container.list-container {
- @include border-radius;
- box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
- padding: 2em;
- border-top: 8px solid $primary-medium;
- margin-top: .8em;
- }
-}
-
-.menu-panel .d-label {
- color: $primary;
-}
-
-a {
- color: var(--primary-medium-hover);
-}
-
.open .grippie {
background: var(--tertiary);
}
@@ -250,11 +257,6 @@ a {
}
}
-.menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
-.menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
- background-color: var(--primary-medium-low);
-}
-
.create {
@include border-radius;
}
@@ -269,14 +271,6 @@ a {
}
}
-.user-menu .quick-access-panel li:hover {
- background-color: var(--tertiary-low);
-}
-
-a:hover {
- color: var(--tertiary-hover);
-}
-
.image-upload-controls {
border: 1px solid var(--secondary);
.fa {
@@ -298,6 +292,15 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
padding: 0.5em;
}
+// LINKS //
+a {
+ color: var(--primary-medium-hover);
+}
+
+a:hover {
+ color: var(--tertiary-hover);
+}
+
// Color showcase categories //
.custom-homepage-columns .col {
position: relative;
diff --git a/scss/boutons.scss b/scss/boutons.scss
index 5a4dc2afd935da625900026cd467bcbfc9c74be8..91842e420ba5b1f570d4f56ab5f544cfaec621c6 100644
--- a/scss/boutons.scss
+++ b/scss/boutons.scss
@@ -2,50 +2,50 @@
// Bouton & btn //
.btn[href] {
- color: var(--secondary);
+ color: var(--secondary);
}
.btn-default, .btn.btn-icon-text {
- color: var(--secondary);
- background: var(--primary-medium);
- transition: all 0.3s linear;
- @include border-radius;
- text-transform: uppercase;
+ color: var(--secondary);
+ background: var(--primary-medium);
+ transition: all 0.3s linear;
+ @include border-radius;
+ text-transform: uppercase;
- .fa {
- color: var(--secondary);
- }
+ .fa {
+ color: var(--secondary);
+ }
}
.btn-primary {
- @include border-radius;
+ @include border-radius;
}
.discourse-no-touch .btn-danger:hover {
- background: var(--danger-hover);
+ background: var(--danger-hover);
}
.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
- color: var(--tertiary-hover);
+ color: var(--tertiary-hover);
}
.discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
- color: var(--secondary);
- background: $header-background;
- border-radius: 5px;
- .fa {
- color: var(--quarternary);
- &:hover {
- color: var(--quarternary);
- }
+ color: var(--secondary);
+ background: $header-background;
+ border-radius: 5px;
+ .fa {
+ color: var(--quarternary);
+ &:hover {
+ color: var(--quarternary);
}
+ }
}
/// button widget ///
.btn-flat .icon {
- color: $primary-low-mid;
+ color: $primary-low-mid;
}
.btn-flat .d-icon {
- color: $primary-low-mid;
+ color: $primary-low-mid;
}
diff --git a/scss/categories_box.scss b/scss/categories_box.scss
index 2b5dc97b7068809239719dc1d14e1d372f7e3161..7b71f77c0d4d63bef53bb5f977bb2557ed62fc94 100644
--- a/scss/categories_box.scss
+++ b/scss/categories_box.scss
@@ -1,65 +1,65 @@
// Boxes & categories //
/// White background in boxes ///
.category-boxes {
- display: grid;
- grid-gap: 2em;
- grid-template-columns: 32% 32% 32%;
- @include border-radius;
- .category-box {
- width: 100%;
- margin: 0;
- overflow: hidden;
- border: none;
- border-top: 8px solid;
-
+ display: grid;
+ grid-gap: 2em;
+ grid-template-columns: 32% 32% 32%;
+ @include border-radius;
+ .category-box {
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ border: none;
+ border-top: 8px solid;
+
@include border-radius;
box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
.category-box-inner {
- border: none;
- padding: 0;
+ border: none;
+ padding: 0;
- .category-details {
+ .category-details {
padding: 0.3em;
- }
+ }
}
&:hover {
- box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
- transform: translateY(-2px);
+ box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
+ transform: translateY(-2px);
}
-}
+ }
}
/// category title ///
.category-list .category-text-title {
-align-items: baseline;
-display: inline-flex;
+ align-items: baseline;
+ display: inline-flex;
}
@media (max-width: 960px) {
-.category-boxes.with-logos.with-subcategories {
+ .category-boxes.with-logos.with-subcategories {
grid-template-columns: 1fr;
-}
+ }
}
.category-list-item.category {
-@include border-radius;
-border-right: 1px solid var(--primary-low) !important;
-box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
-margin: 0 0.59em 2em .59em;
+ @include border-radius;
+ border-right: 1px solid var(--primary-low) !important;
+ box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
+ margin: 0 0.59em 2em .59em;
}
#create-topic {
-color: var(--secondary);
-background: var(--primary-medium);
-transition: all 0.3s linear;
-@include border-radius;
-text-transform: uppercase;
-border: 2px solid var(--primary-medium);
-.fa {
+ color: var(--secondary);
+ background: var(--primary-medium);
+ transition: all 0.3s linear;
+ @include border-radius;
+ text-transform: uppercase;
+ border: 2px solid var(--primary-medium);
+ .fa {
color: var(--secondary);
-}
-&:hover {
+ }
+ &:hover {
background: var(--primary-medium);
color: var(--secondary);
box-shadow: 4px 4px $tertiary;
@@ -68,129 +68,129 @@ border: 2px solid var(--primary-medium);
.fa {
color: var(--secondary);
}
-}
+ }
}
// Categories boxes //
.category-list tbody .category {
- padding: 0;
- border-width: 0;
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
+ padding: 0;
+ border-width: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
}
.category-list tbody td {
-display: inline-block;
-width: 250px;
-height: 250px;
-border-left-color: transparent;
-background-color: $secondary;
-border-radius: 10px;
+ display: inline-block;
+ width: 250px;
+ height: 250px;
+ border-left-color: transparent;
+ background-color: $secondary;
+ border-radius: 10px;
}
.category-list tbody .category {
-border-left: 6px solid;
-background-color: none;
+ border-left: 6px solid;
+ background-color: none;
}
/// here, 120px is about logo/icons size ///
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
---height: 120px;
-height: var(--height);
-width: calc(var(--height) * var(--aspect-ratio));
-max-width: 100%;
-border-color: none;
-border-top: none;
+ --height: 120px;
+ height: var(--height);
+ width: calc(var(--height) * var(--aspect-ratio));
+ max-width: 100%;
+ border-color: none;
+ border-top: none;
}
.logo.aspect-image img, .logo.aspect-image img {
-padding-top: 20px;
+ padding-top: 20px;
}
.categories-and-latest {
-flex-direction: column;
+ flex-direction: column;
}
.category-list {
-thead,
-.topics,
-.subcategories,
-.category-description {
-display: none;
-align-items: baseline;
-}
-
-.category-list .category-text-title {
-align-items: baseline;
-display: inline-flex;
-}
-
-tbody {
-text-align: center;
-
-tr {
- display: inline-block;
- width: 250px;
- height: 250px;
- margin: 0.75em;
- border-left-color: transparent;
- border-radius: 10px;
- border-bottom: none;
-}
-
-.category {
- padding: 0;
- border-width: 0;
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-
- &:hover {
- box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
- transform: translateY(-2px) !important;
+ thead,
+ .topics,
+ .subcategories,
+ .category-description {
+ display: none;
+ align-items: baseline;
+ }
+
+ .category-list .category-text-title {
+ align-items: baseline;
+ display: inline-flex;
+ }
+
+ tbody {
+ text-align: center;
+
+ tr {
+ display: inline-block;
+ width: 250px;
+ height: 250px;
+ margin: 0.75em;
+ border-left-color: transparent;
+ border-radius: 10px;
+ border-bottom: none;
}
- > div {
- height: 100%;
- }
-
- .category-logo {
- float: unset;
- margin: 0 auto;
- }
-
- .category-name {
- margin-top: 1.25em;
- }
-
- h3 {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
- a[href] {
- flex-direction: column-reverse;
- width: 250px;
- }
- }
-
- &:after {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- content: "";
- z-index: 1;
- box-sizing: border-box;
- pointer-events: none;
- opacity: 0.35;
- border-color: inherit;
+ .category {
+ padding: 0;
+ border-width: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+
+ &:hover {
+ box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
+ transform: translateY(-2px) !important;
+ }
+
+ > div {
+ height: 100%;
+ }
+
+ .category-logo {
+ float: unset;
+ margin: 0 auto;
+ }
+
+ .category-name {
+ margin-top: 1.25em;
+ }
+
+ h3 {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ a[href] {
+ flex-direction: column-reverse;
+ width: 250px;
+ }
+ }
+
+ &:after {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ content: "";
+ z-index: 1;
+ box-sizing: border-box;
+ pointer-events: none;
+ opacity: 0.35;
+ border-color: inherit;
+ }
}
-}
-}
+ }
}
diff --git a/scss/footer.scss b/scss/footer.scss
index 74c3b91a1bffba66a1253127265c9ffd264587ae..40b866dcb5aebf6e41e1b56b8c178f3e45cc033c 100644
--- a/scss/footer.scss
+++ b/scss/footer.scss
@@ -1,12 +1,12 @@
// Footer background and Font //
.custom-footer{
- background: var(--primary-medium) !important;
+ background: var(--primary-medium) !important;
}
.custom-footer > ul {
- color: var(--secondary) !important;
+ color: var(--secondary) !important;
}
.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
- color: var(--secondary) !important;
+ color: var(--secondary) !important;
}