euler-path-explorer/css/components.css at main · aannoo/euler-path-explorer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/* EULER - Components CSS */

/* This file now imports specialized component styles */
@import 'sidebar.css';
@import 'form-elements.css';
@import 'edge-list.css';
@import 'results-panel.css';

/* ========== Hint Boxes ========== */
/* Consolidated hint-box styles to avoid duplication */
.hint-box {
  padding: var(--spacing-2) var(--spacing-3);
  margin-top: 0;
  margin-bottom: 0; /* Remove bottom margin */
  background-color: var(--dark-color-4);
  border-left: var(--section-border-width) solid var(--border-secondary);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  opacity: 1;
  transition: opacity var(--transition-slow), transform var(--transition-slow), height var(--transition-slow);
  width: 100%;
  /* Add hardware acceleration for transitions */
  transform: translateZ(0);
}

.hint-box i {
  margin-right: var(--spacing-1);
  color: var(--accent-secondary);
  font-size: var(--font-size-md);
}

.hint-box span {
  display: inline-block;
  flex: 1;
}

.hint-box.hidden {
  display: none; /* Completely hide the element when .hidden class is present */
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

/* Add specific styling for weighted hint box */
#weighted-hint.hint-box {
  border-left: var(--section-border-width) solid var(--primary-color);
  line-height: 1.5;
}

/* Remove the chinese-postman-info class since we're not using it anymore */

.hint-flag {
  font-size: 1.2em;
  margin-left: 4px;
  vertical-align: middle;
}

/* Add specific styling for save hint box in saved tab only */
#saved-tab #save-hint.hint-box {
  border-left: var(--section-border-width) solid var(--primary-color);
  background-color: var(--dark-color-3);
}

#saved-tab #save-hint.hint-box i {
  color: var(--primary-color);
}

/* Empty state for saved graphs */
.empty-saved-state {
  padding: 20px;
  text-align: center;
  background-color: var(--dark-color-3);
  margin-top: 0;
  color: var(--text-secondary);
  border-left: var(--section-border-width) solid var(--accent-primary);
}

/* Saved Graphs List - main styling moved to saved-graphs.css to avoid duplication */
.saved-graphs-list {
  margin-top: 0;
}

/* Saved graph item styles moved to saved-graphs.css to avoid duplication */

.saved-graph-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 1.1em;
}

.saved-graph-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Common responsive adjustments for multiple components */
@media (max-width: 992px) {
  .option-list {
    flex-direction: column;
  }

  /* Use minimal styles here since the main styles are in buttons.css */
  .btn {
    min-height: 48px; /* Only override what's needed for mobile */
  }

  .btn-sm {
    min-height: 48px; /* Only override what's needed for mobile */
  }

  .option-item label {
    padding-left: 35px;
    padding-right: 35px;
  }
}