CSS konstrui + tab clean
This commit is contained in:
devingfx
parent
a128a031f0
commit
264bf3b8e7
133
app.html
133
app.html
|
|
@ -18,129 +18,9 @@
|
|||
}
|
||||
:root[lang=_lang_] [_lang_\:title]:after { content: attr(_lang_\:title) } */
|
||||
</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 }
|
||||
input[type=file] { display: none; }
|
||||
<link rel="stylesheet" href="./layout.css">
|
||||
|
||||
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/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">
|
||||
|
|
@ -214,6 +94,16 @@
|
|||
resize: none;
|
||||
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 {
|
||||
position: relative;
|
||||
top: -1.6em;
|
||||
|
|
@ -227,6 +117,7 @@
|
|||
:host-context([frame]) [frame] { color: rebeccapurple }
|
||||
</style>
|
||||
<textarea></textarea>
|
||||
<iframe></iframe>
|
||||
</template>
|
||||
|
||||
<script ui src="./ui.js"></script>
|
||||
|
|
|
|||
6
app.js
6
app.js
|
|
@ -91,7 +91,8 @@ const decrypt3 = buf=> {
|
|||
{ name: 'AES-GCM', iv }
|
||||
, key
|
||||
, data
|
||||
)/*.then(function (decrypted) {
|
||||
)
|
||||
/*.then(function (decrypted) {
|
||||
var base64 = bufferToUtf8(new Uint8Array(decrypted))
|
||||
// .replace(/\-/g, '+')
|
||||
// .replace(/_/g, '\/')
|
||||
|
|
@ -182,8 +183,9 @@ const CC = {
|
|||
uint2string
|
||||
, string2uint
|
||||
, buffer2bin
|
||||
, buffer2base64
|
||||
, buffer2uint: buf=> new Uint8Array(buf)
|
||||
, buffer2utf8
|
||||
, buffer2base64
|
||||
, bin2buffer
|
||||
, base642buffer
|
||||
, bin2utf8
|
||||
|
|
|
|||
|
|
@ -16,5 +16,10 @@ writeFileSync(
|
|||
? `<script ${$1.replace(src,'')}>/*${$1.match(src)[1]}*/${readFileSync('./'+$1.match(src)[1], 'utf8')}</script>`
|
||||
: 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'
|
||||
)
|
||||
|
|
|
|||
3
ui.js
3
ui.js
|
|
@ -79,7 +79,8 @@ class Data extends UI {
|
|||
|
||||
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 )
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue