app/styles/pages/_groups.scss
.group-cover {
.avatar-image img {
border-radius: 5px;
}
}
.group-members-widget {
.group-member-avatars {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
a { padding: 5px; }
img {
border-radius: 999em;
width: 40px;
height: 40px;
}
}
}
.group-community-rules {
.row {
flex-direction: column;
h2 {
margin-bottom: 20px;
}
}
}
.group-dashboard {
flex-direction: column;
> div {
max-width: 100%;
}
.stats-container {
column-count: 3;
margin-top: 20px;
margin-bottom: 20px;
@media (max-width: 768px) {
column-count: 1;
}
.card {
break-inside: avoid;
}
}
.card-stats {
display: flex;
justify-content: center;
margin-top: 30px;
.card-stat {
width: 150px;
padding: 15px;
&:first-child {
margin-right: 15px;
}
&--members-today {
background-color: $primary-cta-color;
}
&--members-total {
background-color: $secondary-cta-color;
}
&--posts {
background-color: #2980b9;
}
&--comments {
background-color: #34495e;
}
&--tickets {
background-color: #e67e22;
}
&--reports {
background-color: #795548;
}
.card-stat-title {
display: block;
text-align: center;
color: #fff;
font-size: 14px;
}
.card-stat-value {
@extend .card-stat-title;
font-size: 20px;
font-weight: bold;
margin-top: 5px;
}
}
}
h4 {
margin-top: 30px;
margin-bottom: 15px;
}
.group-member-row {
td {
height: 40px;
> span {
display: flex;
align-items: center;
height: 100%;
button {
margin-right: 5px;
&:last-child {
margin-right: 0;
}
}
}
}
svg {
fill: white;
}
.lazy-image {
margin-right: 15px;
img {
width: 36px;
height: 36px;
border-radius: 999em;
}
}
}
.invite-member-button {
margin: { left: 5px; right: 5px; };
vertical-align: middle;
&.is-opened {
svg {
transform: none;
}
}
svg {
width: 20px;
height: 20px;
transform: rotateZ(45deg);
transition: transform .2s;
}
}
.invite-users {
margin-bottom: 15px;
.user-search-list {
background-color: white;
min-height: 40px;
border: 1px solid $secondary-cta-color;
.user-search-item {
display: flex;
align-items: center;
padding: { left: 10px; top: 5px; bottom: 5px; right: 10px; };
border-bottom: 1px solid $secondary-cta-color;
img {
width: 32px;
height: 32px;
border-radius: 999em;
margin-right: 10px;
}
.user-search-item-actions {
display: flex;
flex: 1;
justify-content: flex-end;
}
}
}
}
.latest-cards {
margin-bottom: 20px;
column-count: 2;
@media (max-width: 768px) {
column-count: 1;
}
.card {
break-inside: avoid;
img {
width: 42px;
height: 42px;
border-radius: 999em;
margin-right: 15px;
}
.report-item {
display: flex;
align-items: center;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
.report-meta {
display: flex;
flex-direction: column;
}
.report-timestamp {
color: $secondary-cta-color;
}
.report-reason {
text-transform: uppercase;
color: $secondary-cta-color;
}
}
}
.group-audit-log {
.card {
background-color: transparent;
overflow: hidden;
}
.audit-log-items {
height: 250px;
overflow-y: auto;
}
.audit-log-item {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.lazy-image {
display: inline-block;
vertical-align: middle;
}
img {
width: 26px;
height: 26px;
border-radius: 999em;
margin-right: 10px;
}
.audit-log-item-message {
vertical-align: middle;
}
}
}
}
.group-invite {
.row {
justify-content: center;
}
.card-link {
&.accepted {
color: $primary-cta-color;
}
&.declined {
color: #ee2e24;
}
}
}
// Group discovery page
.group-categories {
margin-right: 20px;
width: 210px;
@media (max-width: 768px) {
width: 100%;
}
}
.group-category-list {
list-style-type: none;
padding: 0;
}
.group-category-wrapper {
padding: 5px;
border-radius: 5px;
margin-bottom: 4px;
&.active {
@if $theme == 'kitsu-dark' {
background: rgba(0,0,0,.3);
color: lighten($body-text-color, 5);
}
@if $theme == 'kitsu-light' {
background: $white;
color: $body-text-color;
border: 1px solid $divider-color;
}
a {
font-weight: bold;
}
.group-category-icon {
background: none;
}
&:hover {
@if $theme == 'kitsu-light' {
background: $white;
color: $body-text-color;
border: 1px solid $divider-color;
}
@if $theme == 'kitsu-dark' {
background: rgba(0,0,0,.3);
}
}
}
&:hover {
@if $theme == 'kitsu-light' {
background: rgba(0,0,0,.1);
border: rgba(0,0,0,.1);
}
@if $theme == 'kitsu-dark' {
background: rgba(0,0,0,.2);
}
}
a {
display: block;
width: 100%;
height: 24px;
color: $body-text-color;
}
img {
width: 24px;
height: 24px;
border-radius: 4px;
margin-right: 10px;
float: left;
}
}
.group-category-title {
font-size: 14px;
display: inline-block;
line-height: 24px;
position: relative;
top: -1px;
}
.group-category-icon {
width: 24px;
height: 24px;
display: inline-block;
float: left;
border-radius: 5px;
margin-right: 10px;
padding: 2px;
text-align: center;
svg {
fill: #7d7d7d;
width: 18px;
height: 18px;
}
}
.group-result-list {
flex: 1;
min-width: 0;
.group-results {
list-style: none;
margin: 0;
padding: 0;
li:last-child {
a {
border-bottom: none;
}
}
.group-result {
position: relative;
}
.group-actions {
position: absolute;
top: 20px;
right: 30px;
.stream-item-options {
margin-right: 0;
}
}
}
}
.group-result-secondary {
width: 260px;
margin-left: 20px;
@media (max-width: 1199px) {
display: none;
}
.card {
padding: 20px;
font-size: 14px;
.button--primary {
padding: 10px 0;
margin-top: 20px;
width: 100%;
}
}
}
.group-result-header {
@extend .clearfix;
margin: 0 20px;
padding: 15px 0;
border-bottom: 1px solid $divider-color;
.result-filter-wrapper {
position: relative;
width: 200px;
float: left;
.filter-icon {
top: 6px;
}
}
input {
border-radius: 3px;
box-sizing: border-box;
height: 37px;
padding-left: 32px;
padding-right: 12px;
width: 100%;
font-size: 14px;
line-height: 18px;
border: 1px solid $divider-color;
color: $input-text-color;
background: lighten($foreground-background-color, 3);
}
.result-sort-wrapper {
float: right;
button {
color: $body-text-color;
padding: 0;
background: transparent;
font-size: 14px;
border: none;
position: relative;
top: 5px;
}
}
}
.group-link-wrapper {
padding: 25px;
display: flex;
color: $body-text-color;
border-bottom: 1px solid darken($background-color, 4);
position: relative;
&:hover {
background: darken($foreground-background-color,2);
color: $body-text-color;
}
}
.group-result-thumb {
margin-right: 25px;
img {
border-radius: 5px;
width: 80px;
height: auto;
}
}
.group-result-content {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 30px;
}
.group-result-title {
font-size: 20px;
font-weight: 200;
letter-spacing: .2px;
line-height: 24px;
margin-bottom: 0;
color: $body-text-color;
}
.group-result-description {
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #999;
margin-bottom: 8px;
}
.group-result-meta {
display: flex;
align-items: center;
bottom: 25px;
justify-content: space-between;
position: absolute;
@media (min-width: 769px) {
left: 130px;
right: 25px;
}
.group-result-category {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
}
.join-button, .category-button, .member-button {
border-radius: 3px;
border: 1px solid transparent;
box-sizing: border-box;
outline: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none!important;
font-size: 12px;
font-weight: 400;
letter-spacing: .6px;
line-height: 16px;
text-transform: uppercase;
background: #f5f5f5;
border-color: #e8e8e8;
color: #999;
height: 24px;
padding: 0 8px;
}
.category-button {
border-radius: 999em;
padding: 0 15px;
background: darken($foreground-background-color,2);
border: none;
&:hover {
color: #999;
background: darken(white, 5);
}
}
.join-button {
margin-right: 10px;
background: $primary-cta-color;
border: none;
color: $white;
text-transform: initial;
&:hover {
color: $white;
background: darken($primary-cta-color, 5);
}
&.inactive {
background: darken($secondary-cta-color,10) !important;
}
}
.member-button {
background: darken($foreground-background-color,2);
border: none;
&:hover {
color: #999;
background: darken(white, 5);
}
svg {
width: 14px;
position: relative;
top: 1px;
fill: $body-text-color;
}
}
}
.group-result-stats {
display: flex;
flex-shrink: 0;
margin-left: auto;
}
// group create page
.group-create-wrapper {
max-width: 1000px;
width: 100%;
>.card {
position: relative;
@media (min-width: 769px) {
margin-right: 300px;
padding: 0 20px;
}
}
.form-control {
background: $foreground-background-color;
color: $input-text-color;
}
}
.group-create-header {
margin: 0 0 30px;
font-size: 30px;
font-weight: 600;
line-height: 34px;
}
.group-create-helper {
position: absolute;
width: 280px;
}
.group-create-helper--title {
font-size: 14px;
font-weight: 700;
}
.group-create-helper--description {
font-size: 14px;
color: #999;
}
label.field-wrapper {
cursor: text;
}
.field-wrapper {
display: flex;
margin: 0 0 30px;
min-height: 50px;
position: relative;
&:first-child {
margin-top: 40px;
padding-top: 20px;
}
textarea {
max-height: 200px !important;
overflow: auto !important;
}
}
.field-title {
font-size: 14px;
line-height: 18px;
box-sizing: border-box;
padding: 0 15px 0 0;
width: 100px;
color: #999;
}
.field-input-wrapper {
flex: 1;
font-size: 14px;
line-height: 18px;
input, textarea {
border: 0;
line-height: inherit;
margin: 0 0 25px;
outline: 0;
padding: 0;
width: 100%;
}
.icon {
@extend .group-category-icon;
background: none;
position: relative;
top: 2px;
left: 5px;
}
}
.field-notice {
background: $foreground-background-color;
position: absolute;
right: 0;
padding: 0 0 0 10px;
font-size: 12px;
font-weight: 400;
letter-spacing: .6px;
line-height: 16px;
text-transform: uppercase;
color: #999;
}
.ruler {
background: $divider-color;
border: 0;
bottom: 0;
height: 1px;
left: 100px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
box-sizing: content-box;
}
$primary: #00cc99;
//
// Radio Card Group
//
.radio-card-group {
display: flex;
margin: auto;
width: 100%;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
//
// Radio Card
//
.radio-card {
margin: 5px 0;
flex: 1 1 170px;
position: relative;
label {
display: block;
margin: 5px;
padding: 0;
height: 140px;
border: 1px solid $divider-color;
color: shade($primary, 70);
border-radius: 5px;
transition: all 0.2s ease-in-out;
&:hover {
cursor: pointer;
background: tint($primary, 85);
}
&:active {
border-image: linear-gradient(RGBA(237, 72, 95, 1), RGBA(242, 124, 54, 1));
color: tint($primary, 80);
}
}
input[type="radio"]:checked ~ label {
background: $background-color;
background: lighten($primary-cta-color, 60);
border: 1px solid $primary-cta-color;
}
}
//
// Card Title and Description
//
.card-title {
display: block;
margin: 0 10px;
padding: 5px;
border-bottom: 1px solid rgba(0,0,0,.1);
font-size: 14px;
font-weight: 700;
padding: 10px 0;
}
.card-desc {
display: block;
padding: 10px 25px;
font-size: 12px;
}
//
// Submit Button
//
input[type="radio"] {
position: absolute;
top: 24px;
right: 20px;
display: inline-block;
width: auto;
}
input[type="submit"] {
display: block;
margin: auto;
padding: 15px 25px;
border: none;
border-radius: 5px;
background: $primary;
color: white;
font-size: 16px;
transition: all 0.5s;
&:hover {
cursor: pointer;
background: shade($primary, 5);
color: $white;
}
&:focus, &:active {
outline: none;
background: $primary;
}
&:disabled {
background: $divider-color;
cursor: default;
}
}
}
.group-create-cta {
float: right;
margin-bottom: 10px;
}
// Dashboard
.reports-content {
max-width: 1000px;
width: 100%;
}
.ticket-wrapper {
margin-top: 30px;
.group-result-header {
margin: 0;
}
}
.ticket-list {
list-style-type: none;
margin: 15px 0;
padding: 0;
height: 350px;
overflow: auto;
li:last-child {
.inbox-item {
border-bottom: none;
}
}
.inbox-item {
border-bottom: 1px solid $divider-color;
overflow: hidden;
padding: 10px 0;
position: relative;
display: block;
&:hover {
background: darken($white, 2);
}
.inbox-item-img {
display: block;
float: left;
margin-right: 15px;
width: 40px;
}
img {
width: 40px;
border-radius: 999em;
}
.inbox-item-author {
color: $body-text-color;
display: block;
margin: 0;
}
.inbox-item-text {
color: #999;
display: block;
font-size: 12px;
margin: 0;
}
.inbox-item-date {
color: #999;
font-size: 12px;
position: absolute;
right: 0px;
top: 15px;
}
}
}
.report-wrapper {
margin-top: 20px;
.tag {
background-color: transparent;
border: 1px solid $secondary-cta-color;
color: $body-text-color;
text-transform: uppercase;
position: relative;
top: -2px;
}
}
.report-status {
margin-top: 30px;
}
.leader-actions {
border-top: 1px solid $divider-color;
ul {
list-style-type: none;
padding: 0;
li {
display: inline-block;
}
}
.toggled-reports {
padding: 15px;
background: #f5f5f5;
margin-bottom: 0;
li {
display: block;
border-bottom: 1px solid $divider-color;
padding-bottom: 15px;
margin-bottom: 20px;
&:last-child {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
}
}
.action-button {
border: 1px solid $divider-color;
border-radius: 5px;
padding: 5px 10px;
display: inline-block;
margin-top: 15px;
font-size: 12px;
}
.media img {
width: 30px;
height: 30px;
border-radius: 999em;
}
.media-body {
margin-left: 15px;
font-size: 12px;
h5 {
font-size: 14px;
margin-bottom: 5px;
}
p:last-child {
margin-bottom: 0;
}
}
}
.report-list-toggle {
display: block;
text-align: center;
border-bottom: 1px solid $divider-color;
padding: 10px 0;
font-size: 14px;
background: #fafafa;
color: #888;
}
// leader-actions
.leader-wrapper, .settings-wrapper {
margin-top: 30px;
}
.leader-chat {
&.leader-tickets {
.card {
height: 420px;
}
}
.card {
padding: 15px;
}
}
.leader-chat-wrapper {
margin: 0;
padding: 15px;
list-style-type: none;
height: 300px;
overflow: auto;
background: $foreground-background-color;
li:last-child {
.media {
border-bottom: none;
}
}
.media {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
h5 {
margin-bottom: 0;
font-size: 16px;
margin-top: 5px;
.time {
color: #a5a5a5;
margin-left: 5px;
}
}
.media-body {
font-size: 14px;
p:last-child {
margin-bottom: 0;
}
}
img {
width: 35px;
height: 35px;
margin-right: 15px;
border-radius: 999em;
}
}
}
.leader-chat {
flex: 1;
padding:0 20px 0 0;
}
.leader-chat--header {
h6 {
border-bottom: 1px solid $divider-color;
padding-bottom: 15px;
text-align: center;
margin-bottom: 0;
}
}
.leader-chat--footer {
display: flex;
padding-top: 15px;
border-top: 1px solid $divider-color;
&.add-leader {
position: absolute;
width: 100%;
bottom: 0;
right: 0;
padding: 15px;
div {
padding: 7px 0;
}
}
.message-leaders {
min-width: 100%;
}
.leader-input {
flex: 1;
margin-right: 10px;
padding: 6px 10px;
border-radius: 3px;
border: 1px solid $divider-color;
box-shadow: none;
max-height: 100px;
line-height: inherit;
}
.btn {
width: 100px;
max-height: 38px;
background: $primary-cta-color;
border: none;
&:hover {
background-color: darken($primary-cta-color,5);
}
}
}
.leader-table-card {
width: 310px;
max-height: 419px;
padding: 15px;
min-height: 250px;
@media (max-width: 768px) {
width: 100%;
}
&.banned-members {
.leader-chat--footer .btn {
background: #c0392b;
&:hover {
background: darken(#c0392b, 10);
}
}
}
}
.leader-table-wrapper {
overflow: auto;
max-height: 300px;
}
.leader-table {
width: 100%;
img {
width: 35px;
height: 35px;
border-radius: 999em;
}
th {
width: 40px;
}
th, td {
text-align: left;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.leader-name {
padding-left: 5px;
font-size: 14px;
font-weight: 700;
a {
color: $body-text-color;
}
}
.edit-leader {
a {
color: #333;
font-size: 12px;
border: 1px solid $divider-color;
padding: 5px 8px;
border-radius: 3px;
float: right;
display: inline-block;
}
}
tr:last-of-type {
th, td {
border-bottom: none;
}
}
}
.audit-row {
.group-audit-log {
width: 100%;
margin-top: 5px;
}
}
.avatar-upload {
.image-card {
width: 150px;
height: 150px;
}
}
.leader-team {
margin-bottom: 50px;
}
.group-neighbor-item {
.media {
padding: 10px;
align-items: center;
}
img {
width: 60px;
height: 60px;
margin-right: 10px;
border-radius: 3px;
}
.remove-action {
position: absolute;
top: 0;
right: 5px;
svg {
fill: #333;
width: 16px;
height: 16px;
}
}
.media-body {
top: 0;
}
}
.pending-invites {
.edit-leader {
width: 100px;
}
.invite-time {
text-align: right;
font-size: 14px;
color: #888;
}
.leader-table-wrapper {
height: 200px;
}
}
// Groups widget
.my-groups-widget {
margin: 0;
padding: 0;
list-style-type: none;
margin-bottom: 30px;
position: relative;
.joined-group a {
display: flex;
align-items: center;
border-radius: 5px;
color: $body-text-color;
padding: 5px;
position: relative;
&:hover {
@if $theme == 'kitsu-light' {
background: rgba(0,0,0,.1);
}
@if $theme == 'kitsu-dark' {
background: rgba(0,0,0,.3);
}
}
}
.view-more a {
text-align: center;
display: block;
color: initial;
font-size: 12px;
color: $body-text-color;
}
.group-name {
flex: 1;
font-weight: bold;
font-family: "Open Sans",sans-serif;
font-size: 12px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
}
.unread-counter {
position: absolute;
right: 5px;
top: 9px;
color: #909090;
font-size: 12px;
}
.group-avatar {
width: 20px;
height: 20px;
line-height: 20px;
margin-right: 10px;
}
.lazy-image {
display: inline-block;
}
img {
width: 20px;
height: 20px;
border-radius: 3px;
}
}