Iterate on editor controls design

This commit is contained in:
Magnus Hovland Hoff 2018-08-21 18:40:44 +02:00
parent c94bf91fc2
commit 096da6ef38

View file

@ -311,7 +311,7 @@ h1>input {
box-shadow: 0px 5px 20px rgba(0,0,0, 0.2); box-shadow: 0px 5px 20px rgba(0,0,0, 0.2);
background: var(--theme-main); background: white;
color: var(--theme-text); color: var(--theme-text);
padding: 10px 10px; padding: 10px 10px;
@ -326,7 +326,6 @@ h1>input {
} }
.button { .button {
box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
@ -354,7 +353,7 @@ h1>input {
background: white; background: white;
color: var(--theme-main); color: var(--theme-main);
} }
.button-cancel:hover { .button-cancel:hover, .button-cancel:active {
background: #f0f0f0; background: #f0f0f0;
} }
@ -362,15 +361,20 @@ h1>input {
background: var(--theme-main); background: var(--theme-main);
color: var(--theme-text); color: var(--theme-text);
} }
.button-default:hover, .button-default:active {
background: var(--theme-input);
}
@media (min-width: 630px) { @media (min-width: 630px) {
.editor-controls { .editor-controls {
border-radius: 2px;
position: fixed; position: fixed;
left: calc(50vw + 320px); left: calc(50vw + 320px);
width: 160px; width: 140px;
top: calc(50vh - 65px); top: calc(50vh - 55px);
height: 130px; height: 110px;
padding: 20px; padding: 10px;
transform: translate(20px, 0); transform: translate(20px, 0);
opacity: 0; opacity: 0;