QSS for QTabWidget - qt

I need your advices. (Sorry for my eng. I hope than you'll understand me)
1) I want to create custom TabWidget and use QSS. Now it's look like this:
I want fill background under tabs (I accept property called autoFillBackground). It's need look like this:
2) When I start drag and drop tab this tab is filled with white color. And when I drop the tab this tab set custom qss.
I want to change the style when I drag and drop the tab.
Thx
(I was reading qss manual)
some code
QTabWidget::tab-bar {
background-color: black;
}
QTabBar::tab {
background-color: #4094da;
border-color:white;
font: bold 12px 'Arial';
color: white;
height:60px;
}
QTabBar::tab:!selected {
background-color: #9E9E9E;
color: white;
}
QTabBar::close-button {
background-position: center;
background-image: url(":/Appearance/close_chat_item");
}
QTabWidget::pane {
position: absolute;
}
QTabBar::tab:selected {
border-color:#4094da;
background-color: #4094da;
color: white;
}

The QTabWidget does not paint the background, you need to set the background of the parent widget of the QTabWidget.

As I understand, you willing the background color to change in any drag & drop situation(or it is my assumption). If it's like I understand, you should define hover option on your qss. For more info on Qt documentation.
Example code:
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
Your priority should be forcing to cost on qss, logic structure consider to second plan or you can use for some kind of workaround.

Related

Change background color of Angular dialog

I'm trying to change the Dialog background
without touching the style.css file.
As some other answers tell, there are many ways to set the Dialog style:
1- This solution works for width and height but the transparent background is "ignored".
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: "myClass",
});
.myClass{
background-color: transparent !important;
max-width: none !important;
}
2- You can also use ::ng-deep like this:
In this case the background color gets set to transparent but all the Dialogs aquire this property and I don't want that to happen
::ng-deep mat-dialog-container {
background-color: transparent !important;
}
For what I saw the panelClass: "myClass" option overrides this class cdk-overlay-pane
Meanwhile what I need to override is mat-dialog-container without compromising other dialogs.
Is there a way to do that without compromising the other Dialogs?
Use host in your component style-sheet, with that, you only modify the styles for that particular component:
:host ::ng-deep mat-dialog-container {
background-color: transparent !important;
}
UPDATE
So in order to customize the material dialog, you will need to create a custom css class, and set that class within your style.scss file:
style.scss
.custom-modalbox > mat-dialog-container {
background-color: transparent !important;
}
And where you have the MatDialog injected, use that css class for the panelClass property:
YourComponent.ts
onOpenDialig() {
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: 'custom-modalbox', // if you don't set this
// that css class won't applied
});
}
So with that, other components can use the dialog safely without affecting the look & feel if they don't use custom-modalbox
Try to use ::ng-deep but this way, for example
::ng-deep {
.mat-dialog-container{
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #7e2727;
color: rgba(0, 0, 0, 0.87);
}
}

Proper way to format a custom mixin button in scss

EDIT:
I was just overthinking it. Now I've added more variables to the mixin like this to make all the colour correct:
#mixin CustomBtn($border-color, $transparent: transparent, $text-color, $bg-hover-color, $text-hover-color)
I've got a WordPress page where I use SCSS mixins to simplify the use of different colours on buttons. Most of the buttons have the same border colour and a text colour with a transparent background on them all so I created this mixin to deal with that:
#mixin CustomBtn($primary-color, $text-hover-color, $transparent: transparent) {
border: 2px solid $primary-color;
border-radius: 2px;
background-color: $transparent;
background-image: none;
color: $pri-color;
font-weight: 600;
padding: 1rem 2rem 1rem 1.5rem;
&:hover {
background-color: $primary-color;
color: $text-hover-color;
}
}
And here is the css where I output it:
.btn_custom {
&-black a {
#include CustomBtn($black, $white);
}
&-white a {
#include CustomBtn($white, $black);
}
&-blue a {
#include CustomBtn($light-blue, $white, $light-blue);
}
&-negative a {
#include CustomBtn($brown, $white);
}
}
This is all great but now the client wants to have a button that uses a coloured background, ex. a button with blue background-colour and white text. I want to do this mixin in the best way possible and not repeat my code, but I can't seem to figure out how to make this mixin work with a coloured background in the way I want it to (maybe I'm doing it wrong tho...)
Should I maybe use a conditional statement for the $transparent variable?

Change color of checkbox button

I have a changed the appearance of a checkbox from "Regular" to "Switch" in Google App Maker. I would now like to change the appearance of the knob when the it is pushed from blue to green. How can I do that? The following CSS style is not working:
.app-Checkbox-Input:checked, {
background-color: green;
}
I would also like to put the label on the left side of the checkbox, if possible.
To customize the switch we need to customize the knob itself and the oval area behind it (2 things), and once we override styles for checked state we also need to redefine styles for its unchecked state (2 states). What gives us 2x2=4 custom styles. We also have multiple ways how to implement styles: override them individually for every widget, customize built-it AM style, implement all-new style from scratch or extend AM built in style using CSS class. I will not cover all these options in this answer this time, but let's start at least with something:
Styles for individual widget:
/* Styles for Checkbox widget on the page NewPage with name
GreenSwitch */
/* Recolor knob's checked state */
.app-NewPage-GreenSwitch-Label::after {
background-color: green;
}
/* Recolor knob's unckecked state */
.app-NewPage-GreenSwitch>.app-NewPage-GreenSwitch-Input:checked+.app-NewPage-GreenSwitch-Label::after {
background-color: red;
}
/* Recolor back oval checked state */
.app-NewPage-GreenSwitch-Input {
background-color: rgba(0, 128, 0, 0.4);
}
/* Recolor back oval unchecked state */
.app-NewPage-GreenSwitch-Input:checked {
background-color: rgba(128, 0, 0, 0.4);
}
Recolor all checkboxes with Switch style variant
.app-Checkbox--Switch>.app-Checkbox-Label::after {
background-color: green;
}
.app-Checkbox--Switch>.app-Checkbox-Input:checked+.app-Checkbox-Label::after {
background-color: red;
}
.app-Checkbox--Switch>.app-Checkbox-Input {
background-color: rgba(0, 128, 0, 0.4);
}
.app-Checkbox--Switch>.app-Checkbox-Input:checked {
background-color: rgba(128, 0, 0, 0.4);
}
Result

Change caption on TextField focus

In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result

GTK+ CSS for one button

How to set color for one button in GTK+
GtkButton button8 {
border-radius: 20;
border-width: 1 1 1 1;
font: Sans 16;
color: black;
background-image: -gtk-gradient (linear,
left top,
left bottom,
color-stop(0.0,rgba(34,97,170,1)),
color-stop(0.50,rgba(56,145,218,1)),
color-stop(0.51,rgba(34,131,216,1)),
color-stop(1.00,rgba(134,191,234,1)));
}
This css changes the color of al buttons in glade file.How should i change the css so that it affects only one button?
gtk_widget_set_name (widget, "fooname"); or do the same in glade:
then use something like
GtkButton#fooname {
border-radius: 20;
...
}
See https://developer.gnome.org/gtk3/stable/GtkCssProvider.html

Resources