# Scene.yaml
# Built-in layouts for the Scene widget.
# This file is part of Reactor. Copyright (c) 2020-2024 Patrick H. Rigney, All Rights Reserved.
---
version: 24329
revision: 1
defaultlayout: default

layouts:

  default:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind="{{text-expr}};data('title');data('text');#[text]"></h1>
      </div>
    styles: |
      $ .scenecontrol { }
      $.active { background-color: $color4 !important; color: color4-text; }
      $.update-pending { background-color: var(--colorUpdatePending) !important; color: var(--color1-text); }
    default_action: script.run

  compact:
    content: |
      <h1 class="widget-title" data-bind='data(&#34;title&#34;);entity.name;#[scene]'></h1>
    styles: |
      $ .textcontrol { }
      $.active { background-color: color4 !important; color: color4-text; }
      $.update-pending { background-color: var(--colorUpdatePending) !important; color: var(--color1-text); }
    default_action: script.run

  # Compact text with a Bootstrap icon
  bi-icon:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind="{{text-expr}};data('title');data('text');#[text]"></h1>
      </div>
      <div class="widget-body">
          <div><i data-bind="<class>{{icon-expr}};data('icon');#bi-play-circle" class="bi"></i></div>
      </div>
    styles: |
      $ i.bi { font-size: 3rem; }
      $ .textcontrol { }
      $.active { background-color: color4 !important; color: color4-text; }
      $.update-pending { background-color: var(--colorUpdatePending) !important; color: var(--color1-text); }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    default_action: script.run
