client/css: switch to stylus
This commit is contained in:
rr-
parent
d18a8090b1
commit
28e85bd21a
|
|
@ -91,10 +91,12 @@ function bundleHtml(config) {
|
|||
|
||||
function bundleCss() {
|
||||
const minify = require('csso').minify;
|
||||
glob('./css/**/*.css', {}, (er, files) => {
|
||||
const stylus = require('stylus');
|
||||
glob('./css/**/*.styl', {}, (er, files) => {
|
||||
let css = '';
|
||||
for (const file of files) {
|
||||
css += fs.readFileSync(file);
|
||||
css += stylus.render(
|
||||
fs.readFileSync(file, 'utf-8'), {filename: file});
|
||||
}
|
||||
fs.writeFileSync('./public/bundle.min.css', minify(css));
|
||||
console.info('Bundled CSS');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
$main-color = #24AADD
|
||||
$top-nav-color = #F5F5F5
|
||||
$text-color = #111
|
||||
$inactive-link-color = #888
|
||||
$line-color = #DDD
|
||||
$inactive-tab-text-color = $inactive-link-color
|
||||
$active-tab-text-color = $text-color
|
||||
$active-tab-background-color = #E5E5E5
|
||||
$message-info-border-color = #BDF
|
||||
$message-info-background-color = #E3EFF9
|
||||
$message-error-border-color = #FCC
|
||||
$message-error-background-color = #FFF5F5
|
||||
$message-success-border-color = #D3E3D3
|
||||
$message-success-background-color = #F5FFF5
|
||||
$input-bad-border-color = #FCC
|
||||
$input-bad-background-color = #FFF5F5
|
||||
$input-good-border-color = #D3E3D3
|
||||
$input-good-background-color = #F5FFF5
|
||||
$input-enabled-background-color = #FAFAFA
|
||||
$input-enabled-border-color = #EEE
|
||||
$input-enabled-text-color = $text-color
|
||||
$input-disabled-background-color = #FAFAFA
|
||||
$input-disabled-border-color = #EEE
|
||||
$input-disabled-text-color = #888
|
||||
$button-enabled-text-color = white
|
||||
$button-enabled-background-color = $main-color
|
||||
$button-disabled-text-color = #666
|
||||
$button-disabled-background-color = #CCC
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
form {
|
||||
display: block;
|
||||
width: 20em;
|
||||
}
|
||||
form ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
form ul li {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
form ul li label {
|
||||
display: block;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
form .input {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
form .buttons {
|
||||
margin-top: 1em;
|
||||
}
|
||||
form .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
|
||||
form .input li:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
form .hint {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0;
|
||||
color: var(--inactive-link-color);
|
||||
font-size: 80%;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
form.tabular ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
form.tabular ul li {
|
||||
display: table-row;
|
||||
}
|
||||
form.tabular ul li label:not(.radio):not(.checkbox):not(.file-dropper) {
|
||||
display: table-cell;
|
||||
width: 33%;
|
||||
}
|
||||
form.tabular .messages,
|
||||
form.tabular .buttons {
|
||||
margin-left: 33%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Radio buttons and checkboxes
|
||||
*/
|
||||
input[type=radio], input[type=checkbox] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
.radio, .checkbox {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: calc(20px + 0.5em) !important;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio:hover:before, .checkbox:hover:before {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
.radio:before {
|
||||
border-radius: 100%;
|
||||
}
|
||||
.radio:before, .checkbox:before {
|
||||
transition: border-color 0.1s linear;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin-top: -10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--input-enabled-background-color);
|
||||
border: 2px solid var(--input-enabled-border-color);
|
||||
content: '';
|
||||
}
|
||||
.radio:after {
|
||||
background: var(--main-color);
|
||||
transition: opacity 0.1s linear;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
display: block;
|
||||
margin-top: -5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
}
|
||||
.checkbox:after {
|
||||
transition: opacity 0.1s linear;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 6px;
|
||||
display: block;
|
||||
margin-top: -7px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border-right: 3px solid var(--main-color);
|
||||
border-bottom: 3px solid var(--main-color);
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
input[type=radio]:checked + .radio:before,
|
||||
input[type=checkbox]:checked + .checkbox:before {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
input[type=radio]:checked + .radio:after,
|
||||
input[type=checkbox]:checked + .checkbox:after {
|
||||
opacity: 1;
|
||||
}
|
||||
input[type=radio]:disabled + .radio:before,
|
||||
input[type=checkbox]:disabled + .checkbox:before,
|
||||
input[type=radio]:disabled + .radio:after,
|
||||
input[type=checkbox]:disabled + .checkbox:after {
|
||||
border-color: var(--input-disabled-text-color);
|
||||
}
|
||||
input[type=radio]:disabled + .radio,
|
||||
input[type=checkbox]:disabled + .checkbox {
|
||||
border-color: var(--input-disabled-font-color);
|
||||
}
|
||||
input[type=radio]:focus + .radio:before,
|
||||
input[type=checkbox]:focus + .checkbox:before {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Regular inputs
|
||||
*/
|
||||
select,
|
||||
textarea,
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
font-size: 100%;
|
||||
padding: 0.3em;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid var(--input-enabled-border-color);
|
||||
background: var(--input-enabled-background-color);
|
||||
color: var(--input-enabled-text-color);
|
||||
box-shadow: none; /* :-moz-submit-invalid on FF */
|
||||
transition: border-color 0.1s linear, background-color 0.1s linear;
|
||||
}
|
||||
|
||||
select:disabled,
|
||||
textarea:disabled,
|
||||
input[type=text]:disabled,
|
||||
input[type=email]:disabled,
|
||||
input[type=password]:disabled {
|
||||
border: 2px solid var(--input-disabled-border-color);
|
||||
background: var(--input-disabled-background-color);
|
||||
color: var(--input-disabled-text-color);
|
||||
}
|
||||
|
||||
select:focus,
|
||||
textarea:focus,
|
||||
input[type=text]:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=password]:focus {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
form.show-validation .input input:invalid {
|
||||
outline: none;
|
||||
border: 2px solid var(--input-bad-border-color);
|
||||
background: var(--input-bad-background-color);
|
||||
}
|
||||
form.show-validation .input input:valid {
|
||||
outline: none;
|
||||
border: 2px solid var(--input-good-border-color);
|
||||
background: var(--input-good-background-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Buttons
|
||||
*/
|
||||
button,
|
||||
input[type=button],
|
||||
input[type=submit] {
|
||||
cursor: pointer;
|
||||
font-size: 100%;
|
||||
line-height: 100%;
|
||||
padding: 0.3em 0.7em;
|
||||
border: 1px solid var(--button-enabled-background-color);
|
||||
background: var(--button-enabled-background-color);
|
||||
color: var(--button-enabled-text-color);
|
||||
}
|
||||
button:disabled,
|
||||
input[type=button]:disabled,
|
||||
input[type=submit]:disabled {
|
||||
cursor: default;
|
||||
border-color: var(--button-disabled-background-color);
|
||||
background-color: var(--button-disabled-background-color);
|
||||
color: var(--button-disabled-text-color);
|
||||
}
|
||||
button:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=submit]:focus {
|
||||
outline: 2px solid var(--text-color);
|
||||
}
|
||||
select:-moz-focusring {
|
||||
text-shadow: 0;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* File dropper
|
||||
*/
|
||||
.file-dropper {
|
||||
background: white;
|
||||
border: 3px dashed #eee;
|
||||
padding: 0.3em 0.5em;
|
||||
line-height: 140%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
input[type=file]:disabled+.file-dropper {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
input[type=file]:active+.file-dropper,
|
||||
input[type=file]:focus+.file-dropper,
|
||||
.file-dropper.active {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
@import colors
|
||||
|
||||
form
|
||||
display: block
|
||||
width: 20em
|
||||
|
||||
ul
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
margin-top: 0.5em
|
||||
|
||||
label
|
||||
display: block
|
||||
padding: 0.5em 0
|
||||
|
||||
.input
|
||||
margin-bottom: 1em
|
||||
|
||||
.buttons
|
||||
margin-top: 1em
|
||||
|
||||
.input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
|
||||
.input li:first-child
|
||||
padding-top: 0
|
||||
margin-top: 0
|
||||
|
||||
.hint
|
||||
margin-top: 0.5em
|
||||
margin-bottom: 0
|
||||
color: $inactive-link-color
|
||||
font-size: 80%
|
||||
line-height: 120%
|
||||
|
||||
form.tabular
|
||||
ul
|
||||
display: table
|
||||
width: 100%
|
||||
|
||||
li
|
||||
display: table-row
|
||||
|
||||
label:not(.radio):not(.checkbox):not(.file-dropper)
|
||||
display: table-cell
|
||||
width: 33%
|
||||
|
||||
.messages, .buttons
|
||||
margin-left: 33%
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Radio buttons and checkboxes
|
||||
*/
|
||||
input[type=radio], input[type=checkbox]
|
||||
position: absolute
|
||||
opacity: 0
|
||||
|
||||
.radio, .checkbox
|
||||
box-sizing: border-box
|
||||
position: relative
|
||||
display: inline-block
|
||||
padding-left: calc(20px + 0.5em) !important
|
||||
vertical-align: middle
|
||||
cursor: pointer
|
||||
|
||||
&:hover:before
|
||||
border-color: $main-color
|
||||
|
||||
.radio:before
|
||||
border-radius: 100%
|
||||
|
||||
.radio:before, .checkbox:before
|
||||
transition: border-color 0.1s linear
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 0
|
||||
display: block
|
||||
margin-top: -10px
|
||||
width: 16px
|
||||
height: 16px
|
||||
background: $input-enabled-background-color
|
||||
border: 2px solid $input-enabled-border-color
|
||||
content: ''
|
||||
|
||||
.radio:after
|
||||
background: $main-color
|
||||
transition: opacity 0.1s linear
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 5px
|
||||
display: block
|
||||
margin-top: -5px
|
||||
width: 10px
|
||||
height: 10px
|
||||
border-radius: 50%
|
||||
content: ''
|
||||
opacity: 0
|
||||
|
||||
.checkbox:after
|
||||
transition: opacity 0.1s linear
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 6px
|
||||
display: block
|
||||
margin-top: -7px
|
||||
width: 5px
|
||||
height: 9px
|
||||
border-right: 3px solid $main-color
|
||||
border-bottom: 3px solid $main-color
|
||||
content: ''
|
||||
opacity: 0
|
||||
transform: rotate(45deg)
|
||||
|
||||
|
||||
input[type=radio]:checked + .radio:before,
|
||||
input[type=checkbox]:checked + .checkbox:before
|
||||
border-color: $main-color
|
||||
|
||||
input[type=radio]:checked + .radio:after,
|
||||
input[type=checkbox]:checked + .checkbox:after
|
||||
opacity: 1
|
||||
|
||||
input[type=radio]:disabled + .radio:before,
|
||||
input[type=checkbox]:disabled + .checkbox:before,
|
||||
input[type=radio]:disabled + .radio:after,
|
||||
input[type=checkbox]:disabled + .checkbox:after
|
||||
border-color: $input-disabled-text-color
|
||||
|
||||
input[type=radio]:disabled + .radio,
|
||||
input[type=checkbox]:disabled + .checkbox
|
||||
border-color: $input-disabled-text-color
|
||||
|
||||
input[type=radio]:focus + .radio:before,
|
||||
input[type=checkbox]:focus + .checkbox:before
|
||||
border-color: $main-color
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Regular inputs
|
||||
*/
|
||||
select,
|
||||
textarea,
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password]
|
||||
font-family: 'Inconsolata', monospace
|
||||
font-size: 100%
|
||||
padding: 0.3em
|
||||
text-overflow: ellipsis
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
border: 2px solid $input-enabled-border-color
|
||||
background: $input-enabled-background-color
|
||||
color: $input-enabled-text-color
|
||||
box-shadow: none; /* :-moz-submit-invalid on FF */
|
||||
transition: border-color 0.1s linear, background-color 0.1s linear
|
||||
|
||||
&:disabled
|
||||
border: 2px solid $input-disabled-border-color
|
||||
background: $input-disabled-background-color
|
||||
color: $input-disabled-text-color
|
||||
|
||||
&:focus
|
||||
border-color: $main-color
|
||||
|
||||
form.show-validation .input
|
||||
input:invalid
|
||||
outline: none
|
||||
border: 2px solid $input-bad-border-color
|
||||
background: $input-bad-background-color
|
||||
input:valid
|
||||
outline: none
|
||||
border: 2px solid $input-good-border-color
|
||||
background: $input-good-background-color
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Buttons
|
||||
*/
|
||||
button,
|
||||
input[type=button],
|
||||
input[type=submit]
|
||||
cursor: pointer
|
||||
font-size: 100%
|
||||
line-height: 100%
|
||||
padding: 0.3em 0.7em
|
||||
border: 1px solid $button-enabled-background-color
|
||||
background: $button-enabled-background-color
|
||||
color: $button-enabled-text-color
|
||||
|
||||
&:disabled
|
||||
cursor: default
|
||||
border-color: $button-disabled-background-color
|
||||
background-color: $button-disabled-background-color
|
||||
color: $button-disabled-text-color
|
||||
|
||||
&:focus
|
||||
outline: 2px solid $text-color
|
||||
|
||||
select:-moz-focusring
|
||||
text-shadow: 0
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner
|
||||
border: 0
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* File dropper
|
||||
*/
|
||||
.file-dropper
|
||||
background: white
|
||||
border: 3px dashed #eee
|
||||
padding: 0.3em 0.5em
|
||||
line-height: 140%
|
||||
text-align: center
|
||||
cursor: pointer
|
||||
word-wrap: break-word
|
||||
|
||||
input[type=file]:disabled+.file-dropper
|
||||
cursor: default
|
||||
opacity: .5
|
||||
|
||||
input[type=file]:active+.file-dropper,
|
||||
input[type=file]:focus+.file-dropper,
|
||||
.file-dropper.active
|
||||
border-color: $main-color
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
#help {
|
||||
width: 40em;
|
||||
}
|
||||
#help nav {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
#help td {
|
||||
padding-right: 1em;
|
||||
}
|
||||
#help .section {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
#help
|
||||
width: 40em
|
||||
|
||||
nav
|
||||
margin-bottom: 1.5em
|
||||
|
||||
td
|
||||
padding-right: 1em
|
||||
|
||||
.section
|
||||
margin-top: 2em
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
#home {
|
||||
text-align: center !important;
|
||||
}
|
||||
#home h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
#home .message {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
#home
|
||||
text-align: center !important
|
||||
|
||||
h1
|
||||
margin-top: 0
|
||||
|
||||
.message
|
||||
margin-bottom: 2em
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
* {
|
||||
--main-color: #24AADD;
|
||||
--top-nav-color: #F5F5F5;
|
||||
--text-color: #111;
|
||||
--inactive-link-color: #888;
|
||||
--line-color: #DDD;
|
||||
--inactive-tab-text-color: var(--inactive-link-color);
|
||||
--active-tab-text-color: var(--text-color);
|
||||
--active-tab-background-color: #E5E5E5;
|
||||
--message-info-border-color: #BDF;
|
||||
--message-info-background-color: #E3EFF9;
|
||||
--message-error-border-color: #FCC;
|
||||
--message-error-background-color: #FFF5F5;
|
||||
--message-success-border-color: #D3E3D3;
|
||||
--message-success-background-color: #F5FFF5;
|
||||
--input-bad-border-color: #FCC;
|
||||
--input-bad-background-color: #FFF5F5;
|
||||
--input-good-border-color: #D3E3D3;
|
||||
--input-good-background-color: #F5FFF5;
|
||||
--input-enabled-background-color: #FAFAFA;
|
||||
--input-enabled-border-color: #EEE;
|
||||
--input-enabled-text-color: var(--text-color);
|
||||
--input-disabled-background-color: #FAFAFA;
|
||||
--input-disabled-border-color: #EEE;
|
||||
--input-disabled-text-color: #888;
|
||||
--button-enabled-text-color: white;
|
||||
--button-enabled-background-color: var(--main-color);
|
||||
--button-disabled-text-color: #666;
|
||||
--button-disabled-background-color: #CCC;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-family: 'Droid Sans' !important;
|
||||
font-size: 12pt;
|
||||
line-height: 18pt;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--main-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.1s linear;
|
||||
}
|
||||
|
||||
#content-holder {
|
||||
margin: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
#content-holder>.content-wrapper {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#content-holder>.content-wrapper:not(.transparent) {
|
||||
background: var(--top-nav-color);
|
||||
padding: 2em;
|
||||
}
|
||||
#content-holder>.content-wrapper>*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line-color);
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
nav ul li a {
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul li img {
|
||||
margin: 0;
|
||||
vertical-align: top; /* fix ghost margin under the image */
|
||||
}
|
||||
|
||||
nav.plain-nav ul li {
|
||||
display: block;
|
||||
}
|
||||
nav.plain-nav ul li a {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
nav.text-nav {
|
||||
margin: 1em 0;
|
||||
line-height: 2.3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav.text-nav ul li a {
|
||||
padding: 0 1.2em;
|
||||
}
|
||||
nav.text-nav ul li:not(.active) a {
|
||||
color: var(--inactive-tab-text-color);
|
||||
}
|
||||
nav.text-nav ul li:hover:not(.active) a {
|
||||
color: var(--active-tab-text-color);
|
||||
}
|
||||
nav.text-nav ul li.active a {
|
||||
background: var(--active-tab-background-color);
|
||||
color: var(--active-tab-text-color);
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
background: var(--top-nav-color);
|
||||
margin: 0;
|
||||
}
|
||||
#top-nav ul {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
#top-nav ul li {
|
||||
float: left;
|
||||
}
|
||||
#top-nav ul li[data-name=account],
|
||||
#top-nav ul li[data-name=register],
|
||||
#top-nav ul li[data-name=login],
|
||||
#top-nav ul li[data-name=logout],
|
||||
#top-nav ul li[data-name=settings],
|
||||
#top-nav ul li[data-name=help] {
|
||||
float: none;
|
||||
}
|
||||
#top-nav .access-key {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#top-nav .thumbnail, #top-nav span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#top-nav .thumbnail {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin: calc((2.3em - 1.5em) / 2);
|
||||
margin-right: 0.6em;
|
||||
margin-left: calc(0.6em - 1.2em);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin: 0 auto;
|
||||
width: 30em;
|
||||
max-width: 100%;
|
||||
}
|
||||
.messages .message {
|
||||
margin: 0.25em 0;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
.message.info {
|
||||
border: 1px solid var(--message-info-border-color);
|
||||
background: var(--message-info-background-color);
|
||||
}
|
||||
.message.error {
|
||||
border: 1px solid var(--message-error-border-color);
|
||||
background: var(--message-error-background-color);
|
||||
}
|
||||
.message.success {
|
||||
border: 1px solid var(--message-success-border-color);
|
||||
background: var(--message-success-background-color);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
/*background-image: attr(data-src url);*/ /* not available yet */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.thumbnail img {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flexbox-dummy {
|
||||
height: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.pager nav .disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
.pager nav .prev span,
|
||||
.pager nav .next span {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
@import colors
|
||||
|
||||
body
|
||||
overflow-y: scroll
|
||||
margin: 0
|
||||
color: $text-color
|
||||
font-family: 'Droid Sans' !important
|
||||
font-size: 12pt
|
||||
line-height: 18pt
|
||||
|
||||
h1, h2, h3
|
||||
font-weight: normal
|
||||
margin-bottom: 1em
|
||||
|
||||
a
|
||||
color: $main-color
|
||||
text-decoration: none
|
||||
transition: color 0.1s linear
|
||||
|
||||
#content-holder
|
||||
margin: 2em
|
||||
text-align: center
|
||||
>.content-wrapper
|
||||
text-align: left
|
||||
display: inline-block
|
||||
margin: 0 auto
|
||||
>*:first-child
|
||||
margin-top: 0
|
||||
>.content-wrapper:not(.transparent)
|
||||
background: $top-nav-color
|
||||
padding: 2em
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-top: 1px solid $line-color
|
||||
margin: 1em 0
|
||||
padding: 0
|
||||
|
||||
nav ul
|
||||
list-style-type: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
display: inline-block
|
||||
li
|
||||
display: inline-block
|
||||
padding: 0
|
||||
margin: 0
|
||||
a
|
||||
display: inline-block
|
||||
img
|
||||
margin: 0
|
||||
vertical-align: top; /* fix ghost margin under the image */
|
||||
|
||||
nav.plain-nav ul li
|
||||
display: block
|
||||
a
|
||||
display: inline
|
||||
|
||||
nav.text-nav
|
||||
margin: 1em 0
|
||||
line-height: 2.3em
|
||||
vertical-align: middle
|
||||
ul
|
||||
li a
|
||||
padding: 0 1.2em
|
||||
li:not(.active) a
|
||||
color: $inactive-tab-text-color
|
||||
li:hover:not(.active) a
|
||||
color: $active-tab-text-color
|
||||
li.active a
|
||||
background: $active-tab-background-color
|
||||
color: $active-tab-text-color
|
||||
|
||||
#top-nav
|
||||
background: $top-nav-color
|
||||
margin: 0
|
||||
ul
|
||||
display: block
|
||||
text-align: right
|
||||
li
|
||||
float: left
|
||||
ul li[data-name=account],
|
||||
ul li[data-name=register],
|
||||
ul li[data-name=login],
|
||||
ul li[data-name=logout],
|
||||
ul li[data-name=settings],
|
||||
ul li[data-name=help]
|
||||
float: none
|
||||
.access-key
|
||||
text-decoration: underline
|
||||
.thumbnail
|
||||
vertical-align: middle
|
||||
width: 1.5em
|
||||
height: 1.5em
|
||||
margin: calc((2.3em - 1.5em) / 2)
|
||||
margin-right: 0.6em
|
||||
margin-left: calc(0.6em - 1.2em)
|
||||
float: left
|
||||
span
|
||||
vertical-align: middle
|
||||
|
||||
.messages
|
||||
margin: 0 auto
|
||||
width: 30em
|
||||
max-width: 100%
|
||||
.message
|
||||
margin: 0.25em 0
|
||||
display: inline-block
|
||||
text-align: left
|
||||
padding: 0.5em 1em
|
||||
.message.info
|
||||
border: 1px solid $message-info-border-color
|
||||
background: $message-info-background-color
|
||||
.message.error
|
||||
border: 1px solid $message-error-border-color
|
||||
background: $message-error-background-color
|
||||
.message.success
|
||||
border: 1px solid $message-success-border-color
|
||||
background: $message-success-background-color
|
||||
|
||||
.thumbnail
|
||||
/*background-image: attr(data-src url);*/ /* not available yet */
|
||||
background-repeat: no-repeat
|
||||
background-size: cover
|
||||
background-position: center
|
||||
display: inline-block
|
||||
|
||||
.thumbnail img
|
||||
opacity: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.flexbox-dummy
|
||||
height: 0 !important
|
||||
padding-top: 0 !important
|
||||
padding-bottom: 0 !important
|
||||
margin-top: 0 !important
|
||||
margin-bottom: 0 !important
|
||||
|
||||
.pager
|
||||
nav
|
||||
.disabled
|
||||
opacity: .5
|
||||
.prev span,
|
||||
.next span
|
||||
opacity: 0
|
||||
position: absolute
|
||||
display: block
|
||||
width: 0
|
||||
height: 0
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
#user-registration form {
|
||||
float: left;
|
||||
}
|
||||
#user-registration .info {
|
||||
float: left;
|
||||
margin-left: 3em;
|
||||
border-radius: 0.2em;
|
||||
width: 20em;
|
||||
}
|
||||
#user-registration .info ul {
|
||||
line-height: 1.8em;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#user-registration .info li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#user-registration .info i {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
#user-registration .info i.fa {
|
||||
color: var(--main-color);
|
||||
}
|
||||
#user-registration .info p:first-child {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
#login .buttons a {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#user {
|
||||
width: 30em;
|
||||
}
|
||||
#user .text-nav {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
#user-summary .thumbnail {
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
margin: 0 1.5em 1.5em 0;
|
||||
float: left;
|
||||
}
|
||||
#user-summary div {
|
||||
clear: both;
|
||||
}
|
||||
#user-summary .basic-info {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
#user-summary nav {
|
||||
float: left;
|
||||
width: 45%;
|
||||
margin-right: 1em;
|
||||
}
|
||||
#user-edit form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
#user-edit .left {
|
||||
width: 65%;
|
||||
}
|
||||
#user-edit .right {
|
||||
width: 35%;
|
||||
margin-left: 1em;
|
||||
}
|
||||
#user-edit .file-dropper-holder {
|
||||
position: relative;
|
||||
}
|
||||
#user-edit .file-dropper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#user-delete form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-list ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.user-list li {
|
||||
width: 20em;
|
||||
margin: 0.5em;
|
||||
padding: 0.75em;
|
||||
vertical-align: top;
|
||||
background: var(--top-nav-color);
|
||||
text-align: left;
|
||||
}
|
||||
.user-list .wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.user-list .details {
|
||||
font-size: 90%;
|
||||
line-height: 130%;
|
||||
}
|
||||
.user-list .thumbnail {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin: 0 0.6em 0 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
@import colors
|
||||
|
||||
#user-registration
|
||||
form
|
||||
float: left
|
||||
.info
|
||||
float: left
|
||||
margin-left: 3em
|
||||
border-radius: 0.2em
|
||||
width: 20em
|
||||
ul
|
||||
line-height: 1.8em
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
li
|
||||
margin: 0
|
||||
padding: 0
|
||||
i
|
||||
margin-right: 0.5em
|
||||
i.fa
|
||||
color: $main-color
|
||||
p:first-child
|
||||
margin: 0 0 0.5em 0
|
||||
|
||||
|
||||
#login
|
||||
.buttons a
|
||||
margin-left: 1em
|
||||
|
||||
|
||||
#user
|
||||
width: 30em
|
||||
.text-nav
|
||||
margin-bottom: 1.5em
|
||||
|
||||
#user-summary
|
||||
.thumbnail
|
||||
width: 6em
|
||||
height: 6em
|
||||
margin: 0 1.5em 1.5em 0
|
||||
float: left
|
||||
.basic-info
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
div
|
||||
clear: both
|
||||
nav
|
||||
float: left
|
||||
width: 45%
|
||||
margin-right: 1em
|
||||
|
||||
#user-edit
|
||||
form
|
||||
width: 100%
|
||||
display: flex
|
||||
.left
|
||||
width: 65%
|
||||
.right
|
||||
width: 35%
|
||||
margin-left: 1em
|
||||
.file-dropper-holder
|
||||
position: relative
|
||||
.file-dropper
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
#user-delete form
|
||||
width: 100%
|
||||
|
||||
|
||||
.user-list
|
||||
ul
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-content: flex-end
|
||||
flex-wrap: wrap
|
||||
li
|
||||
width: 20em
|
||||
margin: 0.5em
|
||||
padding: 0.75em
|
||||
vertical-align: top
|
||||
background: $top-nav-color
|
||||
text-align: left
|
||||
.wrapper
|
||||
display: flex
|
||||
.details
|
||||
font-size: 90%
|
||||
line-height: 130%
|
||||
.thumbnail
|
||||
width: 3em
|
||||
height: 3em
|
||||
margin: 0 0.6em 0 0
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
"js-yaml": "^3.5.5",
|
||||
"merge": "^1.2.0",
|
||||
"page": "^1.7.1",
|
||||
"stylus": "^0.54.2",
|
||||
"superagent": "^1.8.3",
|
||||
"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue