mirror of
https://github.com/gchq/CyberChef.git
synced 2025-05-14 10:06:58 -04:00
45 lines
1 KiB
CSS
45 lines
1 KiB
CSS
/**
|
|
* Operations component styles
|
|
*
|
|
* For consistency sake I'm using an ID, but the custom wrapper / dropdown component
|
|
* can ( should ) be made into a reusable, generic component
|
|
*/
|
|
|
|
#operations {
|
|
background-color: var(--primary-background-colour);
|
|
}
|
|
|
|
#operations-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
#operations-dropdown {
|
|
position: absolute;
|
|
top: var(--banner-height);
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: auto;
|
|
z-index: 20; /* to dropdown on top of all the other elements */
|
|
background-color: var(--secondary-background-colour);
|
|
}
|
|
|
|
/* 'hidden' is used to handle the visibility of a variety of mobile only elements */
|
|
#close-ops-dropdown-icon.hidden,
|
|
#search-results.hidden,
|
|
#categories.hidden {
|
|
z-index: -10;
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and ( min-width: 768px ){
|
|
#operations-dropdown {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* On desktop UI, the categories are always visible */
|
|
/*#search-results.hidden,*/
|
|
#categories.hidden {
|
|
z-index: initial;
|
|
display: block;
|
|
}
|
|
}
|