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

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