diff --git a/resources/sass/core.scss b/resources/sass/core.scss
index 2dbc15ead0..5ef758f083 100644
--- a/resources/sass/core.scss
+++ b/resources/sass/core.scss
@@ -47,7 +47,6 @@
@import "core/dark_flash";
@import "core/dark_footer";
@import "core/dark_header";
-@import "core/dark_homepage";
@import "core/dark_input";
@import "core/dark_job";
@import "core/dark_job_offers";
@@ -63,7 +62,8 @@
@import "core/dark_wiki";
@import "components/tags";
-@import "components/forum/post"; // it needs to be here because post's placeholder use styles in this specific file
+@import "components/forum/post";
+// it needs to be here because post's placeholder use styles in this specific file
@import "pages/auth";
@import "pages/errors";
@@ -87,7 +87,7 @@
#cache-break {
opacity: 0.01; // increment this value to break cache
-
+
/**
* Webpack [contenthash] take into account contents of .css/.scss files,
* but PurgeCss removes unused css elements. When editing .twig file,
diff --git a/resources/sass/core/_dark_homepage.scss b/resources/sass/core/_dark_homepage.scss
deleted file mode 100644
index 0acebeef76..0000000000
--- a/resources/sass/core/_dark_homepage.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-body.theme-dark {
- #box-forum {
- .card.card-forum {
- .nav.nav-forum {
- border-bottom: 1px solid #2f2f2f;
-
- .nav-item .nav-link {
- color: #acacac;
-
- &:hover {
- border-color: #404040;
- }
-
- &.active {
- color: #dedede;
- border-bottom: 2px solid #d7661c;
- }
- }
- }
-
- #box-forum-headline {
- .tab-content .tab-pane {
- .row {
- border-bottom: 1px solid #2f2f2f;
-
- &:nth-child(even) {
- background-color: unset;
- }
- }
-
- a.title {
- color: #acacac;
- }
-
- small {
- color: #7d7d7d;
- }
- }
- }
-
- #stream-wrapper {
- .media {
- .media-object {
- border: 1px solid #242a30;
- background: #121212;
- }
-
- .homepage-activity.post,
- .homepage-activity.comment {
- color: #acacac;
- border-color: #2f2f2f;
- background: #121212;
- box-shadow: 0 1px 2px 0 #121212;
-
- &:after {
- color: inherit;
- }
- }
- }
-
- .recent-activity {
- border-left-color: #242a30;
- }
-
- small {
- color: #7d7d7d;
- }
-
- strong {
- border-left-color: #2f2f2f;
- }
- }
- }
- }
-
- .card-reputation {
- background-color: #1a1a1a;
-
- .media-body {
- a.reputation-username {
- color: #acacac;
- }
- }
-
- .media {
- border-bottom-color: #2f2f2f;
-
- &:after {
- color: #2f2f2f;
- }
- }
- }
-
- h2.h4,
- h4 {
- color: #c8c8c8;
- }
-
- .microblog-wrap {
- &:after {
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%);
- }
- }
-}
diff --git a/resources/sass/core/_dark_markdown.scss b/resources/sass/core/_dark_markdown.scss
index 0c0fa59247..f1f344545a 100644
--- a/resources/sass/core/_dark_markdown.scss
+++ b/resources/sass/core/_dark_markdown.scss
@@ -3,7 +3,6 @@ body.theme-dark {
pre,
{
color: #acacac;
- background-color: #101010;
border: none;
}
diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
index 7acb741db8..2d9fa4c1f0 100644
--- a/resources/sass/core/_dark_topic.scss
+++ b/resources/sass/core/_dark_topic.scss
@@ -17,9 +17,8 @@ body.theme-dark {
header {
nav.navbar {
border-bottom-color: #2f2f2f;
- border-bottom-width: 2px;
- .nav-search {
+ .nav-search { // TODO remove this after new homepage
.search-bar {
background-color: #2a2a2a;
diff --git a/resources/sass/core/_navs.scss b/resources/sass/core/_navs.scss
index 2741fe224c..3693eaad19 100644
--- a/resources/sass/core/_navs.scss
+++ b/resources/sass/core/_navs.scss
@@ -24,16 +24,6 @@
}
}
-.nav-pills {
- .nav-link {
- &.nav-link-style-only {
- // Style an element to look like a nav link,
- // without any functionality of nav link.
- cursor: default;
- }
- }
-}
-
.nav-tabs {
.nav-link.active {
border-top: 2px solid $alt-link-hover-color;
@@ -46,14 +36,18 @@
.nav-link {
cursor: pointer;
color: #777777;
- }
- .nav-link.active {
- color: black;
+ &.active {
+ color: black;
- &, &:hover, &:focus, &:active {
- border-bottom: 2px solid $alt-link-hover-color;
- margin-bottom: -1px;
+ &,
+ &:hover,
+ &:focus,
+ &:active,
+ {
+ border-bottom: 2px solid $alt-link-hover-color;
+ margin-bottom: -2px;
+ }
}
}
}
diff --git a/resources/sass/icons/_icons.scss b/resources/sass/icons/_icons.scss
index 819e549048..390d6f2503 100644
--- a/resources/sass/icons/_icons.scss
+++ b/resources/sass/icons/_icons.scss
@@ -90,6 +90,12 @@ $icon-admin-table-sort: $fa-var-sort;
$icon-admin-table-sort-asc: $fa-var-sort-down;
$icon-admin-table-sort-desc: $fa-var-sort-up;
+@mixin icon {
+ i.fa-fw {
+ @content;
+ }
+}
+
.fa-square-question:before {
content: "\f2fd";
}
diff --git a/resources/sass/layout/_footer.scss b/resources/sass/layout/_footer.scss
index 573070ae73..8ec7acbc7a 100644
--- a/resources/sass/layout/_footer.scss
+++ b/resources/sass/layout/_footer.scss
@@ -114,7 +114,7 @@ footer {
}
}
- #scroll-to-top {
+ .scroll-top {
@include floater;
box-sizing: content-box;
font-size: 16px;
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
index 5aad2e2993..bf7de362f6 100644
--- a/resources/sass/pages/_homepage.scss
+++ b/resources/sass/pages/_homepage.scss
@@ -1,6 +1,9 @@
@charset "UTF-8";
+@import "../../feature/theme/theme";
+@import "../icons/icons";
@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/mixins/text-truncate";
@mixin size($size) {
@if ($size == 'intermediate') {
@@ -17,201 +20,595 @@
}
}
-.card-reputation {
- img, svg {
- width: 40px;
- height: 40px;
+header nav.navbar {
+ .logo {
+ height: 30px;
}
+}
- .progress {
- width: 70%;
+body.lookAndFeelModern {
+ $primary-color-light: #00a538;
+ $secondary-color-light: #005b12;
+ $card-background-dark: #181a1b;
+ $primary-background-light: #e7f7e6;
+ $opposite-color-light: #ffffff;
+ $border-color-light: #dddddd;
+
+ $primary-color-dark: #00a538;
+ $secondary-color-dark: #bdd5c3;
+ $card-background-light: #ffffff;
+ $primary-background-dark: #001306;
+ $opposite-color-dark: #1a1a1a;
+ $border-color-dark: #242a30;
+
+ $body-background-light: #f0f2f5;
+ $body-background-dark: #121314;
+
+ @include light {
+ color: #646466;
+ background: $body-background-light;
}
- .media {
- border-bottom: 1px solid $card-border-color;
- padding-bottom: 10px;
- padding-top: 10px;
- position: relative;
- counter-increment: number;
+ @include dark {
+ color: #c8c8c8;
+ background: $body-background-dark;
+ }
- &:after {
- content: counter(number);
- font-size: 40px;
- color: $card-border-color;
- position: absolute;
- right: 10px;
- top: 9px;
- }
+ .cursor-pointer {
+ cursor: pointer;
+ }
- &:last-child {
- border-bottom: none;
+ .user-avatar-border {
+ padding: 2px;
+ border-radius: 6px;
+ @include background-theme($card-background-light, $card-background-dark);
+
+ .user-avatar {
+ border-radius: 4px;
}
}
- .long-name {
- display: none;
- @include size(intermediate) {
- display: initial;
+ .text-primary {
+ @include light {
+ color: $primary-color-light !important;
+ }
+ @include dark {
+ color: $primary-color-dark !important;
}
}
- .short-name {
- display: initial;
- @include size(intermediate) {
- display: none;
+ .img-thumbnail {
+ background: none;
+ border: none;
+ padding: 0;
+
+ .user-avatar {
+ border-radius: 4px;
+ overflow: hidden;
}
}
-}
-#box-forum {
- #stream-wrapper {
- @include media-breakpoint-down(xl) {
- margin-top: 20px;
- background-position-x: 10px;
- padding-left: 15px;
+ .is-online {
+ width: 11px;
+ height: 11px;
+ border: none;
+ @include background-theme($primary-color-light, $primary-color-dark);
+ }
+
+ header nav.navbar {
+ @include color-theme(#777777, #eeeeee);
+
+ .nav-link,
+ .btn-toggle-theme,
+ {
+ color: inherit;
+ }
+
+ .logo {
+ width: 15px;
+ height: 20px;
+ }
+
+ .btn-register {
+ @include light {
+ color: $opposite-color-light;
+ background: $primary-color-light;
+ border: 1px solid $primary-color-light;
+ &:hover {
+ background: #007e2b;
+ border-color: #007e2b;
+ }
+ &:focus {
+ border-color: #00fe56;
+ }
+ &:active {
+ background: #006522;
+ border-color: #006522;
+ }
+ &:disabled {
+ background: rgba($primary-color-light, 0.3);
+ border-color: rgba($primary-color-light, 0.3);
+ }
+ }
+
+ @include dark {
+ color: $opposite-color-dark;
+ background: $primary-color-dark;
+ border: 1px solid $primary-color-dark;
+ &:hover {
+ background: #00c041;
+ border-color: #00c041;
+ }
+ &:focus {
+ border-color: #00fe56;
+ }
+ &:active {
+ background: #00e34d;
+ border-color: #00e34d;
+ }
+ &:disabled {
+ background: rgba($primary-color-dark, 0.3);
+ border-color: rgba($primary-color-dark, 0.3);
+ }
+ }
+ }
+
+ .nav-search .search-bar {
+ border: none;
+ @include background-theme(#f7f9fa, $card-background-dark);
+
+ input {
+ @include color-theme(#777777, #acacac);
+ background: transparent;
+ }
+
+ @include icon {
+ @include color-theme(#3c3c3c, #505050);
+ }
}
}
- #stream {
- height: 365px;
- position: relative;
- overflow: hidden;
+ .community-banner,
+ .members-banner,
+ {
+ border-radius: 8px;
+ @include background-theme($card-background-light, $card-background-dark);
+ }
+
+ .community-banner-subtitle,
+ .members-banner-title {
+ font-size: 0.85em;
+ }
+
+ .community-banner-title,
+ .members-banner-value {
+ font-size: 1.33em;
+ font-weight: bold;
+ @include color-theme(#333333, #eeeeee);
+ }
- @include media-breakpoint-down(md) {
- padding-left: 15px;
+ .community-banner {
+ .community-banner-subtitle {
+ @include color-theme(#005b12, #bdd5c3);
}
}
- #box-forum-headline {
- margin-top: 20px;
+ .members-banner {
+ .members-banner-title {
+ @include color-theme(#646466, #c8c8c8);
+ }
- .row {
- border-bottom: 1px solid #e6e6e6;
- padding: 4px 0 4px 0;
- margin: 0;
+ .members-banner-border-right {
+ @include light {
+ border-right: 1px solid #bbcad8;
+ }
+ @include dark {
+ border-right: 1px solid #464849;
+ }
+ }
- .display-count {
- strong {
- display: block;
- text-align: center;
- font-size: 16px;
- }
+ .online-indicator {
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ @include background-theme($primary-color-light, $primary-color-dark);
+ animation: online-indicator-blinking 2s both infinite;
- small {
- display: block;
- color: #7d7d7d;
- text-align: center;
- font-size: 10px;
+ @keyframes online-indicator-blinking {
+ from {
+ opacity: 1.0;
+ }
+ to {
+ opacity: 0.4;
}
}
+ }
+ }
+
+ h2 {
+ font-size: 0.9em;
+ color: inherit;
+ }
+
+ h4.heading {
+ font-size: 0.9em;
+ color: inherit;
+ @include theme { // this just overrides previous dark theme
+ border: none;
+ }
+ }
- &:nth-child(even) {
- background-color: #f8f8f8;
+ a {
+ @include theme {
+ color: inherit;
+ }
+ }
+
+ a[data-user-id] {
+ @include color-theme($secondary-color-light, $secondary-color-dark);
+ }
+
+ .nav-pills {
+ .nav-link {
+ transition: none;
+
+ @include theme {
+ color: inherit;
+ }
+
+ &[href] {
+ cursor: pointer;
+ }
+
+ &.active {
+ @include color-theme(black, white);
}
}
- a.title {
- color: $gray;
- display: block;
- @include text-truncate();
+ .nav-link.active {
+ @include light {
+ border-bottom-color: $primary-color-light;
+ }
+ @include dark {
+ border-bottom-color: $primary-color-dark;
+ }
}
+ }
+
+ .microblog {
+ .media > .media-body {
+ .media-heading a {
+ @include dark {
+ color: $secondary-color-dark;
+ }
+ }
+
+ .microblog-comments {
+ .media a.username {
+ @include dark {
+ color: $secondary-color-dark;
+ }
+ }
- a.category {
- font-size: 11px;
+ .microblog-input {
+ @include background-theme($body-background-light, $body-background-dark);
+
+ textarea {
+ border: none;
+ @include background-theme($card-background-light, $card-background-dark);
+ }
+ }
+ }
}
- .float-end {
- color: $gray-light;
- font-size: 10px;
+ .microblog-actions .btn {
+ @include color-theme(#777777, #8f9ba5);
}
}
- .recent-activity {
- border-left: 1px solid $card-border-color;
- margin: 10px 0 0 10px;
+ .default-avatar {
+ @include color-theme($primary-color-light, $primary-color-dark);
+ @include background-theme($primary-background-light, $primary-background-dark);
+ }
+
+ .card {
+ border: none;
+ box-shadow: none;
+ border-radius: 8px;
+ @include color-theme(#555555, #acacac);
+ @include background-theme($card-background-light, $card-background-dark);
+ }
+
+ .card-tile {
+ border-radius: 6px;
+ @include background-theme(#eaecf1, #0f0f10);
+ }
- @include media-breakpoint-down(md) {
- border-left: none;
- margin-left: 0;
+ .viewers-online {
+ .viewer-pill {
+ @include background-theme($card-background-light, $card-background-dark);
+ @include theme {
+ border: none;
+ }
+ }
+
+ .viewers-users .circle {
+ @include light {
+ border: 2px solid $card-background-light;
+ }
+ @include dark {
+ border: 2px solid $card-background-dark;
+ }
+
+ &.circle-number {
+ line-height: 28px;
+ @include color-theme(#333333, #acacac);
+ @include background-theme($card-background-light, $card-background-dark);
+ }
}
}
- .media {
- padding: 0 0 0 20px;
- font-size: 11px;
- position: relative;
- overflow: visible;
+ .card-reputation {
+ img, svg {
+ width: 40px;
+ height: 40px;
+ }
- &:not(:first-child) {
- margin-top: 15px;
+ .progress {
+ width: 70%;
}
- .homepage-activity {
- box-shadow: 0 1px 2px #ccc;
- border-radius: 50%;
- border: 1px solid $card-border-color;
- background: #fff;
- position: absolute;
- width: 20px;
- height: 20px;
- left: -11px;
- top: 8px;
+ .ranking-row {
+ counter-increment: rank;
- .activity-icon {
- margin-top: 2px;
- text-align: center;
- color: $gray-light;
+ .ranking-row-avatar {
+ border-radius: 4px;
+ overflow: hidden;
}
- &::selection {
- text-shadow: none;
+ &:last-child {
+ border-bottom: none;
}
+
+ .counter {
+ align-self: center;
+ @include color-theme(#dddddd, #acacac);
+
+ &:after {
+ content: counter(rank);
+ }
+ }
+
+ .ranking-percentage-ray {
+ height: 3px;
+ border-radius: 3px;
+ @include light {
+ background: linear-gradient(270deg, $primary-color-light 0%, $opposite-color-light 100%);
+ }
+
+ @include dark {
+ background: linear-gradient(270deg, $primary-color-dark 0%, $opposite-color-dark 100%);
+ }
+ }
+ }
+
+ a.ranking-username {
+ @include color-theme(#646466, #acacac);
}
- @include media-breakpoint-down(md) {
- padding: 0;
+ .long-name {
+ display: none;
+ @include size(intermediate) {
+ display: initial;
+ }
}
- .default-avatar {
- svg {
- width: 38px;
- height: 38px;
+ .short-name {
+ display: initial;
+ @include size(intermediate) {
+ display: none;
}
}
}
- .media-body {
- min-width: 0; // makes flex children not exceed parent width
+ #box-forum {
+ #stream-wrapper {
+ padding-left: 2px;
+
+ @include media-breakpoint-down(xl) {
+ background-position-x: 10px;
+ padding-left: 15px;
+ }
+
+ #stream {
+ height: 365px;
+ position: relative;
+ overflow: hidden;
+
+ @include media-breakpoint-down(md) {
+ padding-left: 15px;
+ }
- p {
- margin: 0;
- @include text-truncate();
+ .media {
+ padding: 0 0 0 20px;
+ position: relative;
+ overflow: visible;
+
+ @include media-breakpoint-down(md) {
+ padding: 0;
+ }
+
+ &:not(:first-child) {
+ margin-top: 15px;
+ }
+
+ .homepage-activity {
+ border-radius: 50%;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: -11px;
+ top: 8px;
+ justify-content: center;
+ align-items: center;
+ @include color-theme(#777777, #acacac);
+ @include background-theme(#ffffff, #121212);
+ @include light {
+ border: 1px solid #dddddd;
+ }
+ @include dark {
+ border: 1px solid #2f2f2f;
+ }
+ @include icon {
+ color: inherit;
+ }
+ }
+
+ .media-object {
+ width: 42px;
+ padding: 3px;
+ border-radius: 7px;
+ @include background-theme($card-background-light, $card-background-dark);
+
+ .user-avatar {
+ max-width: 100%;
+ border-radius: 4px;
+ }
+ }
+
+ .media-body {
+ min-width: 0; // makes flex children not exceed parent width
+
+ p {
+ margin: 0;
+ @include text-truncate;
+ }
+
+ strong {
+ display: block;
+ font-weight: normal;
+ padding: 0 0 0 10px;
+ margin: 10px 0 0 1px;
+ font-family: "Open Sans", sans-serif;
+ @include light {
+ border-left: 1px solid $border-color-light;
+ }
+ @include dark {
+ border-left: 1px solid #2f2f2f;
+ }
+ }
+ }
+
+ .default-avatar {
+ img, svg {
+ width: 38px;
+ height: 38px;
+ }
+ }
+ }
+ }
+ }
+
+ #box-forum-headline,
+ .interesting-topics,
+ {
+ margin-top: 20px;
+
+ .row {
+ padding: 4px 0 4px 0;
+ margin: 0;
+
+ @include light {
+ border-bottom: 1px solid #e6e6e6;
+ }
+
+ @include dark {
+ border-bottom: 1px solid #181818;
+ }
+
+ .display-count {
+ strong {
+ display: block;
+ text-align: center;
+ font-size: 16px;
+ @include color-theme(#333333, #acacac);
+ }
+
+ small {
+ display: block;
+ text-align: center;
+ font-size: 10px;
+ @include theme {
+ color: #7d7d7d;
+ }
+ }
+ }
+ }
+
+ a.title {
+ display: block;
+ @include color-theme(#555555, #acacac);
+ @include text-truncate;
+ }
+
+ a.category {
+ font-size: 0.8em;
+ }
+
+ .topic-created {
+ font-size: 0.75em;
+ @include color-theme(#777777, #7d7d7d);
+ }
}
- strong {
- font-weight: normal;
- border-left: 1px solid $card-border-color;
- padding: 0 0 0 10px;
- margin: 10px 0 0 1px;
- display: block;
- font-family: "Open Sans", sans-serif;
+ .recent-activity {
+ margin: 10px 0 0 10px;
+ font-size: 0.8em;
+
+ @include light {
+ border-left: 1px solid $border-color-light;
+ }
+ @include dark {
+ border-left: 1px solid $border-color-dark;
+ }
+
+ @include media-breakpoint-down(md) {
+ border-left: none;
+ margin-left: 0;
+ }
}
}
- .media-object {
- border: 1px solid #d0d0d0;
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
- width: 42px;
- background: #fff;
- padding: 2px;
- border-radius: 3px;
+ .microblog-wrap {
+ &:after {
+ @include dark {
+ background: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0) 0,
+ $opposite-color-dark 65%
+ );
+ }
+ }
+ }
- img, svg {
- max-width: 100%;
+ .recent-activity a,
+ .interesting-topics a.category,
+ {
+ @include color-theme(#005b12, #bdd5c3);
+
+ &:hover {
+ @include color-theme(#002107, $primary-color-dark);
}
}
-}
-.reputation-username {
- color: #333;
+ footer {
+ .scroll-top {
+ @include color-theme($primary-color-light, $primary-color-dark);
+ @include background-theme($primary-background-light, $primary-background-dark);
+ }
+ }
+
+ pre, code {
+ @include background-theme($body-background-light, $body-background-dark);
+ }
}
diff --git a/resources/views/home.twig b/resources/views/home.twig
index f0399a96f2..625953219f 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -8,13 +8,45 @@
{% block container %}
{{ render_block('homepage_banner') }}
+
+
+
+
+
+
+
+ Członkowie
+
+ {{ members.usersTotal }}
+
+
+
+
+ Online
+
+
+ {{ members.usersOnline }}
+
+
+ Gości
+
+ {{ members.guestsOnline }}
+
+
+
+
+