I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?
In addition, I've also tried the method suggested in the link but that doesn't work:
HTML
<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>
SCSS
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
Thanks in advance!
::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.
As such we plan to drop support in Angular (for all 3 of /deep/, >>>
and ::ng-deep). Until then ::ng-deep should be preferred for a broader
compatibility with the tools.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project
in styles.css
.orange-spinner circle{
stroke:orange !important;
}
add class
<mat-spinner class="orange-spinner"></mat-spinner>
Stackblitz
https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css
Please note:
Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.
https://material.angular.io/guide/theming
Related
According to this page:
https://caniuse.com/#search=custom%20properties
Microsoft Edge should support CSS custom properties from version 15.
I have the latest MS Edge installed on my Windows 10 and it shows the following version:
Microsoft Edge 44.17763.831.0
Microsoft EdgeHTML 18.17763
Based on that info, I assume that I'm using MS Edge version 18, which should support CSS custom properties. But it doesn't seem to support it as something like this statement is not working:
:root {
// Color definitions
--white: 255, 255, 255;
}
background-color: rgba(var(--white));
Any thoughts and suggestions would be appreciated.
I found the answer to my question.
Microsoft Edge supports CSS Custom Properties since Edge version 15.
However, if you use rgba instead of rgb, you have to set the value of a (alpha channel):
This won't work in Edge:
background-color: rgba(var(--white));
This will work:
background-color: rgba(var(--white), 1);
background-color: rgba(var(--white), 0.8);
I hope it helps others who are facing the same issue.
I want to change background images, logo ,headings and add some buttons.
I have the following UI related plugins installed
1) Simple Theme Plugin
A plugin for Jenkins that supports custom CSS & JavaScript. You can customize Jenkins's appearance (ex. his gentle face on the background).
version 0.3
2) UI Themes: Plugin
This plugin provides UI themes for Jenkins.
version 2.1.1
I have found some answer regarding the same but didn't find much help.
-->> Customising Jenkins' appearance to make it easier to tell instances apart
-->> http://isotope11.com/blog/styling-your-jenkins-continuous-integration-server
Please give steps or any links from which I can completely change the appearance of my Jenkins server.
If you are comfortable with CSS styling, you could create a theme, by making a CSS styling file and uploading it to a directly-serving server (Even the one your using for jenkins, in a new folder) or JavaScript styling (same diddy) could be added to the option at your jenkins {host}/configure under "Theme". However, in my experience the 1.609.1 version of jenkins does NOT support this plugin properly in OpenShift Cloud hosting.
You can see an example of full theme in progress in jenkinsci/dark-theme.
It is not yet ready, but can illustrate how the CSS is setup with a Jenkins 2.220+ (May 2020)
If you are comfortable in CSS, you can easily customize logo and titel in theme with .css file.
For example, I have added JENKINS_HOME/usercontent/mytheme.css file JENKINS_HOME/usercontent/logo.png as my logo and follow the css below:
#charset “utf-8”;
#header .logo {
height: 36px;
}
/* Custom style for my Jenkins Platform */
.logo {
background: url(/userContent/logo.png) no-repeat 10px center;
}
.logo img {
display: none;
}
.logo:after {
content: 'Jenkins my instance';
font-weight: bold;
white-space: nowrap;
} // Content after logo
Just check in Configure System --> Theme you must give CSS path of above mytheme.css file. & Refresh your Jenkins Page.
See the reference LINK here !
I'm developing a pure Material Design application using Angular Material framework.
However, I don't understand how to set containers' background colors (e.g. a login form with a blue background).
I could do it using CSS of course but I wonder if there's a built-in directive / theme option to do this.
I am pretty sure I have seen this somewhere in the docs, but I cant find it now. You have to do two different things:
set .backgroundPalette('indigo') same way as you set primary theme
create container
I have check it on 0.8.1 version of angular-material and it works ok.
Feel free to ask, if you have any additional questions.
For example:
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('indigo')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('blue-grey');
});
and in your template:
<md-content>
<p>Some text</p>
</md-content>
You can set any color from the palette with md-colors directive.
https://material.angularjs.org/1.1.4/api/directive/mdColors
The format will be [?theme]-[palette]-[?hue]-[?opacity] where ? means optional parameter.
But from my experience you have to specify the theme even if it's default:
<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>
On a sidenote, ignoring the "without css" part of the question, I see that the Material Angular creators uses plain old css to create a background color, see this codepen (you also find this via the Getting Started section: "Fork a codepen").
html
<div id="content" ng-view flex> </div>
css
.demo #content {
background-color: rgb(255, 244, 220);
padding:30px;
font-weight:600;
border: 1px solid #aeaeae;
border-top:none;
}
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
In the newest release of Twitter Bootstrap (2.0) I came across this line:
border-radius: 0 \0/;
What does the \0/ do? Is the some obscure css trick or simply a typo?
https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L568
Apparently, the \0/ is a construct that IE 9 ignores, but other browsers don't, so this line's there to set border-radius to 0 for IE 9 only.
The Twitter Bootstrap developers left a comment in their sass source (although, the accompanying commit message isn't exactly self-assured):
border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
Paul Irish's fairly exhaustive list of CSS browser hacks says that \0/ after an attribute is a hack that targets IE 8 and 9.