CyberChef/src/web/stylesheets/components/_operation.css

/**
 * Operation styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

.operation {
    cursor: pointer;
    padding: 10px;
    list-style-type: none;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
}

.arg-group {
    display: table;
    width: 100%;
    margin-top: 10px;
}

.arg-group-text {
    display: block;
}

.inline-args {
    float: left;
    width: auto;
    margin-right: 30px;
    height: 34px;
}

.inline-args input[type="checkbox"] {
    margin-top: 10px;
}

.inline-args input[type="number"] {
    width: 100px;
}

.arg-title {
    font-weight: var(--arg-title-font-weight);
}

.arg-input {
    display: table-cell;
    width: 100%;
    padding: 6px 12px;
    vertical-align: middle;
    height: var(--arg-input-height);
    font-size: var(--arg-input-font-size);
    line-height: var(--arg-input-line-height);
    color: var(--arg-font-colour);
    background-color: var(--arg-background);
    border: 1px solid var(--arg-border-colour);
    font-family: var(--fixed-width-font-family);
    text-overflow: ellipsis;
}

.short-string {
    width: 150px;
}

select {
    display: block;
    padding: 6px 8px;
    height: 34px;
    border: 1px solid var(--arg-border-colour);
    background-color: var(--arg-background);
    color: var(--arg-font-colour);
}

.arg[disabled] {
    cursor: not-allowed;
    opacity: 1;
    background-color: var(--arg-disabled-background);
}

textarea.arg {
    width: 100%;
    min-height: 50px;
    height: 70px;
    margin-top: 5px;
    border: 1px solid var(--arg-border-colour);
    resize: vertical;
    color: var(--arg-font-colour);
    background-color: var(--arg-background);
    font-family: var(--fixed-width-font-family);
}

.arg-label {
    display: table-cell;
    width: 1px;
    padding-right: 10px;
    font-weight: normal;
    vertical-align: middle;
    white-space: pre;
}

.editable-option {
    position: relative;
    display: inline-block;
}

.editable-option-select {
    min-width: 250px;
}

.editable-option-input {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 20px);
    height: calc(100% - 2px) !important;
    border: none !important;
}

button.dropdown-toggle {
    background-color: var(--secondary-background-colour);
}

.op-icon {
    float: right;
    margin-left: 10px;
    margin-top: 3px;
}

.recip-icons {
    position: absolute;
    top: 13px;
    right: 10px;
    height: 16px;
}

.recip-icon {
    margin-right: 10px;
    vertical-align: baseline;
    float: right;
}

.disable-icon {
    width: 16px;
    height: 16px;
    margin-top: -1px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
}

.disable-icon-selected {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
}

.breakpoint {
    float: right;
    width: 14px;
    height: 14px;
    background-color: #eee;
    border: 1px solid #aaa;
}

.breakpoint-selected {
    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
}

.break {
    color: var(--breakpoint-font-colour) !important;
    background-color: var(--breakpoint-bg-colour) !important;
    border-color: var(--breakpoint-border-colour) !important;
}

.selected-op {
    color: var(--selected-operation-font-color) !important;
    background-color: var(--selected-operation-bg-colour) !important;
    border-color: var(--selected-operation-border-colour) !important;
}

.flow-control-op {
    color: var(--fc-operation-font-colour) !important;
    background-color: var(--fc-operation-bg-colour) !important;
    border-color: var(--fc-operation-border-colour) !important;
}

.flow-control-op.break {
    color: var(--fc-breakpoint-operation-font-colour) !important;
    background-color: var(--fc-breakpoint-operation-bg-colour) !important;
    border-color: var(--fc-breakpoint-operation-border-colour) !important;
}

.disabled {
    color: var(--disabled-font-colour) !important;
    background-color: var(--disabled-bg-colour) !important;
    border-color: var(--disabled-border-colour) !important;
}