UNPKG

@sutton-signwriting/signmaker

Version:

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

453 lines (419 loc) 9.71 kB
@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; }