I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
Related
I'm just too dumb to get the same effect of the white button on the dark one. Could you explain to me the thought process to get the effect on any background color?
Ideally I would like to get a ripple effect of whiteish or greyish color that works on every background.
Credits to the original one https://codepen.io/finnhvman/pen/jLXKJw
/* Button style */
.btn-light {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: black;
background-color: white;
box-shadow: 0 0 4px #999;
outline: none;
}
.btn-dark{
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: black;
box-shadow: 0 0 4px #999;
outline: none;
}
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple-light:hover {
background: transparent radial-gradient(circle, transparent 1%, white 1%) center/15000%;
}
.ripple-light:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
.ripple-dark:hover {
background: transparent radial-gradient(circle, transparent 1%, dark 1%) center/15000%;
}
.ripple-dark:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
<button class="btn-light ripple ripple-light">Button</button>
<button class="btn-dark ripple ripple-dark">Button</button>
Use CSS variable to define the colors:
/* Button style */
.btn {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: black;
background-color: var(--c);
box-shadow: 0 0 4px #999;
outline: none;
}
.light {
--c: #fff;
color:#000;
}
.dark {
--c: #000;
color:#fff;
}
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: var(--c) radial-gradient(circle, #0000 1%, var(--c) 1%) center/15000% ;
}
.ripple:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
<button class="btn light ripple">Button</button>
<button class="btn dark ripple">Button</button>
This question already has answers here:
CSS/HTML: Create a glowing border around an Input Field
(11 answers)
Closed 3 years ago.
I want to recreate this 'on-focus-blue-glow' effect on the input tag like this:
Here is my effort :
input:focus{
outline-color : lightskyblue;
outline-width : 5px;
border : 1px solid blue;
}
input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
<input type="text" />
But the outline is very small and unnoticeable. And the outline doesn't have round corners, either.
So how can I recreate the effect?
Hello here I developed an example, I hope it serves you.
*, ::after, ::before {
box-sizing: border-box;
}
input {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
overflow: visible;
}
.input-focus {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.input-focus {
transition: none;
}
}
.input-focus::-ms-expand {
background-color: transparent;
border: 0;
}
.input-focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057;
}
.input-focus:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.input-focus::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:disabled {
background-color: #e9ecef;
opacity: 1;
}
#media print {
*, ::after, ::before {
text-shadow: none !important;
box-shadow: none !important;
}
}
<input type="text" class="input-focus" aria-describedby="emailHelp">
You can try using a box shadow in CSS and RGBA for a slightly transparent effect on your border's glow. That should give you the desired soft glow effect because of the blur and tiny bit of transparency in it, for example:
input:focus {
outline-color: lightskyblue;
outline-width: 1em;
border: .25em solid blue;
box-shadow: 0em 0em .75em rgba(0,0,255,0.95);
}
input {
padding: 0;
line-height: 35px;
border-radius: 5px;
border: 1px solid black;
width: 500px;
}
<input type="text" />
With box shadow you can have setting for: v-offset h-offset blur. The third setting is what give you the fuzzy or blurred look around the border/outline. For more detailed info check out the MDN about it.
.input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
input:focus{
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
<input class="input" />
I am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
I found some examples of expanding a textarea vertically using bootstrap.
I would like to horizontally expand a text input from this [..] to this [........] on click event with an animation.
Is there something in bootstrap that would simplify this or do I have to roll my own?
I ended up using pure css from codepen by someone named Prinzadi
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
In my design I have a div with 0 height (its height will be increased via some JS code on some anchor click) and a textbox. The HTML is:
<div class="container">
<textarea class="foo-textarea"></textarea>
<div class="foo">
<ul>
<li>Test1</li>
<li>Test1</li>
...
</ul>
</div>
</div>
and the following CSS:
.foo { -webkit-box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.3499999940395355s; -webkit-transition-property: height; -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; color: rgb(85, 85, 85); display: block; font-family: 'lucida grande' , tahoma, verdana, arial, sans-serif; font-size: 11px; height: 0px; left: 20px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 0px; top: 0px; width: 642px; z-index: 99; cursor: pointer; }
.foo-textarea { -webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-image: none; -webkit-box-orient: vertical; -webkit-box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s; -webkit-transition-property: border, box-shadow; -webkit-transition-timing-function: linear, linear; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(223, 223, 223); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(223, 223, 223); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(223, 223, 223); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(223, 223, 223); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: block; font-family: 'Helvetica Neue' , Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; height: 140px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px; margin-top: 0px; min-height: 20px; outline-color: rgb(85, 85, 85); outline-style: none; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position: relative; resize: none; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; vertical-align: middle; white-space: pre-wrap; width: 642px; word-spacing: 0px; word-wrap: break-word; writing-mode: lr-tb; }
The live JS Fiddle for the above code is http://jsfiddle.net/VHsKc/1/.
My issue is that when I hover the textbox I am seeing hand cursor over it. It can be because of "cursor:pointer" style applied on div having "foo" class and at this moment it is behind the textbox with absolute positioning (position: absolute;left: 0px; top: 0px;). But it is having 0 height at this moment then why it is showing hand cursor? Can this be fixed? I don't want the "foo" div classes getting applied when I am hovering the textbox.
The way I would do it is set .foo to display: none;. In your jQuery, since I assume you want to animate the height element, set the css display to block first, then do your animation.
TRIGGER
$('.foo').css('display','block');
$('.foo').animate(YOUR ANIMATION);
Set the z-index on .foo to -1. In the click() handler that increases its height, change .foo's z-index property back to 99.
Set the LI items to height 0 and overflow hidden.
http://jsfiddle.net/VHsKc/4/
.foo li {
height: 0;
overflow: hidden;
}
you might need to set the height to auto for the LIs later depending on needs