CSS konstrui + tab clean
This commit is contained in:
parent
a128a031f0
commit
264bf3b8e7
133
app.html
133
app.html
|
@ -18,129 +18,9 @@
|
||||||
}
|
}
|
||||||
:root[lang=_lang_] [_lang_\:title]:after { content: attr(_lang_\:title) } */
|
:root[lang=_lang_] [_lang_\:title]:after { content: attr(_lang_\:title) } */
|
||||||
</style>
|
</style>
|
||||||
<style>
|
|
||||||
body{
|
|
||||||
display: grid;
|
|
||||||
grid-template: "menu menu menu" 2em
|
|
||||||
"main main main" auto
|
|
||||||
"left middle right" 3em
|
|
||||||
/ 7em auto 7em;
|
|
||||||
height: 100%;
|
|
||||||
grid-gap: 1em;
|
|
||||||
margin: 0;
|
|
||||||
background: lightgrey;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu { grid-area: menu }
|
<link rel="stylesheet" href="./layout.css">
|
||||||
input[type=file] { display: none; }
|
|
||||||
|
|
||||||
ui-data {
|
|
||||||
grid-area: main;
|
|
||||||
margin-top: -1.05em;
|
|
||||||
height: calc(100% + 1.05em);
|
|
||||||
}
|
|
||||||
|
|
||||||
button[encrypt] { grid-area: left }
|
|
||||||
pass { grid-area: middle }
|
|
||||||
button[decrypt] { grid-area: right }
|
|
||||||
|
|
||||||
button[encrypt],
|
|
||||||
button[decrypt] {
|
|
||||||
font-weight: bolder;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
menu {
|
|
||||||
display: flex;
|
|
||||||
height: 2em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
menu > * {
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu > button {
|
|
||||||
font-size: 1em;
|
|
||||||
height: 2em;
|
|
||||||
width: 2em;
|
|
||||||
}
|
|
||||||
menu > button > i {
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
menu > button > .fa-caret-up {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.75em;
|
|
||||||
}
|
|
||||||
menu > button > .fa-caret-down {
|
|
||||||
position: absolute;
|
|
||||||
top: 2.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[select-get], [select-set], [point], [page] { display: none; }
|
|
||||||
.parented [select-get], .parented [select-set], .parented [point], .parented [page] { display: inherit; }
|
|
||||||
|
|
||||||
input[filename] { flex: 1; padding: 0 .5em; }
|
|
||||||
|
|
||||||
pass {
|
|
||||||
position: relative;
|
|
||||||
height: 2em;
|
|
||||||
border: 1px solid darkgrey;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
pass input { filter: blur(5px); width: 100%; border: none;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 .5em; }
|
|
||||||
pass i { position: absolute; top: .5em; right: .5em;}
|
|
||||||
pass input.clear { filter: blur(0) }
|
|
||||||
|
|
||||||
i.fa-file {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
i.fa-file.crypted {
|
|
||||||
font-size: 1.5em;
|
|
||||||
color: rebeccapurple;
|
|
||||||
}
|
|
||||||
i.fa-file i.fa-key {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 0.6em;
|
|
||||||
top: .5em;
|
|
||||||
left: -.5em;
|
|
||||||
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
|
|
||||||
transform: rotate(-50deg) scaleX(-1);
|
|
||||||
font-size: 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-key {
|
|
||||||
color: lightseagreen
|
|
||||||
}
|
|
||||||
i.fa-key.pub {
|
|
||||||
color: lawngreen
|
|
||||||
}
|
|
||||||
i.fa-key.priv {
|
|
||||||
color: orangered
|
|
||||||
}
|
|
||||||
|
|
||||||
ui-toast {
|
|
||||||
position: fixed;
|
|
||||||
text-align: center;
|
|
||||||
background: white;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 60em;
|
|
||||||
margin: -1em -30em;
|
|
||||||
height: 2em;
|
|
||||||
box-shadow: 0 0.1em 1em darkgrey;
|
|
||||||
border: 1px solid darkgrey;
|
|
||||||
line-height: 2em;
|
|
||||||
}
|
|
||||||
ui-toast[error] {
|
|
||||||
color: red;
|
|
||||||
border-color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/regular.css" integrity="sha384-avJt9MoJH2rB4PKRsJRHZv7yiFZn8LrnXuzvmZoD3fh1aL6aM6s0BBcnCvBe6XSD" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/regular.css" integrity="sha384-avJt9MoJH2rB4PKRsJRHZv7yiFZn8LrnXuzvmZoD3fh1aL6aM6s0BBcnCvBe6XSD" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
|
||||||
|
@ -214,6 +94,16 @@
|
||||||
resize: none;
|
resize: none;
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid darkgrey;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host-context([frame]) iframe { display: block; }
|
||||||
button {
|
button {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1.6em;
|
top: -1.6em;
|
||||||
|
@ -227,6 +117,7 @@
|
||||||
:host-context([frame]) [frame] { color: rebeccapurple }
|
:host-context([frame]) [frame] { color: rebeccapurple }
|
||||||
</style>
|
</style>
|
||||||
<textarea></textarea>
|
<textarea></textarea>
|
||||||
|
<iframe></iframe>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script ui src="./ui.js"></script>
|
<script ui src="./ui.js"></script>
|
||||||
|
|
6
app.js
6
app.js
|
@ -91,7 +91,8 @@ const decrypt3 = buf=> {
|
||||||
{ name: 'AES-GCM', iv }
|
{ name: 'AES-GCM', iv }
|
||||||
, key
|
, key
|
||||||
, data
|
, data
|
||||||
)/*.then(function (decrypted) {
|
)
|
||||||
|
/*.then(function (decrypted) {
|
||||||
var base64 = bufferToUtf8(new Uint8Array(decrypted))
|
var base64 = bufferToUtf8(new Uint8Array(decrypted))
|
||||||
// .replace(/\-/g, '+')
|
// .replace(/\-/g, '+')
|
||||||
// .replace(/_/g, '\/')
|
// .replace(/_/g, '\/')
|
||||||
|
@ -182,8 +183,9 @@ const CC = {
|
||||||
uint2string
|
uint2string
|
||||||
, string2uint
|
, string2uint
|
||||||
, buffer2bin
|
, buffer2bin
|
||||||
, buffer2base64
|
, buffer2uint: buf=> new Uint8Array(buf)
|
||||||
, buffer2utf8
|
, buffer2utf8
|
||||||
|
, buffer2base64
|
||||||
, bin2buffer
|
, bin2buffer
|
||||||
, base642buffer
|
, base642buffer
|
||||||
, bin2utf8
|
, bin2utf8
|
||||||
|
|
|
@ -16,5 +16,10 @@ writeFileSync(
|
||||||
? `<script ${$1.replace(src,'')}>/*${$1.match(src)[1]}*/${readFileSync('./'+$1.match(src)[1], 'utf8')}</script>`
|
? `<script ${$1.replace(src,'')}>/*${$1.match(src)[1]}*/${readFileSync('./'+$1.match(src)[1], 'utf8')}</script>`
|
||||||
: s
|
: s
|
||||||
)
|
)
|
||||||
|
.replace(/<link rel="stylesheet" (.*?)>/g
|
||||||
|
, (s,$1)=> $1.match(href) && !/^https?:\/\//.test( $1.match(href)[1] )
|
||||||
|
? `<style ${$1.replace(href,'')}>/*${$1.match(href)[1]}*/${readFileSync('./'+$1.match(href)[1], 'utf8')}</style>`
|
||||||
|
: s
|
||||||
|
)
|
||||||
, 'utf8'
|
, 'utf8'
|
||||||
)
|
)
|
||||||
|
|
3
ui.js
3
ui.js
|
@ -79,7 +79,8 @@ class Data extends UI {
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue)
|
attributeChangedCallback(name, oldValue, newValue)
|
||||||
{
|
{
|
||||||
if( this.shadowRoot.$`textarea`.value )
|
console.log(arguments)
|
||||||
|
if( newValue != null && this._value && CC['buffer2'+this.type] )
|
||||||
this.shadowRoot.$`textarea`.value = CC['buffer2'+this.type]( this._value )
|
this.shadowRoot.$`textarea`.value = CC['buffer2'+this.type]( this._value )
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue