Refactor styles.

This commit is contained in:
Lars Jung 2015-04-25 21:44:34 +02:00
parent ba315be9e5
commit ebcf431363
24 changed files with 131 additions and 171 deletions

View file

@ -1,4 +1,3 @@
#content {
overflow: auto;
flex: 1 1 auto;

View file

@ -1,5 +1,4 @@
.cm-overlay {
#cm-overlay {
display: none;
position: fixed;
left: 0;
@ -10,10 +9,8 @@
z-index: 200;
// background: rgba(0,0,0,0.1);
// background: rgba(255,255,255,0.6);
}
.cm-panel {
.cm-panel {
.popup();
.rounded();
display: block;
@ -74,4 +71,5 @@
border-top: 1px solid rgba(0,0,0,0.08);
}
}
}
}

View file

@ -23,7 +23,7 @@
}
.crumb {
display: inline-block;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
}
.sep {
width: 24px;

View file

@ -1,4 +1,3 @@
#download {
display: none;

View file

@ -1,4 +1,3 @@
#fallback {
display: none;
max-width: 960px;
@ -59,7 +58,6 @@
}
}
#fallback-hints {
display: none;
overflow: hidden;
@ -72,7 +70,7 @@
line-height: 48px;
color: @col-text-secondary-black;
text-decoration: none;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
outline: 0;
&:hover {
@ -90,7 +88,6 @@
}
}
html.no-js, html.no-browser {
body {

View file

@ -1,4 +1,3 @@
#filter {
input {

View file

@ -77,17 +77,6 @@
::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
.transition (@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transform (@transform) {
-webkit-transform: @transform;
-ms-transform: @transform;
transform: @transform;
zoom: 1;
}
.card() {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
@ -109,7 +98,7 @@
.el-button() {
.card();
.rounded();
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
color: @col-text-primary-white;
background: @col-blue-400;
border-radius: 2px;

View file

@ -1,5 +1,4 @@
body#h5ai-info {
#h5ai-info {
#content {
flex: 1 1 auto;
@ -25,7 +24,7 @@ body#h5ai-info {
margin: 0.8em 0 0 0;
color: @col-text-primary-black;
text-decoration: none;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
&:hover {
color: @col-hover;

View file

@ -1,4 +1,3 @@
#info {
display: none;

View file

@ -1,4 +1,3 @@
#notify {
position: fixed;
left: 50%;

View file

@ -1,4 +1,3 @@
#pv-aud-audio {
position: absolute;

View file

@ -1,7 +1,8 @@
@check-white: #f8f8f8;
@check-black: #e8e8e8;
#pv-img-image {
@check-white: #f8f8f8;
@check-black: #e8e8e8;
position: absolute;
max-width: 100%;

View file

@ -1,4 +1,3 @@
#pv-txt-text {
max-width: 960px;
text-align: left;
@ -92,7 +91,6 @@
}
}
&.markdown {
font-size: 1.1em;
padding: 8px 24px;

View file

@ -1,4 +1,3 @@
#pv-vid-video {
position: absolute;

View file

@ -1,4 +1,3 @@
#pv-overlay {
display: none;
position: fixed;
@ -9,7 +8,7 @@
z-index: 100;
background-color: rgba(0,0,0,0.5);
.transition(background-color 0.3s ease-in-out);
transition: background-color 0.3s ease-in-out;
text-align: center;
}
@ -53,7 +52,7 @@
margin: -36px 0;
padding: 12px;
opacity: 0.5;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
}
&:hover {
@ -101,7 +100,7 @@
line-height: 48px;
padding: 0 12px;
opacity: 0.7;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
}
.bar-button {
@ -109,7 +108,7 @@
line-height: 48px;
opacity: 0.7;
cursor: pointer;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
&:hover {
opacity: 1.0;
@ -146,7 +145,7 @@
}
@media only screen and (max-width: 700px) {
#pv-prev-area, #pv-next-area {
#pv-prev-area, #pv-next-area {
display: none !important;
}
}
}

View file

@ -1,4 +1,3 @@
@media only screen and (max-width: 700px) {
#crumbbar {
.crumb:not(.active) {

View file

@ -1,4 +1,3 @@
#sidebar {
display: none;
overflow: auto;
@ -25,7 +24,7 @@
border-radius: 2px;
color: @col;
cursor: pointer;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
&:hover {
background: rgba(0,0,0,0.03);

View file

@ -15,7 +15,6 @@
z-index: 1;
}
#toolbar {
overflow: hidden;
flex: 0 0 auto;
@ -25,7 +24,7 @@
.tool {
display: inline-block;
cursor: pointer;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
img {
display: inline-block;
@ -40,7 +39,6 @@
}
}
#flowbar {
overflow: hidden;
flex: 1 1 auto;
@ -49,7 +47,6 @@
font-size: 16px;
}
#backlink {
display: block;
overflow: hidden;
@ -59,7 +56,7 @@
padding: 6px 12px;
overflow: hidden;
height: 36px;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
&, &:active, &:visited {
color: @col-text-disabled-black;

View file

@ -1,4 +1,3 @@
#tree {
display: none;
@ -40,11 +39,12 @@
img {
width: 20px;
height: 20px;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
}
&.open {
img {
.transform(rotate(90deg));
transform: rotate(90deg);
zoom: 1;
}
}
&.unknown {

View file

@ -1,5 +1,6 @@
#view.view-details {
.view-details-sized(@size) {
.view-details-sized(@size) {
.item {
.label, .date, .size {
@ -20,10 +21,7 @@
.label {
margin: 0 246px 0 (@size + 32px);
}
}
#view.view-details {
}
margin: 16px;
@ -44,7 +42,7 @@
line-height: 46px;
opacity: 0.4;
outline: 0;
.transition(all 0.2s ease-in-out);
transition: all 0.2s ease-in-out;
&:hover {
opacity: 1;
@ -67,7 +65,8 @@
.descending .sort {
display: inline;
.transform(rotate(180deg));
transform: rotate(180deg);
zoom: 1;
}
}

View file

@ -1,5 +1,6 @@
#view.view-grid {
.view-grid-sized(@size) {
.view-grid-sized(@size) {
.label {
line-height: @size;
@ -14,10 +15,7 @@
height: @size;
}
}
}
#view.view-grid {
}
margin: 8px;

View file

@ -1,5 +1,6 @@
#view.view-icons {
.view-icons-sized(@size) {
.view-icons-sized(@size) {
.item {
width: @size * 4/3;
@ -18,10 +19,7 @@
width: @size * 4/3;
}
}
}
#view.view-icons {
}
margin: 8px;

View file

@ -1,5 +1,3 @@
html.drag-select, html.drag-select * {
cursor: move !important;
@ -11,7 +9,6 @@ html.drag-select, html.drag-select * {
user-select: none;
}
#selection-rect {
display: none;
position: absolute;
@ -22,7 +19,6 @@ html.drag-select, html.drag-select * {
background: rgba(0,0,0,0.1);
}
#view {
display: none;

View file

@ -3,7 +3,7 @@ modulejs.define('ext/contextmenu', ['_', '$', 'core/resource', 'core/settings'],
var settings = _.extend({
enabled: false
}, allsettings.contextmenu);
var templateOverlay = '<div class="cm-overlay"/>';
var templateOverlay = '<div id="cm-overlay"/>';
var templatePanel = '<div class="cm-panel"><ul/></div>';
var templateSep = '<li class="cm-sep"/>';
var templateEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"/></li>';