
# SVG background


main_panel = """
  <svg width="200" height="20">
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0"
          spreadMethod="pad">
        <stop offset="0%" stop-color="white" stop-opacity="0"/>
        <stop offset="40%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="60%" stop-color="white" stop-opacity="0.3"/>
        <stop offset="80%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
      </linearGradient>
    </defs>
    <g id="g" opacity="1">
      <rect id="bg" x="1" y="-10" rx="10" ry="10" width="198" height="40"
          fill="#aaaaaa" stroke="black" stroke-width="2"/>
      <rect id="grad" x="1" y="-10" rx="10" ry="10" width="198" height="40"
          fill="url(#gradient)"/>
    </g>
  </svg>
"""

top_panel = """
  <svg width="200" height="30">
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0"
          spreadMethod="pad">
        <stop offset="0%" stop-color="white" stop-opacity="0"/>
        <stop offset="40%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="60%" stop-color="white" stop-opacity="0.3"/>
        <stop offset="80%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
      </linearGradient>
    </defs>
    <g id="g" opacity="1">
      <rect id="bg" x="1" y="1" rx="10" ry="10" width="198" height="28"
          fill="#aaaaaa" stroke="black" stroke-width="2"/>
      <rect id="grad" x="1" y="1" rx="10" ry="10" width="198" height="28"
          fill="url(#gradient)"/>
    </g>
  </svg>
"""

bottom_panel = """
  <svg width="200" height="12">
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0"
          spreadMethod="pad">
        <stop offset="0%" stop-color="white" stop-opacity="0"/>
        <stop offset="40%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="60%" stop-color="white" stop-opacity="0.3"/>
        <stop offset="80%" stop-color="white" stop-opacity="0.2"/>
        <stop offset="100%" stop-color="white" stop-opacity="0.3"/>
      </linearGradient>
    </defs>
    <g id="g" opacity="1">
      <rect id="bg" x="1" y="-10" rx="10" ry="10" width="198" height="21"
          fill="#aaaaaa" stroke="black" stroke-width="2"/>
      <rect id="grad" x="1" y="-10" rx="10" ry="10" width="198" height="21"
          fill="url(#gradient)" stroke="black" stroke-width="2"/>
    </g>
  </svg>
"""

closed_arrow = """
  <svg width="50" height="50">

  <defs>
    <linearGradient id="button" x1="0%" y1="0%" x2="0%" y2="100%"
        spreadMethod="pad">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.7"/>
      <stop offset="50%" style="stop-color:#ffffff;stop-opacity:0.0"/>
      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.3"/>
    </linearGradient>
  </defs>
  <g>
    <path id="arrow" fill="white" stroke="black" stroke-width="2"
        d="M 2,2
           L 48,25
           L 2,48
           Z"/>
  </g>

</svg>
"""

open_arrow = """
  <svg width="50" height="50">

  <defs>
    <linearGradient id="button" x1="0%" y1="0%" x2="0%" y2="100%"
        spreadMethod="pad">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.7"/>
      <stop offset="50%" style="stop-color:#ffffff;stop-opacity:0.0"/>
      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.3"/>
    </linearGradient>
  </defs>
  <g>
    <path id="arrow" fill="white" stroke="black" stroke-width="2"
        d="M 2,2
           L 48,2
           L 25,48
           Z"/>
  </g>

</svg>
"""

convert_button = """
  <svg width="40" height="20">

  <defs>
    <linearGradient id="button_off" x1="0%" y1="100%" x2="0%" y2="0%"
        spreadMethod="pad">
      <stop offset="0%" stop-color="#888888"/>
      <stop offset="70%" stop-color="#dddddd"/>
      <stop offset="100%" stop-color="#bbbbbb"/>
    </linearGradient>
    <linearGradient id="button_on" x1="0%" y1="100%" x2="0%" y2="0%"
        spreadMethod="pad">
      <stop offset="0%" stop-color="#555555"/>
      <stop offset="30%" stop-color="#aaaaaa"/>
      <stop offset="100%" stop-color="#666666"/>
    </linearGradient>
  </defs>
  <g>
    <rect id="bg" x="1" y="1" rx="5" ry="5" width="38" height="18"
        fill="url(#button_off)" stroke="black" stroke-width="1"/>
    <text x="11" y="15" fill="black" stroke="black" stroke-width="1"
        font-size="12" font-family="sans-serif">
        GO
    </text>
  </g>
</svg>
"""


format_bg = """
  <svg width="32" height="20">

  <defs>
    <linearGradient id="button_off" x1="0%" y1="100%" x2="0%" y2="0%"
        spreadMethod="pad">
      <stop offset="0%" stop-color="#888888"/>
      <stop offset="70%" stop-color="#dddddd"/>
      <stop offset="100%" stop-color="#bbbbbb"/>
    </linearGradient>
    <linearGradient id="button_on" x1="0%" y1="100%" x2="0%" y2="0%"
        spreadMethod="pad">
      <stop offset="0%" stop-color="#555555"/>
      <stop offset="30%" stop-color="#aaaaaa"/>
      <stop offset="100%" stop-color="#666666"/>
    </linearGradient>
  </defs>
  <g>
    <rect id="bg" x="1" y="1" rx="5" ry="5" width="30" height="18"
        fill="url(#button_off)" stroke="black" stroke-width="1"/>
  </g>
</svg>
"""