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">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue