I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.
In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.
This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:
#messages {
z-index: 999;
position: fixed;
width: 100%;
.container {
max-width: 890px;
#media (max-width: 992px) and (min-width: 768px) {
max-width: 720px;
}
#media (max-width: 767px) and (min-width: 576px) {
max-width: 510px;
padding-left: 0px;
padding-right: 0px;
}
}
a {
color: #FFF;
font-weight: bold;
}
i {
cursor: pointer;
padding-top: 3px;
}
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-5vh);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
.hide-messages-bar.show-success-messages-bar {
background-color: $green;
transform: translateY(0vh);
padding: 8px 0;
}
.hide-messages-bar.show-error-messages-bar {
background-color: $red;
transform: translateY(0vh);
padding: 8px 0;
}
}
arbuthnott got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.
Used this tool to translate vh to px:
https://jsfiddle.net/Dwaaren/j9zahaLL/
And ended up with this:
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-22.3px);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.
Related
I've tried everything, searched the whole stack overflow and google.
Can someone help me to make this particular type of scrollbar?
When I use the border-right/top/bottom to make the spaces around it, it breaks the border-radius and gets ugly. As a reference, it's the same scrollbar used in Googledocs, a slim, rounded and doesn't touch the margins of the page: https://docs.new/
Here's the image: rounded, slim and not touching
So far I got:
::-webkit-scrollbar {
background: #262338;
width: 6px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
background: #6E7191;
border-radius: 6px;
height: 48px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
border-radius: 34px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 16px;
}
This would get you the main design of the scrollbar you are looking. This is what I used on my website. Hope this is the design you want!
Scrollbar Padding
I think you'll have to use a container to accomplish the not touching part of your requirements.
Chrome vs Firefox
Be aware that the support to adjust the scrollbar is very limited in firefox compared to chrome browsers. The result of it will not show up in this snippet, nor on websites like jsfiddle. Rounded corners are impossible to achieve in firefox without using your own implementation or a third party library like thisone for example.
Example
body {
background-color: #14142B;
}
/* FIREFOX */
html {
scrollbar-width: thin;
scrollbar-color: #6E7191 #262338;
}
/* CHROME */
::-webkit-scrollbar {
width: 12px;
border-radius: 34px;
}
::-webkit-scrollbar-track {
background: #262338;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: #6E7191;
border-radius: 8px;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
::-webkit-scrollbar-thumb:hover {
background: #7E81A1;
}
.container {
margin: 1.5rem .5rem;
overflow-y: scroll;
max-height: calc(100vh - 3rem);
}
.content {
height: 25rem;
}
hr {
border: 0;
border-top: 2px solid #201F36;
}
.filler {
height: 3rem;
}
<div class="container">
<div class="content">
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
<hr>
<div class="filler"></div>
</div>
</div>
This css seems to work fine in live preview, but when i upload it to the server the drop shadow and image scaling on hover do not work. also on the project pages in live preview there is a black background behind my main image, but doesn't show once uploaded.
#carousel {
background-color: #0C090D;
}
#media screen and (max-width: 720px) {
.artist-about { display: none; }
#prod-img { width: 50vw; }
}
#prod-img {
max-width: 100vw;
background-color: #0C090D;
}
#img-cont {
background-color: #0C090D;
}
.card {
transition: all .2s ease-in-out;
}
.card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transform: scale(1.025);
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: inherit;
text-decoration: none;
}
.btn {
border: 1px solid #0C090D;
}
I would like to know what the issue is, and why it only gives my problems once uploaded. thank you.
you can see what my problem currently is by visiting
http://zrwpureart-com.stackstaging.com/
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
Hi for some reason my responsive CSS is not working, I'm not sure what to change or what to do, but whenever I load my site up on my iPhone and zoom all the way out the site only uses up approx 3/4 of the page, I have no idea why, here's the code in my CSS.
#media (max-width:767px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
I've the max width to 767 as that's the width of a iPhone to test it out, but no matter what I seem to change nothing happens.
I want to change scroll-bar color and other properties;
So I wrote the code bellow for chrome:
/* Chrome */
.contex#context::-webkit-scrollbar { width: 10px; height: 0px;}
.contex#context::-webkit-scrollbar-button { background-color: #800000; }
.contex#context::-webkit-scrollbar-track { background-color: #40210f;}
.contex#context::-webkit-scrollbar-track-piece { background-color: #ffffff;}
.contex#context::-webkit-scrollbar-thumb { height: 50px; background-color: #40210f; border-radius: 50%;}
.contex#context::-webkit-resizer { background-color: #666;}
/* Chrome */
This is jsfiddle and This is full screen if you use chrome you can see right result.
and I tried this code for I.E. :
.contex#context {
background-color:#fff;
overflow:scroll;
width:565px;
height:490px;
padding-right:5px;
margin-left:140px;
margin-top:100px;
text-align:right;
font-family:"B Koodak",Arial, Sens Serif;
position:absolute;
/* I.E scroll-bar */
scrollbar-face-color: #40210f;
scrollbar-track: transparant;
scrollbar-base-color: #40210f;
scrollbar-face-color: #40210f;
scrollbar-3dlight-color: #800000;
scrollbar-highlight-color: #FFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #40210f;
scrollbar-shadow-color: white;
scrollbar-dark-shadow-color: #800000;
}
But it's not enough for my case.
Now I want to change scroll-bar in I.E and Mozila like I did for chrome.
Specially I want to change scrollbar-thumb with border-radius
Do you have suggestion for me to make something like this in FireFox and I.E.?Thanks in advance.
What you can use is this Jquery Plugin.
http://jscrollpane.kelvinluck.com/fullpage_scroll.html
You will need all of these plugins:
jquery
mousewheel
mwheelIntent
scrollpane
Once you acquire all of these and implement them, then you can edit the CSS for the scrollbars to what you want. Make sure you use the code provided on that page.
For instance, on the page I provided, these CSS styles can be altered to get what you want.
.jspArrow {
background: #800000; // Changed color
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled {
cursor: default;
background: #800000; // Color change, but line not necessary
}
.jspDrag {
background: #40210f; // Changed color
position: relative;
top: 0;
left: 0;
cursor: pointer;
border-radius: 50%; // Added line
}
.jspTrack {
background: #dde; // Remove this line
position: relative;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red; // Remove this line
}
Realize that border-radius does not work on older versions of Internet Explorer.
Check out your options here: http://www.unheap.com/?s=scroll
The most popular solution seems to be http://www.yuiazu.net/perfect-scrollbar/