<script src="configure.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
- data-framework-theme="tizen-white"
+ data-framework-theme="tizen-black"
data-framework-viewport-width="device-width">
</script>
$( document ).on( "pageinit", function () {
$.mobile.tizen.enableSelection( $("div:jqmData(role='page')"), 'none' );
});
+
+
+$( document ).on( "pageshow", function () {
+ var $elFooter = $( ".ui-page-active .ui-footer" ),
+ $elBackKey = $elFooter.children( ".ui-btn-back" ),
+ $elMoreKey = $elFooter.children(":jqmData(icon='naviframe-more')"),
+ cntMore = 0;
+
+ if ( !($.tizen && $.tizen.frameworkData.deviceCapa && $.tizen.frameworkData.deviceCapa.inputKeyBack) ) {
+ return true;
+ }
+
+ if ( $elMoreKey.length ) {
+ cntMore = $elMoreKey.length + 1;
+ }
+
+ if ( $elFooter.children().length - $elBackKey.length - cntMore === 0 ) {
+ $elFooter.hide();
+ $( ".ui-page-active" ).page("refresh");
+ }
+});
$("#pinch_demo").on( "pinchend", function ( e, p ) {
last_ratio = get_ratio( p.ratio );
});
+
+ $( window ).bind( "galleryorientationchanged", function ( e ) {
+ last_ratio = 1;
+ });
});
try {
if ( $.tizen.__tizen__.util.isMobileBrowser() ) {
- tizen.systeminfo.addPropertyValueChangeListener( "DEVICE_ORIENTATION", onSuccessCallback, onErrorCallback );
+ /**
+ * Temporary rotation is blocked as TIZEN API is missing a flag,
+ * which can help to check if the orientation is locked or unlocked
+ *
+ * JIRA https://tizendev.org/bugs/browse/N_SE-39394
+ */
+ //tizen.systeminfo.addPropertyValueChangeListener( "DEVICE_ORIENTATION", onSuccessCallback, onErrorCallback );
}
} catch ( exc ) {
alert( exc.message );
position : fixed;
width : 4.4rem;
height : 6.1rem;
+ margin-top: 0.3rem;
margin-right: 0.3rem;
margin-left: 0.3rem;
- margin-bottom: 0.5rem;
+ margin-bottom: 0.3rem;
}
.ui-demo-namecard-pic {
width : 5.1rem;
height : 6.1rem;
display: block;
+ margin-top: 0.1rem;
margin-right: 0.3rem;
margin-left: 0.3rem;
- margin-bottom: 0.6rem;
+ margin-bottom: 0.1rem;
}
.ui-demo-namecard-contents-x {
height : 70px;
display:block;
border-bottom-color: #444;
+ padding-top : 0.3rem;
}
.ui-demo-namecard-list-pic {
<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>HEADER AND FOOTER</h1>
+ <h1>Header and footer</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>NAVIFRAME</h1>
+ <h1>Naviframe</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>FOOTER MORE</h1>
+ <h1>Footer more</h1>
</div>
<div data-role="content">
<p>Footer more sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>FOOTER MORE</h1>
+ <h1>Footer more</h1>
</div>
<div data-role="content">
<p>Footer more sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE TEXT</h1>
+ <h1>Title text</h1>
+ <div data-role="button">Cancel</div>
+ <div data-role="button">Cancel</div>
</div>
<div data-role="content">
<p>title text sample</p>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE 1 BUTTON</h1>
- <div data-role="button" data-icon="home" class="naviframe-button"></div>
+ <h1>Title 1 button</h1>
+ <div data-role="button" data-icon="naviframe-selectall" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Title text Button 01 sample</p>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE 2 BUTTONS </h1>
+ <h1>Title 2 buttons</h1>
<div data-role="button" data-icon="naviframe-cancel" class="naviframe-button"></div>
- <div data-role="button" data-icon="naviframe-edit" class="naviframe-button"></div>
+ <div data-role="button" data-icon="naviframe-done" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Title text Button 02 sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE TEXT MULTILINE</h1>
+ <h1>Title text multiline</h1>
<span class="ui-title-text-sub">tizen@samsung.com</span>
</div>
<div data-role="content">
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE DEMO</h1>
- <span class="ui-title-text-sub">TITLE IMAGE MULTILINE</span>
+ <h1>Title demo</h1>
+ <span class="ui-title-text-sub">Title image multiline</span>
</div>
<div data-role="content">
<p>Image Title text Multiline sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE DEMO</h1>
- <span class="ui-title-text-sub">TITLE IMAGE MULTILINE 2 BUTTONS</span>
+ <h1>Title demo</h1>
+ <span class="ui-title-text-sub">Title image multiline 2 buttons</span>
+ <div data-role="button" data-icon="naviframe-delete" class="naviframe-button"></div>
<div data-role="button" data-icon="naviframe-edit" class="naviframe-button"></div>
- <div data-role="button" data-icon="naviframe-more" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Image Title text Multiline Button 02 sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE IMAGE</h1>
+ <h1>Title image</h1>
</div>
<div data-role="content">
<p>Image Title text sample</p>
<div data-role="content">
<div class="content-primary">
- <fieldset data-role="controlgroup">
+ <fieldset data-role="controlgroup" class="choosepet">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
$( document ).one( "pagecreate", "#radio-demo", function () {
- $("input[type='radio']").on( "change", function (event, ui) {
+ $(".choosepet input[type='radio']").on( "change", function (event, ui) {
if ( this.checked ) {
$( ".triggered-radio" ).text( this.id + " is selected..." );
}
<div data-role="footer">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-edit" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-plus" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="tabedit" >Save</a></li>
- <li><a href="#" data-icon="tabedit" >Share</a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active">Delete</a></li>
+ <li><a href="#" data-icon="naviframe-edit" >Edit</a></li>
+ <li><a href="#" data-icon="naviframe-search" >Search</a></li>
</ul>
</div>
<h1>TABBAR ICON WITH TITLE</h1>
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-edit" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>
--- /dev/null
+From 33ba869404135065a233af08bc1eaca05f435268 Mon Sep 17 00:00:00 2001
+From: Przemyslaw Ciezkowski <p.ciezkowski@samsung.com>
+Date: Wed, 12 Jun 2013 11:15:52 +0200
+Subject: [PATCH] Collapsible: remove ui-btn-active class when expand/collapse
+ is cancelled
+
+Change-Id: Icb8772fa56461ef43e735b72545f0e27a335ff34
+---
+ .../jquery-mobile-1.2.0/js/widgets/collapsible.js | 5 ++++-
+ 1 files changed, 4 insertions(+), 1 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+index 8398de4..eee244e 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+@@ -153,9 +153,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
+ .trigger( o.collapsed ? "collapse" : "expand" );
+
+ collapsibleHeading
+- .bind( "tap", function( event ) {
++ .bind( "tap", function() {
+ collapsibleHeading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
+ })
++ .bind( "vmousecancel", function() {
++ collapsibleHeading.find( "a" ).first().removeClass( $.mobile.activeBtnClass );
++ })
+ .bind( "click", function( event ) {
+
+ var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ? "expand" : "collapse";
+--
+1.7.5.4
+
Name: web-ui-fw
-Version: 0.2.35
+Version: 0.2.37
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Sun Jun 16 2013 Hyunjung Kim <hjnim.kim@samsung.com> 0.2.37
+ - ThemeBugFix : add splitview resource, change datetimepicker top position
+ - List : modify dialogue(and collapsible)list background
+ - Popup : modify center-checkbox background css style
+ - searchbar: Apply dark theme
+ - BubbleList : add theme
+ - Fastscroll: Applied new ux (ver 0.5) color code
+ - Notification : change theme
+ - Editfield : Apply dark theme
+ - radio btn: Apply dark theme
+ - tokentextarea: Apply dark theme
+ - progressbar: Apply dark theme
+ - multimediaview: Apply dark theme
+ - handler: Apply dark theme
+ - button: Apply dark theme for on/off button
+ - list divider: Apply dark theme
+ - ctxpopup: Apply dark theme
+ - slider: Apply dark theme
+ - virtualgrid: Apply dark theme
+ - scrollview: Apply dark theme
+ - Naviframe/Tabbar : add divider to navifame, Tabbar gets press color
+ - Naviframe : add divider to btn
+ - Popup: modify radius of popup title and button background
+ - TizenWinset : add footer check routine(hide in case footer does not have another button)
+ - Popup: change css styles for dark theme (UX guide)
+ - BlackTheme : LandscapeSupport(Naviframe, Tabbar)
+ - Button: distinguish button and other widgets
+ - List: add variables in style.less for both Dark and White theme
+ - Loader : default theme changed(white GUI is not released yet)
+ - Button: supports button inner shadow in white theme
+ - Pagelayout: other popups will be closed when clicked the more button
+ - Button: Change css style for dark theme
+ - Darktheme : naviframe, tabbar theme change
+ - List: Change css style for Dark Theme (UX guide)
+ - Button : change image resource
+ - DarkTheme: 2nd draft
+ - DarkTheme : 1st draft
+
+* Fri Jun 14 2013 Hyunjung Kim <hjnim.kim@samsung.com> 0.2.36
+ - slider: turn off listener on mouse event when popup is hiden (N_SE-41320)
+ - datetimepicker, ctxpopup: FIX errors with position of ctxpopup in datetimepicker
+ - textarea: change white-space css property (N_SE-40269) (N_SE-40347)
+ - JIRA - FIX N_SE-34055 Resolving problem with the pinch event trigered on the image after orientation change
+ - Gallery: Unbind widget's events properly
+ - slider: fix problem with values sterted from 0 (N_SE-34929)
+ - Collapsible: remove ui-btn-active class when collapse or expand event is cancelled
+ - tabbar: add ellipsis in tabbar items (N_SE-38572)
+ - theme: fix error with display multiline header (N_SE-33971)
+ - JIRA fix - Temporary rotaton is blocked as TIZEN API is missing a flag, which can help to check if the orientation is locked or unlocked
+ - RadioDemo : change to select only controlgroup area(N_SE-38023)
+ - PageLayout : set headerArea in pagebefore(N_SE-36612)
+ - changelog: Fix date format
+ - tabbar: adjust margin-top of title icon img
+
* Sat Jun 08 2013 Youmin Ha <youmin.ha@samsung.com> 0.2.35
- contextpopup: Change option menu class name
- pagelayout: more popup style is applied even deviceAPI is not supported
if ( ! theme ) {
theme = tizen.frameworkData.theme;
}
+ theme = "tizen-black"; /* temporary change to blackTheme(white GUI is not released yet) */
themePath = tizen.frameworkData.rootDir + '/' + tizen.frameworkData.version + '/themes/' + theme;
}
$(window).bind( "resize" , obj._reflow );
}
- // cause ctxpopup forced to subtract 10
- if ( $( window ).width() / 2 < target.offset().left ) {
- newLeft = -10;
- }
$ctx.popupwindow( 'open',
- target.offset().left + ( target.width() / 2 ) + newLeft - window.pageXOffset ,
- target.offset().top + target.height() - window.pageYOffset );
+ target.offset().left + ( target.width() / 2 ) - window.pageXOffset ,
+ target.offset().top + target.height() - window.pageYOffset, target.width(), target.height() );
this.container = $ctx;
this._popup_open = true;
var self = this;
if( self.orientationEventFire ) {
self.refresh();
+ $( event.target ).trigger( "galleryorientationchanged", this );
self.orientationEventFire = false;
}
},
this.refresh( index );
},
+ unbind: function() {
+ $.each( this._globalHandlers, function( idx, value ) {
+ value.src.unbind( value.handler );
+ });
+ },
+
destory: function() {
- $( window ).unbind( 'resize', this._resizeHandler );
- $( window ).unbind( 'orientationchange' , this._orientationHandler );
+ this.unbind();
}
}); /* End of widget */
$( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'hide' );
} );
+ $( document ).bind( "pageremove", function ( e ) {
+ //unbind resize and orientationchange events
+ $( e.target ).find( ":jqmData(role='gallery')" ).gallery( 'unbind' );
+ });
+
}( jQuery, this ) );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
control = self._createControl();
control.hide();
- control.find( ".ui-button" ).each( function ( index ) {
- $( this ).buttonMarkup( { corners: true, theme: theme, shadow: true } );
- });
+ $( ".ui-button", control ).addClass( "ui-shadow ui-btn-corner-all" );
+ $( ".ui-volumecontrol .ui-handle", control ).addClass( "ui-shadow ui-btn-corner-circle" );
view.wrap( wrap ).after( control );
self._resize();
});
+ $( ".ui-button", control ).bind( "vmousedown", function () {
+ $( this ).addClass( "ui-button-down" );
+ }).bind( "vmouseup vmouseout", function () {
+ $( this ).removeClass( "ui-button-down" );
+ });
+
playpauseButton.bind( "click.multimediaview", function () {
self._endTimer();
currentVolume = ( baseX - volumeGuideLeft ) / volumeGuideWidth;
self._endTimer();
+ volumeHandle.addClass( "ui-button-down" );
self._setVolume( currentVolume.toFixed( 2 ) );
e.preventDefault();
e.preventDefault();
}).bind( "vmouseup.multimediaview", function () {
$document.unbind( "vmousemove.multimediaview vmouseup.multimediaview" );
+ volumeHandle.removeClass( "ui-button-down" );
});
});
},
}
self.setHeaderFooter( thisPage );
self._setContentMinHeight( thisPage );
+ self._updateHeaderArea( thisPage );
} )
.bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
var thisPage = this;
$( ".ui-page-active .ui-footer .ui-btn-back" ).trigger( "click" );
return false;
} else if ( e.originalEvent.keyName === "menu" ) {
+ // if more button was clicked, all kinds of popups will be closed
+ if ( openedpopup ) {
+ openedpopup.close();
+ return false;
+ }
+
// need to change more key trigger
if ( $elMoreKey.get(0) ) {
$elMoreKey.trigger( "click" );
var $elPage = $( thisPage ),
$elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
headerBtnNum = $elHeader.children("a").length,
- headerSrcNum = $elHeader.children("img").length;
+ headerSrcNum = $elHeader.children("img").length,
+ h1width;
if ( !$elPage.is( ".ui-dialog" ) ) {
- $elHeader.find( "h1" ).css( "width", window.innerWidth - parseInt( $elHeader.find( "h1" ).css( "margin-left" ), 10 ) * 2 - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4 );
+ h1width = window.innerWidth - parseInt( $elHeader.find( "h1" ).css( "margin-left" ), 10 ) * 2 - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4;
+ $elHeader.find( "h1" ).css( "width", h1width );
+ $elHeader.find( '.ui-title-text-sub' ).css( "width", h1width );
}
/* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
},
payloadBeg = self.element.offset()[coord.beg],
payloadSize = self.element[coord.outerSize]( true ),
triangleSize = ctxpopup._ui.arrow[arrow][coord.triangleSize](),
- triangleOffset =
- Math.max(
- triangleSize // triangle size
- + Math.max( 0, payloadBeg - arrowBeg ), // lowerDiff
- Math.min(
- arrowSize // bottom
- - triangleSize // triangle size
- - Math.max( 0, arrowBeg + arrowSize - ( payloadBeg + payloadSize ) ), // upperDiff
- arrowSize / 2 // arrow unrestricted offset
- + desired[coord.point]
- - orig[coord.point]
- - halfSize[coord.size]
- )
- ),
+ triangleOffset,
+ finalposition,
+ ret;
+ if (isHorizontal) {
+ orig.x = 0;
+ } else {
+ orig.y = 0;
+ }
+ if (arrow == 'b' && self._target_height) {
+ orig.y -= self._target_height;
+ }
+ if (arrow == 'r' && self._target_width) {
+ orig.x -= self._target_width;
+ }
+ triangleOffset =
+ Math.max(
+ triangleSize // triangle size
+ + Math.max( 0, payloadBeg - arrowBeg ), // lowerDiff
+ Math.min(
+ arrowSize // bottom
+ - triangleSize // triangle size
+ - Math.max( 0, arrowBeg + arrowSize - ( payloadBeg + payloadSize ) ), // upperDiff
+ arrowSize / 2 // arrow unrestricted offset
+ + desired[coord.point]
+ - orig[coord.point]
+ - halfSize[coord.size]
+ )
+ );
// Triangle points here
- finalposition = {
- "x": orig.x + ( isHorizontal ? triangleOffset : 0) + ("r" === arrow ? size.cx : 0),
- "y": orig.y + (!isHorizontal ? triangleOffset : 0) + ("b" === arrow ? size.cy : 0)
- },
- ret = {
- actual : orig,
- triangleOffset : triangleOffset,
- absDiff : Math.abs( x - finalposition.x ) + Math.abs( y - finalposition.y )
- };
+ finalposition = {
+ "x": orig.x + ( isHorizontal ? triangleOffset : 0) + ("r" === arrow ? size.cx : 0),
+ "y": orig.y + (!isHorizontal ? triangleOffset : 0) + ("b" === arrow ? size.cy : 0)
+ };
+ ret = {
+ actual : orig,
+ triangleOffset : triangleOffset,
+ absDiff : Math.abs( x - finalposition.x ) + Math.abs( y - finalposition.y )
+ };
// Hide it back
ctxpopup._ui.arrow[arrow].hide();
return orig_placementCoords.call( this, x, y, cx, cy );
};
- $.tizen.popupwindow.prototype.open = function ( x, y ) {
+ $.tizen.popupwindow.prototype.open = function ( x, y, target_width, target_height ) {
var ctxpopup = this.element.data( "ctxpopup" );
+ this._target_width = target_width;
+ this._target_height = target_height;
+
if ( ctxpopup ) {
this._setFade( false );
this._setShadow( false );
var self = this,
inputElement = $( this.element ),
slider,
- handle_press,
popupEnabledAttr,
icon,
text_right,
elem_left,
elem_right,
margin_left,
- margin_right;
+ margin_right,
+ _closePopup;
// apply jqm slider
inputElement.slider();
});
}
- // handle press
- slider.append($('<div class="ui-slider-handle-press"></div>'));
- self.handle_press = slider.find('.ui-slider-handle-press');
- self.handle_press.css('display', 'none');
-
// add a popup element (hidden initially)
slider.parents(".ui-page").append( self.popup );
self.popup.hide();
// set initial value
self.updateSlider();
+ _closePopup = function () {
+ slider.trigger( 'vmouseup' );
+ };
+
// bind to changes in the slider's value to update handle text
this.element.on('change', function () {
// 2013.05.31 heeju.joo
// conditional statement has been added ( DCM-1735 )
// if this function just call two functions like else statement,
// popup and handle displayed in the wrong position because when the variable popupVisible is false, updateSlider() does not call popupPosition().
- if( !self.popupVisible ) {
+ if ( !self.popupVisible ) {
// it is trick to cheat self.updateSlider()
self.popupVisible = true;
// updateSlider make the position of handle right
self.updateSlider();
// for other method, popupVisible variable need to have original value.
self.popupVisible = false;
- }
- else {
+ } else {
self.updateSlider();
self.showPopup();
+ $.mobile.$document.on( 'vmouseup.slider', _closePopup );
}
});
- this.element.on( 'slidestart', function( event ) {
+ this.element.on( 'slidestart', function ( event ) {
self.updateSlider();
self.showPopup();
+ $.mobile.$document.on( 'vmouseup.slider', _closePopup );
});
// bind clicks on the handle to show the popup
self.handle.on('vmousedown', function () {
+ self.handle.addClass( "ui-slider-handle-press" );
self.showPopup();
+ $.mobile.$document.on( 'vmouseup.slider', _closePopup );
});
- slider.on('vmousedown', function() {
+ slider.on( 'vmousedown', function () {
self.updateSlider();
+ self.handle.addClass( "ui-slider-handle-press" );
self.showPopup();
- });
-
- // watch events on the document to turn off the slider popup
- slider.add( document ).on('vmouseup', function () {
+ $.mobile.$document.on( 'vmouseup.slider', _closePopup );
+ }).on( 'vmouseup', function () {
self.hidePopup();
+ self.handle.removeClass( "ui-slider-handle-press" );
+ $.mobile.$document.off('vmouseup.slider');
});
$.extend( this, {
{
src: $( window ),
handler: {
- orientationchange: $.proxy( this, "_orientationHandler" ),
+ orientationchange: _closePopup,
}
}
]
});
- $.each( this._globalHandler, function( idx, value ) {
+ $.each( this._globalHandler, function ( idx, value ) {
value.src.bind( value.handler );
});
},
- _orientationHandler: function() {
- var self = this;
- self.hidePopup();
- },
-
- _handle_press_show: function () {
- this.handle_press.css('display', '');
- },
-
- _handle_press_hide: function () {
- this.handle_press.css('display', 'none');
- },
-
// position the popup
positionPopup: function () {
var dstOffset = this.handle.offset();
left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2,
top: dstOffset.top - this.popup.height()
});
-
- this.handle_press.offset({
- left: dstOffset.left,
- top: dstOffset.top
- });
},
// show value on the handle and in popup
// the slider's value changes :(
this.handle.removeAttr('title');
- newValue = this.element.val();
+ newValue = parseInt(this.element.val(), 10);
font_length = get_value_length( newValue );
break;
case 3:
font_size = '0.65rem';
- font_top = '-0.05rem';
+ font_top = '-0.1rem';
break;
default:
font_size = '0.45rem';
if ( font_size != this.handleText.css('font-size') ) {
this.handleText.css({
'font-size': font_size,
- 'top': font_top
+ 'top': font_top,
+ 'position': 'relative'
});
}
this.popup.show();
this.popupVisible = true;
- this._handle_press_show();
},
// hide the popup
this.popup.hide();
this.popupVisible = false;
- this._handle_press_hide();
},
_setOption: function (key, value) {
@height_buttonEdit: 74 * @unit_base;
@width_buttonEdit: @height_buttonEdit;
-.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .2em 0px; padding: 0; */ vertical-align: middle; } /* wongi_1018 : For button align. */
+.ui-btn {
+ display: block;
+ text-align: center;
+ cursor:pointer;
+ position: relative;
+ vertical-align: middle;
+} /* wongi_1018 : For button align. */
+
+.ui-btn.ui-btn-box-s {
+ color: @color_text;
+ text-shadow: @color_button_test_shadow;
+ .LESSborder-radius-all( 0.2rem );
+}
+
.ui-btn:focus, .ui-btn:active { outline: none; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
.ui-btn-inline { display: inline-block; }
.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
-.ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
-.ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
+.ui-btn-icon-left .ui-icon { left: 5 * @unit_base; }
+.ui-btn-icon-circle .ui-icon {left: 0 * @unit_base; } /* wongi_1018 : for circle icon center positioning. */
.ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
.ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
.ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
.ui-li .ui-btn.ui-btn-icon_only
{
top: 50%;
- margin-top: (-32 * 1/2) * @unit_base;
+ margin-top: -16 * @unit_base;
}
.ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
{
background: transparent ! important;
}
-.ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner
+.ui-btn-box-s.ui-btn-up-s
{
- .LESSbutton_inner_pressstyle;
+ .LESSbutton_up_style();
+ box-shadow: @button_shadow_inner;
+}
+.ui-btn-box-s.ui-btn-hover-s
+{
+ .LESSbutton_up_style();
+ box-shadow: @button_shadow_inner;
+}
+.ui-btn-box-s.ui-btn-down-s
+{
+ background: @color_button_press;
+ box-shadow: @button_press_shadow_inner;
+}
+.ui-btn-corner-all
+{
+ .LESSborder-radius-all( 0.3rem );
}
-
.ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon),
.ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
.ui-header .ui-btn.ui-btn-box-s.ui-btn-down-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
/* wongi_1017 : Icons */
/* icons sizing */
-.ui-btn .ui-icon { width: 32 * @unit_base ; height: 32 * @unit_base; }
+.ui-btn .ui-icon { width: 22 * @unit_base ; height: 22 * @unit_base; }
.ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
/* Padding for Icon with text */
}
.ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
{
- margin-top: -32 * @unit_base / 2;
+ margin-top: -10 * @unit_base ;
top: 50%;
}
.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
{
- margin-left: -32 * @unit_base / 2;
+ margin-left: -10 * @unit_base ;
left: 50%;
}
.tizen-icon-common
{
/* Overlap original property */
- width: 32 * @unit_base; height: 32 * @unit_base;
- /* margin-top : 50 */
- /* top : -32 * @unit_base; */
+ width: 22 * @unit_base;
+ height: 22 * @unit_base;
}
.tizen-smallicon-common
{
.ui-btn-down-s .ui-icon-search {.tizen-icon-common; background-image: url(images/controls/button/00_button_search_press.png); }
.ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/controls/button/00_button_call_press.png); }
.ui-btn-down-s .ui-icon-rename {.tizen-icon-common; background-image: url(images/controls/button/00_button_rename_press.png); }
-.ui-btn-down-s .ui-icon-scrolltop {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump_press.png); }
-.ui-btn-down-s .ui-icon-scrollleft {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump_left_press.png); }
.ui-btn-inner.ui-btn-icon-only
{
overflow: hidden;
}
-.ui-btn.ui-btn-corner-all
-{
- .LESSborder-radius-allimportant(1.2em);
-}
-
/* No BG button : data-iconbg = "nobg" */
.ui-btn.ui-btn-icon-nobg
{
{
.LESSbutton_edit_style;
}
-
-.ui-btn-box-s
-{
- .LESSbutton_box_style;
-}
-
.ui-icon-checkbox-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
+ background-image: url(images/00_check_activated.png), url(images/00_check_bg.png);
background-repeat: no-repeat;
}
-.ui-btn-down-s {
- .ui-checkbox .ui-icon-checkbox-off {
- background-image: url(images/00_check_bg.png);
- }
+.ui-btn-down-s .ui-icon-checkbox-off {
+ width: @checkbox-radio-size-width;
+ height: @checkbox-radio-size-height;
+ background-image: url(images/00_check_press.png), url(images/00_check_press_bg.png);
+ background-repeat: no-repeat;
}
.ui-btn-down-s .ui-icon-checkbox-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_check_press.png), url(images/00_check_bg_press.png);
+ background-image: url(images/00_check_press.png), url(images/00_check_press_bg.png);
background-repeat: no-repeat;
}
.favorite {
.ui-icon-checkbox-off-press {
width: @favorite-size-width;
height: @favorite-size-height;
- background-image: url(images/controls/00_icon_favorite_off.png);
+ background-image: url(images/00_icon_favorite_off.png);
}
.ui-icon-checkbox-on,
.ui-icon-checkbox-on-press {
width: @favorite-size-width;
height: @favorite-size-height;
- background-image: url(images/controls/00_icon_favorite_on.png);
+ background-image: url(images/00_icon_favorite_on.png);
}
}
.ui-icon-radio-off {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio.png);
+ background-image: url(images/00_button_radio_bg.png);
}
.ui-icon-radio-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_select.png), url(images/00_button_radio.png);
+ background-image: url(images/00_button_radio_activated.png), url(images/00_button_radio_bg.png);
}
.ui-btn-down-s .ui-icon-radio-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_press.png), url(images/00_button_radio_press_bg.png);
+ background-image: url(images/00_button_radio_press.png), url(images/00_button_radio_press_bg.png), url(images/00_button_radio_bg.png);
}
.ui-btn-down-s .ui-icon-radio-off {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
- background-image: url(images/00_button_radio_press.png), url(images/00_button_radio_press_bg.png);
+ background-image: url(images/00_button_radio_press.png), url(images/00_button_radio_press_bg.png), url(images/00_button_radio_bg.png);
}
@import "config.less";
-@search-bar-padding: (13*@unit_base);
+@unit_base_textinput: @unit_base * 0.5;
+@search-bar-padding: 16 * @unit_base_textinput;
label.ui-input-text {
font-size: 22 * @unit_base;
margin: 0 0 .3em;
}
input.ui-input-text, textarea.ui-input-text {
+ background: @color_list_editfield;
background-image: none;
padding: .4em;
line-height: 1.4;
font-size: 16 * @unit_base;
display: block;
+ -ms-border-radius : .1em;
+ -o-border-radius : .1em;
+ -webkit-border-radius : .1em;
+ -moz-border-radius : .1em;
+ border-radius : .1em;
}
+input.ui-input-text.ui-focus, textarea.ui-input-text.ui-focus {
+ border : 1px solid @color_editfield_focus_border;
+}
+
input.ui-input-text {
appearance: none;
-webkit-appearance: none;
width : 95%;
resize: none;
-webkit-transition: height 200ms linear;
- -moz-transition: height 200ms linear;
- -o-transition: height 200ms linear;
- -ms-transition: height 200ms linear;
transition: height 200ms linear;
+ white-space: normal;
}
.ui-input-search {
position: relative;
- padding-right : 36 * @unit_base;
- padding-left : 36 * @unit_base;
+ padding-right : 76 * @unit_base_textinput;
+ padding-left : 76 * @unit_base_textinput;
- border : 1px solid @color_searchbar_border;
- -webkit-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
- -moz-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
- -o-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
- -ms-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
- box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
+ border:1px solid @color_searchbar_border;
input.ui-input-text {
width : 100%;
background: transparent none;
outline: 0 !important;
}
+
.ui-btn-down-s, .ui-btn-up-s, .ui-btn-hover-s {
border: none;
background: transparent none;
width: 36 * @unit_base;
height: 33 * @unit_base;
.ui-btn-inner {
- padding : 6 * @unit_base;
+ padding: 9 * @unit_base_textinput
+ 16 * @unit_base_textinput
+ 9 * @unit_base_textinput
+ 16 * @unit_base_textinput;
}
}
.ui-btn-inner {
.ui-icon-deleteSearch {
- width: 22 * @unit_base;
- height: 22 * @unit_base;
- margin-top : 0px;
- margin-left : 0px;
+ margin: 0;
+ width: 45 * @unit_base_textinput;
+ height: 45 * @unit_base_textinput;
}
}
-
.ui-input-clear {
position: absolute;
right: 0;
.ui-input-clear-hidden { display: none; }
}
+.ui-input-search.ui-focus {
+ border:1px solid @color_searchbar_border_focus;
+}
+
/* code for label+inputbox : remove this code if webApp dev. controls input area */
@media all and (min-width: 721px) {
label.ui-input-text:not([data-type='search']) {
background-color: @color_searchbar_input_field_bg;
.ui-input-text {
- height: 33 * @unit_base;
+ height: 64 * @unit_base_textinput;
padding : 0px;
margin-right : 38 * @unit_base;
position: absolute;
top: 0px;
left: 0px;
- width : 22 * @unit_base;
- height : 22 * @unit_base;
- margin: 6 * @unit_base;
+ width : 45 * @unit_base_textinput;
+ height : 45 * @unit_base_textinput;
+ margin-top: 9 * @unit_base_textinput;
+ margin-left: 16 * @unit_base_textinput;
+ margin-right: 16 * @unit_base_textinput;
}
}
.ui-input-search-default {
- margin-right : 75 * @unit_base;
+ margin-right : 146 * @unit_base_textinput;
-webkit-transition: all 400ms linear;
- -moz-transition: all 400ms linear;
- -o-transition: all 400ms linear;
- -ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.ui-input-search-wide {
margin-right : 0 * @unit_base;
-webkit-transition: all 400ms linear;
- -moz-transition: all 400ms linear;
- -o-transition: all 400ms linear;
- -ms-transition: all 400ms linear;
transition: all 400ms linear;
}
display: inline-block;
position: absolute;
- top : 3 * @unit_base;
+ top : @search-bar-padding;
right : 0 * @unit_base;
- height : 33 * @unit_base;
- margin-right : 10 * @unit_base;
+ height : 66 * @unit_base_textinput;
+ margin-right : 16 * @unit_base_textinput;
+ box-shadow: 0px 1px 1px @color_searchbar_button_shadow0 inset, 0px 1px 1px @color_searchbar_button_shadow1;
vertical-align: middle;
padding : 0px;
border-color : none;
- width : 68 * @unit_base;
+ width : 136 * @unit_base_textinput;
-webkit-transition: all 400ms linear;
- -moz-transition: all 400ms linear;
- -o-transition: all 400ms linear;
- -ms-transition: all 400ms linear;
transition: all 400ms linear;
.ui-btn-inner {
}
.ui-search-bar-icon {
- margin-left : 42 * @unit_base;
+ margin-left : 82 * @unit_base_textinput;
}
.ui-btn.ui-btn-search-front-icon {
position : absolute;
- width : 35 * @unit_base;
- height : 35 * @unit_base;
- top : 2 * @unit_base;
- border-radius : 66 * @unit_base;
+ top : 13 * @unit_base_textinput;
+ width : 72 * @unit_base_textinput;
+ height : 72 * @unit_base_textinput;
+ padding : 0;
+ .LESSborder-radius-allimportant( 38 * @unit_base_textinput );
+ box-shadow: 0px 1px 1px @color_searchbar_button_shadow0 inset, 0px 1px 1px @color_searchbar_button_shadow1;
>.ui-btn-inner.ui-btn-icon-only {
- border-radius : 66 * @unit_base;
+ width : 45 * @unit_base_textinput;
+ height : 45 * @unit_base_textinput;
+ padding : 13 * @unit_base_textinput
+ 14 * @unit_base_textinput
+ 14 * @unit_base_textinput
+ 13 * @unit_base_textinput;
+ .LESSborder-radius-allimportant( 38 * @unit_base_textinput );
+
+ .ui-icon {
+ width : 45 * @unit_base_textinput;
+ height : 45 * @unit_base_textinput;
+ margin : 0;
+ background-position: 0 0;
+ background-size: 45 * @unit_base_textinput 45 * @unit_base_textinput;
+ }
}
}
}
.ui-header .input-search-bar {
- padding-top : 4 * @unit_base;
- padding-bottom : 4 * @unit_base;
+ border-top : 1 * @unit_base_textinput solid @color_searchbar_divider;
+ padding-top : 16 * @unit_base_textinput;
+ padding-bottom : 16 * @unit_base_textinput;
}
.ui-image-search {
background-image: url(images/controls/00_search_icon.png);
background-repeat: no-repeat;
- background-size : 100% 100%;
+ background-size : 45 * @unit_base_textinput 45 * @unit_base_textinput;
}
.ui-icon-deleteSearch {
background-image: url(images/controls/00_field_btn_clear.png);
background-repeat: no-repeat;
- background-size : 100% 100%;
+ background-size : 45 * @unit_base_textinput 45 * @unit_base_textinput;
}
-
@import "config.less";
+@unit_base_listview : @unit_base * 0.5;
+
// Bubble
@list-li-bubble-font-size: 19 * @unit_base;
@list-li-bubble-time-font-size: 11 * @unit_base;
}
- .ui-li:not(.ui-li-divider) {
+ .ui-li:not(.ui-li-divider) {
&:not(.ui-li-static) {
min-height : 55 * @unit_base;
}
}
- .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
+ .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
&:not(.ui-li-static) {
- min-height : 64 * @unit_base;
+ min-height : 62 * @unit_base;
}
}
background: none;
background-color: @color_bg;
color: @color_text;
+ box-shadow: none;
+ .LESSborder-radius-all(0);
}
li.ui-btn-down-s {
background: none;
background-color: @color_list_press;
color: @color_text;
+ box-shadow: none;
+ .LESSborder-radius-all(0);
}
/* listview: fonts for li with a link */
li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
display : inline-block;
position : absolute;
- right : 0px;
+ right : -1px;
}
}
top : 50%;
margin-top : -15 * @unit_base;
- left : -4 * @unit_base;
+ left : -5 * @unit_base;
width : 30 * @unit_base;
height : 30 * @unit_base;
img.ui-li-bigicon {
position : absolute;
- width : 35 * @unit_base;
- height : 35 * @unit_base;
+ width : 36 * @unit_base;
+ height : 36 * @unit_base;
top : 50%;
margin-top : -18 * @unit_base;
}
&:nth-child(2) {
- left : 36 * @unit_base;
+ left : 38 * @unit_base;
}
&:last-child {
left : auto;
right : 0px;
- width : 51 * @unit_base;
- height : 51 * @unit_base;
+ width : 50 * @unit_base;
+ height : 50 * @unit_base;
margin-top : -25 * @unit_base;
}
counter-reset: listnumbering;
font-weight: bold;
- height: 38 * @unit_base;
+ height: 56 * @unit_base_listview;
font-size : @list-font-size-divider;
&>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
font-size : @list-font-size-divider;
}
+ &:active {
+ background-color: @color_list_divider_bg_press;
+ color: @color_list_divider_text_press;
+
+ .ui-divider-normal-line {
+ background: @color_list_divider_text_press;
+ }
+ }
+
&.ui-btn {
top : 0px;
margin-top: 0 * @unit_base;
}
&:not(.ui-btn) {
- margin-left : 12 * @unit_base;
- margin-right : 12 * @unit_base;
+ padding-top : 20 * @unit_base_listview;
+ }
+
+ &:focus {
+ outline:none;
}
&>.ui-btn-text {
position : absolute;
-
- top : 5 * @unit_base;
- height : 18 * @unit_base;
- padding-right : 10 * @unit_base;
+ top : 20 * @unit_base_listview;
+ height : 38 * @unit_base_listview;
+ padding-left : 26 * @unit_base_listview;
+ padding-right : 26 * @unit_base_listview;
}
&[data-style="dialogue"] {
- height: 20 * @unit_base;
+ background-color: @color_dialogue_divider_bg;
+ height: 23 * @unit_base;
padding : 0px;
- padding-top : 20 * @unit_base;
+ padding-top : 16 * @unit_base;
padding-bottom : 0 * @unit_base;
padding-left : 10 * @unit_base;
font-size : 16 * @unit_base;
font-weight : bold;
color : @color_dialogue_main_text;
- background : @color_list_bg;
}
&[data-style="check"] {
position : absolute;
width : 32 * @unit_base;
height : 32 * @unit_base;
- background : @color_list_bg;
+ background : @color_checklist_btn_bg;
padding : 0;
}
}
.ui-divider-normal-line {
display : inline-block;
position : absolute;
-
- top : 23 * @unit_base;
+ top : 58 * @unit_base_listview;
width : 100%;
- height : 2 * @unit_base;
+ height : 4 * @unit_base_listview;
background : @color_list_divider_line;
}
.ui-li-has-thumb:not(.ui-li-thumbnail-right) {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-left: 45 * @unit_base;
+ padding-left: 50 * @unit_base;
}
.ui-li-text-sub {
padding-left: 45 * @unit_base;
.ui-li-has-radio{
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-left: 36 * @unit_base;
+ padding-left: 38 * @unit_base;
}
.ui-li-text-sub {
- padding-left: 36 * @unit_base;
+ padding-left: 38 * @unit_base;
}
}
.ui-li-has-thumb.ui-li-has-radio {
.ui-btn-inner a.ui-link-inherit,
&.ui-li-static {
- padding-left: 78 * @unit_base;
+ padding-left: 82 * @unit_base;
}
.ui-li-text-sub {
- padding-left: 78 * @unit_base;
+ padding-left: 82 * @unit_base;
}
}
float: right;
text-align: right;
font-size: 16 * @unit_base;
+ font-weight: bold;
color: @color_list_sub_text_default;
position : absolute;
width: @list-smallicon-size;
height: @list-smallicon-size;
margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
+ vertical-align: bottom;
}
}
.ui-li-text-sub2 {
float: right;
text-align: right;
- font-size: 16 * @unit_base;
+ font-size: 12 * @unit_base;
+ font-weight: bold;
color: @color_list_sub_text_default;
position : absolute;
width: @list-smallicon-size;
height: @list-smallicon-size;
margin: 0 0;
+ margin-left: 8px;
}
.ui-li-icon-sub-right {
right : 8 * @unit_base;
// =========
.ui-listview {
li.ui-li-dialogue {
- margin-left: 4 * @unit_base;
- margin-right : 4 * @unit_base;
+ background : @color_list_dialogue_bg;
+ margin-left: 8 * @unit_base;
+ margin-right : 8 * @unit_base;
padding-left : 10 * @unit_base;
padding-right : 10 * @unit_base;
}
&.ui-li-has-checkbox,
&.ui-li-has-radio {
- padding-left : 36 * @unit_base;
+ padding-left : 44 * @unit_base;
}
.ui-checkbox, .ui-radio {
left : 0px;
width : 100%;
padding-left : 0px;
padding-right : 0px;
+ border : none;
+ color : @color_text;
}
}
margin-left: 0px;
margin-right: 100 * @unit_base;
border-image-source: url(images/00_messagebubble_bg_receive.9.png);
- border-image-slice: 60 23 20 57 fill;
+ border-image-slice: 60 22 19 57 fill;
border-image-width: auto;
padding: 9px 14px 21px 48px;
color: @color_list_bubble_receive_text;
position : fixed;
top : 0px;
- min-height : 55 * @unit_base;
+ min-height : 48 * @unit_base;
.ui-title {
display: inline-block;
color : @color_bar_title_text;
- min-height : 28 * @unit_base;
- max-height : 34 * @unit_base; /* temporary UX strange */
- font-size : 28 * @unit_base;
+ min-height : 25 * @unit_base;
+ max-height : 31 * @unit_base; /* temporary UX strange */
+ font-size : 25 * @unit_base;
font-weight : 500; /* tizen font weight tuning */
text-overflow: ellipsis;
+ text-shadow : 0px 2px @color_bar_title_shadow;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
text-align: left;
- margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
-
+ margin: 10*@unit_base 13*@unit_base 9*@unit_base 13*@unit_base;
+ /* text align center tuning */
}
/* header button position : need to press area more... */
height : 100%;
.ui-icon {
top : 0px;
+ left : 0px;
}
}
}
>.ui-btn:not(.ui-btn-icon_only),
>.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
- width : 53 * @unit_base;
- height : 18 * @unit_base;
- top : auto;
- bottom : 10 * @unit_base;
+ width : 62 * @unit_base;
+ height : 48 * @unit_base;
+ padding-left : 0px;
+ padding-right : 0px;
+ top : 0px;
+
+ border-left-width : 1px;
+ border-left-style : solid;
+ border-left-color : @color_bar_divider_line;
+ border-top-left-radius : 0px;
+ border-bottom-left-radius : 0px;
+
.ui-btn-inner {
padding : 0;
+ padding-top : 0 * @unit_base;
+ padding-bottom : 0 * @unit_base;
+ margin-top : 12 * @unit_base;
+ margin-bottom : 12 * @unit_base;
+ .ui-btn-text {
+ font-size : 16 * @unit_base;
+ }
+ }
+ &.ui-btn-down-s {
+ background-color : @color_list_press;
}
}
+
> .ui-btn.ui-btn-back,
> .ui-btn.ui-btn-footer-down {
right : 13 * @unit_base;
img {
position : absolute;
display: inline-block;
- height: 20 * @unit_base;
- width: 20 * @unit_base;
- margin-left: 8 * @unit_base;
- margin-top : 22 * @unit_base;
+ height: 22 * @unit_base;
+ width: 22 * @unit_base;
+ margin-left: 13 * @unit_base;
+ margin-top : 13 * @unit_base;
}
.ui-title-text-sub {
position : absolute;
- top : 36 * @unit_base;
- left : 8 * @unit_base;
-
- font-size : 12 * @unit_base;
+ top : 29 * @unit_base;
+ left : 13 * @unit_base;
- img {
- height: 16 * @unit_base;
- width: 16 * @unit_base;
- margin-left: 8 * @unit_base;
- }
+ font-size : 16 * @unit_base;
+ font-weight : 500;
+ text-shadow : 0px 2px @color_bar_title_shadow;
}
> .ui-btn,
> .naviframe-button.ui-btn {
position : absolute;
- top : 16 * @unit_base;
+ top : 9 * @unit_base;
+ font-size : 18 * @unit_base;
margin-top : 0px;
height : 34 * @unit_base;
width : 34 * @unit_base;
+ padding-left : 13 * @unit_base;
+ padding-right : 13 * @unit_base;
+
background: transparent;
color : @color_bar_title_button_text;
}
> .ui-btn.ui-btn-icon_only,
> .naviframe-button.ui-btn.ui-btn-icon_only {
- -o-border-radius : 0px;
- -ms-border-radius : 0px;
- -moz-border-radius : 0px;
- -webkit-border-radius : 0px;
- border-radius : 0px;
+ top : 8 * @unit_base;
+ width : 32 * @unit_base;
+ height : 32 * @unit_base;
+
+ border-left-width : 1px;
+ border-left-style : solid;
+ border-left-color : @color_bar_divider_line;
+ border-top-left-radius : 0px;
+ border-bottom-left-radius : 0px;
}
.ui-btn-right-0 {
- right : 11 * @unit_base;
+ right : 0 * @unit_base;
}
.ui-btn-right-1 {
- right : 56 * @unit_base;
+ right : 58 * @unit_base;
}
> .ui-btn:not(.ui-btn-icon_only):nth-child(2),
> .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(2) {
- right : 7 * @unit_base;
+ right : 0 * @unit_base;
}
> .ui-btn:not(.ui-btn-icon_only):nth-child(3),
}
> img + h1 {
- padding-left : 24 * @unit_base;
+ padding-left : 30 * @unit_base;
}
> img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3),
> img + h1 + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) {
- right : 7 * @unit_base;
+ right : 0 * @unit_base;
}
> img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3) + .ui-btn:not(.ui-btn-icon_only),
> img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4),
> img + h1 + span.ui-title-text-sub + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(4) {
- right : 7 * @unit_base;
+ right : 0 * @unit_base;
}
> img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4) + .ui-btn:not(.ui-btn-icon_only),
&.ui-title-multiline {
img {
- margin-top : 23 * @unit_base;
+ margin-top : 15 * @unit_base; /* tuning */
}
.ui-title {
max-height : 24 * @unit_base; /* temporary UX strange */
font-size : 22 * @unit_base;
- margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
+ margin: 4*@unit_base 13*@unit_base 22*@unit_base 13*@unit_base;
}
img + .ui-title + .ui-title-text-sub {
- left : 33 * @unit_base;
+ left : 42 * @unit_base;
}
}
height : 49 * @unit_base;
text-align : center;
bottom : 0px;
+ background : @color_bar_toolbar_bg;
>.ui-btn.ui-btn-back,
>.ui-btn.ui-btn-footer-down,
>[data-icon="naviframe-more"] {
border-right-width : 1px;
.LESSborder-radius-all(0);
+ border-radius : 0px !important;
box-shadow : none;
padding : 0px;
margin-left : -4 * @unit_base;
margin-right : -5 * @unit_base;
- &.ui-btn-hover-s {
+ &.ui-btn-hover-s,
+ &.ui-btn-up-s {
.LESSborder-radius-all(0);
}
&.ui-btn-down-s, .ui-btn-active-s {
.LESSborder-radius-all(0);
.ui-btn-inner {
- background : @color_bg;
+ background : @color_bar_toolbar_bg;
.ui-btn-text {
color : @color_bar_title_text;
}
.ui-btn-box-s {
padding: 1 * @unit_base;
}
+
.ui-btn-box-s.ui-btn-up-s {
- .LESSbutton_box_style;
+/* .LESSbutton_box_style;
.LESSborder-radius-all( 0.3rem );
- .LESSbutton_text1_style;
-}
-
-.ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
- .LESSborder-radius-all( 1.2rem );
+ .LESSbutton_text1_style;*/
}
.ui-btn-box-s .ui-btn-inner {
- border: 1px solid;
+/* border: 1px solid;
border-color: @color_button_inner_border;
.LESSborder-radius-all( 0.3rem );
.LESSbox-boxsizing( border-box );
.LESSbutton_inner_box_style;
- height: 100%;
+ height: 100%;*/
}
.ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
.LESSborder-radius-all( 0.9 rem );
}
-.ui-btn-box-s.ui-btn-hover-s {
- .LESSbutton_hover_style;
- .LESSbutton_text1_style;
- .LESSborder-radius-allimportant( 0.3em );
-}
.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
.LESSborder-radius-allimportant( 1em );
}
-.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
- .LESSborder-radius-allimportant( 1.2em );
-}
.ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
.LESSborder-radius-allimportant( 1.2em );
}
-.ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
- .LESSbutton_down_style;
+.ui-btn-box-s.ui-btn-down-s {
+ .ui-btn-inner {
+ .LESSbutton_down_style;
+ }
}
.ui-btn-up-s,
.ui-btn-up-s { /* less parsing problem : divide css */
.ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
.ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
- .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
- .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
- .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
- .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
+
+ .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
+ .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
+ .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
+ .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
+ .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
+ .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
+ .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
+ .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
}
.ui-btn-hover-s {
.ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
.ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
- .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
- .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
- .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
- .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
+
+ .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
+ .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
+ .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
+ .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
+ .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
+ .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
+ .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
+ .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
}
.ui-btn-down-s {
.ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
.ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
- .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
- .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
- .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
- .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_press_web.png); }
+
+ .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_press_web.png); }
+ .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_press_web.png); } /* FIXME : check ux if it needs to be deprecated... */
+ .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press_web.png); }
+ .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press_web.png); }
+ .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_press_web.png); }
+ .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_press_web.png); }
+ .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_press_web.png); }
+ .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_press_web.png); }
}
/* Interaction cues
max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/
font-size : 25 * @unit_base;
- margin: 12*@unit_base 8*@unit_base 4*@unit_base 8*@unit_base;/* tuning UX guide(title height too large)*/
- }
-
- >.ui-btn:not(.ui-btn-icon_only),
- >.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
- width : 53 * @unit_base;
- height : 18 * @unit_base;
-
- bottom : 10 * @unit_base;
+ margin: 12*@unit_base 13*@unit_base 4*@unit_base 13*@unit_base;/* tuning UX guide(title height too large)*/
}
> .ui-btn.ui-btn-back,
}
img {
- margin-top : 16 * @unit_base;
- height: 22 * @unit_base;
- width: 22 * @unit_base;
+ margin-top : 14 * @unit_base;
+ height: 23 * @unit_base;
+ width: 23 * @unit_base;
}
.ui-title-text-sub {
min-height : 21 * @unit_base;
max-height : 21 * @unit_base; /* temporary UX strange */
font-size : 19 * @unit_base;
- margin: 5*@unit_base 8*@unit_base 19*@unit_base 8*@unit_base;
+ margin: 5*@unit_base 13*@unit_base 19*@unit_base 13*@unit_base;
display : block;
}
+
+ .ui-title-text-sub {
+ top : 26 * @unit_base;
+
+ font-size : 14 * @unit_base;
+ }
}
}
top : 3 * @unit_base;
}
}
+
}
.ui-ctxpopup {
display: table;
-
+
+ :focus {
+ outline:none;
+ }
+
.ui-ctxpopup-row .ui-triangle-top {
top: 2px;
}
}
- .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s {
- background: transparent;
- }
+ .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s {
+ background: transparent;
+ }
.ui-listview li:last-child {
border-bottom-left-radius: @border_radius;
border-top-right-radius: @border_radius;
}
- .ui-listview {
+ .ui-listview {
max-width: 620 * @unit_base;
- border: none;
- }
+ border: none;
+ }
.ui-listview > .ui-li {
color: @color_ctxpopup_text;
color: @color_ctxpopup_text;
}
- .horizontal {
+ .horizontal {
color: @color_ctxpopup_text;
.icon .ui-btn {
padding: 0;
}
- a.ui-link {
- color: @color_ctxpopup_text;
- text-decoration: none;
- }
+ a.ui-link {
+ color: @color_ctxpopup_text;
+ text-decoration: none;
+ }
- ul {
- padding: 0;
- display: inline-block;
- list-style: none;
- vertical-align: middle;
- margin: 0;
- }
+ ul {
+ padding: 0;
+ display: inline-block;
+ list-style: none;
+ vertical-align: middle;
+ margin: 0;
+ }
- li {
+ li {
line-height: 32 * @unit_base;
min-height: 32 * @unit_base;
min-width: 48 * @unit_base;
- float: left;
- display: inline-block;
- border-right: 1px solid @color_ctxpopup_border_right;
+ float: left;
+ display: inline-block;
+ border-right: 1px solid @color_ctxpopup_border_right;
border-left: 1px solid @color_ctxpopup_border_left;
- text-align: center;
+ text-align: center;
border-bottom-width: 0;
border-top-width: 0;
- }
+ }
li:first-of-type {
border-top-left-radius: @border_radius;
border-bottom-left-radius: @border_radius;
border-top-right-radius: 0px ! important;
- border-left: none;
- }
-
- li:last-of-type {
+ border-left: none;
+ }
+
+ li:last-of-type {
border-top-right-radius: @border_radius;
border-bottom-right-radius: @border_radius;
border-bottom-left-radius: 0px ! important;
- border-right: none;
- }
+ border-right: none;
+ }
.ui-li {
&:first-child {
li:active, td:active {
background: @color_ctxbutton_press;
}
- }
+ }
- .button {
- table .ui-btn {
- margin: 0 * @unit_base;
- padding: 0;
- height: 56 * @unit_base;
- width: 132 * @unit_base;
- }
- }
+ .button {
+ table .ui-btn {
+ margin: 0 * @unit_base;
+ padding: 0;
+ height: 56 * @unit_base;
+ width: 132 * @unit_base;
+ }
+ }
.ui-scrollbar-thumb {
background-color: #494949;
.poptop.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
- opacity: 1;
+ opacity: 1;
-webkit-animation-name: scalepopin;
-moz-animation-name: scalepopin;
-webkit-animation-duration: 350ms;
}
@-webkit-keyframes scalepopin {
- from {
- -webkit-transform: scale(.8);
- opacity: 0;
- }
- to {
- -webkit-transform: scale(1);
- opacity: 1;
- }
+ from {
+ -webkit-transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
}
.popbottom {
.popbottom.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
- opacity: 1;
+ opacity: 1;
-webkit-animation-name: scalepopin;
-moz-animation-name: scalepopin;
-webkit-animation-duration: 350ms;
}
@-moz-keyframes scalepopin {
- from {
- -moz-transform: scale(.8);
- opacity: 0;
- }
- to {
- -moz-transform: scale(1);
- opacity: 1;
- }
+ from {
+ -moz-transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
}
@-webkit-keyframes scalepopout {
- from {
- -webkit-transform: scale(1);
- opacity: 1;
- }
- to {
- -webkit-transform: scale(.8);
- opacity: 0;
- }
+ from {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: scale(.8);
+ opacity: 0;
+ }
}
@-moz-keyframes scalepopout {
- from {
- -moz-transform: scale(1);
- opacity: 1;
- }
- to {
- -moz-transform: scale(.8);
- opacity: 0;
- }
+ from {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -moz-transform: scale(.8);
+ opacity: 0;
+ }
}
}
.ui-datetime-text-sub {
- top: 15 * @unit_base ! important;
+ top: 5 * @unit_base ! important;
color: @color_list_divider_text ! important;
background: transparent ! important;
font-size: @font_size_datetime_sub_text ! important;
margin: 0;
padding: 0;
}
+ ul:hover {
+ li {
+ border-left-color : @color_fastscroll_popup_bg;
+ }
+ }
li {
cursor: pointer;
color: @color_fastscroll_rollover_text;
font-weight : bold;
border-left-width : 3 * @unit_base;
- border-left-color : @color_fastscroll_popup_bg;
+ border-left-color : @color_fastscroll_default_border;
border-left-style : solid;
border-top-width : 3 * @unit_base;
color: @color_fastscroll_popup_text;
padding: 10*@unit_base;
border: 1px solid @color_fastscroll_popup_border;
- border-radius: .1em;
- box-shadow: -2px -2px 2px #fff, 8*@unit_base 10*@unit_base 4*@unit_base @color_fastscroll_popup_shadow;
+ border-radius: 2px;
text-shadow: 0px -2px -2px @color_fastscroll_popup_shadow;
text-align: center;
font-size: 75*@unit_base;
border-top-width : 3 * @unit_base;
border-right-width : 3 * @unit_base;
- border-left-width : 1px;
+ border-left-width : 0px;
border-left-color : @color_list_bg;
}
}
.ui-multimediaview-bar-bg {
- height : 16 * @unit_base_multimediaview;
+ height : 13 * @unit_base_multimediaview;
border-radius : 1.5em;
}
.ui-multimediaview-bar-highlight {
- height : 16 * @unit_base_multimediaview;
+ height : 13 * @unit_base_multimediaview;
position : absolute;
border-radius : 1.5em;
}
padding : 0;
width : 30 * @unit_base_multimediaview;
height : 30 * @unit_base_multimediaview;
- border-style: solid;
- border-width: 1px;
- border-radius : 1.5em;
}
.ui-fullscreen-parents {
}
span.ui-button {
- background-color : @color_multimediaview_button_bg;
+ background-color : @color_button_normal;
+ .LESSbox-shadow-line( @button_shadow_inner );
+ }
+
+ span.ui-button-down {
+ background-color : @color_button_press;
}
span.ui-play-icon {
.ui-handle {
.LESSmultimediaview_bar_handle_style();
- border-color : @color_multimediaview_button_border;
+ }
+
+ .ui-button-down {
+ background: @color_button_press;
}
}
}
width: 77 * @unit_base;
font-size: 0.81rem;
- color: @color_ticker_text1;
-
- background: @color_ticker_btn;
-
- border: 1px;
- border-color: @color_ticker_btn_border;
- box-shadow: 0 0 1px 1px @color_ticker_btn_border;
- }
-
- .ui-btn-box-s.ui-btn-up-s {
- background: @color_ticker_btn;
- box-shadow: 0 0 1px 1px @color_ticker_btn_border;
- border-color: @color_ticker_btn_border;
- }
-
- .ui-btn-box-s.ui-btn-hover-s {
- background: @color_ticker_btn;
- box-shadow: 0 0 1px 1px @color_ticker_btn_border;
- border-color: @color_ticker_btn_border;
}
}
.LESSbox-orient(vertical);
.LESSbox-align(center);
.LESSbox-pack(center);
-
+ outline : none;
.ui-popup {
- padding : 3px 2px 2px 2px;
- background: @color_popup_text_bg;
+ padding : .5px .5px .5px .5px;
+ background: @color_popup_bg;
width : 100%;
> .ui-popup-title,
> .ui-popup-text,
> .ui-popup-button-bg {
width : 100%;
}
+ border : 1px solid @color_border_popup;
word-wrap : break-word;
-ms-border-radius : .3em;
-o-border-radius : .3em;
height: 40 * @unit_base;
text-align : left;
color : @color_popup_title_text;
-
font-size: @font_size_popup_basic_style_title;
font-weight : bold;
+ background : @color_popup_title_bg;
h1 {
font-size: @font_size_popup_basic_style_title;
font-weight : bold;
color : @color_popup_title_text;
-
+ text-shadow : 0px 2px @color_bar_title_shadow;
margin : 0px;
- padding-top : 10 * @unit_base;
+ padding-top : 5 * @unit_base;
padding-left : 16 * @unit_base;
}
+ -ms-border-radius : .2em;
+ -o-border-radius : .2em;
+ -webkit-border-radius : .2em;
+ -moz-border-radius : .2em;
+ border-radius : .2em;
}
.ui-popup-text {
margin-bottom: @popup-text-padding-vert;
color: @color_popup_text_font;
font-size: 20 * @unit_base;
- background: @color_popup_text_bg;
+ background: @color_popup_bg;
text-align: center;
.ui-li .ui-radio, .ui-li .ui-checkbox {
}
.ui-popup-button-bg {
+ background: @color_popup_button_bg;
font-size: @font_size_popup_button_text;
+ font-weight: bold;
height : 37 * @unit_base;
padding-top: 10 * @unit_base;
padding-bottom: 10 * @unit_base;
vertical-align: middle;
> .ui-btn {
+ width : 40%;
display : inline-block;
margin:auto;
height : 37 * @unit_base;
+ background: @color_popup_buttonbg;
+ color: @color_popup_buttontext;
+ border: 1px solid @color_popup_button_border;
+ box-shadow: @button_shadow_outer;
+ }
+
+ > .ui-btn.ui-btn-down-s {
+ background : @color_popup_buttonbg_press;
+ background : @color_popup_buttonbg_press_webkit;
+ background : @color_popup_buttonbg_press_moz;
+ background : @color_popup_buttonbg_press_ms;
+ background : @color_popup_buttonbg_press_o;
+ color: white;
}
.ui-btn-inner {
- padding-top: 5 * @unit_base;
- padding-bottom: 5 * @unit_base;
padding-left : 20 * @unit_base;
padding-right : 20 * @unit_base;
- }
+ }
+ -ms-border-radius : .3em;
+ -o-border-radius : .3em;
+ -webkit-border-radius : .3em;
+ -moz-border-radius : .3em;
+ border-radius : .3em;
}
> .ui-btn {
display : block;
width: 200*@unit_base;
+ margin-top: 5px;
+ margin-bottom: 5px;
}
}
}
.center_checkbox {
.ui-popup-check-bg {
font-size: 20 * @unit_base;
- background: @color_popup_text_bg;
width: 100%;
padding-top: 0*@unit_base;
padding-bottom: 22*@unit_base;
.ui-checkbox {
.ui-btn {
text-align: center;
- background: @color_popup_text_bg;
border: 0*@unit_base;
.ui-btn-inner {
@import "config.less";
+@unit_base_progress : @unit_base * 0.5;
+
/* Progress - circle style */
@img-height: 32 * @unit_base;
@img-width: 32 * @unit_base;
}
/* Progress - pending style */
-@bar-height: 7 * @unit_base;
-@bar-margin: 21 * @unit_base;
+@bar-height: 13 * @unit_base_progress;
+@bar-margin: 36 * @unit_base_progress;
-@-webkit-keyframes ui-move-animation {
- from {
- -webkit-transform: translateY(-@bar-height * 2);
- } to {
- -webkit-transform: translateY(0);
- }
+@-webkit-keyframes animate-stripes {
+ 0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
.ui-progress-pending {
position: relative;
top: 0;
width: 100%;
- height: @bar-height * 3;
+ height: 100%;
padding-top: 0;
padding-bottom: 0;
-
- background: -webkit-gradient(linear,
- left top,
- right bottom,
- color-stop(0%, rgba(0,0,0,0)),
- color-stop(25%, rgba(0,0,0,0)),
- color-stop(25%, @color_progress_value0),
- color-stop(50%, @color_progress_value0),
- color-stop(50%, rgba(0,0,0,0)),
- color-stop(75%, rgba(0,0,0,0)),
- color-stop(75%, @color_progress_value0));
-
+ background-image: linear-gradient(
+ 135deg,
+ @color_progress_value0 25%,
+ transparent 25%,
+ transparent 50%,
+ @color_progress_value0 50%,
+ @color_progress_value0 75%,
+ transparent 75%,
+ transparent);
+ box-shadow: 0 1px 0 @color_progress_value_shadow0 inset;
background-color: @color_progress_bar0;
+ .LESSborder-radius-all( 10 * @unit_base_progress );
.LESSbackground-size(@bar-height * 2, @bar-height * 2);
}
.ui-progress-pending-running {
- -webkit-animation: ui-move-animation 0.5s infinite linear;
+ -webkit-animation: animate-stripes 1s linear infinite;
}
@import "config.less";
-@bar-height: 18 * @unit_base;
-@bar-margin: 21 * @unit_base;
+@unit_base_progressbar : @unit_base * 0.5;
+
+@bar-height: 27 * @unit_base_progressbar;
+@bar-margin: 36 * @unit_base_progressbar;
@-webkit-keyframes ui-scale-animation {
from {
.ui-progressbar-value {
height: 100%;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, @color_progress_value0),
- color-stop(1, @color_progress_value1)
- );
- .LESSborder-radius-all( 10 * @unit_base );
+ .LESSborder-radius-all( 10 * @unit_base_progressbar );
+ box-shadow: 0px 1px 1px @color_progress_value_shadow0 inset, 0px 1px 0px @color_progress_value_shadow1;
+ background-color: @color_progress_value0;
}
.ui-progressbar-bg {
position: relative;
overflow: hidden;
- top: 5 * @unit_base;
- height: 7 * @unit_base;
- margin-left: 5 * @unit_base;
- margin-right: 5 * @unit_base;
+ top: 7 * @unit_base_progressbar;
+ min-width: 22 * @unit_base_progressbar;
+ height: 13 * @unit_base_progressbar;
+ margin-left: 7 * @unit_base_progressbar;
+ margin-right: 7 * @unit_base_progressbar;
- .LESSborder-radius-all( 10 * @unit_base );
- border: 1px;
- border-style: solid;
- border-color: @color_progress_border;
+ .LESSborder-radius-all( 10 * @unit_base_progressbar );
+ box-shadow: 0px 1px 1px @color_progress_shadow0 inset, 0px 1px 0px @color_progress_shadow1;
background-color: @color_progress_bar0;
}
.ui-progressbar {
position: relative;
- margin-top: 18 * @unit_base;
- margin-bottom: 18 * @unit_base;
margin-left: @bar-margin;
margin-right: @bar-margin;
height: @bar-height;
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, @color_progress_bar1),
- color-stop(1, @color_progress_bar0)
- );
- .LESSbox-shadow(0px, 0px, 2px, @color_progress_shadow);
- .LESSborder-radius-all( 10 * @unit_base );
}
.ui-handler-s {
.ui-handler-thumb {
background-color : @color_scrollview_handler_bg;
+ .LESSbox-shadow(1 * @unit_base, 1 * @unit_base, 1 * @unit_base, @color_scrollview_handler_shadow);
}
.ui-handler-direction-y .ui-handler-thumb {
@import "config.less";
+@unit_base_slider : @unit_base * 0.5;
+
@popup-height: 54 * @unit_base;
@popup-width: 45 * @unit_base;
-@img-height: 37 * @unit_base;
-@img-width: 37 * @unit_base;
-@handle-height: 36 * @unit_base;
-@handle-width: 36 * @unit_base;
+@img-height: 72 * @unit_base_slider;
+@img-width: 72 * @unit_base_slider;
+@handle-height: 72 * @unit_base_slider;
+@handle-width: 72 * @unit_base_slider;
label.ui-slider {
display: block;
position: relative;
vertical-align: middle;
- height: 18 * @unit_base;
- margin-left: 16 * @unit_base;
- margin-right: 16 * @unit_base;
- margin-top: 18 * @unit_base;
- margin-bottom: 18 * @unit_base;
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, @color_progress_bar1),
- color-stop(1, @color_progress_bar0)
- );
- .LESSbox-shadow(0px, 0px, 2px, @color_progress_shadow);
- .LESSborder-radius-all( 10 * @unit_base );
+ height: 27 * @unit_base_slider;
+ margin-left: 36 * @unit_base_slider;
+ margin-right: 36 * @unit_base_slider;
}
.ui-li > .ui-slider-container {
div.ui-slider:not(.ui-toggle-switch) {
position: relative;
- top: 5 * @unit_base;
- height: 7 * @unit_base;
- margin-left: 5 * @unit_base;
- margin-right: 5 * @unit_base;
+ top: 9 * @unit_base_slider;
+ height: 13 * @unit_base_slider;
+ margin-left: 8 * @unit_base_slider;
+ margin-right: 8 * @unit_base_slider;
.LESSborder-radius-all( 10 * @unit_base );
- border: 1px;
- border-style: solid;
- border-color: @color_progress_border;
+ .LESSbox-shadow(0px, 0px, 2px, @color_progress_shadow);
background-color: @color_progress_bar0;
.ui-btn {
position: relative;
z-index: 10;
- width: 36 * @unit_base;
- height: 36 * @unit_base;
- margin-left: -19 * @unit_base;
+ width: @handle-width;
+ height: @handle-height;
+ margin-left: -1 * @handle-width / 2;
color: @color_slider_handle_text;
font-size: 0.95rem;
background: url(images/controls/00_slider_handle.png) no-repeat;
.LESSbackground-size(@handle-width, @handle-height);
+
+ -o-box-shadow: none;
+ -ms-box-shadow: none;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
.ui-slider-popup {
.ui-slider-bg {
position: absolute;
- height: 7 * @unit_base;
+ height: 13 * @unit_base_slider;
width: 0;
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, @color_progress_value0),
- color-stop(1, @color_progress_value1)
- );
.LESSborder-radius-all( 10 * @unit_base );
+ .LESSbox-shadow(0px, 0px, 2px, @color_progress_shadow);
+ background-color: @color_progress_value0;
}
-.ui-slider-handle-press {
- position: absolute;
- z-index: 15;
-
- width: 37 * @unit_base;
- height: 37 * @unit_base;
-
- //FIXME
- background: url(images/controls/00_slider_handle_press.png) no-repeat;
- .LESSbackground-size(@handle-width, @handle-height);
+a.ui-slider-handle-press {
+ background-image: url(images/controls/00_slider_handle_press.png);
}
Tabbar
***************************************************************************/
.ui-tabbar {
- background : @color_bg;
z-index : 1000;
&.ui-portrait-tabbar {
/* portrait style */
}
a.ui-btn {
- background : @color_bg;
+ background : @color_bar_tabbar_bg;
color : @color_tabbar_btn_normal;
padding-top : 19 * @unit_base;
- padding-bottom : 19 * @unit_base;
+ padding-bottom : 12 * @unit_base;
+
.ui-btn-inner {
padding-top : 0px;
padding-bottom : 0px;
- border-left : 2px solid;
+ border-left : 1px solid;
border-color : @color_bar_divider_line;
border-radius : 0px;
-0-border-radius : 0px;
vertical-align: middle;
padding-bottom : 6 * @unit_base;
margin-left: 6 * @unit_base;
- margin-right: 6 * @unit_base;
+ margin-righti: 6 * @unit_base;
+
+ }
+ .ui-btn-text {
+ background : @color_bar_tabbar_bg;
}
}
}
}
- &.ui-tabbar-persist {
- a.ui-btn {
- background: @color_bg;
- }
- a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
- color : @color_tabbar_btn_pressed;
-
- .ui-btn-text {
- border-bottom-width: 3 * @unit_base;
- border-bottom-color: @color_tabbar_btn_pressed;
- border-bottom-style: solid;
- }
- }
- a.ui-btn-hover-s.ui-btn-down-s {
- &:not(.ui-state-persist) {
- background: @color_tabbar_btn_tab_press;
- }
- }
- }
-
- &:not(.ui-tabbar-persist) {
- a.ui-btn {
- background: @color_bg;
- }
- a.ui-btn-active, .ui-btn-show-style {
- color : @color_tabbar_btn_pressed;
- .ui-btn-text {
- border-bottom-width: 3 * @unit_base;
- border-bottom-color: @color_tabbar_btn_pressed;
- border-bottom-style: solid;
- }
- }
- a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
- background: @color_tabbar_btn_tab_press;
+ a.ui-btn.ui-btn-down-s {
+ background : @color_tabbar_btn_pressed;
+ border-bottom-color : @color_bar_tabbar_bg;
+ .ui-btn-text {
+ background : @color_tabbar_btn_pressed;
}
}
&.ui-tabbar-notext {
a.ui-btn {
padding-top : 11 * @unit_base;
- padding-bottom : 10 * @unit_base;
+ padding-bottom : 4 * @unit_base;
}
.ui-btn-inner {
.ui-tabbar {
&.ui-tabbar-noicons {
a.ui-btn {
- padding-top : 15 * @unit_base;
- padding-bottom : 13 * @unit_base;
+ padding-top : 6 * @unit_base;
+ padding-bottom : 3 * @unit_base;
}
}
}
.ui-header.ui-bar-s {
+ .ui-tabbar {
+ a.ui-btn {
+ border-bottom-width: 5 * @unit_base;
+ border-bottom-color: @color_bar_tabbar_bg;
+ border-bottom-style: solid;
+
+ &.ui-btn-active {
+ border-bottom-color: @color_tabbar_border_active;
+ }
+ }
+
+ a.ui-btn.ui-btn-down-s {
+ border-bottom-color : @color_tabbar_btn_pressed;
+ }
+ }
+
&.ui-title-tabbar-multiline {
.ui-tabbar {
a.ui-btn {
- padding-top : 11 * @unit_base;
- padding-bottom : 10 * @unit_base;
+ padding-top : 7 * @unit_base;
+ padding-bottom : 4 * @unit_base;
.ui-btn-inner {
- height : 54 * @unit_base;
+ height : 49 * @unit_base;
.ui-btn-text {
padding-bottom: 1 * @unit_base;
}
margin-right : auto;
a.ui-btn {
+ background : @color_bar_toolbar_bg;
+
padding-top : 16 * @unit_base;
padding-bottom : 16 * @unit_base;
+ &.ui-btn-down-s:not(.ui-btn-icon_only) {
+ background : @color_tabbar_footer_btn_press;
+ .ui-btn-text {
+ background : @color_tabbar_footer_btn_press;
+ }
+ }
}
+
.ui-btn-inner {
.ui-icon {
top : 0px;
}
+ .ui-btn-text {
+ background : @color_bar_toolbar_bg;
+ }
}
&.ui-tabbar-notext {
a.ui-btn {
position : relative;
display : inline-block;
margin-left : -8 * @unit_base;
+
a {
width : 100%;
+
+ padding-top : 3px;
+ padding-bottom : 3px;
+
+ border-bottom-width : 5 * @unit_base;
+ border-bottom-style : solid;
+ border-bottom-color : @color_bar_tabbar_bg;
+
+ &.ui-btn-active {
+ border-bottom-color : @color_tabbar_border_active;
+ }
}
}
li.tabbar-scroll-li:first-child {
top : 0px;
width : 81 * @unit_base;
- height : 55 * @unit_base;
+ height : 36 * @unit_base;
background-repeat: no-repeat;
background-size: 100% 100%;
Landscape mode
************************************************************************/
@media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
-
.ui-tabbar {
a.ui-btn {
padding-top : 14 * @unit_base;
- padding-bottom : 14 * @unit_base;
+ padding-bottom : 5 * @unit_base;
}
.ui-btn-inner {
&.ui-title-tabbar-multiline {
.ui-tabbar {
a.ui-btn {
- padding-top : 6 * @unit_base;
- padding-bottom : 5 * @unit_base;
+ padding-top : 4 * @unit_base;
+ padding-bottom : 1 * @unit_base;
.ui-btn-inner {
height : 54 * @unit_base;
.ui-btn-text {
.ui-slider-label {
position: absolute;
- width: 66 * @unit_base;
+ width: 73 * @unit_base;
height: 35 * @unit_base;
background-size : 100% 100%;
background-repeat : no-repeat;
display : table;
outline : none;
position : relative;
+ background-color : @color_tokentextarea_bg;
}
.ui-tokentextarea .ui-tokentextarea-label {
padding : 0 !important;
margin : .5em;
color : @color_tokentextarea_input_text;
+ background-color : @color_tokentextarea_bg;
text-align : left;
font-size : 1em;
}
margin : .3em;
padding : .2em .5em;
font-size : 1em;
- text-shadow : 0 .1em .1em rgba(0,0,0,.3);
+ text-shadow : 0 2px rgba(0,0,0,.75);
-ms-border-radius : .2em;
-o-border-radius : .2em;
-webkit-border-radius : .2em;
div.ui-tokentextarea-block {
background-color : @color_tokentextarea_block_bg;
- background-image : -webkit-gradient(linear, left top, left bottom, from(@color_tokentextarea_block_bg), to(rgb(115, 148, 189)));
- background-size : contain;
- background-repeat : no-repeat;
- padding-left : .7em;
+ border : 1px solid @color_tokentextarea_block_border;
}
div.ui-tokentextarea-sblock {
background-color : @color_tokentextarea_press_bg;
- background-image : -webkit-gradient(linear, left top, left bottom, from(@color_tokentextarea_press_bg), to(rgb(75, 142, 222)));
- background-size : contain;
- background-repeat : no-repeat;
- padding-left : .7em;
+ border : 1px solid @color_tokentextarea_press_border;
}
.ui-tokentextarea .ui-tokentextarea-desclabel {
/***************************************************************************
Body
***************************************************************************/
-@color_bg: rgb(32, 35, 39); /* B011 : Main Background color */
-@color_text: rgb(249, 249, 249); /* B012 : Main font color */
+@color_bg: rgb(0, 0, 0); /* B011 : Main Background color */
+@color_text: rgb(250, 250, 250); /* B012 : Main font color */
/***************************************************************************
Naviframe
***************************************************************************/
-@color_bar_title_text : rgba(112, 169, 238, 1); /* B042 : title text */
-@color_bar_title_button_text : rgba(58, 58, 58, 1); /* B052L4 : Title text button */
+@color_bar_title_text : rgba(250, 250, 250, 1); /* B042 : title text */
+@color_bar_title_button_text : rgba(250, 250, 250, 1); /* B052L4 : Title text button */
@color_bar_title_button_text_press : rgba(59, 115, 182, 1); /* B052L5 : Title text button press */
-@color_bar_btn_press : rgba(64, 147, 247, 0.1); /* B052L1P : Title text button press bg */
-@color_bar_divider_line : rgba(59, 62, 64, 1); /* 00_divider_line.9.png */
-@color_bar_naviframe_bg : rgba(32, 35, 39, 1);
+@color_bar_title_shadow : rgba(0, 0, 0, 0.75);
+@color_bar_btn_press : rgba(49, 63, 102, 1); /* B052L1P : Title text button press bg */
+@color_bar_divider_line : rgba(255, 255, 255, 0.3); /* 00_divider_line.9.png */
+@color_bar_naviframe_bg : rgba(49, 63, 102, 1);
+@color_bar_tabbar_bg : rgba(49, 63, 102, 1);
+@color_bar_toolbar_bg : rgba(70, 76, 94, 1); /* 00_toolbar_bg.png */
/***************************************************************************
Tabbar
***************************************************************************/
@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(0, 0, 0,1) 0%, rgba(32, 35, 39,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
-@color_tabbar_btn_pressed : rgba(112, 169, 238, 1); /* B052L6P */
-@color_tabbar_btn_normal : rgba(186, 186, 186, 1); /* B052L6 */
+@color_tabbar_btn_pressed : rgba(51, 67, 178, 1); /* B052L6P */
+@color_tabbar_border_active : rgba(93, 131, 255, 1);
+@color_tabbar_btn_normal : rgba(240, 240, 240, 1); /* B052L6 */
+@color_tabbar_footer_btn_press : rgba(39, 53, 163, 1);
/***************************************************************************
List
***************************************************************************/
@color_list_bg: rgba(32, 35, 39, 1); /* B0211 */
-@color_list_press : rgba(112, 169, 238, 1); /* B041 */
-@color_list_border_bottom: rgba(12, 15, 20, 1); /* B0223 */
-@color_list_main_text_focus: rgba(255, 255, 255, 1);
-@color_list_main_text_unfocus: rgba(215, 215, 215, 1);
-@color_list_sub_text_default: rgba(128, 128, 128, 1);
+@color_list_press : rgba(43, 58, 175, 1); /* B041 */
+@color_list_border_bottom: rgba(64, 64, 64, 1); /* B0223 */
+@color_list_main_text_focus: rgba(250, 250, 250, 1);
+@color_list_main_text_unfocus: rgba(250, 250, 250, 1);
+@color_list_sub_text_default: rgba(110, 111, 118, 1);
@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
-@color_list_divider_bg : rgba(32, 35, 39, 1); /* W021L1 */
-@color_list_divider_line : rgba(59, 115, 182, 1); /* W021L2 */
-@color_list_divider_text : rgba(112, 169, 238, 1); /* W021L3 */
+@color_list_divider_bg : rgba(0, 0, 0, 1); /* W021L1 */
+@color_list_divider_line : rgba(66, 87, 144, 1); /* W021L2 */
+@color_list_divider_text : rgba(66, 87, 144, 1);
+@color_list_divider_bg_press : rgba(43, 58, 175, 1);
+@color_list_divider_text_press : rgba(250, 250, 250, 1);
@color_list_swipe_bg : rgba(23, 25, 28, 1); /* B0212 */
-@color_list_dialogue_bg : rgba(42, 45, 48, 1);
-@color_dialogue_main_text: rgba(112, 169, 238, 1); /* F011L5 */
-@color_dialogue_border_right: rgba(12, 15, 20, 1);
+@color_list_dialogue_bg : rgba(17, 19, 27, 1);
+@color_dialogue_main_text: rgba(93, 131, 255, 1); /* F011L5 */
+@color_dialogue_border_right: rgba(98, 105, 127, 0.3);
+@color_dialogue_divider_bg : rgba(0, 0, 0, 1);
@color_list_expanded_bg : rgba(220, 218, 211, 1);
-@color_list_editfield : rgba(215, 215, 215, 1); /* F011L1 */
+@color_list_editfield : rgba(32, 36, 50, 1); /* F011L1 */
+@color_editfield_focus_border : rgba(58, 114, 255, 1);
+
+@color_checklist_btn_bg : rgba(0, 0, 0, 1);
@color_list_bubble_sent_text: rgb(0, 0, 0); /* W051 */
@color_list_bubble_receive_text: rgb(0, 0, 0); /* W051 */
-@color_list_bubble_sos_text: rgb(233, 73, 73); /* F011L15 */
+@color_list_bubble_sos_text: rgb(209, 0, 0); /* F011L15 */
@color_list_bubble_date_text: rgb(104, 104, 104); /* F011L18 */
@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
-@color_list_bubble_time_sent_text: rgb(139, 139, 139); /* F011L16 */
-@color_list_bubble_time_receive_text: rgb(139, 139, 139); /* F011L17 */
-@color_list_bubble_time_sos_text: rgb(233, 73, 73); /* F011L15 */
-@color_list_bubble_name_text: rgb(139, 139, 139);
-@color_list_bubble_help_text: rgb(154, 154, 154);
+@color_list_bubble_time_sent_text: rgb(110, 111, 118); /* F011L16 */
+@color_list_bubble_time_receive_text: rgb(110, 111, 118); /* F011L17 */
+@color_list_bubble_time_sos_text: rgb(209, 0, 0); /* F011L15 */
+@color_list_bubble_name_text: rgb(110, 111, 118);
+@color_list_bubble_help_text: rgb(110, 111, 118);
@color_list_bubble_link_text: rgb(34, 129, 157);
@list-font-size-main: 22 * @unit_base;
@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group
-@list-smallicon-size: 17 * @unit_base;
+@list-smallicon-size: 22 * @unit_base;
@list-li-padding-horizontal: 8 * @unit_base;
@list-bigicon-size2: 72 * @unit_base;
/***************************************************************************
Shortcut Scroll
***************************************************************************/
-@color_fastscroll_rollover_bg: rgba(33, 52, 74, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */
+@color_fastscroll_rollover_bg: rgba(33, 36, 40, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */
@color_fastscroll_rollover_text: rgba(215, 215, 215, 1); /* B0721 : Rollover text */
-@color_fastscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */
+@color_fastscroll_popup_bg: rgba(47, 62, 173, 1); /* B0731 : 00_fast_scroll_popup_bg.png */
@color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */
-@color_fastscroll_popup_border: rgba(100, 100, 100, 0.5);
+@color_fastscroll_popup_border: rgba(19, 26, 79, 1);
+@color_fastscroll_default_border: rgba(64, 64, 64, 1);
/***************************************************************************
SearchBar(forms.textinput)
***************************************************************************/
-@color_searchbar_bg : rgba(32, 35, 39, 1);
+@color_searchbar_bg : rgba(29, 38, 60, 1);
@color_searchbar_default_text : rgba(255, 255, 255, 1); /* Search default text */
-@color_searchbar_input_field_bg : rgba(60, 65, 71, 1); /* W301 : 00_search_edit_field_bg.png */
-@color_searchbar_border : rgba(153, 153, 153, 1);
+@color_searchbar_input_field_bg : rgba(0, 0, 0, 1);
+@color_searchbar_border : rgba(63, 70, 88, 1);
+@color_searchbar_border_focus : rgba(58, 114, 255, 1);
+@color_searchbar_divider : rgba(59, 69, 98, 1);
+@color_searchbar_button_shadow0 : rgba(122, 125, 134, 1);
+@color_searchbar_button_shadow1 : rgba(34, 34, 34, 1);
/***************************************************************************
***************************************************************************/
@font_size_popup_info_style: 24 * @unit_base;
@color_popup_text_bg: rgba(42, 45, 48, 1); /* B061L1 : Popop info */
+@color_border_popup: rgba(98, 105, 127, 1);
/***************************************************************************
***************************************************************************/
@color_button_text_black: rgb(186, 186, 186);
+@color_button_test_shadow: 0px 1px rgb(17, 18, 20);
@color_button_EditText: rgb(249, 249, 249);
@color_button_EditTextPress: rgb(61, 61, 61);
-@color_button_text_normal: rgb(186, 186, 186);
+@color_button_text_normal: rgb(250, 250, 250);
@color_button_text_press: rgb(255, 255, 255);
@color_button_text_white: rgb(249, 249, 249);
-@color_button_normal: rgb(60, 64, 68);
+@color_button_normal: rgb(68, 70, 78);
@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51));
@color_button_normal_moz: -moz-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51));
@color_button_normal_o: -o-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51));
@color_button_normal_ms: -ms-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51));
-@color_button_press: rgb(51, 99, 157);
+@color_button_press: rgb(39, 54, 164);
@color_button_inner: rgb(60, 64, 68);
-@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(60, 64, 68), rgb(44, 46, 49));
-@color_button_inner_moz: -moz-linear-gradient(top, rgb(60, 64, 68), rgb(44, 46, 49));
-@color_button_inner_o: -o-linear-gradient(top, rgb(60, 64, 68), rgb(44, 46, 49));
-@color_button_inner_ms: -ms-linear-gradient(top, rgb(60, 64, 68), rgb(44, 46, 49));
+@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+@color_button_inner_moz: -moz-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+@color_button_inner_o: -o-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+@color_button_inner_ms: -ms-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
-@button_shadow_outer: 0 0 1px 1px rgba(83, 86, 90, 1);
-@button_shadow_inner: 0 0 1px 1px rgba(67, 70, 73, 1);;
+@button_shadow_outer: 1px 1px 2px rgba(19, 20, 23, 1);
+@button_shadow_inner: inset 0px 1px 1px rgba(122, 125, 134, 1);
+@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1);
@color_button_edit: rgb(201, 88, 88);
@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
@color_button_inner_border: rgba(0, 0, 0, 1);
+
.LESSbutton_box_style{
color: @color_button_text_normal;
}
}
.LESSbutton_down_style{
- background: @color_button_press;
+/* background: @color_button_press;*/
color: @color_button_text_press;
}
contextual popup
***************************************************************************/
@color_ctxpopup_text: rgb(255, 255, 255);
-@color_ctxpopup_background: rgb(68, 68, 68);
-@color_ctxpopup_border_left: rgb(45, 45, 45);
-@color_ctxpopup_border_right: rgb(91, 91, 91);
-@color_ctxpopup_border_top: rgb(91, 91, 91);
-@color_ctxpopup_border_bottom: rgb(45, 45, 45);
+@color_ctxpopup_background: rgb(28, 39, 60);
+@color_ctxpopup_border_left: rgb(98, 102, 117);
+@color_ctxpopup_border_right: rgb(98, 102, 117);
+@color_ctxpopup_border_top: rgb(98, 102, 117);
+@color_ctxpopup_border_bottom: rgb(29, 38, 60);
-@color_ctxbutton_press: rgb(42, 137, 194); /* B044 */
+@color_ctxbutton_press: rgb(43, 58, 175); /* B044 */
@color_ctxpopup_timepicker_text: rgba( 255, 255, 255, 0.7 );
@color_ctxpopup_timepicker_text_focus: rgba( 255, 255, 255, 1 );
/***************************************************************************
Scrollview
***************************************************************************/
-@color_scrollbar: rgb(57, 59, 65);
+@color_scrollbar: rgb(56, 58, 64);
@color_scrollview_indicator_start: rgb(186,186,186);
@color_scrollview_indicator_end: rgb(32,35,39);
@color_scrollbar_thumb_shadow: rgba(0, 0, 0, 50);
/***************************************************************************
Popup
***************************************************************************/
+@color_popup_bg: rgba(29, 38, 60, 1);
@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
-@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
-@color_popup_title_text: rgba(125, 169, 221, 1); /* B063L9 : Basic Style_title */
+@color_popup_title_bg: rgba(73, 87, 123, 1); /* popup_title_bg.png */
+@color_popup_title_text: rgba(250, 250, 250, 1); /* B063L9 : Basic Style_title */
-@color_popup_button_bg: rgba(42, 45, 48, 1);
+@color_popup_button_bg: rgba(150, 154, 156, 1);
@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
@color_popup_text_font: rgba(249, 249, 249, 1);
-@color_popup_buttonbg: rgb(84, 126, 153);
+@color_popup_buttonbg: rgb(238, 238, 238);
@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
-@color_popup_buttontext: rgb(249, 249, 249);
+@color_popup_buttontext: rgb(0, 0, 0);
@color_popup_buttonbg_over: rgb(94, 136, 163);
+@color_popup_button_border: rgb(125, 126, 130);
-@color_popup_buttonbg_press: rgb(67, 160, 217);
-@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
-@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_popup_buttonbg_press: rgb(39, 51, 159);
+@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(39, 51, 159)), to(rgb(42, 57, 172)));
+@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172));
+@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172));
+@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(39, 151, 159), rgb(42, 57, 172));
@color_popup_scroller_bg: rgba(248, 246, 239, 1);
@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */
@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */
@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */
-@font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */
+@font_size_popup_button_text: 18 * @unit_base; //1.0rem; /* 32px */
.LESSpopup_button_style{
/* background: @color_popup_buttonbg;
/***************************************************************************
Tickernoti
***************************************************************************/
-@color_ticker_bg: rgb(52, 52, 50); /* B061L5 */
-@color_ticker_text1: rgb(255, 255, 255);
+@color_ticker_bg: rgb(34, 34, 34); /* B061L5 */
+@color_ticker_text1: rgb(250, 250, 250);
@color_ticker_text2: rgb(255, 255, 255);
-@color_ticker_btn: rgb(64, 64, 64);
-@color_ticker_btn_border: rgb(50, 50, 50);
-
/***************************************************************************
Smallpopup
***************************************************************************/
-@color_smallpopup_bg: -webkit-linear-gradient(top, @color_bg 0%, rgb(153, 153, 153
-) 18%, rgb(68, 68, 68) 20%, rgb(68, 68, 68) 100%);
-@color_smallpopup_text: rgb(255, 255, 255);
+@color_smallpopup_bg: rgba(43, 58, 175, 1);
+@color_smallpopup_text: rgb(250, 250, 250);
/***************************************************************************
Slider
***************************************************************************/
-@color_slider_handle_text: rgb(255, 255, 255);
-@color_slider_popup_text: rgb(76, 81, 88); /* W0632 */
+@color_slider_handle_text: rgb(250, 250, 250);
+@color_slider_popup_text: rgb(76, 81, 88);
@color_slider_left_text: rgb(186, 186, 186);
@color_slider_right_text: rgb(186, 186, 186);
@color_slider_label_text: rgb(255, 255, 255);
/***************************************************************************
Progress
***************************************************************************/
-@color_progress_bar0: rgb(26, 27, 29);
-@color_progress_bar1: rgb(46, 47, 51);
-@color_progress_outline: rgb(57, 59, 63);
-@color_progress_border: rgb(32, 33, 35);
-@color_progress_value0: rgb(82, 136, 201);
-@color_progress_value1: rgb(54, 90, 113);
-@color_progress_shadow: rgb(60, 62, 67);
+@color_progress_bar0: rgb(51, 67, 83);
+@color_progress_bar1: transparent;
+@color_progress_border: rgb(49, 49, 56);
+@color_progress_value0: rgb(65, 91, 254);
+@color_progress_value1: rgb(98, 127, 203);
+@color_progress_shadow: rgb(116, 113, 127);
+@color_progress_value_shadow0: rgb(38, 53, 146);
+@color_progress_value_shadow1: rgb(98, 127, 203);
+@color_progress_shadow0: rgb(49, 49, 56);
+@color_progress_shadow1: rgb(116, 113, 127);
/***************************************************************************
Handler
***************************************************************************/
-@color_scrollview_handler_bg : rgba(198, 196, 190, 1);
-@color_scrollview_handler_shadow : rgb(0, 0, 0, 0.5);
+@color_scrollview_handler_bg : rgb(57, 59, 65);
+@color_scrollview_handler_shadow : rgb(0, 0, 0, 0.6);
/***************************************************************************
multimediaview
***************************************************************************/
-@color_multimediaview_bg : rgb(249, 249, 249);
-@color_multimediaview_control_bg : rgba(248, 246, 239, 0.5);
-@color_multimediaview_button_bg : rgb(248, 246, 239);
-@color_multimediaview_timestamp_text : rgb(74, 132, 201);
-@color_multimediaview_duration_text : rgb(128, 128, 128);
-@color_multimediaview_bar_gray : rgb(203, 200, 197);
-@color_multimediaview_bar_active : rgb(74, 132, 201);
-@color_multimediaview_bar_handle : rgb(249, 249, 249);
-@color_multimediaview_button_border : rgb(186, 185, 180);
+@color_multimediaview_bg : rgb(0, 0, 0);
+@color_multimediaview_control_bg : rgba(0, 0, 0, 0.8);
+@color_multimediaview_timestamp_text : rgb(104, 144, 255);
+@color_multimediaview_duration_text : rgb(110, 111, 118);
+@color_multimediaview_bar_gray : rgb(85, 88, 97);
+@color_multimediaview_bar_active : rgb(65, 91, 254);
+@color_multimediaview_bar_handle : rgb(60, 64, 68);
.LESSmultimediaview_bar_active_style{
background-color : @color_multimediaview_bar_active;
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(98, 137, 217)), to(rgb(41, 91, 152)));
- background-image : -moz-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
- background-image : -o-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
- background-image : -ms-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
+ box-shadow: 0px -1px 1px @color_progress_shadow inset;
}
.LESSmultimediaview_bar_handle_style{
background-color : @color_multimediaview_bar_handle;
- background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(230, 230, 230)));
- background-image : -moz-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
- background-image : -o-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
- background-image : -ms-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
+ background-image : -webkit-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+ background-image : -moz-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+ background-image : -o-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+ background-image : -ms-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72));
+ .LESSbox-shadow-line( @button_shadow_inner );
}
-
/***************************************************************************
tokentextarea
***************************************************************************/
-@color_tokentextarea_block_text : rgb(255, 255, 255);
-@color_tokentextarea_block_bg : rgb(118, 157, 204); /* W0711 : Contact button bg normal */
-@color_tokentextarea_press_bg : rgb(64, 147, 247); /* W0713 : Contact button bg press */
-@color_tokentextarea_input_text : #222222;
-@color_tokentextarea_label_text : rgb(128, 128, 128);
+@color_tokentextarea_bg : rgb(29, 38, 60);
+@color_tokentextarea_block_text : rgb(250, 250, 250); /* Contact button text */
+@color_tokentextarea_block_bg : rgb(82, 87, 103); /* W0711 : Contact button bg normal */
+@color_tokentextarea_press_bg : rgb(43, 58, 175); /* W0713 : Contact button bg press */
+@color_tokentextarea_block_border : rgb(108, 116, 131);
+@color_tokentextarea_press_border : rgb(89, 94, 106);
+@color_tokentextarea_input_text : rgb(250, 250, 250);
+@color_tokentextarea_label_text : rgb(250, 250, 250); /* Text Contact style */
/***************************************************************************
Splitview
***************************************************************************/
-@color_splitview_spliter_bar : rgb(52, 55, 57); /* W131 */
-@color_splitview_spliter_bar_active : rgb(59, 115, 182); /* W132 */
+@color_splitview_spliter_bar : rgb(52, 55, 57); /* W131 */
+@color_splitview_spliter_bar_active : rgb(43, 58, 175); /* W132 */
@color_splitview_spliter_border : rgb(58, 62, 67);
@color_bar_title_text : rgba(59, 115, 182, 1); /* B042 : title text */
@color_bar_title_button_text : rgba(58, 58, 58, 1); /* B052L4 : Title text button */
@color_bar_title_button_text_press : rgba(59, 115, 182, 1); /* B052L5 : Title text button press */
+@color_bar_title_shadow : rgba(0, 0, 0, 0.75);
+
@color_bar_btn_press : rgba(64, 147, 247, 0.1); /* B052L1P : Title text button press bg */
@color_bar_divider_line : rgba(178, 177, 174, 1); /* 00_divider_line.9.png */
@color_bar_naviframe_bg : rgba(248, 246, 239, 1);
+@color_bar_tabbar_bg : rgba(248, 246, 239, 1);
+@color_bar_toolbar_bg : rgba(248, 246, 239, 1); /* 00_toolbar_bg.png */
/***************************************************************************
Tabbar
***************************************************************************/
@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(210,210,200,1) 0%, rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
@color_tabbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P */
+@color_tabbar_border_active : rgba(93, 131, 255, 1);
@color_tabbar_btn_normal : rgba(153, 153, 153, 1); /* B052L6 */
+@color_tabbar_footer_btn_press : rgba(39, 53, 163, 1);
/***************************************************************************
List
@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 */
@color_list_divider_line : rgba(59, 115, 182, 1); /* W021L2 */
@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L3 */
+@color_list_divider_bg_press : rgba(43, 58, 175, 1);
+@color_list_divider_text_press : rgba(250, 250, 250, 1);
@color_list_swipe_bg : rgba(237, 235, 228, 1); /* B0212 */
@color_list_dialogue_bg : rgba(239, 237, 229, 1);
@color_dialogue_main_text: rgba(59, 115, 182, 1);
@color_dialogue_border_right: rgba(142, 154, 163, 1);
+@color_dialogue_divider_bg : rgba(248, 246, 239, 1);
@color_list_expanded_bg : rgba(220, 218, 211, 1);
@color_list_editfield : rgba(0, 0, 0, 1); /* F011L1 */
+@color_editfield_focus_border : rgba(58, 114, 255, 1);
+
+@color_checklist_btn_bg : rgba(248, 246, 239, 1);
@color_list_bubble_sent_text: rgb(0, 0, 0); /* W051 */
@color_list_bubble_receive_text: rgb(0, 0, 0); /* W051 */
@list-font-size-main: 22 * @unit_base;
@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group
-@list-smallicon-size: 17 * @unit_base;
+@list-smallicon-size: 22 * @unit_base;
@list-li-padding-horizontal: 8 * @unit_base;
@list-bigicon-size2: 72 * @unit_base;
@color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */
@color_fastscroll_popup_border: rgba(100, 100, 100, 0.5);
-
+@color_fastscroll_default_border: rgba(64, 64, 64, 1);
/***************************************************************************
SearchBar(forms.textinput)
@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
@color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
@color_searchbar_border : rgba(153, 153, 153, 1);
+@color_searchbar_border_focus : rgba(153, 153, 153, 1);
+@color_searchbar_divider : rgba(59, 69, 98, 1);
+@color_searchbar_button_shadow0 : rgba(122, 125, 134, 1);
+@color_searchbar_button_shadow1 : rgba(34, 34, 34, 1);
/***************************************************************************
***************************************************************************/
@font_size_popup_info_style: 24 * @unit_base;
@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 : Popop info */
+@color_border_popup: rgba(98, 105, 127, 1);
/***************************************************************************
***************************************************************************/
@color_button_text_black: rgb(0, 0, 0);
+@color_button_test_shadow: 0px 1px rgb(17, 18, 20);
@color_button_EditText: rgb(249, 249, 249);
@color_button_EditTextPress: rgb(61, 61, 61);
@button_shadow_outer: 0 0 1px 1px rgba(255, 255, 255, 1);
@button_shadow_inner: none;
+@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1);
@color_button_edit: rgb(201, 88, 88);
@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
/***************************************************************************
Popup
***************************************************************************/
+@color_popup_bg: rgba(29, 38, 60, 1);
@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
@color_popup_title_text: rgba(59, 115, 182, 1); /* B063L9 : Basic Style_title */
@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
@color_popup_buttontext: rgb(249, 249, 249);
@color_popup_buttonbg_over: rgb(94, 136, 163);
+@color_popup_button_border: rgb(125, 126, 130);
@color_popup_buttonbg_press: rgb(67, 160, 217);
@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_ticker_bg: rgb(68, 68, 68);
@color_ticker_text1: rgb(255, 255, 255);
@color_ticker_text2: rgb(255, 255, 255);
-@color_ticker_btn: rgb(64, 64, 64);
-@color_ticker_btn_border: rgb(50, 50, 50);
-
/***************************************************************************
Smallpopup
@color_progress_value0: rgb(54, 119, 195);
@color_progress_value1: rgb(150, 184, 224);
@color_progress_shadow: rgb(104, 102, 101);
+@color_progress_value_shadow0: rgb(38, 53, 146);
+@color_progress_value_shadow1: rgb(98, 127, 203);
+@color_progress_shadow0: rgb(49, 49, 56);
+@color_progress_shadow1: rgb(116, 113, 127);
/***************************************************************************
/***************************************************************************
tokentextarea
***************************************************************************/
+@color_tokentextarea_bg : @color_bg;
@color_tokentextarea_block_text : rgb(255, 255, 255);
@color_tokentextarea_block_bg : rgb(118, 157, 204); /* W0711 : Contact button bg normal */
@color_tokentextarea_press_bg : rgb(64, 147, 247); /* W0713 : Contact button bg press */
+@color_tokentextarea_block_border : rgb(108, 116, 131);
+@color_tokentextarea_press_border : rgb(89, 94, 106);
@color_tokentextarea_input_text : #222222;
@color_tokentextarea_label_text : rgb(102, 102, 102);
projects / framework / web / web-ui-fw.git / commitdiff
