mirror of https://framagit.org/tykayn/mastodon
bliss theme separated
parent
8686311aaf
commit
427a07d83d
|
|
@ -0,0 +1,29 @@
|
|||
@import 'bliss/variables';
|
||||
@import 'bliss/mixins';
|
||||
@import 'bliss/variables';
|
||||
@import 'fonts/roboto';
|
||||
@import 'fonts/roboto-mono';
|
||||
@import 'fonts/montserrat';
|
||||
|
||||
@import 'bliss/reset';
|
||||
@import 'bliss/basics';
|
||||
@import 'bliss/containers';
|
||||
@import 'bliss/lists';
|
||||
@import 'bliss/footer';
|
||||
@import 'bliss/compact_header';
|
||||
@import 'bliss/widgets';
|
||||
@import 'bliss/forms';
|
||||
@import 'bliss/accounts';
|
||||
@import 'bliss/statuses';
|
||||
@import 'bliss/boost';
|
||||
@import 'bliss/components';
|
||||
@import 'bliss/polls';
|
||||
@import 'bliss/introduction';
|
||||
@import 'bliss/modal';
|
||||
@import 'bliss/emoji_picker';
|
||||
@import 'bliss/about';
|
||||
@import 'bliss/tables';
|
||||
@import 'bliss/admin';
|
||||
@import 'bliss/dashboard';
|
||||
@import 'bliss/rtl';
|
||||
@import 'bliss/accessibility';
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@mixin avatar-radius {
|
||||
border-radius: 4px;
|
||||
background: transparent no-repeat;
|
||||
background-position: 50%;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin avatar-size($size: 48px) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
@mixin search-input {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin search-popout {
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
padding-bottom: 14px;
|
||||
margin-top: 10px;
|
||||
color: $light-text-color;
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: $light-text-color;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-weight: 500;
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,856 @@
|
|||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
$column-breakpoint: 700px;
|
||||
$small-breakpoint: 960px;
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
max-width: $maximum-width;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $fluid-breakpoint) {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-formatting {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: $darker-text-color;
|
||||
padding-right: 10px;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
strong,
|
||||
em {
|
||||
font-weight: 700;
|
||||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
|
||||
small {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 20px;
|
||||
|
||||
&[type='a'] {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
&[type='i'] {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
li > ol,
|
||||
li > ul {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.information-board {
|
||||
background: darken($ui-base-color, 4%);
|
||||
padding: 20px 0;
|
||||
|
||||
.container-alt {
|
||||
position: relative;
|
||||
padding-right: 280px + 15px;
|
||||
}
|
||||
|
||||
&__sections {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__section {
|
||||
flex: 1 0 0;
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: $primary-text-color;
|
||||
text-align: right;
|
||||
padding: 10px 15px;
|
||||
|
||||
span,
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
&:last-child {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
background: darken($ui-base-color, 8%);
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
right: 0;
|
||||
bottom: -40px;
|
||||
|
||||
.panel-header {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: $darker-text-color;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
a,
|
||||
span {
|
||||
font-weight: 400;
|
||||
color: darken($darker-text-color, 10%);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owner {
|
||||
text-align: center;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
.display_name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
p,
|
||||
li {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
|
||||
small {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 20px;
|
||||
|
||||
&[type='a'] {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
&[type='i'] {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
li > ol,
|
||||
li > ul {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__information,
|
||||
&__forms {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 4px;
|
||||
padding: 25px 40px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row__information-board {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
.information-board__section {
|
||||
flex: 1 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.row__mascot {
|
||||
flex: 1;
|
||||
margin: 10px -50px 0 0;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
margin-right: 20px;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
padding: 45px 40px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: lighten($darker-text-color, 10%);
|
||||
}
|
||||
|
||||
.account {
|
||||
border-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
&__display-name {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div.account__display-name {
|
||||
&:hover {
|
||||
.display-name strong {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-size: 44px 44px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 15px;
|
||||
|
||||
&__account {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-breakpoint) {
|
||||
.contact {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__information,
|
||||
&__forms,
|
||||
#mastodon-timeline {
|
||||
box-sizing: border-box;
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 6px rgba($black, 0.1);
|
||||
}
|
||||
|
||||
&__mascot {
|
||||
height: 104px;
|
||||
position: relative;
|
||||
left: -40px;
|
||||
bottom: 25px;
|
||||
|
||||
img {
|
||||
height: 190px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__short-description {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
.row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p a {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
margin-bottom: 0;
|
||||
|
||||
small {
|
||||
color: $darker-text-color;
|
||||
|
||||
span {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__hero {
|
||||
margin-bottom: 10px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
.information-board {
|
||||
.container-alt {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: static;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
|
||||
.panel-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 675px) {
|
||||
.header-wrapper {
|
||||
padding-top: 0;
|
||||
|
||||
&.compact {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.compact .hero .heading {
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.header .container-alt,
|
||||
.features .container-alt {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing {
|
||||
margin-bottom: 100px;
|
||||
|
||||
@media screen and (max-width: 738px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__brand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px;
|
||||
|
||||
svg {
|
||||
fill: $primary-text-color;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.directory {
|
||||
margin-top: 30px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
|
||||
h4 {
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__text {
|
||||
border-radius: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background: $ui-base-color;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
display: flex;
|
||||
|
||||
&__column {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
padding: 10px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.account__display-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-size: 44px 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
padding: 10px;
|
||||
|
||||
strong {
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .user_agreement .label_input > label {
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.simple_form p.lead {
|
||||
color: $darker-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
|
||||
grid-gap: 30px;
|
||||
|
||||
@media screen and (max-width: 738px) {
|
||||
grid-template-columns: minmax(0, 100%);
|
||||
grid-gap: 10px;
|
||||
|
||||
&__column-login {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.box-widget {
|
||||
order: 2;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
order: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__column-registration {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.directory {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
grid-gap: 0;
|
||||
|
||||
.hero-widget {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&__img,
|
||||
&__img img,
|
||||
&__footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget,
|
||||
.box-widget,
|
||||
.directory__tag {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.directory {
|
||||
margin-top: 0;
|
||||
|
||||
&__tag {
|
||||
margin-bottom: 0;
|
||||
|
||||
& > a,
|
||||
& > div {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand__tagline {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50px;
|
||||
width: 300px;
|
||||
color: $ui-primary-color;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
position: static;
|
||||
width: auto;
|
||||
margin-top: 20px;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
|
||||
|
||||
%white-emoji-outline {
|
||||
filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
|
||||
transform: scale(.71);
|
||||
}
|
||||
|
||||
.emojione {
|
||||
@each $emoji in $black-emojis {
|
||||
&[title=':#{$emoji}:'] {
|
||||
@extend %white-emoji-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
.card {
|
||||
& > a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 12%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 2px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
background: darken($ui-base-color, 8%);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
margin-left: 15px;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
a,
|
||||
.current,
|
||||
.newer,
|
||||
.older,
|
||||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.current {
|
||||
background: $simple-background-color;
|
||||
border-radius: 100px;
|
||||
color: $inverted-text-color;
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.gap {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.older,
|
||||
.newer {
|
||||
text-transform: uppercase;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.older {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.newer {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: lighten($inverted-text-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
padding: 30px 20px;
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.newer,
|
||||
.older {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
background: $ui-base-color;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $light-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
min-height: 30vh;
|
||||
|
||||
&--under-tabs {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&--flexible {
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.account-role,
|
||||
.simple_form .recommended {
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
cursor: default;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: $ui-secondary-color;
|
||||
background-color: rgba($ui-secondary-color, 0.1);
|
||||
border: 1px solid rgba($ui-secondary-color, 0.5);
|
||||
|
||||
&.moderator {
|
||||
color: $success-green;
|
||||
background-color: rgba($success-green, 0.1);
|
||||
border-color: rgba($success-green, 0.5);
|
||||
}
|
||||
|
||||
&.admin {
|
||||
color: lighten($error-red, 12%);
|
||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
padding: 0;
|
||||
margin: 15px -15px -15px;
|
||||
border: 0 none;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
box-sizing: border-box;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
max-height: 48px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 500;
|
||||
width: 120px;
|
||||
flex: 0 0 auto;
|
||||
color: $secondary-text-color;
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
}
|
||||
|
||||
dd {
|
||||
flex: 1 1 auto;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.verified {
|
||||
border: 1px solid rgba($valid-value-color, 0.5);
|
||||
background: rgba($valid-value-color, 0.25);
|
||||
|
||||
a {
|
||||
color: $valid-value-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__mark {
|
||||
color: $valid-value-color;
|
||||
}
|
||||
}
|
||||
|
||||
dl:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.directory__tag .trends__item__current {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pending-account {
|
||||
&__header {
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: $ui-secondary-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,718 @@
|
|||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
$content-width: 840px;
|
||||
|
||||
.admin-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.sidebar-wrapper {
|
||||
flex: 1 1 $sidebar-width;
|
||||
height: 100%;
|
||||
background: $ui-base-color;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
& > a:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
i.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: darken($ui-base-color, 2%);
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
padding: 15px 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > .simple-navigation-active-leaf a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 2 1 $content-width;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: $content-width;
|
||||
padding: 20px 15px;
|
||||
padding-top: 60px;
|
||||
padding-left: 25px;
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
max-width: none;
|
||||
padding: 15px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $secondary-text-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $secondary-text-color;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: $darker-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
color: $secondary-text-color;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fields-group h6 {
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.directory__tag .table-action-link .fa {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.directory__tag h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $secondary-text-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.sidebar-wrapper,
|
||||
.content-wrapper {
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr.spacer {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 20px 0;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.muted-hint {
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.positive-hint {
|
||||
color: $valid-value-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.negative-hint {
|
||||
color: $error-value-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.neutral-hint {
|
||||
color: $dark-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.warning-hint {
|
||||
color: $gold-star;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.filter-subset {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 40px 10px 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 5px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 5%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $highlight-text-color;
|
||||
border-bottom: 2px solid $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-accounts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.report-accounts__item {
|
||||
display: flex;
|
||||