Skip to content

Commit 45eb3bd

Browse files
coorassecoorasse
committed
Allow css customization
1 parent ae29403 commit 45eb3bd

File tree

3 files changed

+177
-175
lines changed

3 files changed

+177
-175
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ Here you can grep your logs with regular expressions.
3333
If ripgrep is not installed, onlylogs falls back to standard grep.
3434
A warning icon (⚠️) will be displayed in the toolbar when using standard grep to indicate slower search performance.
3535

36+
## Customization
37+
38+
Onlylogs provides two ways to customize the appearance of the log viewer: CSS Variables and a complete style override.
39+
Check the file [_log_container_styles.html.erb](app/views/onlylogs/shared/_log_container_styles.html.erb) for the complete list of CSS variables.
3640

3741
## Installation
3842

‎app/views/onlylogs/shared/_log_container.html.erb‎

Lines changed: 1 addition & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,6 @@
11
<%# locals: (log_file_path:, tail: 100, filter: "", autoscroll: true, fast: false) %>
22
<script src="https://cdn.jsdelivr.net/npm/clusterize.js@0.18.1/clusterize.min.js"></script>
3-
<style>
4-
@keyframes spin {
5-
from { transform: rotate(0deg); }
6-
to { transform: rotate(360deg); }
7-
}
8-
9-
.onlylogs-log-container {
10-
background-color: white;
11-
width: 100%;
12-
height: 100%; /* Take full height of parent container */
13-
display: flex;
14-
flex-direction: column;
15-
16-
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
17-
font-size: 0.8rem;
18-
margin: 0;
19-
border: none;
20-
border-radius: 0;
21-
box-sizing: border-box;
22-
23-
.onlylogs-spin-animation {
24-
display: inline-block;
25-
animation: spin 1s linear infinite;
26-
margin-right: 0.5em;
27-
}
28-
29-
.onlylogs-log-lines {
30-
flex: 1 1 auto;
31-
overflow-y: auto;
32-
overflow-x: auto;
33-
min-height: 0;
34-
height: 0; /* This is crucial for flex items with overflow */
35-
max-height: 100%;
36-
}
37-
38-
.clusterize-content {
39-
outline: 0;
40-
}
41-
42-
.onlylogs-log-toolbar {
43-
flex-shrink: 0;
44-
position: sticky;
45-
bottom: 0;
46-
z-index: 10;
47-
padding: 1rem 0.5rem;
48-
display: flex;
49-
align-items: center;
50-
gap: 2rem;
51-
}
52-
53-
.line-number {
54-
color: #aaa;
55-
user-select: none;
56-
margin-right: 0.5em;
57-
}
58-
59-
.color-success {
60-
color: green;
61-
}
62-
63-
.color-error {
64-
color: red;
65-
}
66-
67-
.request-row.selected {
68-
background: #e0e7ff !important;
69-
}
70-
71-
.fw-bold {
72-
font-weight: 600;
73-
}
74-
75-
.log-black {
76-
color: lch(18% 0 0);
77-
}
78-
79-
.log-red {
80-
color: lch(55% 60 29);
81-
}
82-
83-
.log-green {
84-
color: lch(70% 45 135);
85-
}
86-
87-
.log-yellow {
88-
color: lch(85% 30 100);
89-
}
90-
91-
.log-blue {
92-
color: lch(65% 45 260);
93-
}
94-
95-
.log-magenta {
96-
color: lch(65% 40 320);
97-
}
98-
99-
.log-cyan {
100-
color: lch(75% 30 200);
101-
}
102-
103-
.log-white {
104-
color: lch(95% 2 0);
105-
}
106-
107-
pre {
108-
margin: 0 !important;
109-
padding: 0.2rem;
110-
word-break: break-word; /* allow breaking long tokens like UUIDs/SQL */
111-
}
112-
113-
a {
114-
color: inherit;
115-
text-decoration: underline;
116-
}
117-
118-
.clear-filter-button {
119-
position: absolute;
120-
right: 0.25rem;
121-
background: none;
122-
border: none;
123-
color: #666;
124-
cursor: pointer;
125-
font-size: 0.8rem;
126-
padding: 0;
127-
width: 1rem;
128-
height: 1rem;
129-
display: flex;
130-
align-items: center;
131-
justify-content: center;
132-
padding: 0.25rem;
133-
}
134-
135-
.live-mode-sticky {
136-
opacity: 0.7;
137-
cursor: not-allowed;
138-
}
139-
140-
.live-mode-sticky input[type="checkbox"] {
141-
cursor: not-allowed;
142-
}
143-
144-
.grep-warning {
145-
color: #f59e0b;
146-
font-size: 1.2em;
147-
cursor: help;
148-
margin-left: auto;
149-
}
150-
151-
.onlylogs-context-menu {
152-
position: absolute;
153-
z-index: 1000;
154-
background: #e3f2fd;
155-
border: 1px solid #90caf9;
156-
border-radius: 6px;
157-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
158-
padding: 6px 12px;
159-
font-size: 0.9em;
160-
cursor: pointer;
161-
transition: background-color 0.2s;
162-
color: #1976d2;
163-
font-weight: 500;
164-
display: flex;
165-
align-items: center;
166-
gap: 4px;
167-
168-
&:active {
169-
background-color: #90caf9;
170-
}
171-
172-
&:hover {
173-
background-color: #bbdefb;
174-
}
175-
}
176-
}
177-
</style>
3+
<%= render "onlylogs/shared/log_container_styles" %>
1784

1795
<%
1806
klass = params[:fast].present? ? Onlylogs::FastFile : Onlylogs::File

‎app/views/onlylogs/shared/_log_container_styles.html.erb‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<style>
2+
.onlylogs-log-container {
3+
background-color: var(--onlylogs-bg-color, white);
4+
width: var(--onlylogs-width, 100%);
5+
height: var(--onlylogs-height, 100%); /* Take full height of parent container */
6+
min-height: var(--onlylogs-min-height, 400px);
7+
display: flex;
8+
flex-direction: column;
9+
10+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
11+
font-size: var(--onlylogs-font-size, 0.8rem);
12+
margin: 0;
13+
border: none;
14+
border-radius: 0;
15+
box-sizing: border-box;
16+
17+
.onlylogs-log-lines {
18+
flex: 1 1 auto;
19+
overflow-y: auto;
20+
overflow-x: auto;
21+
min-height: 0;
22+
height: 0; /* This is crucial for flex items with overflow */
23+
max-height: 100%;
24+
}
25+
26+
.clusterize-content {
27+
outline: 0;
28+
}
29+
30+
.line-number {
31+
color: #aaa;
32+
user-select: none;
33+
margin-right: 0.5em;
34+
}
35+
36+
.color-success {
37+
color: green;
38+
}
39+
40+
.color-error {
41+
color: red;
42+
}
43+
44+
.fw-bold {
45+
font-weight: 600;
46+
}
47+
48+
.log-black {
49+
color: lch(18% 0 0);
50+
}
51+
52+
.log-red {
53+
color: lch(55% 60 29);
54+
}
55+
56+
.log-green {
57+
color: lch(70% 45 135);
58+
}
59+
60+
.log-yellow {
61+
color: lch(85% 30 100);
62+
}
63+
64+
.log-blue {
65+
color: lch(65% 45 260);
66+
}
67+
68+
.log-magenta {
69+
color: lch(65% 40 320);
70+
}
71+
72+
.log-cyan {
73+
color: lch(75% 30 200);
74+
}
75+
76+
.log-white {
77+
color: lch(95% 2 0);
78+
}
79+
80+
pre {
81+
margin: 0 !important;
82+
padding: 0.2rem;
83+
word-break: break-word; /* allow breaking long tokens like UUIDs/SQL */
84+
}
85+
86+
a {
87+
color: inherit;
88+
text-decoration: underline;
89+
}
90+
91+
.onlylogs-context-menu {
92+
position: absolute;
93+
z-index: 1000;
94+
background: #e3f2fd;
95+
border: 1px solid #90caf9;
96+
border-radius: 6px;
97+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
98+
padding: 6px 12px;
99+
font-size: 0.9em;
100+
cursor: pointer;
101+
transition: background-color 0.2s;
102+
color: #1976d2;
103+
font-weight: 500;
104+
display: flex;
105+
align-items: center;
106+
gap: 4px;
107+
108+
&:active {
109+
background-color: #90caf9;
110+
}
111+
112+
&:hover {
113+
background-color: #bbdefb;
114+
}
115+
}
116+
117+
@keyframes spin {
118+
from { transform: rotate(0deg); }
119+
to { transform: rotate(360deg); }
120+
}
121+
122+
.onlylogs-log-toolbar {
123+
flex-shrink: 0;
124+
position: sticky;
125+
bottom: 0;
126+
z-index: 10;
127+
padding: 1rem 0.5rem;
128+
display: flex;
129+
align-items: center;
130+
gap: 2rem;
131+
132+
.live-mode-sticky {
133+
opacity: 0.7;
134+
cursor: not-allowed;
135+
136+
input[type="checkbox"] {
137+
cursor: not-allowed;
138+
}
139+
}
140+
141+
.clear-filter-button {
142+
position: absolute;
143+
right: 0.25rem;
144+
background: none;
145+
border: none;
146+
color: #666;
147+
cursor: pointer;
148+
font-size: 0.8rem;
149+
padding: 0;
150+
width: 1rem;
151+
height: 1rem;
152+
display: flex;
153+
align-items: center;
154+
justify-content: center;
155+
padding: 0.25rem;
156+
}
157+
158+
.onlylogs-spin-animation {
159+
display: inline-block;
160+
animation: spin 1s linear infinite;
161+
margin-right: 0.5em;
162+
}
163+
164+
.grep-warning {
165+
color: #f59e0b;
166+
font-size: 1.2em;
167+
cursor: help;
168+
margin-left: auto;
169+
}
170+
}
171+
}
172+
</style>

0 commit comments

Comments
 (0)