Integration to Requarks Core
This commit is contained in:
NGPixel
@@ -1,17 +1,22 @@
|
||||
//@import './layout/_fonts';
|
||||
@import './layout/_base';
|
||||
@import './layout/_mixins';
|
||||
@import 'core-client/scss/core';
|
||||
@import 'core-client/scss/components/alert';
|
||||
@import 'core-client/scss/components/button';
|
||||
@import 'core-client/scss/components/form';
|
||||
@import 'core-client/scss/components/grid';
|
||||
@import 'core-client/scss/components/hero';
|
||||
@import 'core-client/scss/components/markdown-content';
|
||||
@import 'core-client/scss/components/modal';
|
||||
@import 'core-client/scss/components/nav';
|
||||
@import 'core-client/scss/components/sidebar';
|
||||
@import 'core-client/scss/components/typography';
|
||||
|
||||
@import './libs/bulma/bulma';
|
||||
@import './libs/twemoji-awesome';
|
||||
@import './libs/animate.min.css';
|
||||
@import './libs/jquery-contextmenu';
|
||||
|
||||
@import './components/_alerts';
|
||||
@import './components/_editor';
|
||||
//@import './components/_editor';
|
||||
|
||||
@import './layout/_header';
|
||||
@import './layout/_footer';
|
||||
@import './layout/_content';
|
||||
//@import './layout/_content';
|
||||
|
||||
@import './pages/_account';
|
||||
//@import './pages/_account';
|
||||
@@ -1,24 +0,0 @@
|
||||
#alerts {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
width: 350px;
|
||||
z-index: 10;
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
|
||||
|
||||
.notification {
|
||||
animation: 0.5s ease slideInRight;
|
||||
margin-top: 5px;
|
||||
|
||||
&.exit {
|
||||
animation: 0.5s ease fadeOutRight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-size: 500;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,13 +1,10 @@
|
||||
|
||||
#root {
|
||||
padding-top: 52px;
|
||||
}
|
||||
|
||||
#page-type-view > section {
|
||||
transition: background-color .5s ease;
|
||||
|
||||
&.blurred {
|
||||
background-color: $grey-lighter;
|
||||
background-color: mc('grey', '50');
|
||||
}
|
||||
|
||||
}
|
||||
@@ -36,26 +33,26 @@
|
||||
.mkcontent {
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px dotted $blue;
|
||||
border-bottom: 1px dotted mc('blue', '500');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate($blue, 20%);
|
||||
color: desaturate(mc('blue', '500'), 20%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px dotted $grey-light;
|
||||
border-bottom: 1px dotted mc('grey', '100');
|
||||
padding-bottom: 4px;
|
||||
font-weight: 400;
|
||||
color: desaturate($purple, 20%);
|
||||
color: desaturate(mc('purple', '500'), 20%);
|
||||
}
|
||||
|
||||
a.toc-anchor {
|
||||
font-size: 80%;
|
||||
color: $blue;
|
||||
color: mc('blue', '500');
|
||||
border-bottom: none;
|
||||
|
||||
&:visited {
|
||||
color: $purple !important;
|
||||
color: mc('purple', '500') !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -70,7 +67,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
color: $grey;
|
||||
color: mc('grey', '500');
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -81,10 +78,10 @@
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
font-family: $family-monospace;
|
||||
font-family: $core-font-monospace;
|
||||
|
||||
> code {
|
||||
box-shadow: inset 0 0 5px 0 $grey-light;
|
||||
box-shadow: inset 0 0 5px 0 mc('grey', '100');
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@@ -106,7 +103,7 @@
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $grey-dark;
|
||||
color: mc('grey', '700');
|
||||
}
|
||||
|
||||
.twa {
|
||||
@@ -114,18 +111,18 @@
|
||||
}
|
||||
|
||||
table thead th {
|
||||
background-color: $blue;
|
||||
background-color: mc('blue', '500');
|
||||
color: #FFF;
|
||||
border-color: #FFF;
|
||||
border-bottom-color: $blue;
|
||||
border-top-color: $blue;
|
||||
border-bottom-color: mc('blue', '500');
|
||||
border-top-color: mc('blue', '500');
|
||||
|
||||
&:first-child {
|
||||
border-left-color: $blue;
|
||||
border-left-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-color: $blue;
|
||||
border-right-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
}
|
||||
@@ -133,58 +130,16 @@
|
||||
}
|
||||
|
||||
.content a:not(.button):visited {
|
||||
color: $turquoise;
|
||||
color: mc('teal', '500');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 500;
|
||||
color: $purple;
|
||||
color: mc('purple', '500');
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.modal-background {
|
||||
animation: 0.4s ease fadeIn;
|
||||
}
|
||||
.modal-content {
|
||||
animation: 0.4s ease slideInDown;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: $turquoise;
|
||||
|
||||
&.is-warning {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.modal-content .card-footer-item {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-content .card-footer-item.featured {
|
||||
animation: flash 4s ease 0 infinite;
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
|
||||
// Roboto
|
||||
// by Christian Robertson
|
||||
// Apache 2.0 License
|
||||
|
||||
// -> Thin
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Thin.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-ThinItalic.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// -> Light
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// -> Regular
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-RegularItalic.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// -> Medium
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// -> Bold
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-BoldItalic.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// -> Black
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Black.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-BlackItalic.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.footer {
|
||||
background-color: mc('light-blue', '600');
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
h2.nav-item {
|
||||
font-size: 150%;
|
||||
color: $orange;
|
||||
color: mc('orange', '500');
|
||||
}
|
||||
|
||||
#notifload {
|
||||
@@ -26,7 +26,7 @@ h2.nav-item {
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
@include spinner($orange,0.5s,24px);
|
||||
@include spinner(mc('orange', '500'),0.5s,24px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
31
client/scss/libs/bulma/base/classes.scss
Normal file
31
client/scss/libs/bulma/base/classes.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.block {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
@include desktop {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
|
||||
// Modifiers
|
||||
&.is-fluid {
|
||||
margin: 0 20px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
153
client/scss/libs/bulma/base/helpers.scss
Normal file
153
client/scss/libs/bulma/base/helpers.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
// Display
|
||||
|
||||
$displays: "block" "flex" "inline" "inline-block" "inline-flex";
|
||||
|
||||
@each $display in $displays {
|
||||
.is-#{$display} {
|
||||
display: #{$display};
|
||||
}
|
||||
|
||||
.is-#{$display}-mobile {
|
||||
@include mobile {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-tablet {
|
||||
@include tablet {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-tablet-only {
|
||||
@include tablet-only {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-touch {
|
||||
@include touch {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-desktop {
|
||||
@include desktop {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-desktop-only {
|
||||
@include desktop-only {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-widescreen {
|
||||
@include widescreen {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Float
|
||||
|
||||
.is-clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.is-pulled-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.is-pulled-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Overflow
|
||||
|
||||
.is-clipped {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay {
|
||||
@include overlay;
|
||||
}
|
||||
|
||||
// Text
|
||||
|
||||
.has-text-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.has-text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.has-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Visibility
|
||||
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-hidden-mobile {
|
||||
@include mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-tablet {
|
||||
@include tablet {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-tablet-only {
|
||||
@include tablet-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-touch {
|
||||
@include touch {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-desktop {
|
||||
@include desktop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-desktop-only {
|
||||
@include desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-hidden-widescreen {
|
||||
@include widescreen {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Other
|
||||
|
||||
.is-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-marginless {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
@extend .unselectable;
|
||||
}
|
||||
197
client/scss/libs/bulma/components/nav.scss
Normal file
197
client/scss/libs/bulma/components/nav.scss
Normal file
@@ -0,0 +1,197 @@
|
||||
// Components
|
||||
|
||||
.nav-toggle {
|
||||
@extend .hamburger;
|
||||
|
||||
// Responsiveness
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
&:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item a,
|
||||
a.nav-item {
|
||||
color: $text;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.is-active {
|
||||
color: $link-active;
|
||||
}
|
||||
|
||||
&.is-tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $link;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 3px solid $link;
|
||||
border-top: 3px solid transparent;
|
||||
color: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.nav-menu {
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
background-color: $white;
|
||||
box-shadow: 0 4px 7px rgba($black, 0.1);
|
||||
left: 0;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
|
||||
.nav-item {
|
||||
border-top: 1px solid rgba($border, 0.5);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet-only {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
// Responsiveness
|
||||
@include tablet {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Main container
|
||||
|
||||
.nav {
|
||||
align-items: stretch;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
min-height: $nav-height;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
& > .container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: $nav-height;
|
||||
width: 100%;
|
||||
|
||||
& > .nav-left {
|
||||
& > .nav-item:first-child:not(.is-tab) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .nav-right {
|
||||
& > .nav-item:last-child:not(.is-tab) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container > & {
|
||||
& > .nav-left {
|
||||
& > .nav-item:first-child:not(.is-tab) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .nav-right {
|
||||
& > .nav-item:last-child:not(.is-tab) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.has-shadow {
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1);
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include touch {
|
||||
& > .container,
|
||||
.container > & {
|
||||
& > .nav-left {
|
||||
& > .nav-item.is-brand:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
123
client/scss/libs/bulma/utilities/mixins.scss
Normal file
123
client/scss/libs/bulma/utilities/mixins.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
@mixin arrow($color) {
|
||||
border: 1px solid $color;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 7px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center($size) {
|
||||
left: 50%;
|
||||
margin-left: -($size / 2);
|
||||
margin-top: -($size / 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
@mixin fa($size, $dimensions) {
|
||||
display: inline-block;
|
||||
font-size: $size;
|
||||
height: $dimensions;
|
||||
line-height: $dimensions;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: $dimensions;
|
||||
}
|
||||
|
||||
@mixin overlay($offset: 0) {
|
||||
bottom: $offset;
|
||||
left: $offset;
|
||||
position: absolute;
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
|
||||
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin replace($background, $width, $height) {
|
||||
background-color: $background;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: $width $height;
|
||||
display: block;
|
||||
height: $height;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-indent: -290486px;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
@mixin from($device) {
|
||||
@media screen and (min-width: $device) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until($device) {
|
||||
@media screen and (max-width: $device - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile {
|
||||
@media screen and (max-width: $tablet - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media screen and (min-width: $tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet-only {
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin touch {
|
||||
@media screen and (max-width: $desktop - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media screen and (min-width: $desktop) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-only {
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widescreen {
|
||||
@media screen and (min-width: $widescreen) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: $primary;
|
||||
color: mc('blue', '500');
|
||||
text-align: center;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
@@ -57,7 +57,7 @@
|
||||
font-size: 14px;
|
||||
list-style-type: none;
|
||||
background: #fff;
|
||||
border: 1px solid $primary;
|
||||
border: 1px solid mc('blue', '500');
|
||||
border-radius: .2em;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
|
||||
@@ -85,7 +85,7 @@
|
||||
.context-menu-item.context-menu-hover {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background-color: $primary;
|
||||
background-color: mc('blue', '500');
|
||||
}
|
||||
|
||||
.context-menu-item.context-menu-disabled {
|
||||
|
||||
@@ -1,279 +1,2 @@
|
||||
@import './layout/_base';
|
||||
@import './layout/_mixins';
|
||||
|
||||
@import './libs/animate.min.css';
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
transition: color 0.4s ease;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #FB8C00;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: #000;
|
||||
|
||||
> div {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 3s ease, visibility 3s;
|
||||
animation: bg 30s linear infinite;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 20s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#root {
|
||||
position: fixed;
|
||||
top: 15vh;
|
||||
left: 10vw;
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
color: #FFF;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
animation: headerIntro 3s ease;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
color: rgba(255,255,255,0.7);
|
||||
padding: 0;
|
||||
margin: 0 0 25px 0;
|
||||
animation: headerIntro 3s ease;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
color: #FB8C00;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
animation: shake 1s ease;
|
||||
|
||||
> .fa {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
color: rgba(255,255,255,0.7);
|
||||
padding: 0;
|
||||
margin: 0 0 15px 0;
|
||||
animation: fadeIn 3s ease;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
width: 350px;
|
||||
max-width: 80vw;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #FB8C00;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #FB8C00;
|
||||
color: #FFF;
|
||||
border: 1px solid lighten(#FB8C00, 10%);
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
width: 125px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
margin: 15px 0 0 0;
|
||||
transition: all 0.4s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#FB8C00, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#social {
|
||||
margin-top: 25px;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
|
||||
> i {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.ms {
|
||||
background-color: #009688;
|
||||
border-color: lighten(#009688, 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#009688, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.google {
|
||||
background-color: #2196F3;
|
||||
border-color: lighten(#2196F3, 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#2196F3, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
background-color: #673AB7;
|
||||
border-color: lighten(#673AB7, 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#673AB7, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#copyright {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: absolute;
|
||||
left: 10vw;
|
||||
bottom: 10vh;
|
||||
z-index: 2;
|
||||
color: rgba(255,255,255,0.5);
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include keyframes(bg) {
|
||||
0% {
|
||||
@include prefix(transform, scale(1,1));
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
},
|
||||
5% {
|
||||
opacity: 0.5;
|
||||
},
|
||||
33% {
|
||||
opacity: 0.5;
|
||||
},
|
||||
38% {
|
||||
@include prefix(transform, scale(1.2, 1.2));
|
||||
opacity: 0;
|
||||
},
|
||||
39% {
|
||||
visibility: hidden;
|
||||
}
|
||||
100% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(headerIntro) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@import 'core-client/scss/core';
|
||||
@import 'core-client/scss/pages/login';
|
||||
Reference in New Issue
Block a user