@webwriter/branching-scenario/src/components/node-detail-view/node-detail-view.styles.ts

Create adaptable learning experiences by authoring a gamebook, where you present the student with choices on how to continue.

import { css } from "lit";

export default css`
  :host {
    box-sizing: border-box;
    height: fit-content;

    background-color: #fbfbfb;
    width: 100%;
  }

  :host * {
    box-sizing: border-box;
  }

  /* .selected-node {
  } */

  .no-node-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    height: 100%;
    background-color: #fbfbfb;
    color: darkgray;
  }

  .node-not-found {
    background-color: var(--sl-color-danger-50);
    color: var(--sl-color-danger-800);
    text-align: center;
  }

  .node-not-found sl-icon {
    width: 48px;
    height: 48px;
  }

  .node-not-found sl-button::part(base):hover {
    background-color: var(--sl-color-danger-100);
    border-color: var(--sl-color-danger-300);
    color: var(--sl-color-danger-800);
  }

  .node-not-found sl-button::part(base):active {
    background-color: var(--sl-color-danger-200);
    border-color: var(--sl-color-danger-400);
    color: var(--sl-color-danger-700);
  }

  .title-bar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-items: center;

    box-sizing: border-box;
    width: 100%;
    height: 150px;

    gap: 15px;
    padding: 15px;

    background-color: white;
    border-bottom: 1px solid #d4d4d8;
    /* 
    border-top-left-radius: 8px;
    border-top-right-radius: 8px; */
  }

  .inputOutputControls {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-items: center;
  }

  node-connection-list {
    height: 100%; /* Adjust as needed */
    flex: 1; /* This makes the node-connection-list elements take up remaining space evenly */
  }

  .div-title {
    display: flex;
    flex-direction: column;
  }

  .subtitle {
    font-size: 12px;
    color: gray;
    margin: 0px;
    padding: 0px;
  }

  .div-icon-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 65px; /* Remove the fixed height */
    aspect-ratio: 1;
    background-color: #9762b4;
  }

  .div-icon-page {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 65px; /* Remove the fixed height */
    aspect-ratio: 1;
    background-color: #3077ba;
  }

  .div-icon-branch {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 65px; /* Remove the fixed height */
    aspect-ratio: 1;
    background-color: #05ae9e;
  }

  .div-icon-popup sl-icon,
  .div-icon-page sl-icon,
  .div-icon-branch sl-icon {
    width: 42px;
    height: 42px;
    color: white;
  }
`;