I have a menu which changes the color from white to brown progressively when the mouse is over. However, when I leave the mouse, the transition begins from white when it should be from brown to white and I don´t know why. When I move the mouse over, the transition is fine. I copy the CSS:
li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: opacity 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear;
}
Greetings.
Not really sure on how you mean, but have a look at these changes. Is it what you are looking for?
li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: all 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear, color 3s linear;
}
As you can see, I'm transitioning both opacity and color on hover, and all when you hover out. EDIT: realized that you can actually change the hover transition to all as well.
Or if you want the colorto take an immediate effect on hover you can leave the hover transition as you had it.
Only the li element needs the transition applied to it.
li {
letter-spacing: 2px;
margin: 0 0 -10px;
max-width: 280px;
opacity: 0.5;
transition: opacity 1s linear;
}
li:hover {
color: #9b2108;
opacity: 1;
}
Related
I was looking to customize the active color for md-tab.
The classes in chrome dev console shows ==> -mat-tab-label mat-ripple mat-tab-label-active. But none has any border bottom. There was a chevron class which i tried to change, but no effect.
I tried /deep/ with almost all classes. Dint work.
Also checked md-tab-header, but nowhere am seeing even that color! Any help would be appreciated :)
Try to it's work for me
::ng-deep .mat-ink-bar {
background-color:#ee2925 !important;}
It's worked for me in Angular 6
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #1f29a2;
}
Works in Angular 7
.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #2C702A;
}
To customize the active underline, modify this class
mat-ink-bar{ background-color:#fff; }
In your component, set ViewEncapsulation to None and add the styles in your component.css file.
Changes in Typescript code:
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
....
encapsulation: ViewEncapsulation.None
})
Component CSS:
/* Styles for tab labels */
.mat-tab-label {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the ink bar */
.mat-ink-bar {
background-color: green;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: black;
}
This works with Angular 10.
This solution is tested and works fine in Angular 10 -
.tabs .mat-tab-label.mat-tab-label-active {
background-color: #5e70db;
opacity: 1 !important;
}
.tabs .mat-ink-bar {
background-color: #3f51b5 !important;
}
any of those solutions didn't work for me but i did a general solution without use the encapsulation.none
/* Styles for tab labels */
::ng-deep .mat-tab-label {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the active tab label */
::ng-deep .mat-tab-label.mat-tab-label-active {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the ink bar */
::ng-deep .mat-ink-bar {
background-color: green;
}
using ::ng-deep you are telling to css inside material being overrite, then you can customice it
I'm trying to customize the style of the Webix ui.list widget, but there're two questions that I can't solve by myself:
is there a way to set the autoheight for items?
if no, which class will allow to set `text-overflow:ellipsis?
Here's a sample and the code of the current implementation:
CSS:
.webix_list_item{
border: 1px solid #ebebeb;
border-radius: 5px;
margin:15px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background: #fafafa;
}
.webix_list_item:hover{
box-shadow: 0 0 10px rgba(177,44,99,0.6);
border: 1px solid #efefef;
background: #efefef;
}
.webix_list_item.webix_selected {
color: #fff;
background: #cac1c5;
border: 1px solid #bfb8bb !important;
}
JS (pretty simple):
webix.ui({
view:"list",
data:list_data,
width:230, scroll:false,
select:true
});
In addition to the CSS solution, Webix list has a type property which can handle the height of the items. Particularly:
type:{
height:"auto"
}
http://webix.com/snippet/c01714d0
Trivial, is this what you are expecting?
http://webix.com/snippet/0e340ea4
I have added the below css:
.webix_list_item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
if you want to set autoheight:
.webix_list_item {
white-space: normal;
overflow: visible !important;
height: auto !important;
}
I have created a vertical progress bar and an trying to style it with rounded edges. No matter what I do, I don't seem to be able to get the progress or chunk of the progress bar (QProgressBar::chunk) with rounded edges. Please help me out, I am new to QT.
Please find my code below:-
progressbar_V = new QProgressBar;
progressbar_V->setParent(this);
progressbar_V->setMinimum(0);
progressbar_V->setMaximum(5);
progressbar_V->setValue(3);
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
progressbar_V->setGeometry(250,250,60,300);
progressbar_V->setOrientation(Qt::Vertical);
The Progress Bar text is at the top in the output as well. How will I get it to the middle of the vertical progress bar
You're right, you can use this parameter:
border-radius: 50px;
to get round borders !
but you just forgotten to specify px at the end
So, once your code is updated, it looks like this :
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12px; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
You need to change your style sheet into something like this:
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey;border-bottom-right-radius: 12px;border-bottom-left-radius: 12px; color: black; text-align: centre; },QProgressBar::chunk {background-color: #05B8CC;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;}");
happy coding..
How can i get the appearance of QDateEdit as shown on the image?
I tried changing the stylesheet, but I dont know how to achieve the spacing between the button and the edit, nor how can I change the down arrow button.
It comes close to the image you've posted:
QDateEdit
{
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
QDateEdit::drop-down {
image: url(:/new/myapp/cbarrowdn.png);
width:50px;
height:15px;
subcontrol-position: right top;
subcontrol-origin:margin;
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
Maybe the key-word here is "sub-control". The arrows of the DateEdit or Combo-Box or anything else, don't apply all the style definitions defined in parent-control. You have to find out, how to address these sub-controls for each Qt-Class and customize the styles for each.
I hope these links will be helpful:
http://doc.qt.io/qt-4.8/stylesheet-customizing.html
http://doc.qt.io/qt-4.8/stylesheet-examples.html
I am trying to replicate a green square image in pure css3. You can see the image here:
So far I have managed to generate the square, looking just like the one in the image. The problem is the border of the circle in the square. As you can see, the border of that circle in the image is gradient and mine is not (see fiddle) and I have no idea how to replicate this in CSS...
Here is my fiddle of the square
The CSS code I am currently using:
.greenBlock, .greenCore {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
z-index: 10;
width: 42px;
height: 42px;
}
.greenCore {
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transform: translate(25%, 25%);
transform: translate(25%, 25%);
}
How can I do this gradient circle border in CSS3?
Thanks a lot
I would use a pseudo-element (:before) and style it with a gradient background.
(that is because border-image cannot be combined with border-radius)
.greenBlock {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
width: 42px;
height: 42px;
position:relative;
z-index:10;
}
.greenCore {
background-color: #00c200;
width: 22px;
height: 22px;
border-radius: 50%;
top:50%;
left:50%;
margin-left:-11px; /*half width*/
margin-top:-11px;
position:relative;
}
.greenCore:before{
content:'';
position:absolute;
z-index:-1;
border-radius:50%;
width:28px; /*22 of greenCore + 3 + 3 for the borders*/
height:28px;
left:-3px;
top:-3px;
background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}
<div class="palette greenBlock" data-code="2">
<div class="greenCore"></div>
</div>
One possibility is to make a slightly larger circle with a diagonal gradient background, and place it behind the "core"-circle. This way the larger circle will appear to be a border to the second circle. By modifying your fiddle, I got something like this.
In order to make the gradient I used the linear-gradient function, and assigned it as the background:
background: linear-gradient(135deg, #00de00, #006900);
The first value is the direction of the gradient in degrees. The second two values is the start and end color of the gradient.
Perhaps you can try adding this:
box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
To your .greenCore class. This may be close. You may want to play with the values to get it closer to your liking.