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

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

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

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

@ -1,18 +1,9 @@
.container {
border: 1px solid var(--accent-colour);
background-color: var(--background-colour);
margin: 2px 0;
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
}
text-shadow: 0 1px 4px #111;
// should this exist?
&--hidden { // __title should always be the first element of a container
:not(:first-child) {
display: none;
@ -20,18 +11,17 @@
}
&--translucent {
background-color: var(--background-colour-translucent);
background-color: #111E;
}
&__title {
display: block;
text-decoration: none;
background-image: linear-gradient(0deg, transparent, var(--accent-colour));
color: var(--text-colour-header);
font-size: 1.17em;
font-weight: 700;
padding: 3px;
font-family: @mio-font-heading;
color: #fff;
font-size: 1.5em;
line-height: 1.5em;
padding: 8px 10px;
word-wrap: break-word;
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
margin: 2px 5px;
}
&--new &__content {
margin: 0;
padding: 2px 5px;
}

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

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

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

@ -1,24 +1,15 @@
.input__select {
border: 1px solid #aaa;
padding: 1px;
margin: 1px;
background: #fff;
color: #111;
border: 1px solid #222;
padding: 5px 10px;
background: #222;
color: #fff;
min-width: 150px;
font-size: 1.2em;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus {
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 {
border: 1px solid #aaa;
padding: 1px;
background: #fff;
color: #111;
font-size: 1.2em;
border: 1px solid #222;
padding: 5px 10px;
background: #222;
color: #fff;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus {
border-color: var(--accent-colour);
}
&--readonly {
color: #666;
color: #888;
}
&--monospace {
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 {
border: 1px solid #aaa;
padding: 1px;
font-size: 1.2em;
border: 1px solid #222;
padding: 5px 10px;
vertical-align: bottom;
background: #fff;
color: #111;
background: #222;
color: #fff;
font-family: @mio-font-mono;
font-size: 1em;
border-radius: 2px;
box-shadow: inset 0 0 4px #111;
transition: border-color .2s;
&:focus {
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;
}
}