2a69f0193f
* Users are only authenticated against their password on login, and to retrieve a token * Passwords are wiped from the GUI frontend and cookies after login and token retrieval * Tokens are revoked at the end of the session/logout * If the user chooses the "remember me" option, the token is stored in the cookie * Tokens correctly delete themselves on logout * Tokens can expire at user-specified date * Tokens have their last usage time * Tokens can have user defined descriptions * Users can manage login tokens in their account settings
350 lines
7.9 KiB
Stylus
350 lines
7.9 KiB
Stylus
@import colors
|
|
|
|
form
|
|
display: block
|
|
width: 20em
|
|
|
|
.input
|
|
list-style-type: none
|
|
margin: 0 0 2em 0
|
|
padding: 0
|
|
li
|
|
margin-top: 1.2em
|
|
label
|
|
display: block
|
|
padding: 0.3em 0
|
|
.input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
|
|
.input li:first-child
|
|
padding-top: 0
|
|
margin-top: 0
|
|
|
|
form:not(.horizontal)
|
|
.hint
|
|
margin-top: 0.2em
|
|
margin-bottom: 0
|
|
color: $inactive-link-color
|
|
font-size: 80%
|
|
line-height: 120%
|
|
|
|
form.horizontal
|
|
display: inline-block
|
|
margin-bottom: 1em
|
|
.input, .buttons, ul
|
|
display: inline-block
|
|
vertical-align: top
|
|
margin: 0
|
|
padding: 0
|
|
input
|
|
vertical-align: top
|
|
.buttons
|
|
margin-right: 0.5em
|
|
@media (max-width: 1000px)
|
|
display: block
|
|
.input, .buttons, ul
|
|
display: block
|
|
margin-top: 0.5em
|
|
&:first-child
|
|
margin-top: 0
|
|
.buttons
|
|
margin-right: 0
|
|
|
|
|
|
|
|
/*
|
|
* 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
|
|
left: 0
|
|
top: 0.15em
|
|
display: block
|
|
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
|
|
left: 5px
|
|
top: 0.15em
|
|
margin-top: 5px
|
|
display: block
|
|
width: 10px
|
|
height: 10px
|
|
border-radius: 50%
|
|
content: ''
|
|
opacity: 0
|
|
|
|
.checkbox:after
|
|
transition: opacity 0.1s linear
|
|
position: absolute
|
|
top: 0.15em
|
|
left: 6px
|
|
display: block
|
|
margin-top: 3px
|
|
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
|
|
|
|
|
|
|
|
/*
|
|
* Date and time inputs
|
|
*/
|
|
|
|
input[type=date],
|
|
input[type=time]
|
|
vertical-align: top
|
|
font-family: 'Droid Sans', sans-serif
|
|
font-size: 100%
|
|
padding: 0.2em 0.3em
|
|
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
|
|
|
|
&[readonly]
|
|
border: 2px solid $input-disabled-border-color
|
|
background: $input-disabled-background-color
|
|
color: $input-disabled-text-color
|
|
|
|
|
|
|
|
/*
|
|
* Regular inputs
|
|
*/
|
|
select,
|
|
textarea,
|
|
input[type=text],
|
|
input[type=email],
|
|
input[type=password],
|
|
input[type=number]
|
|
vertical-align: top
|
|
font-family: 'Droid Sans', sans-serif
|
|
font-size: 100%
|
|
padding: 0.2em 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
|
|
|
|
&[readonly]
|
|
border: 2px solid $input-disabled-border-color
|
|
background: $input-disabled-background-color
|
|
color: $input-disabled-text-color
|
|
|
|
input[readonly],
|
|
input[readonly]+.radio,
|
|
input[readonly]+.checkbox,
|
|
input:disabled+.radio,
|
|
input:disabled+.checkbox,
|
|
input:disabled
|
|
cursor: not-allowed
|
|
|
|
label.color
|
|
white-space: nowrap
|
|
position: relative
|
|
display: flex
|
|
input[type=text]
|
|
margin-right: 0.25em
|
|
width: auto
|
|
.preview
|
|
display: inline-block
|
|
text-align: center
|
|
padding: 0 0.5em
|
|
border: 2px solid black
|
|
&:after
|
|
content: 'A'
|
|
.background-preview
|
|
border-right: 0
|
|
color: transparent
|
|
.text-preview
|
|
border-left: 0
|
|
|
|
|
|
form.show-validation .input
|
|
input:invalid
|
|
outline: 0
|
|
border: 2px solid $input-bad-border-color
|
|
background: $input-bad-background-color
|
|
input:valid
|
|
outline: 0
|
|
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%
|
|
padding: 0.2em 0.7em
|
|
border-radius: 0
|
|
border: 2px solid $button-enabled-background-color
|
|
background: $button-enabled-background-color
|
|
color: $button-enabled-text-color
|
|
outline: 0 /* something on Chrome */
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
|
|
&:disabled
|
|
cursor: default
|
|
border-color: $button-disabled-background-color
|
|
background-color: $button-disabled-background-color
|
|
color: $button-disabled-text-color
|
|
|
|
&.discourage
|
|
border-color: transparent
|
|
background-color: transparent
|
|
color: $button-disabled-text-color
|
|
|
|
&:focus
|
|
border: 2px solid $text-color
|
|
|
|
select:-moz-focusring
|
|
text-shadow: 0
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner
|
|
border: 0
|
|
|
|
|
|
|
|
/*
|
|
* File dropper
|
|
*/
|
|
.file-dropper-holder
|
|
.file-dropper
|
|
display: block
|
|
background: $window-color
|
|
border: 3px dashed #eee
|
|
padding: 0.3em 0.5em
|
|
line-height: 140%
|
|
text-align: center
|
|
cursor: pointer
|
|
overflow: hidden
|
|
word-wrap: break-word
|
|
.url-holder
|
|
display: flex
|
|
margin-top: 0.5em
|
|
input, button
|
|
min-width: 0 /* firefox being sassy */
|
|
width: auto !important /* don't inherit anything weird */
|
|
input
|
|
flex: 1
|
|
button
|
|
margin-left: 0.5em
|
|
|
|
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
|
|
|
|
|
|
|
|
.autocomplete
|
|
position: absolute
|
|
z-index: 10
|
|
background: $window-color
|
|
border: 2px solid $main-color
|
|
display: none
|
|
font-size: 0.95em
|
|
ul
|
|
list-style-type: none
|
|
margin: 0
|
|
padding: 0
|
|
li
|
|
margin: 0
|
|
a
|
|
display: block
|
|
padding: 0.1em 0.5em
|
|
&.active a, a:hover
|
|
background: $button-enabled-background-color
|
|
color: $button-enabled-text-color
|
|
span
|
|
color: $button-enabled-text-color
|
|
.disabled
|
|
color: $inactive-link-color
|
|
|
|
|
|
.anticomplete
|
|
display: none
|