feat: basic desktop layout
This commit is contained in:
parent
5f0cd016bf
commit
b5b7ca1f8b
256
bulma-slider.css
Normal file
256
bulma-slider.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
89
index.html
89
index.html
|
|
@ -5,19 +5,88 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
<link rel="stylesheet" href="bulma.min.css">
|
<link rel="stylesheet" href="bulma.min.css">
|
||||||
|
<link rel="stylesheet" href="bulma-slider.css">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Document</title>
|
<title>Imagine - Image Editor</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="section">
|
<div class="navbar columns is-mobile">
|
||||||
<div class="container">
|
<div class="column">
|
||||||
<h1 class="title">
|
<div class="hero is-fullheight">
|
||||||
Hello World
|
<div class="hero-body">
|
||||||
</h1>
|
<div class="container">
|
||||||
<p class="subtitle">
|
<div class="columns is-mobile">
|
||||||
My first website with <strong>Bulma</strong>!
|
<div class="column">
|
||||||
</p>
|
<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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue