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