App/styles/view-overview.css
/* view transition styling */
/* view specific styling */
#overview .screentitle .bootstrap-switch-square {
margin-top : 2px;
}
#overview .clickabletag {
margin-right : 5px;
background-color : #27AE60;
color : #2C3E50;
cursor : pointer;
-webkit-transition : 0.2s ease-out all;
-moz-transition : 0.2s ease-out all;
transition : 0.2s ease-out all;
}
#overview .clickabletag:hover {
background-color : #69CC83;
color : #34495E;
}
#overview .highlightedtag {
background-color : #F39C12;
color : #2C3E50;
}
#overview .highlightedtag:hover {
background-color : #F1C40F;
color : #34495E;
}
#overview .tagsinput {
background : transparent;
border : none;
padding : 0;
}
#overview .tagsinput .tag {
margin-bottom : 0;
vertical-align : middle;
}
#overview .tagsinput input {
vertical-align : middle;
margin : 0;
}
#overview .tagsinput-add {
background-color : transparent;
margin-bottom : 0;
vertical-align : middle;
}
#overview .tagContainer {
height : 20px;
max-width: calc(100% - 350px);
overflow: hidden;
}
/*#selection .bar-container form-group input,
#selection .bar-container form-group button,*/
#selection .hider {
-webkit-transition : opacity ease-out 0.3s;
-o-transition : opacity ease-out 0.3s;
transition : opacity ease-out 0.3s;
transition-delay : 0.0s;
opacity : 1;
}
#selection .hider.ng-hide {
opacity : 0;
}
#selection .hider.ng-hide {
opacity : 0;
}
#selection .hider.ng-hide-remove-active {
opacity : 1;
}
/* list specific */
.list-group-item {
-webkit-transition : 0.2s ease-out all;
-moz-transition : 0.2s ease-out all;
-o-transition : 0.2s ease-out all;
transition : 0.2s ease-out all;
}
.list-group-item.ng-move,
.list-group-item.ng-enter {
opacity : 0;
}
.list-group-item.ng-enter-stagger,
.list-group-item.ng-leave-stagger,
.list-group-item.ng-move-stagger {
/* 50ms between each item being animated after the other */
-webkit-transition-delay : 50ms;
-moz-transition-delay : 50ms;
transition-delay : 50ms;
/* this is required here to prevent any CSS inheritance issues */
-webkit-transition-duration : 0;
-o-transition-duration : 0;
transition-duration : 0;
}
.list-group-item.ng-move.ng-move-active,
.list-group-item.ng-enter.ng-enter-active {
opacity : 1;
}
.list-group-item.ng-leave.ng-leave-active {
// -webkit-transition-duration : 0;
// -o-transition-duration : 0;
// transition-duration : 0;
-webkit-transform : scale(0, 0);
-o-transform : scale(0, 0);
transform : scale(0, 0);
height : 1px;
}
.list-group-item.ng-leave {
-webkit-transition-duration : 0.4s;
-o-transition-duration : 0.4s;
transition-duration : 0.4s;
-webkit-transform : scale(1, 1);
-moz-transform : scale(1, 1);
transform : scale(1, 1);
height : 73px;
}
#list {
padding : 0;
display : table-row; /* height is dynamic, and will expand... */
height : 100%; /* ...as content is added (won't scroll) */
}
#list .listBackgroundMessage {
position : absolute;
width : 100%;
height : 100px;
line-height : 2;
z-index : 3;
color : #2C3E50;
border : none;
border-radius : 0;
text-align : center;
vertical-align : middle;
margin-top : 20%;
}
#list > .list-wrapper {
overflow-x : hidden;
overflow-y : scroll;
z-index : 5;
position : relative;
height : 100%;
}
#list > .fullheight {
height : 100%;
}
#list > .list-wrapper > ul {
background-color : #34495E;
line-height : 1;
margin : 0;
width : 100%;
height : 100%;
border : none;
border-radius : 0;
z-index : 9;
}
#list > .list-wrapper > ul > li {
line-height : 1;
z-index : 15;
background-color : #34495E;
border : none;
border-radius : 0;
border-bottom : 1px solid #2C3E50;
}
#list > .list-wrapper > ul > .selected {
background-color : #212F3C;
}
#list > .list-wrapper > ul > li .link-item-toolbar .btn-toolbar {
float : right;
}
#list > .list-wrapper > ul > li .list-group-item-heading {
color : white;
}
#list > .list-wrapper > ul > li .list-group-item-text {
color : white;
}
/* highlight for amount of bookmarks */
.highlight {
color : #1ABC9C;
font-weight : bold;
}
/* full text search highlight */
.highlight-search {
color : #2C3E50;
font-weight : bold;
background-color : #F1C40F;
border-radius : 3px;
padding : 4px;
padding-top : 2px;
padding-bottom : 2px;
}