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
CyberChef/src/web/stylesheets/components/_operation.css

80 lines
1.4 KiB
CSS
Raw Normal View History

Styles rewritten in a modular format with themable properties stored in variables.
2017-04-13 17:59:37 +01:00
/**
* Operation styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
some final modularising of the CSS
2023-08-15 21:26:18 +12:00
/*
Note: .operation is used in the c-operation-li custom web components, but also
for list items in #recipe-list
*/
Styles rewritten in a modular format with themable properties stored in variables.
2017-04-13 17:59:37 +01:00
.operation {
padding: 10px;
list-style-type: none;
position: relative;
border-width: 1px;
border-style: solid;
Developing a dark theme.
2017-04-23 17:09:12 +01:00
border-top: none;
border-left: none;
border-right: none;
restore recipe on refresh
2023-08-02 17:38:52 +12:00
cursor: default;
Styles rewritten in a modular format with themable properties stored in variables.
2017-04-13 17:59:37 +01:00
}
[#181] add disabling of popovers on small screens, update todos and operation CSS
2023-04-23 11:20:01 +12:00
@media only screen and (min-width: 768px){
[#181] add
2023-05-09 22:14:36 +12:00
.operation {
cursor: grab;
}
[#181] add disabling of popovers on small screens, update todos and operation CSS
2023-04-23 11:20:01 +12:00
}
.op-icon {
float: right;
font-size: 18px;
cursor: pointer;
}
introducing and refactoring to using custom components for building category / cat lists / operation lists. This allows us to group relevant functionality more efficiently, easier maintenance in the future. We could, one by one, refactor and encapsulate components across CC in this manner. A very convenient and much needed effect of this implementation is that these components can hold functionality and references exclusively pertaining to themselves. Separating said functionality increases code compartmentalisation while references and event listeners requiring these references are guaranteed to be up to date with the component at all times.
2023-06-16 12:09:04 +12:00
.op-icon.star-icon {
[#181] add
2023-05-09 22:14:36 +12:00
float: left;
margin: 0 10px 0 0;
padding: 0;
update colours for better UX and implement AA minimum contrast
2023-05-15 14:18:10 +12:00
color: var(--op-list-operation-font-colour);
[#181] decrease size of controls for mobile UI
2023-05-10 13:15:01 +12:00
opacity: .35;
[#181] add
2023-05-09 22:14:36 +12:00
cursor: pointer;
}
introducing and refactoring to using custom components for building category / cat lists / operation lists. This allows us to group relevant functionality more efficiently, easier maintenance in the future. We could, one by one, refactor and encapsulate components across CC in this manner. A very convenient and much needed effect of this implementation is that these components can hold functionality and references exclusively pertaining to themselves. Separating said functionality increases code compartmentalisation while references and event listeners requiring these references are guaranteed to be up to date with the component at all times.
2023-06-16 12:09:04 +12:00
li.operation.favourite > .op-icon.star-icon {
[#181] add
2023-05-09 22:14:36 +12:00
opacity: 1;
}
[#181] add disabling of popovers on small screens, update todos and operation CSS
2023-04-23 11:20:01 +12:00
.op-icon.remove-icon {
color: #f44336;
}
[#181] add 'selected' class on double click, which is not visible on desktop ( but we can easily opt to leave it there if we would want to )
2023-04-24 22:55:55 +12:00
.op-icon.check-icon {
display: none;
update colours for better UX and implement AA minimum contrast
2023-05-15 14:18:10 +12:00
color: var(--checkmark-color);
[#181] add 'selected' class on double click, which is not visible on desktop ( but we can easily opt to leave it there if we would want to )
2023-04-24 22:55:55 +12:00
}
add a different background color on op selected, based on user test feedback
2023-05-15 13:34:13 +12:00
.operation.selected {
background-color: var(--selected-operation-bg-colour);
}
introducing and refactoring to using custom components for building category / cat lists / operation lists. This allows us to group relevant functionality more efficiently, easier maintenance in the future. We could, one by one, refactor and encapsulate components across CC in this manner. A very convenient and much needed effect of this implementation is that these components can hold functionality and references exclusively pertaining to themselves. Separating said functionality increases code compartmentalisation while references and event listeners requiring these references are guaranteed to be up to date with the component at all times.
2023-06-16 12:09:04 +12:00
.operation.selected > i.op-icon.check-icon {
change updateVisibility func name to setElementVisbility
2023-05-12 17:20:11 +12:00
display: inline-block;
[#181] add 'selected' class on double click, which is not visible on desktop ( but we can easily opt to leave it there if we would want to )
2023-04-24 22:55:55 +12:00
}
Merged ESM into feature-bootstrap4. Started work on text inputs.
2018-06-09 10:43:36 +01:00
.op-title {
font-weight: var(--op-title-font-weight);
Styles rewritten in a modular format with themable properties stored in variables.
2017-04-13 17:59:37 +01:00
}
search result highlighted strings, do not add op to recipe on escape
2023-08-07 16:42:06 +12:00
c-operation-li li.operation.focused-op {
color: var(--focused-operation-font-color) !important;
background-color: var(--focused-operation-bg-colour) !important;
border-color: var(--focused-operation-border-colour) !important;
Styles rewritten in a modular format with themable properties stored in variables.
2017-04-13 17:59:37 +01:00
}
Converted op-icons to material design and improved controls.
2018-06-10 14:55:15 +01:00
Reference in a new issue Copy permalink