I'm currently using
::selection {
background: rgba(3, 35, 75, .7);
}
But that only changes the color/opacity when I've selected a text or something. It goes to the default color/opacity on blank spaces etc when I press CTRL+A.
How do I change this?
Example:
Example image
Note that the gray selection is blue, it just acts as I've tabbed out.
I don't know if it is good practice, but it will work with * selector.
*::selection {
background: rgba(3, 35, 75, .7);
}
try replacing all the numbers, the last one is the important one to replace.
Related
I'm trying to adjust the color of my error messages from my Combobox. I tried to overwrite the style I saw getting applied, but it just isn't sticking. I saw the normal way to apply styles in Vuetify is to add [color]--text to a component, but what would I need to do to set just the error style?
<style>
.error--text {
color:rgb(0, 0, 0) !important;
caret-color: rgb(2, 0, 0) !important;
}
</style>
EDIT:
Here is a reproduction of the issue
codepen
Add arbitrary class to your component (e.g. app-combobox):
<v-combobox class="app-combobox"
Then style like so:
.app-combobox.error--text,
.app-combobox .error--text {
color: rgb(0, 0, 0) !important;
caret-color: rgb(2, 0, 0) !important;
}
Vuetify uses !important as well so it seems that vuetify style has higher level of specificity, thus you need to add your own class and use it so that it has more.
It seems that .app-combobox.error--text is needed to color the input line, and .app-combobox. error--text (with space) to color child components i.e. text and icons.
I'm using Nuxt with Vuetify module. I just updated the error color in the nuxt.config.js, and all works fine for me.
I'm trying to apply certain rules to specific pages on WordPress. I'm trying to target the page class/ID and applying the rules in one line instead of multiple separate pages rules. I'm separating the classes by comma, but it seems to not work, what am doing wrong/is it possible ?
.page-id-62, .page-id-63, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52);
}
Just for knowledge when you select multiple selectors is the space required ?
Cheers to all.
Did you mean multiple selector .absolute-footer.dark element in page/post ID 62, 63, 64,... Here is working code:
.page-id-62 .absolute-footer.dark, .page-id-63 .absolute-footer.dark, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52)!important; /* !important just in case */
}
Yes, it's possible. you need to add .absolute-footer.dark after each page id class
.page-id-62 .absolute-footer.dark,
.page-id-63 .absolute-footer.dark,
.page-id-64 .absolute-footer.dark
{
color: rgba(66, 66, 66, 0.52);
}
I'm trying to change the color of QComboBox (or a few widgets actually) but it seems that when I create a QStyleSheet with just a color property, it over writes all the other properties. Most notably on Windows, rounded QComboBoxes become square, and rather ugly. Snippet below (note that the colors in the actual code are generated. Just using black on white for ease).
QString styleSheet = "QComboBox { background-color: #ffffff; color: #000000 }";
combBox->setStyleSheet( styleSheet );
Sorry for the ridiculous sizing of these images.
This is a regular, non-styled QComboBox:
And this is a QComboBox after applying the aforementioned style:
You are using Dynamic Stylesheets.
Reference: https://wiki.qt.io/Dynamic_Properties_and_Stylesheets
try using this in your code:
ui->comboBox->setStyleSheet("background-color: rgb(16, 72, 255); color: rgb(255, 17, 80);");
It's like append your stylesheet to the widget stylesheet.
I am trying out CSS variables and I would like to use RGB colours.
Here's my current CSS Variable:
--primary: rgb(112, 199, 255);
So this works absolutely fine when using the following code:
color: var(--primary)
But some paragraphs also use this primary colour and I would like to give them a slight transparency. Now I could replace that and create another CSS Variable like so:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
But that just feels messy and confusing having two primary colours and what If I use a few different transparencies. I could also use the following CSS Variable:
--primary: 112, 199, 255;
--alpha: 0.7;
and output it using the following code:
color: rgba(var(--white), var(--alpha));
This works as I want and I personally think is a nicer way of doing it but my colours don't preview in my code editor see image.
Look at the --dark variable, it won't show the colour using this code.
Ideally, I would like to use:
--primary: rgb(112, 199, 255);
and output it like so:
color: var(--white), var(--alpha);
But it won't work?
Assuming you're using atom-pigment. The color detection works within comments as well. So you could perhaps add the actual rgb value in the comments only for reference & use the variable as usual. Like so:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */
I am attempting to use SASS for the first time on my next project (Pomodoro Clock). To get started I just wanted to declare my color variables and set a background color. When I try to apply the styling I get this error:
Invalid CSS after "...(35, 61, 77, 1)": expected expression (e.g. 1px,
bold), was ";"
My code is below.
/*All variables declared*/
$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: $yankeesBlue;
}
I know this is a super simple question that shouldn't need this forum to answer but I have sincerely Googled and asked for help elsewhere without any luck. Thank you for your help.
Are you using sass or scss ? I dont think you are allowed to use ';' in .sass files.
Got it from here : Sass Invalid CSS Error: "expected expression"
And double checked : http://sass-lang.com/guide
In Codepen, change your preprocessor from Sass to SCSS.
See this for more info on the difference between Sass and SCSS:
What's the difference between SCSS and Sass?