Skip to content

Commit 59e3860

Browse files
SkalskiPSkalskiP
authored
Merge pull request #103 from roboflow/new-theme
Update theme
2 parents 0c5653c + 2eeb950 commit 59e3860

File tree

2 files changed

+77
-11
lines changed

2 files changed

+77
-11
lines changed

‎docs/overrides/partials/header.html‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,18 @@
8383
<li><a href="https://blog.roboflow.com">Blog</a></li>
8484
<li><a href="https://discuss.roboflow.com">Community Forum</a></li>
8585
<li><a href="https://roboflow.com/sales">Contact Sales</a></li>
86+
<li><a href="https://universe.roboflow.com">Universe</a></li>
8687
</ul>
8788
</li>
8889
<li style="align-items: center;" id="products-list">
89-
<label for="dropdown-products"><span>Products <img src="https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-down.svg?v=2&token=a463935e93" style="height: 0.5rem;" /></span></label>
90+
<label for="dropdown-products"><span>Docs <img src="https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-down.svg?v=2&token=a463935e93" style="height: 0.5rem;" /></span></label>
9091
<input type="radio" name="dropdown" id="dropdown-products" style="display: none;" />
9192
<ul class="products-sublist sublist">
9293
<li><a href="https://inference.roboflow.com">Inference</a></li>
9394
<li><a href="https://supervision.roboflow.com">Supervision</a></li>
9495
<li><a href="https://trackers.roboflow.com">Trackers</a></li>
95-
<li><a href="https://universe.roboflow.com">Universe</a></li>
96+
<li><a href="https://maestro.roboflow.com">Maestro</a></li>
97+
<li><a href="https://docs.roboflow.com">Roboflow</a></li>
9698
</ul>
9799
</li>
98100
<script>
@@ -109,6 +111,49 @@
109111
dropdownProducts.checked = false;
110112
}
111113
});
114+
// on mouse over
115+
document.getElementById('resources-list').addEventListener('mouseover', function() {
116+
document.getElementById('dropdown-resources').checked = true;
117+
});
118+
document.getElementById('products-list').addEventListener('mouseover', function() {
119+
document.getElementById('dropdown-products').checked = true;
120+
});
121+
// on mouse out
122+
document.getElementById('resources-list').addEventListener('mouseout', function() {
123+
// if not hovering over the sublist or the label, uncheck the dropdown
124+
// wait 1 sec
125+
setTimeout(function() {
126+
if (!document.querySelector('.resources-sublist:hover') && !document.querySelector('#resources-list:hover')) {
127+
document.getElementById('dropdown-resources').checked = false;
128+
}
129+
}, 350);
130+
});
131+
// if mouseout of sublist, uncheck immediately
132+
document.querySelector('.resources-sublist').addEventListener('mouseout', function() {
133+
setTimeout(function() {
134+
if (!document.querySelector('.resources-sublist:hover') && !document.querySelector('#resources-list:hover')) {
135+
document.getElementById('dropdown-resources').checked = false;
136+
}
137+
}, 450);
138+
});
139+
document.getElementById('products-list').addEventListener('mouseout', function() {
140+
// if not hovering over the sublist, uncheck the dropdown
141+
// wait 1 sec
142+
setTimeout(function() {
143+
if (!document.querySelector('.products-sublist:hover') && !document.querySelector('#products-list:hover')) {
144+
document.getElementById('dropdown-products').checked = false;
145+
}
146+
}, 500);
147+
});
148+
// if mouseout of sublist, uncheck immediately
149+
document.querySelector('.products-sublist').addEventListener('mouseout', function() {
150+
setTimeout(function() {
151+
if (!document.querySelector('.products-sublist:hover') && !document.querySelector('#products-list:hover')) {
152+
document.getElementById('dropdown-products').checked = false;
153+
}
154+
}, 500);
155+
});
156+
112157
</script>
113158
<style>
114159
#dropdown-resources:checked ~ .resources-sublist {
@@ -123,7 +168,7 @@
123168
display: none;
124169
}
125170
</style>
126-
<a href="https://app.roboflow.com"><li class="header-btn" style="border-radius: 5px; color: white; background: var(--md-typeset-a-color); padding-top: 0.25rem; padding-left: 0.5rem; padding-bottom: 0.25rem; padding-right: 0.5rem; border: 1px solid #8315F9;">Go to Roboflow</li></a>
171+
<a href="https://github.com/roboflow/trackers"><li class="header-btn" style="border-radius: 5px; color: white; background: var(--md-typeset-a-color); padding-top: 0.25rem; padding-left: 0.5rem; padding-bottom: 0.25rem; padding-right: 0.5rem; border: 1px solid #8315F9;">Go to GitHub</li></a>
127172
</ul>
128173
</nav>
129174

‎docs/overrides/stylesheets/rf.css‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
:root {
1+
:root, body {
22
/* Default to light theme */
33
--md-primary-fg-color: #8315F9;
4+
--md-code-hl-color: #8315F9 !important;
45
--md-accent-fg-color: #8315F9 !important;
6+
--md-code-hl-color--light: #e8d2ff89 !important;
57
--md-footer-fg-color--light: rgb(111, 108, 121) !important;
68
}
79

@@ -36,9 +38,17 @@ body.light {
3638
#products-list *:hover .products-sublist {
3739
display: block;
3840
}
39-
#resources-list * {
41+
#resources-list *, #products-list * {
4042
cursor: pointer;
4143
}
44+
.products-sublist, .resources-sublist {
45+
padding: 0.25rem;
46+
}
47+
.products-sublist li:hover, .resources-sublist li:hover, .md-nav__link[href]:hover {
48+
background: rgb(242, 241, 247) !important;
49+
border-radius: 6px;
50+
color: initial !important;
51+
}
4252
.md-search {
4353
flex-grow: 2;
4454
}
@@ -75,11 +85,6 @@ body.light {
7585
background-color: transparent;
7686
color: rgb(111, 108, 121);
7787
}
78-
.md-nav__link:hover {
79-
background: rgb(243, 238, 255);
80-
border-radius: 6px;
81-
color: #8315F9 !important;
82-
}
8388
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child, .md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10), .md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11), .md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12), .md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13), .md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14), .md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15), .md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16), .md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17), .md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18), .md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19), .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2), .md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20), .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3), .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4), .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5), .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6), .md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7), .md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8), .md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
8489
color: #8315F9;
8590
border-bottom: 1px solid #8315F9;
@@ -186,9 +191,13 @@ body {
186191
}
187192
}
188193
.md-content {
189-
max-width: 800px;
194+
max-width: 40rem;
190195
margin: auto;
191196
}
197+
/* // if no md-sidebar--primary, make .md-content full width */
198+
.md-main__inner:has(.md-sidebar--primary[hidden]) .md-content {
199+
max-width: 100%;
200+
}
192201
.md-sidebar--primary {
193202
flex: 0 20%;
194203
}
@@ -219,3 +228,15 @@ body[data-md-url$="/cookbooks/"] .md-content {
219228
margin-left: 0;
220229
width: 100%;
221230
}
231+
232+
.md-main, nav .md-grid, .md-header__inner {
233+
max-width: 1600px;
234+
width: 100%;
235+
margin: auto;
236+
}
237+
.md-search__scrollwrap {
238+
width: 100% !important;
239+
}
240+
.md-nav--secondary .md-nav__title {
241+
position: initial !important;
242+
}

0 commit comments

Comments
 (0)