@sutton-signwriting/signmaker/index.css

Create and edit signs using Formal SignWriting in ASCII (FSW) or SignWriting in Unicode (SWU)

@font-face {
  font-family: "SuttonSignWritingLine";
  src: 
    local('SuttonSignWritingLine'),
    url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingLine.ttf') format('truetype');
}
@font-face {
  font-family: "SuttonSignWritingFill";
  src: 
    local('SuttonSignWritingFill'),
    url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingFill.ttf') format('truetype');
}
@font-face {
  font-family: "SuttonSignWritingOneD";
  src: 
    local('SuttonSignWritingOneD'),
    url('https://unpkg.com/@sutton-signwriting/font-ttf@1.0.0/font/SuttonSignWritingOneD.ttf') format('truetype');
}
svg {
  overflow: visible;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
  touch-action: pan-y;
}

body, body:before, body:after {
  margin:0;
}
html,body {
  overflow: auto;
  height: 100%;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

div.clickable:hover{
  background: #c7c7c7;
}
div.btn, div.cmd, div.cmdrow, div.cmdfull, div.cmdlong, div.cmdslim, div.cmdhalf {
  position: relative;
  float: left;
  text-align: center;
  background: #e7e7e7;
  border: 1px solid black;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

div.info{
  background: darkgray;
}

div.sort{
  width: 100%;
  height: 5%;
  border: 1px solid black;
}

div.btn {
  width: 25%;
  height: 9%;
}

div.smaller {
  height: 6%;
}
div.checked {
    background-color:gray;
    border:1px solid black;
}
div.checked:hover {
    color:white;
}
div.unchecked {
    border:1px solid black;
    color:gray;
}
div.unchecked:hover {
    color:black;
}

div.disabled{
  border: 1px solid black;
  color: #e7e7e7;
}
div.cmd {
  width: 25%;
  height: 20%;
}
div.cmdrow {
  width: 100%;
  height: 10%;
}
div.cmdfull {
  width: 100%;
  height: 20%;
}
div.cmdlong {
  width: 75%;
  height: 10%;
}
div.cmdslim{
  width: 25%;
  height: 10%;
}
div.cmdhalf{
  width: 50%;
  height: 10%;
}

div.btn p, div.cmd p, div.cmdslim p, div.cmdhalf p, div.cmdrow p, div.cmdfull p, div.cmdlong p {
  position: relative;
  margin:auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: default;
  font-size:2vmin;
}

div.btn svg, div.cmd svg, div.cmdslim svg, div.cmdhalf svg, div.cmdrow svg, div.cmdfull svg, div.cmdlong svg, div.sort svg {
  display: block;
  margin: 2.5% auto;
  height: 90%;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}
div.sort svg g text.sym-line {
  fill: gray !important;
}

div.disabled {
  color: gray;
}
div.disabled svg g text.sym-line{
  fill: gray !important;
}
div.cmd.unselected:hover svg g text.sym-line{
  fill: black !important;
}
div.cmd.selected {
  background: #b1b1b1;
  border: 1px solid black;
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
}
div.cmd.unselected {
  background: #ffffff;
  border: 1px dashed black;
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
  color: gray;
}
div.cmd.unselected:hover {
  border: 1px solid gray;
  color: black;
}
div.cmd.unselected svg g text.sym-line{
  fill: gray !important;
}
div.cmd.unselected:hover svg g text.sym-line{
  fill: black !important;
}

#palette {
  position:fixed; 
  margin-left: 60%;
  top:0; 
  width:40%;
  height: 100%;
  z-index:1;
}
div.row {
  float: right;
  width: 100%;
  height: 9%;
}
div.row.smaller {
  height: 8.7%;
}
div.row div {
  position: relative;
  float: left;
  width: 16.6%;
  height: 100%;
  border: 1px solid black;
}

div.row div svg, div.cmdrow svg, div.cmdfull svg, div.cmdlong svg {
  position: absolute;
  display: block;
  top:2.5%;
  bottom: 2.5%;
  left: 2.5%;
  right: 2.5%;
  margin: auto;
  max-width: 95%;
  max-height: 95%;
  cursor: default;
}

#palette div.row div.topleft {
  float: left;
  width: 16.6%;
  height: 100%;
  border:0px;
  overflow: visible;
}
#palette div.row div.topleft svg {
  display: block;
  float: left;
  top:initial;
  bottom: initial;
  left: initial;
  right: initial;
  margin: initial;
  max-width: initial;
  max-height: initial;
  top:0;
  left:0;
}

#signmaker {
  position:fixed; 
  margin-left: 0%;
  top:0%; 
  width:60%;
  height: 100%;
}

#sequence {
  float: right;
  width: 10%;
  height: 100%;
  border: 1px solid black;
}
#signbox {
  float: left;
  width: 90%;
  height: 50%;
  overflow:hidden;
}
#signbox div.mid{
  position: relative;
  height: 100%;
  width: 100%;
}
#signbox div.mid img, #signbox div.mid svg{
  position:absolute;
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0; 
  margin:auto;
}
#signbox div{
  position: absolute;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#signbox div svg {
  display: block;
  top:0;
  left:0;
}
#signbox div.selected svg g text.sym-line {
  fill: blue !important;
}
#command {
  float:left;
  width: 90%;
  height: 50%;
}
div.cmdrow input, div.cmdlong input, div.cmdhalf input, div.cmdfull input, #size, #pad, #line, #fill, #back, select, input.terms{
  margin-top: 0.5%;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  height: 90%;
  width: 90%;
  padding:0;
  font-size:2.5vh;
  line-height:2.5vh;
  vertical-align: top;
}

div.cmdfull input{
  height: 90%;
  width: 90%;
  padding:0;
  font-size:5vh;
  line-height:5vh;
  vertical-align: top;
}

div.cmdrow p.fsw, div.cmdrow p.swu, div.cmdfull p.swu{
  float: left;
  margin-left: 2%;
}
#fsw, #swu, #styling{
  float: right;
  margin-right: 4%;
  font-size:1.5vh;
  width: 75%;
}
#swu {
  font-family: SuttonSignWritingOneD;
}
.ssw-one-d {
  font-family: SuttonSignWritingOneD;
}
div.cmdrow #swu {
  font-size:1.5vh;
}
div.cmdfull #swu {
  font-size:3vh;
}
#signtext {
  margin-left: 30%;
  width: 40%;
  background: blue;
  margin: auto;
}

textarea {
  width: 100%;
  height: 60%;
  resize: none;
}

input.warning, select.warning, textarea.warning {
  border: 1px solid #f0ad4e;
}
input.danger, select.danger, textarea.danger {
  border: 1px solid #d9534f;
}

body.inverse {
  background: black;
}

body.inverse div.btn {
  background: black;
  color: white;
  border: 1px solid white;
}

body.inverse div.cmd, body.inverse div.cmdrow, body.inverse div.cmdfull, body.inverse div.cmdlong, body.inverse div.cmdslim, body.inverse div.cmdhalf, body.inverse div.cmd.selected, body.inverse #dictionary, body.inverse #sequence {
  border: 1px solid white;
  background: black;
}
body.inverse div.cmd.unselected {
  background: black;
  border: 1px dashed white;
  color: gray;
}
body.inverse div.cmd p, body.inverse div.cmdslim p , body.inverse div.cmdhalf p, body.inverse div.cmdrow p, body.inverse div.cmdfull p, body.inverse div.cmdlong p, body.inverse div.pageinfo {
  color: white;
}
body.inverse div.disabled p, body.inverse div.cmd.unselected p {
  color: gray;
}
body.inverse div.cmd.unselected:hover {
  border: 1px solid gray;
}
body.inverse div.cmd.unselected:hover p {
  color: white;
}
body.inverse div.disabled svg g text.sym-line, body.inverse div.cmd.unselected svg g text.sym-line{
  fill: gray !important;
}
body.inverse div.btn svg g text.sym-line, body.inverse div.cmd.unselected:hover svg g text.sym-line, body.inverse div.cmd svg g text.sym-line, body.inverse div.cmdslim svg g text.sym-line, body.inverse div.cmdhalf svg g text.sym-line, body.inverse div.cmdrow svg g text.sym-line, body.inverse div.cmdfull svg g text.sym-line, body.inverse div.cmdlong svg g text.sym-line, body.inverse #header p svg g text.sym-line, body.inverse div.row div svg g text.sym-line, body.inverse #signbox div svg g text.sym-line {
  fill: white !important;
}
body.inverse div.btn svg g text.sym-fill, body.inverse div.cmd svg g text.sym-fill, body.inverse div.cmdslim svg g text.sym-fill, body.inverse div.cmdhalf svg g text.sym-fill, body.inverse div.cmdrow svg g text.sym-fill, body.inverse div.cmdfull svg g text.sym-fill, body.inverse div.cmdlong svg g text.sym-fill, body.inverse #header p svg g text.sym-fill, body.inverse div.row div svg g text.sym-fill, body.inverse div.sort svg g text.sym-fill, body.inverse #signbox div svg g text.sym-fill {
  fill: black !important;
}
body.inverse #signbox div.selected svg g text.sym-line{
  fill: yellow !important;
}

body.inverse #header p, body.inverse select, body.inverse input, body.inverse div.btn p, body.inverse #search {
  background:black;
  color:white;
}
body.inverse div.checked, body.inverse div.checked p {
    background-color:darkgray;
}
body.inverse div.row div, body.inverse div.sort {
  border: 1px solid white;
}

body.inverse #dictionary div.button{
  background: black;
  border: 1px solid white;
  color: white;
}
body.inverse #dictionary div.button.disabled{
  color: black;
}

body.inverse #header, body.inverse #palette, body.inverse #command, body.inverse #signtext, body.inverse #signbox, body.inverse #signmaker{
  background: black;
}

body.colorful #dictionary, body.colorful div.cmd.selected.dictionary {
  background: darkseagreen;
}

body.colorful #sequence, body.colorful #signbox, body.colorful div.cmd.selected.edit {
  background: #ffffcc;
}

body.colorful #command {
  background: sandybrown;
}

body.colorful  #palette, body.colorful div.cmd.selected.search {
  background: lightblue;
}

body.waiting * {
    cursor: progress !important;
}

svg g text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}