src/themes/tizen/common/jquery.mobile.tizen.multimediaview.less

   1 @import "config.less";
   2
   3 @unit_base_multimediaview : @unit_base * 0.5;
   4
   5 .ui-multimediaview {
   6         background-color : @color_multimediaview_bg;
   7         overflow : hidden;
   8 }
   9
  10 .ui-multimediaview-wrap {
  11         width : 100%;
  12         padding : 0;
  13         position : relative;
  14         overflow: hidden;
  15 }
  16
  17 .ui-multimediaview-siblings-off {
  18         display : none !important;
  19 }
  20
  21 .ui-multimediaview-control span {
  22         display : inline-block;
  23 }
  24
  25 .ui-multimediaview-video {
  26         position : absolute;
  27 }
  28
  29 .ui-multimediaview-control {
  30         display : block;
  31         z-index : @z_base_header_footer + 2;
  32         padding : 0;
  33         margin : 0;
  34         outline : 0;
  35         border : 0;
  36         height : 84 * @unit_base_multimediaview;
  37         text-align: left;
  38         overflow: hidden;
  39 }
  40
  41 .ui-multimediaview-control span.ui-button {
  42         background-position : center center;
  43         background-size : 80%;
  44         background-repeat : no-repeat;
  45         width : 74 * @unit_base_multimediaview;
  46         height : 74 * @unit_base_multimediaview;
  47         margin : 4 * @unit_base_multimediaview;
  48 }
  49
  50 .ui-multimediaview-control .ui-playpausebutton {
  51         float : left;
  52 }
  53
  54 .ui-multimediaview-control .ui-timestamplabel {
  55         text-align : center;
  56         float : left;
  57 }
  58
  59 .ui-multimediaview-control .ui-timestamplabel p {
  60         margin-top : -9.8 * @unit_base_multimediaview;
  61         margin-left : 4 * @unit_base_multimediaview;
  62         padding : 0;
  63         text-align : center;
  64         font-size : 22 * @unit_base_multimediaview;
  65         line-height : 28 * @unit_base_multimediaview;
  66         text-align : left;
  67 }
  68
  69 .ui-multimediaview-control .ui-durationlabel {
  70         text-align : center;
  71         float : right;
  72 }
  73
  74 .ui-multimediaview-control .ui-durationlabel p {
  75         margin-top : -9.8 * @unit_base_multimediaview;
  76         margin-right : 4 * @unit_base_multimediaview;
  77         padding : 0;
  78         text-align : center;
  79         font-size : 22 * @unit_base_multimediaview;
  80         line-height : 28 * @unit_base_multimediaview;
  81         text-align : right;
  82 }
  83
  84 .ui-multimediaview-bar {
  85         margin-top : 9.8 * @unit_base_multimediaview;
  86         float : left;
  87 }
  88
  89 .ui-multimediaview-bar-bg {
  90         height : 16 * @unit_base_multimediaview;
  91         border-radius : 1.5em;
  92 }
  93
  94 .ui-multimediaview-bar-highlight {
  95         height : 16 * @unit_base_multimediaview;
  96         position : absolute;
  97         border-radius : 1.5em;
  98 }
  99
 100 .ui-multimediaview-control .ui-seekbar {
 101         margin-left : 4 * @unit_base_multimediaview;
 102 }
 103
 104 .ui-multimediaview-control .ui-seekbar .ui-duration {
 105         width : 100%;
 106 }
 107
 108 .ui-multimediaview-control .ui-volumecontrol {
 109         width : 220 * @unit_base_multimediaview;
 110         height : 100%;
 111         float : left;
 112 }
 113
 114 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar {
 115         margin-left : 30 * @unit_base_multimediaview;
 116 }
 117
 118 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-guide {
 119         width : 170 * @unit_base_multimediaview;
 120 }
 121
 122 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-handle {
 123         margin : 0;
 124         padding : 0;
 125         width : 30 * @unit_base_multimediaview;
 126         height : 30 * @unit_base_multimediaview;
 127         border-style: solid;
 128         border-width: 1px;
 129         border-radius : 1.5em;
 130 }
 131
 132 .ui-fullscreen-parents {
 133         padding: 0 !important;
 134         margin: 0 !important;
 135         width: 100% !important;
 136         height: 100% !important;
 137         overflow: hidden;
 138 }
 139
 140 /* S
 141 -----------------------------------------------------------------------------------------------------------*/
 142
 143 .ui-multimediaview-s {
 144         .ui-multimediaview-video {
 145                 background-color : @color_multimediaview_control_bg;
 146         }
 147
 148         .ui-timestamplabel {
 149                 color : @color_multimediaview_timestamp_text;
 150         }
 151
 152         .ui-durationlabel {
 153                 color : @color_multimediaview_duration_text;
 154         }
 155
 156         span.ui-button {
 157                 background-color : @color_multimediaview_button_bg;
 158         }
 159
 160         span.ui-play-icon {
 161                 background-image : url(./images/00_button_play.png);
 162         }
 163
 164         span.ui-pause-icon {
 165                 background-image : url(./images/00_button_pause.png);
 166         }
 167
 168         span.ui-volume-icon {
 169                 background-image : url(./images/controls/00_slider_button_volume_02.png);
 170         }
 171
 172         span.ui-mute-icon {
 173                 background-image : url(./images/controls/00_slider_button_volume_01.png);
 174         }
 175
 176         span.ui-fullscreen-on {
 177                 background-image : url(./images/00_button_fullscreen_on.png);
 178         }
 179
 180         span.ui-fullscreen-off {
 181                 background-image : url(./images/00_button_fullscreen_off.png);
 182         }
 183
 184         .ui-seekbar {
 185                 .ui-duration {
 186                         background-color : @color_multimediaview_bar_gray;
 187                 }
 188
 189                 .ui-currenttime {
 190                         .LESSmultimediaview_bar_active_style();
 191                 }
 192         }
 193
 194         .ui-volumebar {
 195                 .ui-guide {
 196                         background-color : @color_multimediaview_bar_gray;
 197                 }
 198
 199                 .ui-value {
 200                         .LESSmultimediaview_bar_active_style();
 201                 }
 202
 203                 .ui-handle {
 204                         .LESSmultimediaview_bar_handle_style();
 205                         border-color : @color_multimediaview_button_border;
 206                 }
 207         }
 208 }
 209