You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
3.8 KiB

  1. /*******************************
  2. UI Cover View
  3. *******************************/
  4. /*--------------
  5. UI Cover View
  6. ---------------*/
  7. /* Normal */
  8. ul.ui.cover-view li,
  9. div.ui.cover-view {
  10. position: relative;
  11. width: 220px;
  12. height: 290px;
  13. background-color: #111111;
  14. background: transparent -webkit-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat;
  15. background: transparent -moz-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat;
  16. background: transparent -o-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat;
  17. background: transparent -ms-linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat;
  18. background: transparent linear-gradient(top, rgba(110, 110, 110, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%) repeat;
  19. -webkit-border-radius: 9px;
  20. -moz-border-radius: 9px;
  21. border-radius: 9px;
  22. -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset;
  23. -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset;
  24. box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset;
  25. }
  26. ul.ui.cover-view li .content,
  27. .ui.cover-view .content {
  28. position: relative;
  29. overflow: hidden;
  30. width: 100%;
  31. height: 100%;
  32. }
  33. ul.ui.cover-view li .cover,
  34. .ui.cover-view .cover {
  35. width: 100%;
  36. height: 100%;
  37. background-position: center center;
  38. -webkit-background-size: cover;
  39. -moz-background-size: cover;
  40. background-size: cover;
  41. -webkit-box-sizing: border-box;
  42. -moz-box-sizing: border-box;
  43. -ms-box-sizing: border-box;
  44. box-sizing: border-box;
  45. -webkit-border-radius: 9px;
  46. -moz-border-radius: 9px;
  47. border-radius: 9px;
  48. opacity: 1;
  49. }
  50. ul.ui.cover-view li .text,
  51. .ui.cover-view .text {
  52. position: absolute;
  53. bottom: 0px;
  54. left: 0px;
  55. width: 100%;
  56. padding: 15px 15px;
  57. line-height: 1.44;
  58. background-color: #111111;
  59. background: transparent -webkit-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat;
  60. background: transparent -moz-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat;
  61. background: transparent -o-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat;
  62. background: transparent -ms-linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat;
  63. background: transparent linear-gradient(top, rgba(40, 40, 40, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%) repeat;
  64. -webkit-border-radius: 0px 0px 9px 9px;
  65. -moz-border-radius: 0px 0px 9px 9px;
  66. border-radius: 0px 0px 9px 9px;
  67. -moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px -1px 4px rgba(0, 0, 0, 0.4);
  68. -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px -1px 4px rgba(0, 0, 0, 0.4);
  69. box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px -1px 4px rgba(0, 0, 0, 0.4);
  70. -webkit-box-sizing: border-box;
  71. -moz-box-sizing: border-box;
  72. -ms-box-sizing: border-box;
  73. box-sizing: border-box;
  74. opacity: 1;
  75. }
  76. ul.ui.cover-view li .text h2,
  77. .ui.cover-view .text h2 {
  78. font-size: 18px;
  79. font-weight: bold;
  80. color: #009FDA;
  81. margin: 0px 0px 5px;
  82. text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9);
  83. }
  84. ul.ui.cover-view li .text h3,
  85. .ui.cover-view .text h3 {
  86. color: #FFFFFF;
  87. text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9);
  88. }
  89. /* Loading State */
  90. ul.ui.cover-view li > .throbber,
  91. div.ui.cover-view > .throbber {
  92. display: none;
  93. }
  94. ul.ui.cover-view li.loading > .throbber,
  95. div.ui.cover-view.loading > .throbber {
  96. display: block;
  97. opacity: 0.3;
  98. }
  99. ul.ui.cover-view li.loading .text,
  100. div.ui.cover-view.loading .text,
  101. ul.ui.cover-view li.loading .cover,
  102. div.ui.cover-view.loading .cover {
  103. opacity: 0;
  104. }
  105. /* Cover Flow Floated List */
  106. ul.ui.cover-view li {
  107. float: left;
  108. margin: 0px 5px 10px;
  109. }