Skip to content

Commit 2ee1090

Browse files
mrin9mrin9
committed
default color for nav-bar changed to dark
1 parent c299e44 commit 2ee1090

File tree

4 files changed

+46
-13
lines changed

4 files changed

+46
-13
lines changed

‎docs/api.html‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,31 +126,45 @@ <h2> Attributes</h2>
126126
<tr>
127127
<td class="mono bold right">bg-color </td>
128128
<td class="gray">Hex color code for main background</td>
129-
<td class='small-font mono'>Dark Theme: #333 <br/>Light Theme: #fff</td>
129+
<td class='small-font'>
130+
<table class="no-border-table">
131+
<tr> <td> Dark Theme</td><td class='small-font mono'> <div class="color-box" style="background-color: #333;"> </div> #333</td></tr>
132+
<tr> <td> Light Theme</td><td class='small-font mono'> <div class="color-box" style="background-color: #fff;"> </div> #fff</td></tr>
133+
</table>
134+
</td>
130135
</tr>
131136

132137
<tr>
133138
<td class="mono bold right">text-color </td>
134139
<td class="gray">Hex color code for text</td>
135-
<td class='small-font mono'> Dark Theme: #bbb <br/>Light Theme: #444</td>
140+
<td class='small-font'>
141+
<table class="no-border-table">
142+
<tr> <td> Dark Theme</td><td class='small-font mono'> <div class="color-box" style="background-color: #bbb;"> </div> #bbb</td></tr>
143+
<tr> <td> Light Theme</td><td class='small-font mono'> <div class="color-box" style="background-color: #444;"> </div> #444</td></tr>
144+
</table>
145+
</td>
136146
</tr>
137147

138148
<tr>
139149
<td class="mono bold right">header-color </td>
140150
<td class="gray">Hex color code for the header's background</td>
141-
<td class='small-font mono'>#444444</td>
151+
<td class='small-font mono'>
152+
<div class="color-box" style="background-color: #444;"></div> #444444
153+
</td>
142154
</tr>
143155

144156
<tr>
145157
<td class="mono bold right">primary-color</td>
146158
<td class="gray">Hex color code on various controls such as buttons, tabs </td>
147-
<td class='small-font mono'>#FF791A</td>
159+
<td class='small-font mono'>
160+
<div class="color-box" style="background-color: #FF791A;"></div> #FF791A
161+
</td>
148162
</tr>
149163

150164
<tr>
151165
<td class="mono bold right">regular-font </td>
152166
<td class="gray">Font Name(s) to be used for regular text </td>
153-
<td class='small-font'>rapidoc, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif</td>
167+
<td class='small-font'>rapidoc, "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif</td>
154168
</tr>
155169

156170
<tr>

‎docs/table.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,19 @@
4545
border-bottom:1px solid #aaa;
4646
}
4747

48+
.no-border-table td,
49+
.no-border-table th {
50+
padding: 2px;
51+
vertical-align: top;
52+
border:none;
53+
}
54+
55+
.color-box {
56+
height:16px;
57+
width: 16px;
58+
border: 1px solid black;
59+
display: inline-block;
60+
}
4861
@media only screen and (min-width: 768px){
4962
.table-block{
5063
font-size:12px;
@@ -59,5 +72,4 @@
5972
font-size:14px;
6073
width:730px;
6174
}
62-
6375
}

‎src/rapidoc.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default class RapiDoc extends LitElement {
141141
:host {
142142
--layout:${this.layout ? `${this.layout}` : 'row'};
143143
--font-mono:${this.monoFont ? `${this.monoFont}` : 'Monaco, "Andale Mono", "Roboto Mono", Consolas'};
144-
--font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
144+
--font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'};
145145
146146
--font-size-mono: 13px;
147147
--font-size-regular: 14px;
@@ -186,7 +186,7 @@ export default class RapiDoc extends LitElement {
186186
}
187187
.nav-scroll {
188188
overflow-x:hidden;
189-
overflow-y:auto;
189+
overflow-y: auto;
190190
}
191191
.nav-bar:hover .cover-scroll-bar {
192192
opacity: 0;
@@ -195,20 +195,21 @@ export default class RapiDoc extends LitElement {
195195
background:transparent;
196196
}
197197
.nav-scroll::-webkit-scrollbar{
198-
width: 10px;
198+
width: 12px;
199199
background-color: transparent;
200200
}
201201
.nav-scroll::-webkit-scrollbar-thumb {
202+
border: 3px solid var(--nav-bg-color);
202203
background-color: var(--nav-hover-bg-color);
203204
}
204205
205206
.cover-scroll-bar {
206207
position: absolute;
207208
background: var(--nav-bg-color);
208-
height: 100%;
209+
height: 100%;
209210
top: 0;
210211
right: 0;
211-
width: 20px;
212+
width: 10px;
212213
transition: all .3s;
213214
opacity: 1;
214215
}
@@ -242,7 +243,6 @@ export default class RapiDoc extends LitElement {
242243
.nav-bar-info.active,
243244
.nav-bar-tag.active,
244245
.nav-bar-path.active {
245-
font-weight:bold;
246246
border-left:4px solid var(--nav-accent-color);
247247
color:var(--nav-hover-text-color);
248248
background-color:var(--nav-hover-bg-color);
@@ -524,7 +524,7 @@ export default class RapiDoc extends LitElement {
524524
`)}
525525
</div>`
526526
}
527-
<div class="cover-scroll-bar"></div>
527+
<!-- div class="cover-scroll-bar"></div -->
528528
</div>
529529
`;
530530
}

‎src/utils/theme.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,18 @@ export default function setTheme(baseTheme, theme = {}) {
8484
const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 70); // or #999
8585
const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, -180);
8686

87+
/*
8788
const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -10);
8889
const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.brightness(fg1, 5);
8990
const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : bg1;
9091
const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : primaryColor;
9192
const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;
93+
*/
94+
const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -180);
95+
const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.brightness(bg1, -25);
96+
const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(bg1, -200);
97+
const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : primaryColor;
98+
const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;
9299

93100
newTheme = {
94101
bg1,

0 commit comments

Comments
 (0)