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