Skip to content

Commit cc1063b

Browse files
HaikAsatryanHaikAsatryan
committed
swagger ui work in progress
1 parent 29fdac0 commit cc1063b

2 files changed

Lines changed: 184 additions & 144 deletions

File tree

‎src/SharedKernel/OpenApi/UiAssets/panda-style.css‎

Lines changed: 184 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,211 @@
1-
.swagger-ui .auth-container .btn.modal-btn.auth {
2-
display: flex;
3-
justify-content: center;
1+
/* Glass topbar (light + dark via CSS vars) */
2+
:root {
3+
--sw-topbar-bg: rgba(255, 255, 255, 0.65);
4+
--sw-topbar-border: rgba(0, 0, 0, 0.10);
5+
--sw-topbar-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
6+
--sw-topbar-blur: 10px;
47
}
58

6-
.topbar-wrapper > a > svg {
7-
opacity: 0;
9+
html.dark-mode {
10+
--sw-topbar-bg: rgba(18, 18, 18, 0.55);
11+
--sw-topbar-border: rgba(255, 255, 255, 0.14);
12+
--sw-topbar-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
813
}
914

10-
.swagger-ui .topbar .download-url-wrapper {
11-
display: flex;
12-
}
13-
14-
.swagger-ui .topbar .download-url-wrapper .select-label select {
15-
border-color: #4E37D3;
16-
}
17-
18-
.swagger-ui .topbar .download-url-wrapper .select-label span {
19-
color: transparent;
20-
user-select: none;
21-
}
22-
23-
24-
.swagger-ui .topbar-wrapper img {
25-
visibility: hidden;
26-
}
27-
28-
element.style {
29-
}
30-
31-
.swagger-ui .auth-btn-wrapper {
32-
gap: 20px;
33-
margin-top: 20px;
34-
}
35-
36-
.swagger-ui .auth-wrapper .authorize {
37-
margin: 0;
38-
}
39-
40-
.swagger-ui .btn.authorize.locked, .swagger-ui .btn.authorize.unlocked {
41-
display: flex;
42-
align-items: center;
43-
justify-content: center;
44-
gap: 7px
45-
46-
}
47-
48-
.swagger-ui .btn.authorize span {
49-
clear: both;
50-
padding: 0;
51-
margin-top: 3px;
52-
}
53-
54-
.swagger-ui .auth-container .btn.modal-btn.auth {
55-
min-width: 250px;
56-
padding: 10px 0;
57-
}
58-
59-
.swagger-ui .topbar-wrapper .link::before {
60-
content: "";
61-
background: url("/swagger-resources/logo.svg") no-repeat center;
62-
background-size: contain;
63-
width: 36.402px;
64-
height: 28.8px;
65-
display: inline-block;
66-
position: relative;
67-
}
15+
.swagger-ui .topbar {
16+
background: var(--sw-topbar-bg) !important;
17+
backdrop-filter: blur(var(--sw-topbar-blur)) saturate(1.2);
18+
-webkit-backdrop-filter: blur(var(--sw-topbar-blur)) saturate(1.2);
19+
border-bottom: 1px solid var(--sw-topbar-border);
20+
box-shadow: var(--sw-topbar-shadow);
6821

69-
/* Add your second image */
70-
.swagger-ui .topbar-wrapper .link::after {
71-
content: "";
72-
background: url("/swagger-resources/logo-wording.svg") no-repeat center;
73-
background-size: contain;
74-
width: 90.0276px;
75-
height: 20.2044px;
76-
display: inline-block;
77-
position: relative;
78-
left: -132px;
79-
}
80-
81-
div.topbar {
82-
background: transparent !important;
83-
backdrop-filter: blur(3px);
84-
position: fixed;
85-
width: 100%;
22+
position: sticky;
8623
top: 0;
87-
border-bottom: 1px solid #ffffff;
8824
z-index: 1000;
8925
}
9026

91-
.swagger-ui {
92-
margin-top: 128px;
93-
}
94-
95-
.swagger-ui .btn.authorize.unlocked {
96-
background-color: white !important;
97-
color: black !important;
98-
border: 2px solid #4E37D3 !important;
99-
}
100-
101-
.swagger-ui .btn.authorize.unlocked svg {
102-
fill: black !important;
103-
}
104-
105-
.swagger-ui .btn.authorize.locked {
106-
background-color: #4E37D3 !important;
107-
color: #ffffff !important;
108-
border: 2px solid #4E37D3 !important;
109-
}
110-
111-
.swagger-ui .btn.authorize.locked svg {
112-
fill: #ffffff !important;
113-
}
114-
115-
.swagger-ui .auth-container .btn.modal-btn.auth {
116-
background-color: #4E37D3 !important;
117-
color: #ffffff !important;
118-
border: 1px solid #4E37D3 !important;
119-
width: 100%;
27+
/*.swagger-ui .auth-container .btn.modal-btn.auth {*/
28+
/* display: flex;*/
29+
/* justify-content: center;*/
30+
/*}*/
31+
32+
/*.topbar-wrapper > a > svg {*/
33+
/* opacity: 0;*/
34+
/*}*/
35+
36+
37+
/*.swagger-ui .topbar .download-url-wrapper .select-label select {*/
38+
/* border-color: #4E37D3;*/
39+
/*}*/
40+
41+
/*.swagger-ui .topbar .download-url-wrapper .select-label span {*/
42+
/* color: transparent;*/
43+
/* user-select: none;*/
44+
/*}*/
45+
46+
47+
/*.swagger-ui .topbar-wrapper img {*/
48+
/* visibility: hidden;*/
49+
/*}*/
50+
51+
/*element.style {*/
52+
/*}*/
53+
54+
/*.swagger-ui .auth-btn-wrapper {*/
55+
/* gap: 20px;*/
56+
/* margin-top: 20px;*/
57+
/*}*/
58+
59+
/*.swagger-ui .auth-wrapper .authorize {*/
60+
/* margin: 0;*/
61+
/*}*/
62+
63+
/*.swagger-ui .btn.authorize.locked, .swagger-ui .btn.authorize.unlocked {*/
64+
/* display: flex;*/
65+
/* align-items: center;*/
66+
/* justify-content: center;*/
67+
/* gap: 7px*/
68+
69+
/*}*/
70+
71+
/*.swagger-ui .btn.authorize span {*/
72+
/* clear: both;*/
73+
/* padding: 0;*/
74+
/* margin-top: 3px;*/
75+
/*}*/
76+
77+
/*.swagger-ui .auth-container .btn.modal-btn.auth {*/
78+
/* min-width: 250px;*/
79+
/* padding: 10px 0;*/
80+
/*}*/
81+
82+
/*.swagger-ui .topbar-wrapper .link::before {*/
83+
/* content: "";*/
84+
/* background: url("/swagger-resources/logo.svg") no-repeat center;*/
85+
/* background-size: contain;*/
86+
/* width: 36.402px;*/
87+
/* height: 28.8px;*/
88+
/* display: inline-block;*/
89+
/* position: relative;*/
90+
/*}*/
91+
92+
/*!* Add your second image *!*/
93+
/*.swagger-ui .topbar-wrapper .link::after {*/
94+
/* content: "";*/
95+
/* background: url("/swagger-resources/logo-wording.svg") no-repeat center;*/
96+
/* background-size: contain;*/
97+
/* width: 90.0276px;*/
98+
/* height: 20.2044px;*/
99+
/* display: inline-block;*/
100+
/* position: relative;*/
101+
/* left: -132px;*/
102+
/*}*/
103+
104+
/*div.topbar {*/
105+
/* background: transparent !important;*/
106+
/* backdrop-filter: blur(3px);*/
107+
/* position: fixed;*/
108+
/* width: 100%;*/
109+
/* top: 0;*/
110+
/* border-bottom: 1px solid #ffffff;*/
111+
/* z-index: 1000;*/
112+
/*}*/
113+
114+
/*.swagger-ui {*/
115+
/* margin-top: 128px;*/
116+
/*}*/
117+
118+
/*.swagger-ui .btn.authorize.unlocked {*/
119+
/* background-color: white !important;*/
120+
/* color: black !important;*/
121+
/* border: 2px solid #4E37D3 !important;*/
122+
/*}*/
123+
124+
/*.swagger-ui .btn.authorize.unlocked svg {*/
125+
/* fill: black !important;*/
126+
/*}*/
127+
128+
/*.swagger-ui .btn.authorize.locked {*/
129+
/* background-color: #4E37D3 !important;*/
130+
/* color: #ffffff !important;*/
131+
/* border: 2px solid #4E37D3 !important;*/
132+
/*}*/
133+
134+
/*.swagger-ui .btn.authorize.locked svg {*/
135+
/* fill: #ffffff !important;*/
136+
/*}*/
137+
138+
/*.swagger-ui .auth-container .btn.modal-btn.auth {*/
139+
/* background-color: #4E37D3 !important;*/
140+
/* color: #ffffff !important;*/
141+
/* border: 1px solid #4E37D3 !important;*/
142+
/* width: 100%;*/
143+
/*}*/
144+
145+
/*.btn.modal-btn.auth.btn-done.button {*/
146+
/* display: none;*/
147+
/*}*/
148+
149+
/*.auth-container {*/
150+
/* padding: 0 !important;*/
151+
/*}*/
152+
153+
/*.swagger-ui .dialog-ux .modal-ux {*/
154+
/* max-width: 600px;*/
155+
/*}*/
156+
157+
/*.opblock-summary-get:hover {*/
158+
/* background-color: #b3e0ff !important;*/
159+
/*}*/
160+
161+
/*.swagger-ui .auth-container input[type=text] {*/
162+
/* width: 100%;*/
163+
/*}*/
164+
165+
166+
/* colored hover effects for different HTTP methods */
167+
168+
.swagger-ui .opblock-summary-get:hover {
169+
background-color: #9dc9ff !important;
170+
}
171+
172+
.swagger-ui .opblock-summary-post:hover {
173+
background-color: #83e697 !important;
120174
}
121175

122-
.btn.modal-btn.auth.btn-done.button {
123-
display: none;
176+
.swagger-ui .opblock-summary-put:hover {
177+
background-color: #f0cc9f !important;
124178
}
125179

126-
.auth-container {
127-
padding: 0 !important;
180+
.swagger-ui .opblock-summary-patch:hover {
181+
background-color: #a2eede !important;
128182
}
129183

130-
.swagger-ui .dialog-ux .modal-ux {
131-
max-width: 600px;
184+
.swagger-ui .opblock-summary-delete:hover {
185+
background-color: #faa3a3 !important;
132186
}
133187

134-
.opblock-summary-get:hover {
135-
background-color: #b3e0ff !important;
188+
/* dark mode (Swagger UI 5.31+): softer hover tints */
189+
html.dark-mode {
190+
--opblock-hover-alpha: .22;
136191
}
137192

138-
.swagger-ui .auth-container input[type=text] {
139-
140-
width: 100%;
193+
html.dark-mode .swagger-ui .opblock-summary-get:hover {
194+
background-color: rgb(157 201 255 / var(--opblock-hover-alpha)) !important;
141195
}
142196

143-
.opblock-summary-post:hover {
144-
background-color: #83e697 !important;
197+
html.dark-mode .swagger-ui .opblock-summary-post:hover {
198+
background-color: rgb(131 230 151 / var(--opblock-hover-alpha)) !important;
145199
}
146200

147-
.opblock-summary-put:hover {
148-
background-color: #f0cc9f !important;
201+
html.dark-mode .swagger-ui .opblock-summary-put:hover {
202+
background-color: rgb(240 204 159 / var(--opblock-hover-alpha)) !important;
149203
}
150204

151-
.opblock-summary-patch:hover {
152-
background-color: #a2eede !important;
205+
html.dark-mode .swagger-ui .opblock-summary-patch:hover {
206+
background-color: rgb(162 238 222 / var(--opblock-hover-alpha)) !important;
153207
}
154208

155-
.opblock-summary-delete:hover {
156-
background-color: #faa3a3 !important;
157-
}
209+
html.dark-mode .swagger-ui .opblock-summary-delete:hover {
210+
background-color: rgb(250 163 163 / var(--opblock-hover-alpha)) !important;
211+
}

‎src/SharedKernel/OpenApi/UiAssets/panda-style.js‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,4 @@ document.addEventListener('DOMContentLoaded', function () {
1212
newLink.href = faviconPath;
1313
document.head.appendChild(newLink);
1414
}
15-
16-
// Scroll modal to top when it appears
17-
const observer = new MutationObserver(() => {
18-
const modal = document.querySelector('.modal-ux-content');
19-
if (modal) {
20-
modal.scrollTop = 0;
21-
observer.disconnect();
22-
}
23-
});
24-
25-
observer.observe(document.body, {
26-
childList: true,
27-
subtree: true,
28-
});
2915
});

0 commit comments

Comments
 (0)