Caret/css/palette.less

93 lines
1.8 KiB
Text
Raw Normal View History

2013-09-10 16:19:14 +00:00
.palette {
display: none;
width: 320px;
2013-09-10 16:19:14 +00:00
position: fixed;
top: 20px;
left: ~"calc(50% - 150px)";
background: transparent;
2013-09-13 22:57:57 +00:00
color: darken(@foreground, 30%);
2013-09-10 16:19:14 +00:00
z-index: 999;
font-size: 16px;
2013-09-10 16:19:14 +00:00
@paletteBackground: lighten(@background, 10%);
@paletteShadow: 0px 4px 16px rgba(0, 0, 0, .5);
2014-05-14 05:46:49 +00:00
transition-property: opacity, -webkit-transform;
transition-duration: .1s, .2s;
transition-timing-function: linear, ease-in-out;
-webkit-transform: perspective(1000px) translateY(0px) rotateX(0deg) translateZ(0);
opacity: 1;
&.enter {
opacity: .2;
transition-duration: 0s, 0s;
-webkit-transform: perspective(1000px) translateY(10px) rotateX(-45deg) translateZ(-20px);
}
2013-09-10 16:19:14 +00:00
&.active {
display: block;
}
.main {
background: @paletteBackground;
padding: 8px 12px;
border-radius: 8px 8px 0 0;
box-shadow: @paletteShadow;
}
2013-09-10 16:19:14 +00:00
h1 {
font-size: 12px;
padding: 0;
margin-top: 0px;
2013-09-10 16:19:14 +00:00
}
input {
width: 100%;
display: block;
2013-09-10 16:19:14 +00:00
border: 2px solid #555;
border-radius: 4px;
padding: 8px;
margin-top: 8px;
2013-09-10 16:19:14 +00:00
background: transparent;
color: @foreground;
2013-09-10 16:19:14 +00:00
font-weight: bold;
font-size: 18px;
&:focus {
outline: 1px solid @background;
}
2013-09-10 16:19:14 +00:00
}
.results {
background: fade(@paletteBackground, 80%);
2013-09-10 16:19:14 +00:00
padding: 0;
margin: 0;
list-style-type: none;
border-radius: 0 0 8px 8px;
box-shadow: @paletteShadow;
2013-09-10 16:19:14 +00:00
li {
border-top: 1px solid @faded;
2013-09-10 16:19:14 +00:00
display: block;
padding: 8px;
&.current {
background: @faded;
font-weight: bold;
}
.label {
font-size: 14px;
}
.sublabel {
font-size: 11px;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
max-height: 1.5em;
}
2013-09-10 16:19:14 +00:00
}
}
}