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

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