argo-cd

1
@import 'node_modules/argo-ui/src/styles/config';
2

3
.pod-logs-viewer {
4
    height: 90%;
5
    font-size: 14px;
6
    font-family: monospace;
7
    background-color: white;
8
    padding: 0;
9
    color: black;
10

11
    &--inverted {
12
        background-color: black;
13
        color: white;
14
    }
15

16
    &__settings {
17
        display: flex;
18

19
        .argo-checkbox,
20
        .argo-checkbox input,
21
        .argo-checkbox input:focus {
22
            outline: none !important;
23
            border: none !important;
24
            width: 12px;
25
            margin-right: 8px;
26
            input:checked + span,
27
            input + span {
28
                border: none;
29
                width: 12px !important;
30
                background-color: transparent;
31
            }
32
            .fa {
33
                display: none;
34
            }
35
        }
36

37
        margin-bottom: 1em;
38

39
        > * {
40
            display: flex;
41
            align-items: center;
42
        }
43

44
        .argo-button {
45
            margin-right: 5px;
46
            border: 1px solid transparent;
47

48
            .fa {
49
                width: 12px;
50
            }
51
        }
52
    }
53

54
    &__filter {
55
        display: flex;
56
        margin-left: auto;
57
        width: 320px;
58

59
        .argo-button {
60
            display: flex;
61
            align-items: center;
62
        }
63
    }
64

65
    &__menu {
66
        display: flex;
67
        margin-bottom: 1em;
68
        padding-left: 10px;
69
        .page-info {
70
            margin-left: auto;
71
            margin-right: auto;
72
            padding: 3px 8px;
73
            text-overflow: clip;
74
            white-space: nowrap;
75
        }
76
        .nav-container {
77
            display: flex;
78
            align-self: flex-start;
79
            padding: 3px 8px;
80
            cursor: pointer;
81
            border-radius: 7px;
82
            align-items: center;
83
            justify-content: center;
84
            border: 1px solid black;
85
            margin: 0 2px;
86
            &:hover {
87
                background-color: black;
88
                color: white;
89
            }
90
            &.disabled {
91
                opacity: 0.5;
92
                cursor: not-allowed;
93
            }
94
        }
95
        i {
96
            margin-left: 5px;
97
        }
98

99
        &--inverted {
100
            i {
101
                border-color: white;
102
                &:hover {
103
                    background-color: white;
104
                    color: black;
105
                }
106
            }
107
        }
108
    }
109

110
    &__line {
111
        padding-left: 0.5ch;
112

113
        &--selected {
114
            background-color: red;
115
            box-shadow: -3px 0 0 0 darkred;
116
        }
117

118
        &__menu {
119
            border-radius: 6px;
120
            text-align: center;
121
            min-width: 25px;
122
            opacity: 0;
123
            flex-shrink: 0;
124
            box-shadow: 0 0 0 1px red inset;
125
            &--visible {
126
                opacity: 1;
127
            }
128
            &:hover {
129
                color: red;
130
            }
131
        }
132

133
        &__number {
134
            text-align: right;
135
            min-width: 3ch;
136
            margin-right: 2ch;
137
            opacity: 0.5;
138
            cursor: pointer;
139
            &:hover {
140
                opacity: 1;
141
            }
142
        }
143

144
        &__pod {
145
            padding-left: 5px;
146
            padding-right: 5px;
147
            span {
148
                display: none;
149
                text-overflow: ellipsis;
150
                overflow: hidden;
151
            }
152
            width: 3ch;
153
            min-width: 3ch;
154
        }
155
        &__timestamp {
156
            padding-left: 5px;
157
            padding-right: 5px;
158
            span {
159
                display: none;
160
                text-overflow: ellipsis;
161
                overflow: hidden;
162
            }
163
            width: 3ch;
164
            min-width: 3ch;
165
        }
166
    }
167

168
    &--pod-name-visible {
169
        .pod-logs-viewer__line__pod {
170
            span {
171
                display: inherit;
172
            }
173
            i {
174
                display: none;
175
            }
176
            width: 30ch;
177
            min-width: 30ch;
178
        }
179
    }
180
    &--pod-timestamp-visible {
181
        .pod-logs-viewer__line__timestamp {
182
            span {
183
                display: inherit;
184
            }
185
            i {
186
                display: none;
187
            }
188
            width: 30ch;
189
            min-width: 30ch;
190
        }
191
    }
192

193
    &__pod-name-toggle {
194
        cursor: pointer;
195
        position: fixed;
196
        top: 50%;
197
        transform: translateY(2em);
198
        z-index: 1;
199
    }
200
}
201

202
.copySuccess {
203
    // ARGO_SUCCESS_COLOR
204
    background-color: #18be94 !important;
205
}
206
.copyFailure {
207
    // ARGO_FAILED_COLOR
208
    background-color: #e96d76 !important;
209
}
210
.copyStandard {
211
    background-color: #6d7f8b !important;
212
}
213

214
.container-item {
215
    font-size: 0.9em;
216
    color: $argo-color-teal-5;
217
}
218

219
code {
220
    background-color: inherit;
221
    border: none;
222
    padding: inherit;
223
    font-family: inherit;
224
    font-weight: inherit;
225
    color: inherit;
226
}
227

228
.ReactVirtualized__Grid__innerScrollContainer {
229
    overflow: initial !important;
230
}
231

232
/* Hide scrollbar for Chrome, Safari and Opera */
233
.noscroll::-webkit-scrollbar {
234
    display: none;
235
}
236

237
/* Hide scrollbar for IE, Edge and Firefox */
238
.noscroll {
239
    -ms-overflow-style: none;  /* IE and Edge */
240
    scrollbar-width: none;  /* Firefox */
241
}