Pixel checkboxes, button spacing, and use fork image
This commit is contained in:
@@ -3,9 +3,9 @@
|
||||
<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}
|
||||
<template v-if="offset !== null"> (+{{ offset }} ms)</template>
|
||||
{{ printPacketFlags(packet) }}
|
||||
<button @click.prevent="copyRaw" class="btn btn-link">Copy HEX</button>
|
||||
<button @click.prevent="copyText" class="btn btn-link">Copy text</button>
|
||||
<button @click.prevent="copyPythonBytes" class="btn btn-link">Copy as Python bytes</button>
|
||||
<button @click.prevent="copyRaw" class="btn btn-link copy-btn">Copy HEX</button>
|
||||
<button @click.prevent="copyText" class="btn btn-link copy-btn">Copy text</button>
|
||||
<button @click.prevent="copyPythonBytes" class="btn btn-link copy-btn">Copy as Python bytes</button>
|
||||
</div>
|
||||
<p v-if="!this.$store.state.hexdumpMode"
|
||||
class="pt-2 pb-2 mb-3"
|
||||
@@ -178,6 +178,17 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.copy-btn {
|
||||
margin-left: 10px;
|
||||
font-family: var(--pixel-font);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.4px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.packet-outgoing {
|
||||
background: linear-gradient(135deg, rgba(255, 106, 213, 0.12), rgba(14, 18, 40, 0.85));
|
||||
|
||||
@@ -152,4 +152,35 @@
|
||||
color: var(--text);
|
||||
box-shadow: 0 0 12px rgba(198, 107, 255, 0.25);
|
||||
}
|
||||
|
||||
::v-deep .custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 8px rgba(198, 107, 255, 0.5);
|
||||
}
|
||||
|
||||
::v-deep .custom-checkbox .custom-control-label::before {
|
||||
border: 1px solid rgba(122, 29, 255, 0.8);
|
||||
background: rgba(122, 29, 255, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(198, 107, 255, 0.35);
|
||||
}
|
||||
|
||||
::v-deep .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: rgba(122, 29, 255, 0.18);
|
||||
border-color: rgba(198, 107, 255, 0.9);
|
||||
box-shadow: 0 0 10px rgba(198, 107, 255, 0.4);
|
||||
}
|
||||
|
||||
::v-deep .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: transparent;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 5px;
|
||||
top: 4px;
|
||||
transform: none;
|
||||
box-shadow:
|
||||
2px 6px 0 #c66bff,
|
||||
4px 8px 0 #c66bff,
|
||||
6px 6px 0 #c66bff,
|
||||
6px 4px 0 #c66bff,
|
||||
8px 6px 0 #c66bff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user