/*
qml-mapping defines the QML style and delegate QML documents that are used as base
when building up the Rule components.

Syntax:
qml-mapping(selector, style-qml-type, delegate-qml-type)
where
   - selector is the tag used in the theme
   - style-qml-type is the name of the QML document defining the style properties
   - delegate-qml-type is the name of the QML document defining the widget delegate.
If no style is given, the theme engine will use QtObject for style and will declare all
properties typed as variant.
*/
@qml-import(qmltheme 0.1, system:/Ambiance);
@qml-mapping(.button, , ButtonDelegate);
@qml-mapping(.toolbar, , ToolbarDelegate);
@qml-mapping(.toolbar-button, , ToolbarButtonDelegate);
@qml-mapping(.dark-button, , ButtonDelegate);
@qml-mapping(.transparent-button, , TransparentButtonDelegate);
@qml-mapping(.checkbox, , CheckBoxDelegate);
@qml-mapping(.switch, , SwitchDelegate);
@qml-mapping(.new-tabs, , NewTabsDelegate);
@qml-mapping(.custom-button, , ButtonDelegate);
@qml-mapping(.scrollbar, , ScrollbarDelegate);
@qml-mapping (.popover .foreground, , PopoverForegroundDelegate);
@qml-mapping (.sheet .foreground, , SheetForegroundDelegate);
@qml-mapping (.dialog .foreground, , DialogForegroundDelegate);
@qml-mapping (.pointer, , PointerDelegate);
@qml-mapping(.textfield, , TextAreaDelegate);
@qml-mapping(.textarea, , TextAreaDelegate);
@qml-mapping(.mainview, , MainViewDelegate);
@qml-mapping(.header, , HeaderDelegate);
/*
qml-import defines the QML modules defining the style rules and delegates defined in
a qml-mapping.

Syntax:
qml-import(<import-statement>[,<import-path>])
where
   - import-statement is the module to be imported with the syntax defined in QML
   - import-path is an optional parameter containing the path to be added to the QML
     engine's import path list

Examples:
    @qml-import(Qt.labs.shaders 1.0) translates into import Qt.labs.shaders 1.0
    @qml-import("demos", current:/modules) translates into import "demos" and will add the
      modules folder that is relative to the current path to the QML engine import paths
    @qml-import("Utils.js" as Utility) translates into import "Utils.js" as Utility
*/

@qml-mapping(.activityindicator, , ActivityIndicatorDelegate);
.activityindicator {
    source: url(artwork/spinner.png);
}

.UbuntuShape-radius-small {
    gradientColor: Qt.rgba(0.95, 0.95, 0.91, 0.4);
    maskSource: url("artwork/ubuntushape_small_radius_shape.sci");
    borderSource: url("artwork/ubuntushape_small_radius_idle.sci");
    borderPressed: url("artwork/ubuntushape_small_radius_pressed.sci");
}

.UbuntuShape-radius-medium {
    gradientColor: Qt.rgba(0.95, 0.95, 0.91, 0.4);
    maskSource: url("artwork/ubuntushape_medium_radius_shape.sci");
    borderSource: url("artwork/ubuntushape_medium_radius_idle.sci");
    borderPressed: url("artwork/ubuntushape_medium_radius_pressed.sci");
}

.button, .custom-button {
    color: "#cccccc";
    borderSource: url("artwork/ubuntushape_small_radius_idle.sci");
    borderPressed: url("artwork/ubuntushape_small_radius_pressed.sci");
}

.toolbar {
    color: "white";
    barOpacity: 0.9;
    triggerSize: units.gu(2);
    hintSize: units.gu(2);
}

.toolbar-button {
    iconWidth: units.gu(2);
    iconHeight: units.gu(2);
}

.toolbar-button .label {
    fontSize: "x-small";
    color: "#888888";
}

.transparent-button {
}

.checkbox {
    checkedColor: "#DD4814";
    uncheckedColor: Qt.rgba(0.0, 0.0, 0.0, 0.1);
    checkMarkSource: url("artwork/CheckMark.png");
    backgroundColorAnimation: ColorAnimation { duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing };
}

.switch {
    crossSource: url("artwork/Cross.png");
    checkMarkSource: url("artwork/CheckMark.png");
    selectedImageOpacity: 1.0;
    unselectedImageOpacity: 0.4;
    thumbSpacing: units.dp(2);
    checkedThumbColor: "#DD4814";
    uncheckedThumbColor: "#bbbbbb";
    thumbColorAnimation: ColorAnimation { duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing };
    moveThumbAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
    backgroundColor: Qt.rgba(0.78, 0.78, 0.78, 0.1);
}

.new-tabs {
    swipeToSwitchTabs: false;
    headerFontSize: "x-large";
    headerFontWeight: Font.Light;
    headerTextSelectedOpacity: 0.9;
    headerTextSelectedColor: "#333333";
    headerTextOpacity: 0.4;
    headerTextColor: "#333333";
    headerTextLeftMargin: units.gu(2);
    headerTextRightMargin: units.gu(2);
    headerTextBottomMargin: units.gu(2);
    indicatorImageSource: url("artwork/chevron.png");
    tabBarHeight: units.gu(7.5);
    deactivateTime: 3000;
    buttonPositioningVelocity: 1.0;
    headerTextFadeDuration: 350;
}

.mainview {
    backgroundColor: "#ededf0";
    backgroundSource: url("artwork/background_paper.png");
}

.header {
    contentHeight: units.gu(7.5);
    backgroundSource: url("artwork/background_paper.png");
    backgroundColor: "#ededf0";
    separatorSource: url("artwork/PageHeaderBaseDividerLight.sci");
    separatorBottomSource: url("artwork/PageHeaderBaseDividerBottom.png");
    textLeftMargin: units.gu(2);
    fontWeight: Font.Light;
    fontSize: "x-large";
    textColor: Qt.rgba(0.51, 0.51, 0.51, 0.9);
}

.dark-button {
    color: "#cccccc";
    borderSource: url("artwork/ubuntushape_small_radius_idle.sci");
    borderPressed: url("artwork/ubuntushape_small_radius_pressed.sci");
}

/*
    Popups (Popover, Dialog, Sheet)
*/
.pointer {
    source: (item.direction === "left") ? url(artwork/LeftArrow.png) :
                (item.direction === "right") ? url(artwork/RightArrow.png) :
                (item.direction === "up") ? url(artwork/UpArrow.png) : url(artwork/DownArrow.png);
    longAxis: units.gu(2);
    shortAxis: units.gu(1);
}

.popover {
    edgeMargins: units.gu(2);
    callerMargin: units.gu(1);
    fadingAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
}

.popover .foreground {
    minimumWidth: units.gu(40);
    color: "white";
    radius: "medium";
}

.popover .pointer {
    opacity: 1.0;
}

.sheet {
    fadingAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
}
.sheet .foreground {
    headerColor: "darkgray";
    headerHeight: units.gu(8);
    backgroundColor: "lightgray";
    buttonContainerWidth: units.gu(14);
}

.dialog {
    edgeMargins: units.gu(2);
    callerMargin: units.gu(1);
    fadingAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
}
.dialog .background {
    dim: true;
    color: item.width > units.gu(60) ? Qt.rgba(0, 0, 0, 0.6) : Qt.rgba(0, 0, 0, 0.9);
    opacity: 1.0;
}
.dialog .foreground {
    minimumWidth: units.gu(38);
    minimumHeight: units.gu(32);
    margins: units.gu(4);
    itemSpacing: units.gu(2);
    radius: "medium";
    visible: item.dismissArea.width > units.gu(60);
    color: visible ? Qt.rgba(0, 0, 0, 0.7) : "transparent";
}
.dialog .foreground .title {
    fontSize: "large";
    color: Qt.rgba(1, 1, 1, 0.9);
    style: Text.Normal;
}

.dialog .foreground .label {
    fontSize: "medium";
    color: Qt.rgba(1, 1, 1, 0.6);
    wrapMode: Text.Wrap;
}

/*
    Label does not have any QML mapping, therefore the engine will not assign any
    style rule or delegate to the Rule object. Instead a QtObject based style rule
    will be used with all declared properties as variant.
*/
.label {
    fontSize: "medium";
    color: "#757373";
}

/* Note: the following could be done using
.row-label.title {
    fontSize: "medium";
}

*/
.row-label {
    fontSize: "medium";
    color: "#757373";
    styleColor: "white";
    style: Text.Raised;
}

.scrollbar {
    interactive: false;
    overlay: true;
    overlayOpacityWhenShown: 0.6;
    overlayOpacityWhenHidden: 0.0;

    scrollbarFadeInAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
    scrollbarFadeOutPause: 300;
    scrollbarFadeOutAnimation: UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration };

    sliderAnimation: UbuntuNumberAnimation {};
    thumbConnectorFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
    thumbFading: UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration };
    backwardThumbReleased : (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarTopIdle.png") : url("artwork/ScrollbarLeftIdle.png");
    backwardThumbPressed: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarTopPressed.png") : url("artwork/ScrollbarLeftPressed.png");
    forwardThumbReleased: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarBottomIdle.png") : url("artwork/ScrollbarRightIdle.png");
    forwardThumbPressed: (item.align === Qt.AlignLeading || item.align === Qt.AlignTrailing) ? url("artwork/ScrollbarBottomPressed.png") : url("artwork/ScrollbarRightPressed.png");
    scrollAreaThickness: units.gu(0.5);
    sliderRadius: units.gu(0.5);
    thumbConnectorMargin: units.dp(3);
    sliderColor: Qt.rgba(0.5, 0.5, 0.5, 0.7);
    thumbConnectorColor: "white";
}

/* TextField default theme
   Clear button, hint and cursor are declared in atomic form (not hierarchically) so they can be reused.
*/

/* clear button */
.textfield .clear-button {
    iconSource: url("artwork/clear.svg");
}

/* hint */
.textfield .label {
   color: Qt.rgba(0.5, 0.5, 0.5, 0.5);
   fontSize: "medium";
   elide: Text.ElideRight;
}

/* cursor */
@qml-mapping(.cursor, , EditorCursorDelegate);
@qml-import(Ubuntu.Components 0.1);
.cursor {
   color: Qt.rgba(0.4, 0.4, 0.4, 1.0);
   opacity: 1.0;
   width: units.dp(1);
   blinking: true;
   blinkTimeoutShown: 800;
   blinkTimeoutHidden: 400;
}

/*
  TextArea styling
*/
.textfield, .textarea{
    radius: "small";
    backgroundColor: (item.focus || item.highlighted) ? "white" : Qt.rgba(0, 0, 0, 0.1);
    errorColor: "red";
    backgroundOpacity: item.enabled ? 1.0 : 0.1;
    color: (item.enabled) ? "#757373"  : "darkgray";
    selectedTextColor: "#F3F3E7";
    selectionColor: "#19B6EE";
    font: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")});
    frameSpacing: units.gu(1);
    overlaySpacing: units.gu(0.5);
    passwordCharacter: "\u2022";
}
/* hint */
.textarea .label {
   color: Qt.rgba(0.5, 0.5, 0.5, 0.5);
   fontSize: "medium";
   elide: Text.ElideRight;
   wrapMode: Text.WordWrap;
}
/* selection cursors */
@qml-mapping (.left-pin, EditorCursorStyle, SelectionCursorDelegate);
@qml-mapping (.right-pin, EditorCursorStyle, SelectionCursorDelegate);
.textarea .left-pin, .textarea .right-pin {
    color: Qt.rgba(0.4, 0.4, 0.4, 1.0);
    opacity: 1.0;
    width: units.dp(1);
    blinking: false;
    pinSize: units.gu(1.2);
    pinSensingOffset: units.dp(4);
    pinColor: "blue";
}

/* scrollbars */
.textarea .scrollbar {
   interactive: false;
}

/* sliders */
@qml-mapping(.slider, , SliderDelegate);
.slider {
    backgroundColor: "#c0c0c0";
    backgroundOpacity: 0.1;
    thumbColor: "#bbbbbb";
    thumbOpacity: 1.0;
    thumbSpacing: units.dp(2);
}
.slider .label {
    fontSize: "medium";
    color: "white";
    font: Qt.font({family: "Ubuntu", weight: Font.Bold, pixelSize: FontUtils.sizeToPixels(fontSize)});
}
