This question already has answers here:
How to change the color of the scrollbar for Microsoft Edge?
(2 answers)
Closed 3 years ago.
Is there a way with pure css to customize Edge scrollbar like remove the arrows and color make it thinner?
I have tried using scrollbar thin or color but no luck. Can anyone help me ?
This is a solution for customization. You can format this as an example:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can find help here: https://css-tricks.com/the-current-state-of-styling-scrollbars/
Pure CSS is not going to work for Edge scrollbar. As according to: https://caniuse.com/#feat=css-scrollbar
This hopefully will change, when Edge will use chromium engine (17ht January 2020).
You need to use JS for styling for now.
You can try below code to implement what your requirement is.
You can
colour it
make it thin or thick
change colour or make it thin or thick on hover
as per your need
.list {
padding: 0;
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
height: 150px;
}
.list::-webkit-scrollbar {
width: 0.5em;
}
.list::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.list::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.list::-webkit-scrollbar:hover {
width: 0.7em;
}
<div class="list">
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
</div>
Is there a way with pure css to customize Edge scrollbar like remove
the arrows and color make it thinner? I have tried using scrollbar
thin or color but no luck. Can anyone help me ?
As far as I know, currently Microsoft Edge doesn't support customize the scrollbar as you said. You could feedback this problem on Microsoft Edge Community Forum, like these links:
Increasing Scroll-Bar Width in Windows 10 Edge
How to change the Microsoft Edge scrollbar color.
Besides, as a temporary workaround, you could try to search some jquery custom scrollbar plugin, such as SimpleBar and Custom Scrollbar Plugins.
Related
Am I able to set font in a Quarto presentation to auto-size to the text window object of the slide? I am starting to build a talk to show everyone at my company how great {quarto} is, but am dreading the task of render --> check font size --> adjust font --> check again for each window on each slide to make sure my text does not spill over off the viewable area.
PowerPoint does this automatically when you type text into a field.
Example quarto-pptx-resize-text.qmd below, for reference the template.pptx referenced is the default rendered pptx with a wordmark for my company added to the master slide(s).
---
title: "quarto-pptx-resize-text"
author: "M. Wood"
format:
pptx:
reference-doc: template.pptx
---
## A Few Lines (4)
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
## A LOT of Lines (20)
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
- the quick brown fox jumped over the lazy dog
Thanks in advance!
As you know, the angular material comes with some pre-defined themes such as:
indigo-pink.css Light
pink-bluegrey.css: Dark theme
Now, I want to convert but now sure how. Any guidance is appreciated.
indigo-pink.css Light to Dark
pink-bluegrey.css: Dark to Light
Austin
I am using pdfkit to generate a pdf which has
body{
background:#000000;
color:#ffffff
}
Everything looks fine on pdf digitally but on print black fades
I know pure black is not good for printing , so my question is
which black color hex code suits best for pritner?
Found this article useful but don't know how to use it in css. It also explains my problem
https://www.purebuttons.com/faq/achieve-true-rich-black-print
Ok i found the solution this is because #000000 return rgba(0,0,0,100) which is true black and bad for printing as 100% pure black ink is not available and it also loads printer
What i did is i used #060808 it is called rich black color rgba(75,68,67,90) it makes print perfect and didn't loads up the printer
I am trying to edit the Arch Dark theme so that the coloring of certain text is white/light colored because it is barely readable when there is black text on a dark blue background. So in my case, I use Qt Creator often to design GUI's and create applications but when you open it, it looks like this:
https://imgur.com/a/gC94UCY
https://imgur.com/a/phMgJHf
As you can see there is black text on the dark backgrounds in the home screen and on the project screen, I am unsure whether these colors have to be changed in Qt or through the theme files themselves but is it possible to change them to white or a lighter color of my choosing.
In CUDA Information Tool Window in NSIGHT, under warps , you will get the following table:
Can someone explain me what are the different colored region indicating here?
I could not locate this in the user guide so I am asking here.
If you mouse over the lanes a tool tip will show the state of the lane.
The legend is
Lane/Thread State Color
==============================
Inactive Gray
Active Forest Green
At Barrier Light Sea Green
At Breakpoint Red
At Assert Orange
At Exception Dark Red
Not Launched Medium Gray
Exited Dark Gray
I have filed a bug to update the documentation.