I wanted to add this to my previous question, sorry about this Mark.
I'm trying to display span in different colors and font weight, tried a bunch of combinations.
< h2 >title< span > different color < / span>< / h2 >
sIFR.replace(gotham, {
selector: 'h2',
css: [
'.sIFR-root { font-size:24px; color:#4a5659; font-family : Gotham Bold; letter-spacing:-2; margin: 0 !important; margin-bottom:0;}' ,
'span{ background-color: #ffffff; color: #993333; font-family : Gotham Light;}'
]
,filters: {
DropShadow: {
distance: 1
,color: '#FFFFFF'
,strength: 2
,alpha: .5
,blurX: 0
,blurY: 0
}
}
,wmode: 'transparent'
});
Flash doesn't let you select span elements by using a span selector (yes! really!). Give it a class and use that instead.
You can't specify different background colors within the sIFR text.
Related
I'm trying to style my Tabs of the BottomNavigation but I'm not being able to do it because of a Nativescript Theme globally installed.
For example, my BottomNav Tab label is being filled with a Nativescript Theme global style, probably for titles, or labels... well, I don't know.
Here is my example... The "Home", because it's selected, should be black. But it's lime because of a globally installed Nativescript Theme.
How could I effectively set this to be black when selected?
I already tried to use CSS:
TabStrip {
background-color: $primary;
color: #FFFFFF;
}
TabStripItem {
color: white;
}
TabStripItem:active {
color: black;
}
TabStripItem Label {
font-size: 12;
}
But didn't worked.
Also, I tried to set the color to this TabStripItem Label and worked but only to be always black. I wish that it could be set dynamically.
I've found it.
I needed to just set this CSS:
TabStripItem:active Label {
color: black;
}
If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}
I was working for iOS 13 with Xcode 11 beta. Is there any way to support dark mode on web views? I have created a color set for all the other views except WKWebviews. How to change web view background and text color for dark mode?
Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content.
I have some local HTML files I use in a WKWebView. I was able to support dark mode by updating my css file.
Let's say you currently have a css file with the following:
body {
background-color: white;
color: black;
}
a:link {
color: #0078b5;
text-decoration: none;
}
Those are fine in light mode. To also support dark mode, you can add an #media section to your css:
#media (prefers-color-scheme: dark) {
body {
background-color: rgb(38,38,41);
color: white;
}
a:link {
color: #0096e2;
}
a:visited {
color: #9d57df;
}
}
When in dark mode, the colors in this #media section will override the corresponding colors defined outside the #media section.
Swift 5
For WKWebView, below code worked for me.
extension RichTextController : WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
let cssString = "#media (prefers-color-scheme: dark) {body {color: white;}a:link {color: #0096e2;}a:visited {color: #9d57df;}}"
let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
webView.evaluateJavaScript(jsString, completionHandler: nil)
}
}
More simple, just invert all colors & style except for images :
#media (prefers-color-scheme: dark) {
html{
filter: invert(1) hue-rotate(.5turn);
}
img {
filter: invert(1) hue-rotate(.5turn);
}
}
Same challenge I faced when I was migrating my iOS app because we do login using WKWebView and when I consulted I found below example to handle this situation. Just need to create variable for the color and need to handle this in CSS.
Before
body { color: black; }
h1 { color: white; }
.header {
background-color: #FFFFFF;
color: white;
}
After
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
#media (prefers-color-scheme: dark) {
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
}
body { }
h1 { color: var(--h1-color); }
.header {
background-color: var (--header-bg-clr);
color: var(--header-txt-clr);
}
After Integrating this change you can use Safari to test (First you need to enable the developer menu option in Sarafi, Preferences, Advanced). Open wen inspector (using Command + Options + I) and you will see this screen with the option to toggle light/dark mode.
NOTE Just to add little more information. You can also handle different images just like colors.
BEFORE
<img src="day.jpg">
AFTER
<picture>
<source srcset="light.jpg" media="(prefers-color-scheme: light)">
<img src="day.jpg">
</picture>
Root tag will invert all the components color except the table and images will be in negative form.
To perform perfect color invert check the below CSS file
#media (prefers-color-scheme: dark) {
/* root tag inverting all the components color except the table.*/
: root {
color-scheme: light dark;
filter: invert(100%);
-webkit-filter: invert(100%)
}
/*table tag needed for inverting table content.*/
table {
filter: invert(100%);
}
/* If We do color invert in : root , images will be color inverted and it will be in negative. If we invert again these negative images, it will be positive.*/
img {
filter: invert(100%);
}
}
I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.)
Is it possible to remove only the horizontal scrollbar?
With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately.
Instead of
enableScrollbars = false;
use
enableHorizontalScrollbar = value;
enableVerticalScrollbar = value;
with
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
UPDATE:
If you want to use constants instead of the integer-value, look at corresponding post:
Using ui-grid constants to disable scrollbars
UPDATE:
The option WHEN_NEEDED doesn't seem to be available at the moment.
Maybe this will be changed again, so please look for the available constants in the source code.
The Constants are defined in
https://github.com/angular-ui/ui-grid/blob/master/packages/core/src/js/constants.js
At now, the option WHEN_NEEDED doesn't seem to be available at the moment (ui-grid 3.1.1). So I have worked around by jQuery and CSS:
For simple, we just need do this:
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
overflow-x: auto !important;
/* or use: overflow-x: hide!important; */
}
To more flexible, we can use CSS class and jQuery. First, we add one more class:
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
overflow-x: hidden !important;
}
In controller, we will use this class by jQuery:
$timeout(function(){
if (!!$scope.gridOptions.data) {
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
To hide the blank gap when use selecting and grouping (http://i.imgur.com/veevhgQ.png), we use:
$timeout(function(){
if (!!$scope.gridOptions.data) {
/* To hide the blank gap when use selecting and grouping */
$('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
With 17px is height of the gap when we use selecting and grouping feature.
Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview
With this solution we can show the horizontal bar again easily.
If you are allowed to use flexboxes:
.ui-grid-render-container-body {
.ui-grid-header {
padding-right: 17px;
.ui-grid-header-viewport {
width: 100%;
.ui-grid-header-canvas {
width: 100%;
.ui-grid-header-cell-wrapper {
display: block;
width: 100%;
.ui-grid-header-cell-row {
display: flex;
min-width: 0;
.ui-grid-header-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
}
.ui-grid-viewport {
overflow: auto !important;
display: flex;
.ui-grid-canvas {
flex: auto;
min-width: 0;
[role="row"] {
display: flex;
min-width: 0;
.ui-grid-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
Where col-min-width is a minWidth that you would normally set in the gridOptions. Also you have to set the ui-grid-header's padding-right (which is 17px in this example) to the width of your browser's scrollbar with the javascript on certain events: number of rows changed, container resized etc. Scrollbar width = ui-grid-viewport's offsetWidth - clientWidth. Using a hardcoded value for scrollbar width is bad because different browsers have different (and even configurable) values for that.
I'm creating a theme for Highcharts and need to be able to configure the shadow angle on the tooltips. In some configuration areas, shadow allows for an object (ex: plotOptions.pie.dataLabels.shadows) but it seems that the shadow setting on tooltip does not allow this. Is there a workaround or a global setting I'm missing?
You can put css-style on your tooltip, in that way you can setup your shadow like that :
First deactivate the default shadow :
tooltip: {
valueSuffix: '°C',
shadow:false,
useHTML:true,
formatter: function() {
return '<div class="tooltip">Test</div>';
}
// Replace "Test" with the formatter you want, there are good examples
// on their website.
}
And set the style of your tooltip :
div.tooltip {
-moz-box-shadow: 20px 20px 20px #888;
-webkit-box-shadow: 20px 20px 20px #888;
box-shadow: 20px 20px 20px #888;
}
Here is an live example : http://jsfiddle.net/PKFSs/
With that you can do whatever you want on your tooltip.
EDIT :
If you can't use css :
formatter: function() {
return '<div class="tooltip" style="-webkit-box-shadow: 20px 20px 20px #888;box-shadow: 20px 20px 20px #888;">Test</div>';
}
I know it is not the best way, I'm trying to find a better solution, but this one works.