Skip to content

Commit 31b82c6

Browse files
SLdragonSLdragon
authored
Update scroll bar theme (#525)
* Update scroll bar theme * 1.20.0-rc2
1 parent 7fd9adb commit 31b82c6

File tree

3 files changed

+85
-68
lines changed

3 files changed

+85
-68
lines changed

‎assets/views/gallery.css

+83-66
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
::-webkit-scrollbar {
2-
width: 10px;
3-
background: white;
2+
width: 10px;
3+
background: white;
44
}
55

66
::-webkit-scrollbar-thumb {
7-
background-color: #AAA;
8-
border: 2px solid white;
9-
border-radius: 5px;
7+
background-color: #aaa;
8+
border: 2px solid white;
9+
border-radius: 5px;
1010
}
1111

12-
[v-cloak] { display: none }
12+
[v-cloak] {
13+
display: none;
14+
}
1315

1416
* {
15-
font-family: "Segoe UI",-apple-system,".SFNSText-Regular","San Francisco","Helvetica Neue","Lucida Grande",Arial,sans-serif;
17+
font-family: "Segoe UI", -apple-system, ".SFNSText-Regular", "San Francisco",
18+
"Helvetica Neue", "Lucida Grande", Arial, sans-serif;
1619
}
1720

1821
html {
@@ -94,7 +97,7 @@ ul.example-list > li > .header > .difficulty {
9497
#featured > .issue,
9598
ul.example-list > li > .header > .issue {
9699
position: absolute;
97-
right: 14px;
100+
right: 14px;
98101
top: 12px;
99102
padding: 1px 14px;
100103
color: white;
@@ -118,7 +121,7 @@ ul.example-list > li > .header > .issue.color {
118121

119122
#featured > .issue:before,
120123
ul.example-list > li > .header > .issue:before {
121-
content: "REPORT ISSUES"
124+
content: "REPORT ISSUES";
122125
}
123126

124127
#featured > .difficulty.easy,
@@ -138,17 +141,17 @@ ul.example-list > li > .header > .difficulty.hard {
138141

139142
#featured > .difficulty.easy:before,
140143
ul.example-list > li > .header > .difficulty.easy:before {
141-
content: "EASY"
144+
content: "EASY";
142145
}
143146

144147
#featured > .difficulty.medium:before,
145148
ul.example-list > li > .header > .difficulty.medium:before {
146-
content: "MEDIUM"
149+
content: "MEDIUM";
147150
}
148151

149152
#featured > .difficulty.hard:before,
150153
ul.example-list > li > .header > .difficulty.hard:before {
151-
content: "HARD"
154+
content: "HARD";
152155
}
153156

154157
ul.example-list > li > .header > img {
@@ -186,15 +189,15 @@ ul.example-list > li > .body > .services > img {
186189
margin-right: 12px;
187190
}
188191

189-
#featured > .body > .buttons > button,
192+
#featured > .body > .buttons > button,
190193
ul.example-list > li > .body > .buttons > button {
191194
padding: 8px 15px;
192195
cursor: pointer;
193196
outline: none;
194197
font-size: 15px;
195198
}
196199

197-
#featured > .body > .buttons > button {
200+
#featured > .body > .buttons > button {
198201
background: #069;
199202
color: white;
200203
border: 1px solid #069;
@@ -210,7 +213,7 @@ ul.example-list > li > .body > .buttons > button {
210213
border: 1px solid #069;
211214
}
212215

213-
#featured > .body > .buttons > button:hover {
216+
#featured > .body > .buttons > button:hover {
214217
background: #66a3c2;
215218
color: white;
216219
border: 1px solid #66a3c2;
@@ -377,7 +380,7 @@ ul.example-list > li:hover > .header > img,
377380
left: 0;
378381
width: 100%;
379382
height: 100%;
380-
padding: 100px 20px 20px 20px;
383+
padding: 100px 20px 20px 20px;
381384
text-align: left;
382385
z-index: 10;
383386
color: white;
@@ -437,13 +440,14 @@ ul.example-list > li:hover > .header > img,
437440
}
438441

439442
.elist-item {
440-
transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
443+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
441444
display: flex;
442445
flex-flow: column;
443446
flex: 0 0 320px;
444447
}
445448

446-
.elist-enter, .elist-leave-to {
449+
.elist-enter,
450+
.elist-leave-to {
447451
opacity: 0;
448452
transform: translateX(-320px);
449453
}
@@ -517,124 +521,137 @@ ul.example-list > li:hover > .header > img,
517521
}
518522
}
519523

520-
/* Dark Theme */
521-
.vscode-dark input{
524+
/* Dark and high contrast Theme */
525+
.vscode-dark input,
526+
.vscode-high-contrast input,
527+
input {
522528
color: white;
523529
}
524530

525-
.vscode-dark h2 {
531+
.vscode-dark h2 .vscode-high-contrast h2 {
526532
color: #999999;
527533
}
528534

529-
.vscode-dark aside h1 {
530-
color: #D4D4D4;
535+
.vscode-dark aside h1,
536+
.vscode-high-contrast aside h1 {
537+
color: #d4d4d4;
531538
}
532539

533-
.vscode-dark aside {
540+
.vscode-dark aside,
541+
.vscode-high-contrast aside {
534542
color: #999999;
535543
}
536544

537-
.vscode-dark .v-select .dropdown-toggle{
545+
.vscode-dark .v-select .dropdown-toggle,
546+
.vscode-high-contrast .v-select .dropdown-toggle {
538547
border: 1px solid #999999;
539548
}
540549

541-
.vscode-dark input::placeholder {
542-
color: #999999;
550+
.vscode-dark input::placeholder,
551+
.vscode-high-contrast input::placeholder {
552+
color: #999999;
543553
}
544554

545-
.vscode-dark .v-select .selected-tag{
555+
.vscode-dark .v-select .selected-tag,
556+
.vscode-high-contrast .v-select .selected-tag {
546557
color: white;
547558
}
548559

549-
.vscode-dark .v-select .dropdown-toggle .clear {
550-
color: #999999;
560+
.vscode-dark .v-select .dropdown-toggle .clear,
561+
.vscode-high-contrast .v-select .dropdown-toggle .clear {
562+
color: #999999;
551563
}
552564

553-
.vscode-dark .v-select .dropdown-menu{
565+
.vscode-dark .v-select .dropdown-menu,
566+
.vscode-high-contrast .v-select .dropdown-menu {
554567
background-color: #333333;
555568
}
556569

557-
.vscode-dark .v-select .dropdown-menu .active>a {
570+
.vscode-dark .v-select .dropdown-menu .active > a,
571+
.vscode-high-contrast .v-select .dropdown-menu .active > a {
558572
color: white;
559573
background-color: #636363;
560574
}
561575

562-
.vscode-dark .v-select li>a {
563-
color: #999999;
564-
}
565-
566-
.vscode-dark ::-webkit-scrollbar {
567-
background: #999999;
576+
.vscode-dark .v-select li > a,
577+
.vscode-high-contrast .v-select li > a {
578+
color: #999999;
568579
}
569580

570-
.vscode-dark .v-select .open-indicator:before
571-
{
572-
border-color: #999999;
581+
.vscode-dark .v-select .open-indicator:before,
582+
.vscode-high-contrast .v-select .open-indicator:before {
583+
border-color: #999999;
573584
}
574585

575-
.vscode-dark ul.example-list > li > .body > h2 {
576-
color: #d4d4d4
586+
.vscode-dark ul.example-list > li > .body > h2,
587+
.vscode-high-contrast ul.example-list > li > .body > h2 {
588+
color: #d4d4d4;
577589
}
578590

579-
.vscode-dark ul.example-list > li > .body > .buttons > button {
580-
background: #069;
591+
.vscode-dark ul.example-list > li > .body > .buttons > button,
592+
.vscode-high-contrast ul.example-list > li > .body > .buttons > button {
593+
background: #069;
581594
color: white;
582-
border: 1px solid #069;
595+
border: 1px solid #069;
583596
}
584597

585-
.vscode-dark ul.example-list > li > .body > .buttons > button:hover {
598+
.vscode-dark ul.example-list > li > .body > .buttons > button:hover,
599+
.vscode-high-contrast ul.example-list > li > .body > .buttons > button:hover {
586600
background: white;
587601
color: #069;
588602
border: 1px solid #069;
589603
}
590604

591-
.vscode-dark .github:before {
605+
.vscode-dark .github:before,
606+
.vscode-high-contrast .github:before {
592607
content: url(images/github.dark.svg);
593608
}
594609

595-
.vscode-dark .feed:before {
610+
.vscode-dark .feed:before,
611+
.vscode-high-contrast .feed:before {
596612
content: url(images/feed.dark.svg);
597613
}
598614

599-
.vscode-dark .tutorial {
600-
color:#22a7ff;
615+
.vscode-dark .tutorial,
616+
.vscode-high-contrast .tutorial {
617+
color: #22a7ff;
601618
}
602619

603-
.vscode-dark ul.example-list > li > .body > .description {
620+
.vscode-dark ul.example-list > li > .body > .description,
621+
.vscode-high-contrast ul.example-list > li > .body > .description {
604622
color: #999999;
605623
}
606624

607625
.vscode-dark .link:hover {
608626
color: #22a7ff;
609627
}
610628

611-
.vscode-dark .quick-links > ul.links > li:hover {
629+
.vscode-dark .quick-links > ul.links > li:hover,
630+
.vscode-high-contrast .quick-links > ul.links > li:hover {
612631
text-decoration: underline;
613632
color: #22a7ff;
614633
}
615634

616-
.vscode-dark ul.example-list > li {
635+
.vscode-dark ul.example-list > li,
636+
.vscode-high-contrast ul.example-list > li {
617637
box-shadow: 0px 1px 3px 0 rgba(255, 255, 255, 0.15);
618638
}
619639

620640
.vscode-dark ul.example-list > li:hover {
621641
box-shadow: 0px 1px 3px 0 rgba(255, 255, 255, 0.3);
622642
}
623643

624-
.vscode-dark::-webkit-scrollbar-track
625-
{
626-
border-radius: 0;
627-
background-color: rgb(30, 30, 30);
644+
::-webkit-scrollbar {
645+
background: rgba(0, 0, 0, 0.1);
628646
}
629647

630-
.vscode-dark::-webkit-scrollbar-thumb
631-
{
632-
border:0;
648+
.vscode-high-contrast::-webkit-scrollbar-thumb,
649+
.vscode-dark::-webkit-scrollbar-thumb {
650+
border: 0;
633651
background-color: rgb(66, 66, 66);
634-
border-radius:0;
652+
border-radius: 0;
635653
}
636654

637-
.vscode-dark::-webkit-scrollbar-corner
638-
{
639-
background: rgb(30, 30, 30);
640-
}
655+
.vscode-dark::-webkit-scrollbar-corner {
656+
background: rgba(0, 0, 0, 0.01);
657+
}

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "azure-iot-edge",
33
"displayName": "Azure IoT Edge",
44
"description": "This extension is now a part of Azure IoT Tools extension pack. We highly recommend installing Azure IoT Tools to get full capabilities for Azure IoT development. Develop, deploy, debug, and manage your IoT Edge solution.",
5-
"version": "1.20.0-rc",
5+
"version": "1.20.0-rc2",
66
"publisher": "vsciot-vscode",
77
"aiKey": "95b20d64-f54f-4de3-8ad5-165a75a6c6fe",
88
"icon": "logo.png",

0 commit comments

Comments
 (0)