diff options
| -rw-r--r-- | bulma-slider.css | 256 | ||||
| -rw-r--r-- | index.html | 89 |
2 files changed, 335 insertions, 10 deletions
diff --git a/bulma-slider.css b/bulma-slider.css new file mode 100644 index 0000000..cafa942 --- /dev/null +++ b/bulma-slider.css @@ -0,0 +1,256 @@ +input[type=range].slider { + height: 25px; + -webkit-appearance: none; + margin: 10px 0; + background-color: inherit; +} + +input[type=range].slider.is-fullwidth { + display: block; + width: 100%; +} +input[type=range].slider:focus { + outline: none; +} + +input[type=range].slider.has-output + output { + width: 4rem; + background-color: #4a4a4a; + border-radius: 4px; + padding: .4rem .8rem; + font-size: .75rem; + line-height: .75rem; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + color: #fff; + overflow: hidden; + pointer-events: none; + z-index:200; +} + +input[type=range].slider.has-output { + display: inline-block; + vertical-align: middle; +} + +input[type=range].slider.is-fullwidth.has-output { + width: calc(100% - 5.2rem); +} + +input[type=range].slider.has-output + output { + display: inline-block; + margin-left: .75rem; + vertical-align: middle; +} + +input[type=range].slider::-webkit-slider-runnable-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background-color: #dbdbdb; + border-radius: 4px; + border: 0px solid #000000; +} +input[type=range].slider::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -7px; +} +input[type=range].slider:focus::-webkit-slider-runnable-track { + background-color: #dbdbdb; +} + +input[type=range].slider::-moz-range-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background-color: #dbdbdb; + border-radius: 4px; + border: 0px solid #000000; +} +input[type=range].slider::-moz-range-thumb { + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; +} + +input[type=range].slider::-ms-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + background-color: transparent; + border-color: transparent; + color: transparent; +} +input[type=range].slider::-ms-fill-lower { + background-color: #dbdbdb; + border: 0px solid #000000; + border-radius: 8px; + box-shadow: 0px 0px 0px #000000; +} +input[type=range].slider::-ms-fill-upper { + background-color: #dbdbdb; + border: 0px solid #000000; + border-radius: 4px; + box-shadow: 0px 0px 0px #000000; +} +input[type=range].slider::-ms-thumb { + margin-top: 1px; + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; +} +input[type=range].slider:focus::-ms-fill-lower { + background-color: #dbdbdb; +} +input[type=range].slider:focus::-ms-fill-upper { + background-color: #dbdbdb; +} + +input[type=range].slider.is-primary::-webkit-slider-runnable-track { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-moz-range-track { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-ms-fill-lower { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-ms-fill-upper { + background-color: #00d1b2 !important; +} + +input[type=range].slider.is-link::-webkit-slider-runnable-track { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-moz-range-track { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-ms-fill-lower { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-ms-fill-upper { + background-color: #3273dc !important; +} + +input[type=range].slider.is-info::-webkit-slider-runnable-track { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-moz-range-track { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-ms-fill-lower { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-ms-fill-upper { + background-color: #209cee !important; +} + +input[type=range].slider.is-success::-webkit-slider-runnable-track { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-moz-range-track { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-ms-fill-lower { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-ms-fill-upper { + background-color: #23d160 !important; +} + +input[type=range].slider.is-warning::-webkit-slider-runnable-track { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-moz-range-track { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-ms-fill-lower { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-ms-fill-upper { + background-color: #ffdd57 !important; +} + +input[type=range].slider.is-danger::-webkit-slider-runnable-track { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-moz-range-track { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-ms-fill-lower { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-ms-fill-upper { + background-color: #ff3860 !important; +} + +input[type=range].slider.is-white.has-output + output { + background-color: #fff; + color: #0a0a0a; +} + +input[type=range].slider.is-black.has-output + output { + background-color: #0a0a0a; + color: #ffffff; +} + +input[type=range].slider.is-light.has-output + output { + background-color: #f5f5f5; + color: #363636; +} + +input[type=range].slider.is-dark.has-output + output { + background-color: #363636; + color: #f5f5f5; +} + +input[type=range].slider.is-primary.has-output + output { + background-color: #00d1b2; + color: #ffffff; +} + +input[type=range].slider.is-link.has-output + output { + background-color: #3273dc; + color: #ffffff; +} + +input[type=range].slider.is-info.has-output + output { + background-color: #209cee; + color: #ffffff; +} + +input[type=range].slider.is-success.has-output + output { + background-color: #23d160; + color: #ffffff; +} + +input[type=range].slider.is-warning.has-output + output { + background-color: #ffdd57; + color: rgba(0, 0, 0, .7); +} + +input[type=range].slider.is-danger.has-output + output { + background-color: #ff3860; + color: #ffffff; +} @@ -5,19 +5,88 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <link rel="stylesheet" href="bulma.min.css"> + <link rel="stylesheet" href="bulma-slider.css"> <link rel="stylesheet" href="style.css"> - <title>Document</title> + <title>Imagine - Image Editor</title> </head> <body> - <section class="section"> - <div class="container"> - <h1 class="title"> - Hello World - </h1> - <p class="subtitle"> - My first website with <strong>Bulma</strong>! - </p> + <div class="navbar columns is-mobile"> + <div class="column"> + <div class="hero is-fullheight"> + <div class="hero-body"> + <div class="container"> + <div class="columns is-mobile"> + <div class="column"> + <button + class="button is-large is-fullwidth" + style="padding: 100% 0 100% 0"> + Take a Picture + </button> + </div> + <div class="column"> + <button + class="button is-large is-fullwidth" + style="padding: 100% 0 100% 0"> + Upload an Image + </button> + </div> + </div> + </div> + </div> + </div> </div> - </section> + <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only"> + <aside class="menu" style="width: 300px"> + <h1 class="title">Imagine</h1> + <h2 class="subtitle">Image Editor</h2> + + <button class="button is-primary"> + Save Image + </button> + <button class="button is-secondary"> + Share + </button> + + <p class="menu-label"> + Color Correction + </p> + + <div class="field"> + <label class="label">Brightness</label> + <div class="control"> + <input type="range" + id="slider0" + class="slider is-fullwidth is-primary" + min="0" max="100" value="50" step="1"> + </div> + </div> + <div class="field"> + <label class="label">Saturation</label> + <div class="control"> + <input type="range" + id="slider0" + class="slider is-fullwidth is-primary" + min="0" max="100" value="50" step="1"> + </div> + </div> + <div class="field"> + <label class="label">Contrast</label> + <div class="control"> + <input type="range" + id="slider0" + class="slider is-fullwidth is-primary" + min="0" max="100" value="50" step="1"> + </div> + </div> + + <p class="menu-label"> + Distortion + </p> + <p class="menu-label"> + Blur and Sharpen + </p> + </aside> + </div> + </div> </body> </html> |