The Fast Refresh / Hot Reloading in Next.js comes with a small triangle animation in the lower right corner by default:
Is there any way to customise this? I'd like the whole page to turn grey or similar so I get a visual feedback that my file change is actually taking effect and that I didn't happen to change the wrong file or something,.
A very ugly workaround until someone with better next.js knowledge helps out:
// Put this in your _app.js file
if (global.window) {
global.addEventListener('load', (event) => {
const watcher = window.document.getElementById('__next-build-watcher')
if (watcher) {
const newStyle = global.document.createElement('style')
newStyle.innerHTML = '#icon-wrapper { width: 100vw!important; height: 100vh!important; opacity: 0.3!important; } #container { background: rgba(0, 0, 0, 0.3)!important; }'
watcher.shadowRoot.appendChild(newStyle)
}
});
}
Makes that triangle icon 100vw 100vh and semi-transparent instead of 16px 16px .
Related
I'm fairly new to react and css and I'm a bit stuck.
I have an animated NavBar that opens on a button click and fills the page - however, because of the way my app is structured I'm struggling to hide the component underneath the nav - i.e. home page, as elements with properties like position: absolute aren't being hidden underneath it.
Right now, my css classes for this are:
.nav-links.open {
clip-path: circle(1400px at 95% -10%);
-webkit-clip-path: circle(1400px at 95% -10%);
opacity: 1;
}
.nav-links.close {
clip-path: circle(100px at 95% -10%);
-webkit-clip-path: circle(100px at 95% -10%);
opacity: 0.7;
}
And I simply toggle the classes with this:
toggleNavbar() {
if (this.state.navBarActive === false) {
this.setState({
navBackStyle: 'white',
navClass: 'nav-links open',
navBarActive: !this.state.navBarActive,
});
} else {
this.setState({
navBackStyle: '#5b78c7',
navClass: 'nav-links close',
navBarActive: !this.state.navBarActive,
});
}
}
My react components are all in the app.js, with a components folder containing the navbar, home etc.
My css files are also structured as components and imported with scss. I understand I could have everything in one file to make it easier to hide other elements but that won't be very easy to work with, as this is big project.
Question
Is it possible to make a BrowserWindow, in electron, transparent with blur? In that it blurs all background content, including apps and the wallpaper.
And if possible, how would I accomplish this?
Examples
Here are some code I've tried.
index.js:
let win = new BrowserWindow({
fullscreen: true,
fullscreenable: false,
frame: false,
skipTaskbar: true,
resizable: false,
movable: false,
show: false,
alwaysOnTop: true,
transparent: true
})
style.css:
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
backdrop-filter: blur(4px);
}
The html is just a body with a h1 tag with text in it.
Although this only creates a black background in the window.
I read something about this:
webPreferences: {
experimentalFeatures: true
}
But can't get it to work.
Environment
Ubuntu: 18.04.2
Node: v10.15.3
npm: 6.4.1
i3wm. 4.14.1
I have compton running. Maybey it has to do with that. Or the compositing engine in general?
Thanks in advance!
electron-acrylic-window
Actually, it is possible, with a little bit of magic. I have no idea why nobody pointed that out, but there exists a small utility called electron-acrylic-window, which allows you to do exactly that. You can choose between the acrylic ("frosted") and blur effects, as well as change the color of the window and the opacity.
Under the hood, it uses node-gyp and low-level C++ code to render the page however you like. It's pretty easy to implement in Javascript.
The major drawback is that anything that is remotely transparent (and not above anything with a solid color) will be rendered as totally transparent.
Sample usage
index.js
const { BrowserWindow } = require('electron-acrylic-window');
// import { BrowserWindow } from 'electron-acrylic-window';
win = new BrowserWindow({
...,
frame: false,
vibrancy: {
theme: 'light', // (default) or 'dark' or '#rrggbbaa'
effect: 'acrylic', // (default) or 'blur'
disableOnBlur: true, // (default)
}
});
// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])
style.css
body {
background-color: transparent;
}
.watev {
background-color: black;
}
It's not possible to blur other apps in the background.
https://www.electronjs.org/docs/api/frameless-window#limitations
The blur filter only applies to the web page, so there is no way to
apply blur effect to the content below the window (i.e. other
applications open on the user's system).
Electron does not allow you to blur on anything running behind it. It only allows you to blur the content on your webpage/app. Anything in your css styling will only be applied to the foreground contents. I know because I too have tried and failed.
I am trying to get the following code to load a random image for a jumbotron background without success. I just can't tell which part is the problem. The jumbotron itself is acting as the area for a basic flex slider. I basically want the background image for the flex slider to change on every page load.
To attempt this, I've placed the following script in the head section of the page:
<script type="text/javascript">
$(document).ready(function() {
var images = ['01.jpg', '02.jpg'];
$('.jumbotron').css({'background-image': 'url(../images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
and my Jumbotron CSS looks like:
.jumbotron {
position: relative;
color: #fff;
/*text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);*/
/*background:url(../images/header-bg.jpg) no-repeat #232a31; /* Old browsers */
height:630px;
background-size:cover;
overflow:hidden;
}
I have disabled the 'background:url' line (which otherwise loaded one image), to allow the enforcement of the 'background-image:url' in the script.
Well, no image loads at all! http://webeutic.com/123.html
Can anyone lend an extra hand scratching my head?
Thanks to all
You have an Uncaught TypeError: undefined is not a function in 123.html # line: 215.
$(document).ready(function() {
It seems that the $() alias for jQuery() is not defined. Use jQuery() instead.
EDIT: With the first error fixed you will notice that your code tries to load images from the wrong location. That's due to the difference in how relative paths work when used in CSS files (relative to CSS URL) and when used in HTML files (relative to HTML URL). To fix this you need to change the path to include the folders that lead to your /images folder.
Code below includes both fixes
jQuery(document).ready(function() {
var images = ['01.jpg', '02.jpg'];
jQuery('.jumbotron').css({'background-image': 'url(/wp-content/themes/flathost/assets/images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: true,
title: dimensionData.title,
position: [x,y],
open: function() {
$("#dialog-search .dateField").blur();
},
close: function(event, ui){
callBack(event,ui);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
Try to see the structure of the dialog and it should not be hard to do it.
http://jqueryui.com/demos/dialog/#theming
Use the create event to change the class of the close button icon to class of another icon will do.
http://jsfiddle.net/Quincy/kHU2M/1/
$("#dialog-search").dialog({
create: function(event, ui) {
var widget = $(this).dialog("widget");
$(".ui-dialog-titlebar-close span", widget)
.removeClass("ui-icon-closethick")
.addClass("ui-icon-minusthick");
}
});
Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.
.ui-icon-closethick {
background-image: url(images/my-10px-image.png) !important;
background-position: left top !important;
margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
width: 10px !important;
height: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: none !important;
border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
padding: 0 !important;
}
My custom close button shown below:
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });