Skip to content

Commit 51c7a2f

Browse files
enzokenzok
authored
Proerly fix behavior buttons (kevoreilly#2890)
1 parent 71bee11 commit 51c7a2f

2 files changed

Lines changed: 135 additions & 160 deletions

File tree

‎web/static/css/style.css‎

Lines changed: 112 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ body {
2121
}
2222

2323
a {
24-
color: #5ebcf3;
25-
text-decoration: none;
24+
color: white
2625
}
2726

2827
.navbar-collapse.in {
@@ -51,71 +50,7 @@ element.style {
5150
}
5251

5352
a:hover {
54-
color: #EE1B2F;
55-
text-decoration: underline;
56-
}
57-
58-
.btn-primary {
59-
background-color: #325d88 !important;
60-
border-color: #325d88 !important;
61-
color: #fff !important;
62-
}
63-
64-
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
65-
background-color: #264768 !important;
66-
border-color: #264768 !important;
67-
}
68-
69-
.btn-info {
70-
background-color: #29aba1 !important;
71-
border-color: #29aba1 !important;
72-
color: #fff !important;
73-
}
74-
75-
.btn-info:hover, .btn-info:focus, .btn-info:active {
76-
background-color: #1f8179 !important;
77-
border-color: #1f8179 !important;
78-
}
79-
80-
.btn-outline-info {
81-
color: #29aba1 !important;
82-
border-color: #29aba1 !important;
83-
}
84-
85-
.btn-outline-info:hover {
86-
background-color: #29aba1 !important;
87-
border-color: #29aba1 !important;
88-
color: #fff !important;
89-
}
90-
91-
.text-info {
92-
color: #4dd0e1 !important;
93-
}
94-
95-
.bg-primary {
96-
background-color: #325d88 !important;
97-
}
98-
99-
.text-primary {
100-
color: #5ebcf3 !important;
101-
}
102-
103-
.bg-info {
104-
background-color: #29aba1 !important;
105-
}
106-
107-
.badge.bg-primary, .badge.bg-danger, .badge.bg-success {
108-
color: #fff !important;
109-
}
110-
111-
.badge.bg-warning, .badge.bg-info {
112-
color: #000 !important;
113-
}
114-
115-
a.badge:hover, .badge a:hover {
116-
color: inherit !important;
117-
text-decoration: none;
118-
opacity: 0.8;
53+
color: #EE1B2F
11954
}
12055

12156
.btn-link {
@@ -300,11 +235,6 @@ pre {
300235
cursor: pointer;
301236
}
302237

303-
.form-control {
304-
background-color: darkgray;
305-
color:black;
306-
}
307-
308238
/* Windows API categories */
309239
.filesystem {
310240
background-color: #ffe3c5;
@@ -405,39 +335,98 @@ pre {
405335
color: black;
406336
}
407337

408-
.btn-cat-filesystem { background-color: #ffe3c5 !important; color: black; border-color: #ffe3c5; }
409-
.btn-cat-filesystem:hover { color: black; }
410-
.btn-cat-registry { background-color: #ffc5c5 !important; color: black; border-color: #ffc5c5; }
411-
.btn-cat-registry:hover { color: black; }
412-
.btn-cat-process { background-color: #c5e0ff !important; color: black; border-color: #c5e0ff; }
413-
.btn-cat-process:hover { color: black; }
414-
.btn-cat-threading { background-color: #d3e0ff !important; color: black; border-color: #d3e0ff; }
415-
.btn-cat-threading:hover { color: black; }
416-
.btn-cat-services { background-color: #ccc5ff !important; color: black; border-color: #ccc5ff; }
417-
.btn-cat-services:hover { color: black; }
418-
.btn-cat-device { background-color: #d3c5cc !important; color: black; border-color: #d3c5cc; }
419-
.btn-cat-device:hover { color: black; }
420-
.btn-cat-network { background-color: #d3ffc5 !important; color: black; border-color: #d3ffc5; }
421-
.btn-cat-network:hover { color: black; }
422-
.btn-cat-socket { background-color: #d3ffc5 !important; color: black; border-color: #d3ffc5; }
423-
.btn-cat-socket:hover { color: black; }
424-
.btn-cat-synchronization { background-color: #f9c5ff !important; color: black; border-color: #f9c5ff; }
425-
.btn-cat-synchronization:hover { color: black; }
426-
.btn-cat-browser { background-color: #dfffdf !important; color: black; border-color: #dfffdf; }
427-
.btn-cat-browser:hover { color: black; }
428-
.btn-cat-crypto { background-color: #f0f2c5 !important; color: black; border-color: #f0f2c5; }
429-
.btn-cat-crypto:hover { color: black; }
430-
431-
/* Remove default underline, add on hover (exclude buttons if needed) */
432-
a:not(.btn, [class*="btn"]) {
433-
text-decoration: none !important;
434-
}
435-
a:not(.btn, [class*="btn"]):hover {
436-
text-decoration: underline !important;
437-
}
438-
439-
.bg-dark::placeholder {
440-
color: rgba(255, 255, 255, 0.7);
338+
/* Category buttons (base colors) */
339+
.btn-cat-default { background-color: #696969; color: #000; border-color: #696969; }
340+
.btn-cat-filesystem { background-color: #ffe3c5; color: #000; border-color: #ffe3c5; }
341+
.btn-cat-registry { background-color: #ffc5c5; color: #000; border-color: #ffc5c5; }
342+
.btn-cat-process { background-color: #c5e0ff; color: #000; border-color: #c5e0ff; }
343+
.btn-cat-threading { background-color: #d3e0ff; color: #000; border-color: #d3e0ff; }
344+
.btn-cat-services { background-color: #ccc5ff; color: #000; border-color: #ccc5ff; }
345+
.btn-cat-device { background-color: #d3c5cc; color: #000; border-color: #d3c5cc; }
346+
.btn-cat-network { background-color: #d3ffc5; color: #000; border-color: #d3ffc5; }
347+
.btn-cat-socket { background-color: #d3ffc5; color: #000; border-color: #d3ffc5; }
348+
.btn-cat-synchronization { background-color: #f9c5ff; color: #000; border-color: #f9c5ff; }
349+
.btn-cat-browser { background-color: #dfffdf; color: #000; border-color: #dfffdf; }
350+
.btn-cat-crypto { background-color: #f0f2c5; color: #000; border-color: #f0f2c5; }
351+
.btn-cat-all { background-color: #198754; color: #000; border-color: #198754; }
352+
353+
/* Hover + selected */
354+
.btn-cat-default.active,
355+
.btn-cat-default:active,
356+
.show > .btn-cat-default.dropdown-toggle {
357+
border-color: #696969;
358+
}
359+
360+
.btn-cat-filesystem.active,
361+
.btn-cat-filesystem:active,
362+
.show > .btn-cat-filesystem.dropdown-toggle {
363+
border-color: #ffe3c5;
364+
}
365+
366+
.btn-cat-registry.active,
367+
.btn-cat-registry:active,
368+
.show > .btn-cat-registry.dropdown-toggle {
369+
border-color: #ffc5c5;
370+
}
371+
372+
.btn-cat-process.active,
373+
.btn-cat-process:active,
374+
.show > .btn-cat-process.dropdown-toggle {
375+
border-color: #c5e0ff;
376+
}
377+
378+
.btn-cat-threading.active,
379+
.btn-cat-threading:active,
380+
.show > .btn-cat-threading.dropdown-toggle {
381+
border-color: #d3e0ff;
382+
}
383+
384+
.btn-cat-services.active,
385+
.btn-cat-services:active,
386+
.show > .btn-cat-services.dropdown-toggle {
387+
border-color: #ccc5ff;
388+
}
389+
390+
.btn-cat-device.active,
391+
.btn-cat-device:active,
392+
.show > .btn-cat-device.dropdown-toggle {
393+
border-color: #dcd1d6;
394+
}
395+
396+
.btn-cat-network.active,
397+
.btn-cat-network:active,
398+
.show > .btn-cat-network.dropdown-toggle {
399+
border-color: #dcffd1;
400+
}
401+
402+
.btn-cat-socket.active,
403+
.btn-cat-socket:active,
404+
.show > .btn-cat-socket.dropdown-toggle {
405+
border-color: #dcffd1;
406+
}
407+
408+
.btn-cat-synchronization.active,
409+
.btn-cat-synchronization:active,
410+
.show > .btn-cat-synchronization.dropdown-toggle {
411+
border-color: #fad1ff;
412+
}
413+
414+
.btn-cat-browser.active,
415+
.btn-cat-browser:active,
416+
.show > .btn-cat-browser.dropdown-toggle {
417+
border-color: #e5ffe5;
418+
}
419+
420+
.btn-cat-crypto.active,
421+
.btn-cat-crypto:active,
422+
.show > .btn-cat-crypto.dropdown-toggle {
423+
border-color: #f3f5d1;
424+
}
425+
426+
.btn-cat-all.active,
427+
.btn-cat-all:active,
428+
.show > .btn-cat-all.dropdown-toggle {
429+
border-color: #479f76;
441430
}
442431

443432
/* Make category background apply to table cells in BS5 */
@@ -489,64 +478,34 @@ a:not(.btn, [class*="btn"]):hover {
489478
color: inherit; /* inherit the TR text color */
490479
}
491480

492-
/* Dark-theme file input (Bootstrap 5) */
493-
.form-control[type="file"]{
494-
background-color: #212529; /* bg-dark */
495-
color: rgba(255,255,255,.85); /* readable on dark */
496-
border: 1px solid #6c757d; /* border-secondary */
497-
}
498-
499-
/* Placeholder-ish text (some browsers show filename text differently) */
500-
.form-control[type="file"]::placeholder{
501-
color: rgba(255,255,255,.6);
502-
}
503-
504-
/* The “Browse” button part */
505-
.form-control[type="file"]::file-selector-button{
506-
background-color: #343a40; /* dark button */
507-
color: rgba(255,255,255,.9);
508-
border: 0;
509-
border-right: 1px solid #6c757d; /* border-secondary */
510-
padding: .375rem .75rem;
511-
margin-right: .75rem; /* spacing before filename */
512-
}
513-
514481
/* Hover/focus states */
515482
.form-control[type="file"]::file-selector-button:hover{
516483
background-color: #3f474e;
517484
}
518485

519-
.form-control[type="file"]:focus{
520-
border-color: #adb5bd; /* slightly brighter */
521-
box-shadow: 0 0 0 .25rem rgba(108,117,125,.25);
486+
/* Mid-gray form controls for Darkly */
487+
:root {
488+
--form-bg: #5c5c5c; /* ← adjust here (try #4f4f4f to #5c5c5c) */
489+
--form-border: #666;
490+
--form-text: #fff;
491+
--form-placeholder: rgba(255,255,255,.55);
522492
}
523493

524-
/* Fix green highlight on search box focus */
525-
.form-control:focus {
526-
border-color: #5ebcf3;
527-
box-shadow: 0 0 0 0.2rem rgba(94, 188, 243, 0.25);
494+
.form-control,
495+
.form-select {
496+
background-color: var(--form-bg) !important;
497+
color: var(--form-text) !important;
498+
border-color: var(--form-border) !important;
528499
}
529500

530-
/* Disabled */
531-
.form-control[type="file"]:disabled{
532-
background-color: #1c1f23;
533-
color: rgba(255,255,255,.5);
534-
}
535-
.form-control[type="file"]:disabled::file-selector-button{
536-
background-color: #2b3035;
537-
color: rgba(255,255,255,.5);
538-
}
539-
540-
.bg-dark .form-check-label {
541-
color: #fff;
501+
.form-control::placeholder {
502+
color: var(--form-placeholder) !important;
542503
}
543504

544-
.bg-dark .form-check-input {
545-
background-color: #212529;
546-
border-color: #6c757d;
505+
.form-control:focus,
506+
.form-select:focus {
507+
background-color: var(--form-bg) !important;
508+
border-color: #007ABCFF !important; /* Darkly success color */
509+
box-shadow: 0 0 0 .25rem rgba(0, 38, 60, 0.25);
547510
}
548511

549-
.bg-dark .form-check-input:checked {
550-
background-color: #0d6efd;
551-
border-color: #0d6efd;
552-
}

‎web/templates/analysis/behavior/_processes.html‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
out += "<li class=\"page-item" + alert_current_page(pages, page) + "><a class=\"page-link bg-dark border-secondary text-white\" href=\"#\">" + pages + "</a></li>";
2525
return out;
2626
}
27-
// ... existing js functions ...
27+
2828
function load_chunk(pid, pagenum, callback) {
2929
$("#process_" + pid + " div.calltable").load("/analysis/chunk/{{id}}/" + pid + "/" + pagenum + "/", function (data, status, xhr) {
3030
if (status == "error") {
@@ -42,8 +42,8 @@
4242

4343
$("#top_pagination").removeClass("d-none");
4444
$("#bottom_pagination").removeClass("d-none");
45-
$(".badge-filter").removeClass("badge-light text-dark").addClass("badge-dark");
46-
$("#badge_default_" + pid).removeClass("badge-dark").addClass("badge-light text-dark");
45+
$(".badge-filter").removeClass("active");
46+
$("#badge_default_" + pid).addClass("active");
4747
}
4848

4949
function show_tab(id, callback) {
@@ -91,9 +91,18 @@
9191

9292
$("#top_pagination").addClass("d-none");
9393
$("#bottom_pagination").addClass("d-none");
94-
$(".badge-filter").removeClass("badge-light text-dark").addClass("badge-dark");
95-
$("#badge_" + category + "_" + pid).removeClass("badge-dark").addClass("badge-light text-dark");
94+
$(".badge-filter").removeClass("active");
95+
$("#badge_" + category + "_" + pid).addClass("active");
9696
}
97+
98+
$(function () {
99+
var $default = $(".badge-filter[id^='badge_default_']").first();
100+
if (!$default.length) return;
101+
var m = $default.attr("id").match(/^badge_default_(\d+)$/);
102+
if (!m) return;
103+
var pid = m[1];
104+
load_chunk(pid, 1);
105+
});
97106
</script>
98107

99108
<div class="card bg-dark border-secondary">
@@ -137,7 +146,7 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
137146
<div class="row mb-4 align-items-center justify-content-center">
138147
<div class="col-12 text-center">
139148
<div class="btn-group flex-wrap mb-3" role="group">
140-
<button id="badge_default_{{process.process_id}}" type="button" class="btn btn-outline-light badge-filter active">Default</button>
149+
<button id="badge_default_{{process.process_id}}" type="button" class="btn btn-cat-default badge-filter">Default</button>
141150
<button id="badge_registry_{{process.process_id}}" type="button" class="btn btn-cat-registry badge-filter">Registry</button>
142151
<button id="badge_filesystem_{{process.process_id}}" type="button" class="btn btn-cat-filesystem badge-filter">Filesystem</button>
143152
<button id="badge_network_{{process.process_id}}" type="button" class="btn btn-cat-network badge-filter">Network</button>
@@ -148,7 +157,7 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
148157
<button id="badge_crypto_{{process.process_id}}" type="button" class="btn btn-cat-crypto badge-filter">Crypto</button>
149158
<button id="badge_browser_{{process.process_id}}" type="button" class="btn btn-cat-browser badge-filter">Browser</button>
150159
<button id="badge_device_{{process.process_id}}" type="button" class="btn btn-cat-device badge-filter">Device</button>
151-
<button id="badge_all_{{process.process_id}}" type="button" class="btn btn-success badge-filter">All</button>
160+
<button id="badge_all_{{process.process_id}}" type="button" class="btn btn-cat-all badge-filter">All</button>
152161
</div>
153162

154163
<div class="input-group mb-3 w-50 mx-auto">
@@ -218,6 +227,13 @@ <h5 class="alert-heading fw-bold">{{process.process_name}}</h5>
218227
$("#search_button_{{process.process_id}}").click(function() {
219228
load_filtered_chunk({{process.process_id}}, "all", "null", 0);
220229
});
230+
231+
$(function () {
232+
var $btn = $(".badge-filter[id^='badge_default_']").first();
233+
if ($btn.length) {
234+
$btn.trigger("click");
235+
}
236+
});
221237
});
222238
</script>
223239

0 commit comments

Comments
 (0)