I would like to add a shadow to gnome-shell panel in default theme.
I've edited "/usr/share/gnome-shell/theme/gnome-shell.css" and succesfully removed background color (atl+f2 + r to apply).
I've also added a box-shadow property like this:
#panel {
background-color: transparent;
font-weight: bold;
height: 1.86em;
box-shadow: 0px 3px 10px black;
}
...that, if applied to a div in a html page, would give me what I expect.
Unfortunalelly it seems to be ignored by gnome-shell.
Is something similar available in gnome-shell?
...ok, I've found out where the problem is.
Unlikewise HTML, the shadow alpha is also affected by panel background alpha.
So a black shadow (alpha=1) on a transparent background panel, would result in a transparent (thus insvisible) shadow. So by setting
background-color: rgba(0,0,0,0.5);
font-weight: bold;
height: 1.86em;
box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
It would result on a 0.25 alpha shadow (0.5 * 0.5 = 0.25). That's why the box-shadow effect from my question above is not shown.
As said, that's a different behaviour than HTML where a transparent background div would not affect its box-shadow effect. Perhaps some gnome-shell developer passing by here might want to consider this implementation.
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
I am working on a website where a user can select an icon and send it as a request to one of my bots.
I've already got it sorted out. I'm mainly just working on improving the aesthetics.
What I want to happen is, when hovering over an icon (or even selecting it), it shows a light blue background colour to indicate that it's been selected, because right now there is nothing to indicate a chosen icon except for the div at the very top (which isn't always in sight when you scroll further down).
The code I have atm is:
.flair:hover, .selected{
background-color: #3498db;
border-radius: 2px;
}
I've tried adding some padding but since each image is in a spritesheet, it will overlap with other images.
I've also tried using a border instead to emulate the same effect, but hovering over an image would slightly move the other images due to the border being applied and it gets annoying.
Is there some way I can get my background-color to 'overflow' behind the images?
How about you add a transparent border add the begining as a placeholder and change your margins since borders gonna add some space
.flair {
border: 2px solid transparent;
background-clip : padding-box;
margin-right:6px;
margin-top:6px;
}
and then you color it with some additional glow when hovering
.flair:hover {
box-shadow: 0 0 10px #3498db;
border: 2px solid #3498db;
}
Please try this :
.flair:hover, .selected {
border: 1px solid #3498db;
border-radius: 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
looking on this page: http://acecontainerbuilder.com.dnnspeed.com/news-events.html you will see if using iOS device (iPad, iPhone) that the background color of the input in the bottom left corner bleeds through the border radius. Does anyone know of a way to prevent this without using images?
Try adding -webkit-background-clip: padding-box; to the style of the input box.
Edit: if that doesn't work, try -webkit-background-clip: content-box;, or either of those properties without the -box in the value.
I just encountered this same problem, and the best solution I could come up with was to wrap the input element in a div tag and apply the styles to the div instead of the input element.
#sidebar div.search-wrapper {
background-color:#fff;
border-radius: 14px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) inset;
}
#sidebar input[type="text"] {
background-color: transparent!important;
box-shadow:none!important;
}
For whatever reason, mobile safari isn't honoring the border radius on input elements even though desktop safari is. Strange.