mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-10 16:25:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#181] add todo file, add split CSS files

Browse source
This commit is contained in:
Robin Scholtes 2023-04-18 20:23:44 +12:00
parent 2093dac4f9
commit 4eff33933e
14 changed files with 473 additions and 457 deletions
Download patch file Download diff file Expand all files Collapse all files

112
src/web/stylesheets/components/io/_tabs.css
View file

@ -0,0 +1,112 @@
#input-tabs-wrapper #input-tabs,
#output-tabs-wrapper #output-tabs {
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);
border-left: 1px solid var(--primary-border-colour);
height: var(--tab-height);
clear: none;
}
#input-tabs li,
#output-tabs 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 li:hover,
#output-tabs li:hover {
cursor: pointer;
background-color: var(--primary-background-colour);
}
.active-input-tab,
.active-output-tab {
font-weight: bold;
background-color: var(--primary-background-colour);
}
.input-tab-content+.btn-close-tab {
display: block;
margin-top: auto;
margin-bottom: auto;
margin-right: 2px;
}
.input-tab-content+.btn-close-tab i {
font-size: 0.8em;
}
.input-tab-buttons,
.output-tab-buttons {
width: 25px;
text-align: center;
margin: 0;
height: var(--tab-height);
line-height: var(--tab-height);
font-weight: bold;
background-color: var(--title-background-colour);
border-bottom: 1px solid var(--primary-border-colour);
}
.input-tab-buttons:hover,
.output-tab-buttons:hover {
cursor: pointer;
background-color: var(--primary-background-colour);
}
#btn-next-input-tab,
#btn-input-tab-dropdown,
#btn-next-output-tab,
#btn-output-tab-dropdown {
float: right;
}
#btn-previous-input-tab,
#btn-previous-output-tab {
float: left;
}
#btn-close-all-tabs {
color: var(--breakpoint-font-colour) !important;
}
.input-tab-content,
.output-tab-content {
width: 100%;
max-width: 100%;
padding: 10px 5px;
height: var(--tab-height);
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.btn-close-tab {
height: var(--tab-height);
vertical-align: middle;
width: fit-content;
}
.tabs-left > li:first-child {
box-shadow: 15px 0 15px -15px var(--primary-border-colour) inset;
}
.tabs-right > li:last-child {
box-shadow: -15px 0 15px -15px var(--primary-border-colour) inset;
}