I want to remove or change the background of the subtitles. I've changed the background-color and background but it doesn't work. can the background change?
::cue {
color: red;
background-color: blue; //or background: blue;
}
the subtitle color changes to red but the background doesn't change at all
I tried the following:
::cue {
color: red;
// take an absurd big outline, because background is only behind the text
outline: 500px solid blue;
// dont know why background-color is not working but background-image does the job
background-image: linear-gradient(blue, blue);
}
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}
I got an issue with the alert box of sencha touch control.
Issue is: I would like to change background color of alert box, I tried to implement CSS but its not letting me to do it.
Is there any other way to change background color of alert box in sencha?
Early reply will be appreciated!
Thanks
Use below css classes to change MessageBox bg color and MessageBox text properties.
// To change messagebox background color
.x-msgbox
{
background-color: #fff;
}
// To change messagebox text properties
.x-msgbox-dark .x-msgbox-text {
color: #000 !important;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
// To change messagebox title
.x-toolbar-dark .x-title {
color:#000 !important;
font-size: 20px !important;
font-family: Helvetica, Arial, sans-serif;
}
Hope it helps.
Thanks Gendaful
I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions.
::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}
No, it is not implemented. We should file a bug on http://bugs.webkit.org/
You can still apply your transition by setting your -webkit-scrollbar-thumb background-color to inherit and apply transition to parent element - in this case the scrollbar container itself.
The only drawback is that, you have to create an inner container that would mask it's parent color and set scrollbar track background to the same masking color. Here it is an example:
Set container colors and transition
.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}
Set scrolbar colors
::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}
It is fairly easy to achieve using xb1itz's background-color: inherit; technique in addition with -webkit-background-clip: text;.
Live demo; https://jsfiddle.net/s10f04du/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0);
-webkit-background-clip: text;
transition: background-color .8s;
}
.container:hover {
background-color: rgba(0,0,0,0.18);
}
.container::-webkit-scrollbar-thumb {
background-color: inherit;
}
}