//
// WebView resource file
//

#include "resource.h"

/*****************************************************
 * Element resources
 *****************************************************/

<style resid=webview>

    element [id=atom(listview)]
    {
        contentalign: middlecenter;
        fontsize: 24pt;
        fontface: "trebuchet MS bold";
        foreground: gainsboro;
    }

</style>

<style resid=musicsectionss>

    element
    {
        background: argb(0,0,0,0);
    }

    expando
    {
        fontface: "tahoma";
        fontsize: 8pt;
        margin: rect(0,5,0,0);
        animation: rectanglev | s | fast;
    }

    button
    {
        background: rcbmp(IDB_HEADERMAIN,6,#FF00FF,0,0,1,0);
        borderthickness: rect(2,2,2,0);
        foreground: white;
        fontweight: bold;
        padding: rect(30,2,2,2);
        cursor: hand;
    }

    button [keyfocused]
    {
        contentalign: focusrect;
    }

    element [id=atom(title)]
    {
        contentalign: middleleft;
        padding: rect(0,0,4,0);
    }

    element [id=atom(title)][mousefocused]
    {
        foreground: rgb(66,142,255);
    }

    element [id=atom(arrow)]
    {
        content: rcbmp(IDB_DOWNMAIN,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][selected]
    {
        content: rcbmp(IDB_UPMAIN,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][mousefocused]
    {
        content: rcbmp(IDB_DOWNHOTMAIN,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][selected][mousefocused]
    {
        content: rcbmp(IDB_UPHOTMAIN,0,0,19rp,19rp,1,0);
    }

    clipper
    {
        alpha: 0;
        background: argb(0,0,0,0);
        animation: alpha | sizev | s | fast;
    }

    clipper [selected]
    {
        alpha: 255;
    }

    element [id=atom(watermark)]
    {
        background: rgb(239, 243, 255);
        content: rcbmp(IDB_MUSICWM,0,0,52rp,58rp,1,0);
        contentalign: bottomright;
        animation: rectanglev | s | fast;
    }

    element [id=atom(tasklist)]
    {
        borderthickness: rect(1,0,1,1);
        bordercolor: white;
        padding: rect(15,10,15,15);
    }

</style>

<style resid=mainsectiontaskss>

    button
    {
        background: argb(0,0,0,0);
        foreground: rgb(33,93,198);   
        contentalign: wrapleft;
        fontweight: bold; 
        background: argb(0,0,0,0);
        margin: rect(0,4,0,0);
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        contentalign: focusrect;
    }

    element
    {
        background: argb(0,0,0,0);
    }

    element [id=atom(title)]
    {
        contentalign: wrapleft;
        padding: rect(6,0,4,0);
    }

    element [id=atom(title)][keyfocused]
    {
        foreground: midnightblue;
    }

    element [id=atom(title)][mousefocused]
    {
        foreground: rgb(66,142,255);
    }

</style>

//
// Section style sheet
//

<style resid=sectionss>

    expando
    {
        fontface: "tahoma";
        fontsize: 8pt;
        margin: rect(0,15,0,0);
        animation: rectanglev | s | fast;
    }

    button
    {
        background: rcbmp(IDB_HEADERSECTION,6,#FF00FF,0,0,1,0);
        borderthickness: rect(2,2,2,0);
        foreground: rgb(33,93,198);
        fontweight: bold;
        padding: rect(10,2,2,2);
        bordercolor: rgb(198, 211,247);
        cursor: hand;
    }

    button [keyfocused]
    {
        contentalign: focusrect;
    }

    element
    {
        background: argb(0,0,0,0);
    }

    element [id=atom(title)]
    {
        contentalign: middleleft;
    }

    element [id=atom(title)][keyfocused]
    {
        foreground: midnightblue;
    }

    element [id=atom(title)][mousefocused]
    {
        foreground: rgb(66,142,255);
    }

    element [id=atom(arrow)]
    {
        content: rcbmp(IDB_DOWN,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][selected]
    {
        content: rcbmp(IDB_UP,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][mousefocused]
    {
        content: rcbmp(IDB_DOWNHOT,0,0,19rp,19rp,1,0);
    }

    element [id=atom(arrow)][selected][mousefocused]
    {
        content: rcbmp(IDB_UPHOT,0,0,19rp,19rp,1,0);
    }

    clipper
    {
        alpha: 0;
        background: argb(0,0,0,0);
        animation: alpha | sizev | s | fast;
    }

    clipper [selected]
    {
        alpha: 255;
    }

    element [id=atom(tasklist)]
    {
        background: rgb(214,223, 247);
        borderthickness: rect(1,0,1,1);
        bordercolor: white;
        padding: rect(15,10,15,15);
        animation: rectanglev | s | fast;
    }

</style>

<style resid=sectiontaskss>

    button
    {
        contentalign: wrapleft;
        foreground: rgb(33,93,198);   
        background: argb(0,0,0,0);
        margin: rect(0,4,0,0);
        cursor: hand;
    }

    button [mousefocused]
    {
        fontstyle: underline;
    }

    button [keyfocused]
    {
        contentalign: focusrect;
    }

    element
    {
        background: argb(0,0,0,0);
    }

    element [id=atom(title)]
    {
        contentalign: wrapleft;
        padding: rect(6,0,4,0);
    }

    element [id=atom(title)][keyfocused]
    {
        foreground: midnightblue;
    }

    element [id=atom(title)][mousefocused]
    {
        foreground: rgb(66,142,255);
    }

</style>

<style resid=taskpane>

    element [id=atom(sectionlist)]
    {
        background: gradient(argb(0,99,117,214), argb(0,123,162,231), 0);
        padding: rect(12,5,12,12);
    }

    scrollbar [vertical]
    {
        layoutpos: nineright;
        background: rgb(115,146,231);
    }

    viewer
    {
        layoutpos: nineclient;
    }

    thumb
    {
        background: rcbmp(IDB_SBTHUMBV,6,#FF00FF,0,0,1,0);
        borderthickness: rect(3,3,3,3);
        content: rcbmp(IDB_SBGRIPPER,3,#FF00FF,8rp,8rp,1,0);
        contentalign: middlecenter;
    }

    repeatbutton [id=atom(lineup)]
    {
        content: rcbmp(IDB_SBLINEUPV,3,-1,17rp,17rp,0,0);
    }

    repeatbutton [id=atom(linedown)]
    {
        content: rcbmp(IDB_SBLINEDOWNV,3,-1,17rp,17rp,0,0);
    }

</style>


//
// Web View frame
//

// Frame ('webview' style sheet)
<hwndelement resid=webview sheet=styleref(webview) layout=borderlayout()>

    <scrollviewer sheet=styleref(taskpane) layoutpos=left xscrollable=false width=225rp>

        <element id=atom(sectionlist) layout=verticalflowlayout(0,0,3)/>

    </scrollviewer>

    <element layoutpos=client id=atom(listview)>"[Future Home of ListView]"</element>

</hwndelement>


//
// Main Section
//

<expando resid=mainsection layout=borderlayout()>
        
    <element layoutpos=top layout=filllayout()>

        <button id=atom(header) layoutpos=bottom layout=borderlayout()>
            <element id=atom(title) layoutpos=client/>
            <element id=atom(arrow) layoutpos=right/>
        </button>

        <element id=atom(icon) layoutpos=left/>

    </element>

    <clipper layoutpos=top>
        <element id=atom(watermark) layoutpos=top layout=filllayout()>
            <element id=atom(tasklist) layout=verticalflowlayout(0,0,0)/>
        </element>
    </clipper>

</expando>


//
// Standard Section
//

<expando resid=section layout=borderlayout()>
    
    <button id=atom(header) layoutpos=top layout=borderlayout()>

        <element id=atom(title) layoutpos=client/>
        <element id=atom(arrow) layoutpos=right/>

    </button>

    <clipper layoutpos=top>
        <element id=atom(tasklist) layout=verticalflowlayout(0,0,0)/>
    </clipper>

</expando>


//
// Section item
//

<button resid=sectiontask layout=borderlayout()>

    <element id=atom(icon) layoutpos=left/>
    <element id=atom(title) layoutpos=left/>

</button>
