flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merged --new stylings with the normal ones.

Browse source
This commit is contained in:
flash 2018-10-22 19:39:48 +02:00
parent 8a71598850
commit 5b7bd50193
6 changed files with 50 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/less/classes/avatar.less
View file

@ -1,18 +1,14 @@
.avatar { .avatar {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--background-colour); background-color: var(--accent-colour);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
display: block; display: block;
border: 1px solid var(--accent-colour); border: 0;
border-radius: 2px;
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
box-sizing: content-box; box-sizing: content-box;
box-shadow: 0 1px 4px #111;
&--new {
border-radius: 2px;
border: initial;
box-shadow: 0 1px 4px #111;
}
} }

42
assets/less/classes/container.less
View file

@ -1,18 +1,9 @@
.container { .container {
border: 1px solid var(--accent-colour); background-color: #111;
background-color: var(--background-colour); box-shadow: 0 1px 2px #111;
margin: 2px 0; text-shadow: 0 1px 4px #111;
box-shadow: 0 1px 2px var(--accent-colour);
&--new {
color: #fff;
border: initial;
background-color: #111;
text-shadow: 0 1px 4px #111;
box-shadow: 0 1px 2px #111;
margin: 0; // new style containers should not depend on existing margins
}
// should this exist?
&--hidden { // __title should always be the first element of a container &--hidden { // __title should always be the first element of a container
:not(:first-child) { :not(:first-child) {
display: none; display: none;
@ -20,18 +11,17 @@
} }
&--translucent { &--translucent {
background-color: var(--background-colour-translucent); background-color: #111E;
} }
&__title { &__title {
display: block; display: block;
text-decoration: none; text-decoration: none;
background-image: linear-gradient(0deg, transparent, var(--accent-colour)); background-image: linear-gradient(0deg, transparent, var(--accent-colour));
color: var(--text-colour-header); color: #fff;
font-size: 1.17em; font-size: 1.5em;
font-weight: 700; line-height: 1.5em;
padding: 3px; padding: 8px 10px;
font-family: @mio-font-heading;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
@ -49,21 +39,7 @@
} }
} }
&--new &__title {
background-image: linear-gradient(0deg, transparent, var(--accent-colour));
color: #fff;
font-weight: 400;
font-size: 1.5em;
line-height: 1.5em;
padding: 8px 10px;
font-family: inherit;
}
&__content { // only use this for text going forward, just throw your child container in directly after __title &__content { // only use this for text going forward, just throw your child container in directly after __title
margin: 2px 5px;
}
&--new &__content {
margin: 0; margin: 0;
padding: 2px 5px; padding: 2px 5px;
} }

51
assets/less/classes/input/button.less
View file

@ -1,55 +1,28 @@
.input__button { .input__button {
background-image: linear-gradient(0deg, transparent, var(--gradient-start)); background-color: #111;
background-color: var(--accent-colour);
font-family: @mio-font-regular; font-family: @mio-font-regular;
font-size: 1.1em; font-size: 1.2em;
line-height: 1.4em; line-height: 1.4em;
padding: 4px 10px; padding: 5px 10px;
min-width: 80px; min-width: 80px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: background-color .2s, box-shadow .2s; transition: color .2s, background-color .2s;
color: var(--text-colour-header); color: var(--accent-colour);
border: 1px solid var(--text-colour-header); border: 1px solid var(--accent-colour);
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
&--disabled { &:hover,
background: linear-gradient(0deg, #888, #aaa) !important; &:active,
border-color: #333;
color: #333;
box-shadow: initial !important;
}
&:focus { &:focus {
box-shadow: inset 0 0 2px 0 var(--text-colour-header); color: #111;
background-color: var(--accent-colour);
} }
&:hover { &--disabled {
background-color: #a586c3; --accent-colour: #333;
}
&:active {
background-color: var(--gradient-start);
}
&--new {
color: var(--accent-colour);
background: #111;
border: 1px solid var(--accent-colour);
padding: 5px 10px;
font-size: 1.2em;
transition: color .2s, background-color .2s;
box-shadow: initial !important;
&:hover,
&:active,
&:focus {
color: #111;
background-color: var(--accent-colour);
text-shadow: initial;
}
} }
&--destroy { &--destroy {

25
assets/less/classes/input/select.less
View file

@ -1,24 +1,15 @@
.input__select { .input__select {
border: 1px solid #aaa; border: 1px solid #222;
padding: 1px; padding: 5px 10px;
margin: 1px; background: #222;
background: #fff; color: #fff;
color: #111;
min-width: 150px; min-width: 150px;
font-size: 1.2em;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus { &:focus {
border-color: var(--accent-colour); border-color: var(--accent-colour);
} }
&--new {
font-size: 1.2em;
margin: 0;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
background: #222;
box-shadow: inset 0 0 4px #111;
border-color: #222;
transition: border-color .2s;
}
} }

25
assets/less/classes/input/text.less
View file

@ -1,29 +1,22 @@
.input__text { .input__text {
border: 1px solid #aaa; font-size: 1.2em;
padding: 1px; border: 1px solid #222;
background: #fff; padding: 5px 10px;
color: #111; background: #222;
color: #fff;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus { &:focus {
border-color: var(--accent-colour); border-color: var(--accent-colour);
} }
&--readonly { &--readonly {
color: #666; color: #888;
} }
&--monospace { &--monospace {
font-family: @mio-font-mono; font-family: @mio-font-mono;
} }
&--new {
font-size: 1.2em;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
background: #222;
box-shadow: inset 0 0 4px #111;
border-color: #222;
transition: border-color .2s;
}
} }

24
assets/less/classes/input/textarea.less
View file

@ -1,24 +1,16 @@
.input__textarea { .input__textarea {
border: 1px solid #aaa; font-size: 1.2em;
padding: 1px; border: 1px solid #222;
padding: 5px 10px;
vertical-align: bottom; vertical-align: bottom;
background: #fff; background: #222;
color: #111; color: #fff;
font-family: @mio-font-mono; font-family: @mio-font-mono;
font-size: 1em; border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus { &:focus {
border-color: var(--accent-colour); border-color: var(--accent-colour);
} }
&--new {
font-size: 1.2em;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
background: #222;
box-shadow: inset 0 0 4px #111;
border-color: #222;
transition: border-color .2s;
}
} }