mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-27 02:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add UI for input tabs.

Browse source 
Can add, remove and switch tabs
This commit is contained in:
j433866 2019-03-21 12:31:01 +00:00
parent 328c0ade22
commit 37218c1e81
5 changed files with 304 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/web/stylesheets/components/_pane.css
View file

@ -8,6 +8,7 @@
:root {
--title-height: 48px;
--tab-height: 40px;
}
.title {

86
src/web/stylesheets/layout/_io.css
View file

@ -6,7 +6,7 @@
* @license Apache-2.0
*/
#input-text,
.input-text,
#output-text,
#output-html {
position: relative;
@ -30,12 +30,69 @@
-moz-padding-start: 1px; /* Fixes bug in Firefox */
}
.textarea-wrapper {
position: absolute;
top: var(--title-height);
bottom: 0;
#multi-input-wrapper {
display: flex;
flex-direction: column;
height: calc(100% - var(--title-height));
}
#input-tabs ul {
list-style: none;
background-color: var(--title-background-colour);
padding: 0;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--primary-border-colour);
height: var(--tab-height);
}
#input-tabs ul li {
display: flex;
flex-direction: row;
width: 100%;
min-width: 120px;
float: left;
padding: 0px;
text-align: center;
border-right: 1px solid var(--primary-border-colour);
height: var(--tab-height);
vertical-align: middle;
}
#input-tabs ul li:hover {
cursor: pointer;
background-color: var(--primary-background-colour);
}
.active-input-tab {
font-weight: bold;
}
.input-tab-content {
width: 100%;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
height: var(--tab-height);
vertical-align: middle;
}
.btn-close-tab {
height: var(--tab-height);
vertical-align: middle;
width: fit-content;
}
.textarea-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
}
.textarea-wrapper textarea,
@ -45,13 +102,21 @@
color: var(--fixed-width-font-colour);
}
.input-wrapper {
display: none;
}
.active-input-area {
display: inline-block;
}
#input-highlighter,
#output-highlighter {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
height: calc(100% - var(--title-height));
padding: 3px;
margin: 0;
overflow: hidden;
@ -61,6 +126,7 @@
color: #fff;
background-color: transparent;
border: none;
pointer-events: none;
}
#output-loader {
@ -101,13 +167,13 @@
transition: all 0.5s ease;
}
#input-file,
.input-file,
#output-file {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
height: calc(100% - var(--tab-height) - var(--title-height));
display: none;
}