123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- #tabs {
- background: #e53935;
- margin: -20px;
- margin-bottom: 10px;
- position: fixed;
- width: 100%;
- box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
- overflow-x: auto;
- white-space: nowrap;
- }
- #tabs a {
- display: inline-block;
- color: #ffcdd2;
- padding: 15px 30px;
- text-decoration: none;
- text-transform: uppercase;
- }
- #tabs a.active {
- color: #fff;
- border-bottom: 3px solid #fff;
- }
- .album {
- width: 33.33%;
- /*float:left;*/
- display: inline-block;
- vertical-align: top;
- }
- .album div {
- margin: 5px;
- padding: 5px;
- background: #e0e0e0;
- }
- .album span {
- display: block;
- text-align: center;
- color: #424242;
- overflow: hidden;
- }
- .imageSelector .image {
- width: 25%;
- display: inline-block;
- vertical-align: top;
- text-align: center;
- }
- .imageSelector .image.selected > div {
- background: #e57373;
- }
- .imageSelector .image.selected > div:hover {
- background: #ef5350;
- }
- .imageSelector .image input[type=checkbox] {
- display: none;
- }
- .imageSelector .image > div {
- margin: 5px;
- padding: 5px;
- background: #e0e0e0;
- }
- .imageSelector .image > div:hover {
- background: #bdbdbd;
- }
- #album-viewer {
- height: 100%;
- display: flex;
- flex-direction: column;
- }
- #album-viewer #album-description {
- flex: 0 0 auto;
- }
- #album-viewer #album-description .expander {
- padding: 5px;
- background: #e0e0e0;
- }
- #album-viewer #album-description .expander:after {
- float: right;
- content: "+";
- }
- #album-viewer #album-description .expander.expanded:after {
- content: '-';
- }
- #album-viewer #album-description .text {
- background: #eeeeee;
- padding: 5px;
- }
- #album-viewer #album-description .text.ng-hide {
- line-height: 0;
- }
- #album-viewer #album-thumbnails {
- flex: 0 0 auto;
- overflow-x: auto;
- overflow-y: hidden;
- white-space: nowrap;
- text-align: center;
- }
- #album-viewer #album-thumbnails img {
- width: 100px;
- border: 3px solid transparent;
- }
- #album-viewer #album-thumbnails img.selected {
- border: 3px solid #e57373;
- }
- #album-viewer #album-images {
- flex: 1 1 auto;
- overflow: auto;
- position: relative;
- }
- #album-viewer #album-images .image {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- text-align: center;
- }
- #album-viewer #album-images .image img {
- max-height: 100%;
- }
|