Harmoware-VIS css リファレンス

#前提
Harmoware-VISについては別記事
「Harmoware-VISの紹介」
「Harmoware-VIS はじめに」
「Harmoware-VIS APIリファレンス」
「Harmoware-VIS Layersリファレンス」
「Harmoware-VIS Control component リファレンス」
をご覧ください。
#css リファレンス
Harmoware-VIS の css のリファレンスを解説します。

#インポート

Examples.js

import 'harmoware-vis/scss/harmoware.scss';

##SCSSファイル

harmoware.scss

body {
  margin: 0px;
  padding: 0;
  overflow: hidden;
  color: white;
  background: black;
  a {
    color: white;
    text-decoration: none;
  }
  a:hover {
    color: white;
    text-decoration: underline;
  }
}

div.harmovis_controller {
  font-size: 10pt; 
  z-index: 100; 
  position: fixed; 
  top: 10px; 
  right: 20px;
  ul.flex_list {
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    li.flex_row {
      padding: 5px 0px; 
      display: flex;
      flex-direction: row;
    }
    li.flex_column {
      @extend .flex_row;
      flex-direction: column;
    }
  }
  div.container {
    width: 100%;
  }
  div.harmovis_input_button_column {
    width: 100%;
    display: flex;
    flex-direction: column;
    label {
      @extend .harmovis_button;
      input[type="file"] {
        display: none;
      }
    }
    div {
      white-space: nowrap;
      overflow: hidden;
      text-Overflow: ellipsis;
    }
  }
  .harmovis_input_button_row {
    @extend .harmovis_input_button_column;
    flex-direction: row;
    label {
      margin: 0px 8px 0px 0px;
    }
    div {
      margin: 0px;
    }
  }
}

div.harmovis_area { 
  position: fixed; 
  padding-top: 0px; 
  width: 100%; 
  height: 100vh; 
}

svg.harmovis_overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

label.harmovis_button,
button.harmovis_button {
  background: #808080;
  border-radius: 2px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .026em;
  line-height: 14px;
  padding: 3px 12px;
  text-align: center;
  transition: all .2s ease;
  vertical-align: middle;
  border-width: 0px;
  box-shadow: 1px 1px 1px #555;
  white-space: nowrap;
  margin: 0px 2px;
  &:hover {
    background: #A0A0A0;
  }
}

input.harmovis_input_checkbox[type="checkbox"] {
  display:none
}
input.harmovis_input_checkbox[type="checkbox"]+label:before {
  font-family: FontAwesome;
  font-size: 12pt;
  display: inline-block;
}
input.harmovis_input_checkbox[type="checkbox"]+label:before {
  content: "☐";
  letter-spacing: 5px;
}
input.harmovis_input_checkbox[type="checkbox"]:checked+label:before {
  content: "☑";
  letter-spacing: 5px;
}

input.harmovis_input_range[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(255, 255, 255, 0.7);
  height: 2px;
  margin: 8px 0px;
  border-radius: 2px;
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    width: 10px;
    height: 16px;
    display: block;
    background: #808080;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 1px 1px 1px #555;
    transition: all .2s ease;
    &:hover {
      background: #A0A0A0;
    }
  }
}

input.harmovis_input_number[type="number"],
input.harmovis_input_number[type="number"]::-webkit-outer-spin-button,
input.harmovis_input_number[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  background: rgba( 0, 0, 0, 0 );
  color: #FFFFFF;
  text-align: center;
  margin: 0px;
  border: 0px;
  border-color: #FFFFFF;
  padding: 0px;
}

div.harmovis_footer {
  font-size: 8pt; 
  z-index: 105; 
  position: fixed; 
  bottom: 8px; 
  left: 10px;
}

div.harmovis_fpsRate {
  font-size: 8pt; 
  z-index: 105; 
  position: fixed; 
  bottom: 10px; 
  right: 20px;
  display: block;
  span {
    margin: 0px 2px;
  }
}