feat: login page UI
This commit is contained in:
NGPixel
@@ -1,17 +1,4 @@
|
||||
'use strict'
|
||||
|
||||
let logic = document.documentElement.dataset.logic
|
||||
|
||||
switch (logic) {
|
||||
case 'error':
|
||||
require('./scss/error.scss')
|
||||
break
|
||||
case 'login':
|
||||
require('./scss/login.scss')
|
||||
require('./js/login.js')
|
||||
break
|
||||
default:
|
||||
require('./scss/app.scss')
|
||||
require('./js/app.js')
|
||||
break
|
||||
}
|
||||
require('./scss/app.scss')
|
||||
require('./js/app.js')
|
||||
|
||||
@@ -1,28 +1,21 @@
|
||||
'use strict'
|
||||
|
||||
/* global $, siteRoot */
|
||||
/* global siteConfig */
|
||||
/* eslint-disable no-new */
|
||||
|
||||
import Vue from 'vue'
|
||||
import VueResource from 'vue-resource'
|
||||
import VueClipboards from 'vue-clipboards'
|
||||
import VueLodash from 'vue-lodash'
|
||||
import store from './store'
|
||||
import io from 'socket-io-client'
|
||||
import i18next from 'i18next'
|
||||
import i18nextXHR from 'i18next-xhr-backend'
|
||||
import VueI18Next from '@panter/vue-i18next'
|
||||
import 'jquery-contextmenu'
|
||||
import 'jquery-simple-upload'
|
||||
import 'jquery-smooth-scroll'
|
||||
import 'jquery-sticky'
|
||||
|
||||
// ====================================
|
||||
// Load Helpers
|
||||
// ====================================
|
||||
|
||||
import helpers from './helpers'
|
||||
import _ from './helpers/lodash'
|
||||
|
||||
// ====================================
|
||||
// Load Vue Components
|
||||
@@ -63,7 +56,6 @@ import sourceViewComponent from './pages/source-view.component.js'
|
||||
Vue.use(VueResource)
|
||||
Vue.use(VueClipboards)
|
||||
Vue.use(VueI18Next)
|
||||
Vue.use(VueLodash, _)
|
||||
Vue.use(helpers)
|
||||
|
||||
// ====================================
|
||||
@@ -105,39 +97,27 @@ i18next
|
||||
.use(i18nextXHR)
|
||||
.init({
|
||||
backend: {
|
||||
loadPath: siteRoot + '/js/i18n/{{lng}}.json'
|
||||
loadPath: siteConfig.path + '/js/i18n/{{lng}}.json'
|
||||
},
|
||||
lng: siteLang,
|
||||
fallbackLng: siteLang
|
||||
lng: siteConfig.lang,
|
||||
fallbackLng: siteConfig.lang
|
||||
})
|
||||
|
||||
$(() => {
|
||||
document.addEventListener('DOMContentLoaded', ev => {
|
||||
// ====================================
|
||||
// Notifications
|
||||
// ====================================
|
||||
|
||||
$(window).bind('beforeunload', () => {
|
||||
window.addEventListener('beforeunload', () => {
|
||||
store.dispatch('startLoading')
|
||||
})
|
||||
$(document).ajaxSend(() => {
|
||||
store.dispatch('startLoading')
|
||||
}).ajaxComplete(() => {
|
||||
store.dispatch('stopLoading')
|
||||
})
|
||||
|
||||
// ====================================
|
||||
// Establish WebSocket connection
|
||||
// ====================================
|
||||
|
||||
let socket = io(window.location.origin)
|
||||
window.socket = socket
|
||||
|
||||
// ====================================
|
||||
// Bootstrap Vue
|
||||
// ====================================
|
||||
|
||||
const i18n = new VueI18Next(i18next)
|
||||
window.wikijs = new Vue({
|
||||
window.wiki = new Vue({
|
||||
mixins: [helpers],
|
||||
components: {},
|
||||
store,
|
||||
@@ -151,9 +131,7 @@ $(() => {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
$('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
|
||||
$('#header').sticky({ topSpacing: 0 })
|
||||
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
153
client/js/app.old.js
Normal file
153
client/js/app.old.js
Normal file
@@ -0,0 +1,153 @@
|
||||
'use strict'
|
||||
|
||||
/* global $, siteConfig */
|
||||
/* eslint-disable no-new */
|
||||
|
||||
import Vue from 'vue'
|
||||
import VueResource from 'vue-resource'
|
||||
import VueClipboards from 'vue-clipboards'
|
||||
import VueLodash from 'vue-lodash'
|
||||
import store from './store'
|
||||
import i18next from 'i18next'
|
||||
import i18nextXHR from 'i18next-xhr-backend'
|
||||
import VueI18Next from '@panter/vue-i18next'
|
||||
import 'jquery-contextmenu'
|
||||
import 'jquery-simple-upload'
|
||||
import 'jquery-smooth-scroll'
|
||||
import 'jquery-sticky'
|
||||
|
||||
// ====================================
|
||||
// Load Helpers
|
||||
// ====================================
|
||||
|
||||
import helpers from './helpers'
|
||||
import _ from './helpers/lodash'
|
||||
|
||||
// ====================================
|
||||
// Load Vue Components
|
||||
// ====================================
|
||||
|
||||
import alertComponent from './components/alert.vue'
|
||||
import anchorComponent from './components/anchor.vue'
|
||||
import colorPickerComponent from './components/color-picker.vue'
|
||||
import editorCodeblockComponent from './components/editor-codeblock.vue'
|
||||
import editorFileComponent from './components/editor-file.vue'
|
||||
import editorVideoComponent from './components/editor-video.vue'
|
||||
import historyComponent from './components/history.vue'
|
||||
import loadingSpinnerComponent from './components/loading-spinner.vue'
|
||||
import modalCreatePageComponent from './components/modal-create-page.vue'
|
||||
import modalCreateUserComponent from './components/modal-create-user.vue'
|
||||
import modalDeleteUserComponent from './components/modal-delete-user.vue'
|
||||
import modalDiscardPageComponent from './components/modal-discard-page.vue'
|
||||
import modalMovePageComponent from './components/modal-move-page.vue'
|
||||
import modalProfile2faComponent from './components/modal-profile-2fa.vue'
|
||||
import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
|
||||
import pageLoaderComponent from './components/page-loader.vue'
|
||||
import searchComponent from './components/search.vue'
|
||||
import toggleComponent from './components/toggle.vue'
|
||||
import treeComponent from './components/tree.vue'
|
||||
|
||||
import adminEditUserComponent from './pages/admin-edit-user.component.js'
|
||||
import adminProfileComponent from './pages/admin-profile.component.js'
|
||||
import adminSettingsComponent from './pages/admin-settings.component.js'
|
||||
import adminThemeComponent from './pages/admin-theme.component.js'
|
||||
import contentViewComponent from './pages/content-view.component.js'
|
||||
import editorComponent from './components/editor.component.js'
|
||||
import sourceViewComponent from './pages/source-view.component.js'
|
||||
|
||||
// ====================================
|
||||
// Initialize Vue Modules
|
||||
// ====================================
|
||||
|
||||
Vue.use(VueResource)
|
||||
Vue.use(VueClipboards)
|
||||
Vue.use(VueI18Next)
|
||||
Vue.use(VueLodash, _)
|
||||
Vue.use(helpers)
|
||||
|
||||
// ====================================
|
||||
// Register Vue Components
|
||||
// ====================================
|
||||
|
||||
Vue.component('alert', alertComponent)
|
||||
Vue.component('adminEditUser', adminEditUserComponent)
|
||||
Vue.component('adminProfile', adminProfileComponent)
|
||||
Vue.component('adminSettings', adminSettingsComponent)
|
||||
Vue.component('adminTheme', adminThemeComponent)
|
||||
Vue.component('anchor', anchorComponent)
|
||||
Vue.component('colorPicker', colorPickerComponent)
|
||||
Vue.component('contentView', contentViewComponent)
|
||||
Vue.component('editor', editorComponent)
|
||||
Vue.component('editorCodeblock', editorCodeblockComponent)
|
||||
Vue.component('editorFile', editorFileComponent)
|
||||
Vue.component('editorVideo', editorVideoComponent)
|
||||
Vue.component('history', historyComponent)
|
||||
Vue.component('loadingSpinner', loadingSpinnerComponent)
|
||||
Vue.component('modalCreatePage', modalCreatePageComponent)
|
||||
Vue.component('modalCreateUser', modalCreateUserComponent)
|
||||
Vue.component('modalDeleteUser', modalDeleteUserComponent)
|
||||
Vue.component('modalDiscardPage', modalDiscardPageComponent)
|
||||
Vue.component('modalMovePage', modalMovePageComponent)
|
||||
Vue.component('modalProfile2fa', modalProfile2faComponent)
|
||||
Vue.component('modalUpgradeSystem', modalUpgradeSystemComponent)
|
||||
Vue.component('pageLoader', pageLoaderComponent)
|
||||
Vue.component('search', searchComponent)
|
||||
Vue.component('sourceView', sourceViewComponent)
|
||||
Vue.component('toggle', toggleComponent)
|
||||
Vue.component('tree', treeComponent)
|
||||
|
||||
// ====================================
|
||||
// Load Localization strings
|
||||
// ====================================
|
||||
|
||||
i18next
|
||||
.use(i18nextXHR)
|
||||
.init({
|
||||
backend: {
|
||||
loadPath: siteConfig.path + '/js/i18n/{{lng}}.json'
|
||||
},
|
||||
lng: siteConfig.lang,
|
||||
fallbackLng: siteConfig.lang
|
||||
})
|
||||
|
||||
$(() => {
|
||||
// ====================================
|
||||
// Notifications
|
||||
// ====================================
|
||||
|
||||
$(window).bind('beforeunload', () => {
|
||||
store.dispatch('startLoading')
|
||||
})
|
||||
$(document).ajaxSend(() => {
|
||||
store.dispatch('startLoading')
|
||||
}).ajaxComplete(() => {
|
||||
store.dispatch('stopLoading')
|
||||
})
|
||||
|
||||
// ====================================
|
||||
// Bootstrap Vue
|
||||
// ====================================
|
||||
|
||||
const i18n = new VueI18Next(i18next)
|
||||
if (document.querySelector('#root')) {
|
||||
window.wikijs = new Vue({
|
||||
mixins: [helpers],
|
||||
components: {},
|
||||
store,
|
||||
i18n,
|
||||
el: '#root',
|
||||
methods: {
|
||||
changeTheme(opts) {
|
||||
this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
|
||||
this.$refs.header.className = `nav is-${opts.primary}`
|
||||
this.$refs.footer.className = `footer is-${opts.footer}`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
$('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
|
||||
$('#header').sticky({ topSpacing: 0 })
|
||||
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,6 +1,7 @@
|
||||
'use strict'
|
||||
|
||||
const helpers = {
|
||||
_: require('./lodash'),
|
||||
common: require('./common'),
|
||||
form: require('./form'),
|
||||
pages: require('./pages')
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
'use strict'
|
||||
|
||||
/* global $ */
|
||||
|
||||
$(() => {
|
||||
$('#login-user').focus()
|
||||
})
|
||||
@@ -42,6 +42,7 @@ $primary: 'indigo';
|
||||
@import 'layout/_header';
|
||||
@import 'layout/_loader';
|
||||
|
||||
@import 'pages/_welcome';
|
||||
@import 'pages/login';
|
||||
@import 'pages/welcome';
|
||||
|
||||
@import 'base/print';
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
border: 1px solid mc('orange','700');
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
font-size: 13px;
|
||||
@@ -74,7 +74,13 @@
|
||||
|
||||
&.is-featured {
|
||||
animation: btnInvertedPulse .6s ease alternate infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-fullwidth {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.is-disabled, &:disabled {
|
||||
background-color: mc('grey', '300');
|
||||
|
||||
@@ -1,306 +1,161 @@
|
||||
.login {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-image: url('../images/bg.jpg');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: $core-font-standard;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
transition: color 0.4s ease;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: mc('orange','600');
|
||||
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;
|
||||
font-weight: bold;
|
||||
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: mc('orange','600');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: mc('orange','600');
|
||||
color: #FFF;
|
||||
border: 1px solid lighten(mc('orange','600'), 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;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('orange','600'), 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: mc('blue','600');
|
||||
border-color: lighten(mc('blue','600'), 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('blue','600'), 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.google {
|
||||
background-color: mc('light-blue','600');
|
||||
border-color: lighten(mc('light-blue','600'), 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('light-blue','600'), 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
background-color: mc('indigo','600');
|
||||
border-color: lighten(mc('indigo','600'), 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('indigo','600'), 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.github {
|
||||
background-color: mc('blue-grey','700');
|
||||
border-color: lighten(mc('blue-grey','700'), 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('blue-grey','700'), 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.slack {
|
||||
background-color: mc('purple','700');
|
||||
border-color: lighten(mc('purple','700'), 10%);
|
||||
|
||||
&:focus {
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(mc('purple','700'), 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;
|
||||
}
|
||||
&-container {
|
||||
display: flex;
|
||||
width: 650px;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
&-providers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: mc('grey', '900');
|
||||
z-index: 1;
|
||||
|
||||
button {
|
||||
flex: 1 1;
|
||||
padding: 0 15px;
|
||||
border: none;
|
||||
color: #FFF;
|
||||
background-color: mc('grey', '800');
|
||||
border-top: 1px solid mc('grey', '900');
|
||||
font-family: $core-font-standard;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
min-height: 40px;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: mc('grey', '100');
|
||||
background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%);
|
||||
color: mc('grey', '700');
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-frame {
|
||||
background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 0%,rgba(240,240,240,.6) 100%);
|
||||
border: 1px solid #FFF;
|
||||
width: 450px;
|
||||
padding: 1rem;
|
||||
color: mc('grey', '700');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: mc('grey', '700');
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
color: mc('grey', '700');
|
||||
padding: 0;
|
||||
margin: 0 0 25px 0;
|
||||
}
|
||||
|
||||
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: .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: 100%;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255,255,255,.7);
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
color: mc('grey', '700');
|
||||
font-weight: 600;
|
||||
font-size: .8rem;
|
||||
transition: all 0.4s ease;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: mc('grey','400');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-copyright {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 10vh;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
|
||||
.icon {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user