How to change the text color and background color of ant-tooltip component - html

I implemented antd tooltip but need to change the background color and text color of it but I am unable to achieve that. I tried to do using "overlayStyle" provided by antd tooltip component but no luck not working as expected. As Shown below.
<Tooltip
title={jobNumber * 3}
placement="bottomRight"
overlayStyle={{
color: "orange",
background: "blue",
}}
>
<div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>;
I tried inspecting it but unable to do so as its work on hover and till the time I move my cursor to class but no help.
What I founded on hover the div added one class named 'ant-tooltip-open' but what's that in the class I can't see.


You can do this easily, see below code
.ant-tooltip-inner {
color: yellow;
background-color: green;
}
.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
border-bottom-color: green;
}
here is working demo https://codepen.io/anon/pen/JVvyGr


I hope this can useful for you.
In order to change the color of the ant tooltip arrow use:
.ant-tooltip-arrow::before{
background-color: white;
}


In order to change the color of the arrow use this:
.ant-tooltip-arrow-content{
background-color: #fafafa !important;
}
because it stays as black even when changing the background color of the tooltip and apparently this line of code didn't work for me in Chrome:
.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
border-bottom-color: green;
}

Related

Vue.js | Change Fill of a SVG via routerlink

the idea is, that I want to change the color of a SVG which is displayed on the header depending on the site you are on. So if I'm f. e. on "home", I want to have it displayed blue and if I am on "contact" i want to have it green.
Header, HTML
<router-link class="col-4 my-auto" to="/">
<svg class="wortmarke" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080.56 140.42"><path d="M120.22,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69,0-11.71-13.94-14.75V3.23h14.75c24.44,0,31.92-.8,31.92-.8l1,.8s-6.67,8.69-6.67,25.46v87.49a67.2,67.2,0,0,1-1,11.31h29.1c16.36,0,20.81-7.68,30.91-27.88h7.88L219.22,138H154.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M236.8,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.56-.8,15.56-.8L332,38.19h-7.87c1-20.81-5.66-24.45-21.83-24.45H279.84l-2.43,2.42V64.05h33.74l1.62-11.72,8.49-1.21V89.71H310.75V74.56H279.84L277.41,77v39.2a67.2,67.2,0,0,1-1,11.31h28.09c17.37,0,19.8-2.63,29.9-23.84h7.88L334.79,138H271.35c-13.53,0-34.55.6-34.55.6Z"/><path d="M357.63,131.13c9.09-1,14.55-5.26,14.55-12.53V31.72c0-12.93-3-18-16.37-22.43V3.23h5.86c9.9,0,26.47-.8,26.47-.8A47.74,47.74,0,0,0,396,12.93l70.71,74.56c2.63,2.82,5.86,6.66,8.29,9.69V25.26c0-8.89-.21-13.74-16.37-15.36V3.23h40.81l1,3.84s-13.94,3.64-13.94,20.41V139h-8.48L392,46.87a92.53,92.53,0,0,1-8.29-9.9V118.6a59.56,59.56,0,0,1-1,10.91l18.19,1.21-.81,6.67-42.43,1.21Z"/><path d="M579.88,85.67,567.15,50.11c-1.61-4.25-3.84-11.52-5-15.56L542.5,85.67,537.25,99.2l-11.31,29.7,17.37,2.23L542.1,138H502.5v-6.87c7.88-.81,11.72-5,13.54-9.5L562.91,4.24l12.32-2.62,44.25,115c3.44,9.09,6.47,13.94,14.14,15l-.8,6.47h-8.29c-9.49,0-39.4.8-39.4.8v-7.88c5.46-.2,10.31-2,8.09-8.08l-9.5-26.06Z"/><path d="M689.8,97.39h7.88c0,26.46,16.77,32.93,29.29,32.93,10.92,0,22-5.46,22-17.78C749,81,686.57,82,686.57,39c0-21.61,16-38.18,47.48-38.18C746,.81,759.3,3,770.21,4.65l-6.67,33.54h-7.87c.4-15.36-5.46-27.28-23.24-27.28-13.54,0-22,6.87-22,17.58,0,31.92,62.43,28.28,62.43,73.14,0,26.06-21,38.79-46.88,38.79-18.18,0-41.62-5.66-42.22-20.61C683.74,117.59,684.34,113.15,689.8,97.39Z"/><path d="M790.22,131.13c8.48-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.55-.8,15.55-.8l-6.26,35.76H877.5c1-20.81-5.66-24.45-21.82-24.45H833.25l-2.42,2.42V64.05h33.74l1.62-11.72,8.48-1.21V89.71h-10.5V74.56H833.25L830.83,77v39.2a67.2,67.2,0,0,1-1,11.31H857.9c17.38,0,19.8-2.63,29.91-23.84h7.88L888.21,138H824.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M984.19.81c17.57,0,36.77,4.65,47.68,5.66l-6.06,31.72h-7.88c-.81-20.21-17.18-27.28-36-27.28-32.32,0-46.26,25.66-46.26,53.54,0,37.58,26.66,58.19,56.57,58.19a62.69,62.69,0,0,0,38.79-13.94l3.43,5.25s-13,26.47-54.75,26.47c-44.65,0-71.32-32.93-71.32-67.89C908.42,38.39,933.88.81,984.19.81Z"/><path d="M1064.8,109.1a15.66,15.66,0,1,1-15.55,15.76A15.78,15.78,0,0,1,1064.8,109.1Z"/><path d="M49.7,13.74c15.56,0,28.69,11.31,28.69,32.12,0,16-7.07,27.48-22.83,28.9-5,.53-9.36-.3-12.93-2.52V80a69.88,69.88,0,0,0,12.93,2.46C81.63,85.06,108.09,66.67,108.09,39c0-27.47-27.27-35.76-51.32-35.76H0V9.29A56.63,56.63,0,0,1,9.75,12C12.36,13.08,22.2,13.74,25,13.74H49.7Z"/><path d="M42.63,80c-1-.3-1.93-.61-2.84-.94L38.52,75.6l3.12-4c.32.23.66.44,1,.64V24.68a2,2,0,0,0-2-1.95H27.31A11.74,11.74,0,0,0,15.55,34.48c0,25.59,0,84.12,0,84.12,0,6.87-5.26,11.52-13.54,12.53v7.47l58-1.21.81-6.67-19.2-1.82a51.43,51.43,0,0,0,1-10.3Z"/><path d="M41.64,71.6l-3.12,4L39.79,79c.91.33,1.86.64,2.84.94V72.24C42.3,72,42,71.83,41.64,71.6Z"/></svg>
</router-link>
SCSS
.router-link-active {
color:#99CCCC;
fill:#99CCCC;
}
.wortmarke {
fill:#CCFF99;
size: 3vw;
transition: 250ms;
width:100%;
height:100%;
}
svg:hover.wortmarke {
fill:#0099CC;
}
svg:active.wortmarke {
fill:#99CCCC;
}
All other elements, which are triggered by .router-link-active and also use :hover or :active like <a> work perfectly fine, but the svg in particular doesn't respond to the command.
I already tried to convert the svg file into a font, but that didnt work out at all. Im seriously stuck and dont know what to do else.
I would be very grateful for any ideas.

If I understand the problem correctly, you want the logo to have a blue fill color when its router link is active, and green otherwise.
Since .router-link-exact-active is added to the <router-link>'s anchor tag when the link is clicked, you could use that as a selector to target the SVG's .wortmarke element with a fill color set to blue; and add a style to default the fill color set to green:
<style scoped>
.router-link-exact-active .wortmarke {
fill: blue; /* fill color when active */
}
.wortmarke {
fill: green; /* default fill color */
size: 3vw;
transition: 250ms;
width: 100%;
height: 100%;
}
</style>
demo

How are themes implemented in CSS

I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?

One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>

Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>

feather icon color is not changing in Angular

I have a feather icon in my Angular project and I'm trying to use my primary color from color theme page but some reason I can't change the color.
HTML
<i-feather name="search"color="primary" class="icon"></i-feather>
CSS
.icon{
height: 40px;
width: 40px;
}
Note: I was able to change normally like color: blue; in my css file but it's not how I want to do. I want to reuse my primary color so that I can just change from global css later on.
styles-theme.scss
#mixin app-base-theme($theme) {
$primary: map-get($theme, primary);
.i-feather {
color: mat-color($primary);
}
It supposed to be the same color like the bar underneath
Any help or suggestion on how should I do. tx

css change the input cursor/caret color

first thanks to you.
I want to achieve such features:（for the <input> node）
the color of placeholder text is: #b8b9b9
the color of the text you input is: #4e5050
the color of the input caret is: #FF0000
I have already achieved the first two feature 1 and 2,the code is:
input[type='text']::-webkit-input-placeholder{
color: #b8b9b9;
}
input[type='text']:-moz-placeholder{
color: #b8b9b9;
}
input[type='text']::-moz-placeholder{
color: #b8b9b9;
}
input[type='text']:-ms-input-placeholder{
color: #b8b9b9;
}
input[type='text']:focus {
color: #4e5050;
}
But I do not know how to achieve the feature-3.
I have alreay try the function on the Styling text input caret,
but this doesn't work for the mobile safari browser. The mobile safari input caret color is already the default color of the iphone:blue

Use modern CSS!
input {
caret-color : #FF0000;
}

you can assign an image to any element for cursor by this option
div {
cursor: url(YOUR_IMAGE_URL), auto;
}

How to change the textfield cursor colour in Cordova iOS project

I have a blue background in my Cordova based iOS project due to which my cursor is not properly visible in iPhone device.So if anyone faced this please tell me How to change the textfield cursor color in Cordova iOS project or if any HTML attribute to change this tint color
textfield code in index.html:
<input type="text" placeholder="First Name" id='regFName' />

Sujania - you just need to add the class "cursor" to your input type.
<input class="cursor" type="text" placeholder="First Name" id='regFName' />
Then the CSS will apply as you would expect!

Solution 1: Setting the android:textCursorDrawable attribute to #null should result in the use of android:textColor as the cursor color.
Attribute textCursorDrawable is available in API level 12 and higher
Solution 2: With iOS 7 you can simply change tintColor property of the UITextField. This will affect both the color of the text cursor and the text selection highlight color.
You can do this in code...
textField.tintColor = [UIColor redColor];
... or in Interface Builder:
Solution 3: In your EditText properties, there is an attribute android:textCursorDrawable
Now set it to #null like,
android:textCursorDrawable="#null"
So now your EditText Cursor is same as your EditText TextColor.
Solution 4: Use an image along with CSS cursor property, I don't see any need of JavaScript here...
div {
cursor: url(YOUR_IMAGE_URL), auto;
}

To change the color of the cursor, write css for the cursor as follows:
.cursor {
font-size: 12px;
background-color: red;
color: red;
position: relative;
opacity: 0.5;
}

try this ,
for background-color user ur screen background color and for colore use white colore
<style>
.cursor {
font-size: 12px;
background-color: blue;
color: #fff;
position: relative;
opacity: 0.5;
}
</style>
<input class="cursor " type="text" name="firstname">code here
hope this will work for u!!

Try the css attribute caret-color, it's working for me.