mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
[UPD]
This commit is contained in:
Viglino
parent
6d41fbc233
commit
78dfd04de5
@ -31,209 +31,15 @@
|
||||
<!-- filesaver-js -->
|
||||
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
||||
|
||||
<style>
|
||||
#map {
|
||||
position: fixed;
|
||||
top: calc(3em + 40px);
|
||||
left: 40px;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1em;
|
||||
}
|
||||
h2 {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
.fa-times {
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
right: .5em;
|
||||
}
|
||||
.fa-download {
|
||||
font-size: 1.5em;
|
||||
margin: 0 .3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wait {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
font-size: 6em;
|
||||
opacity: .8;
|
||||
display: none;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
}
|
||||
.wait i {
|
||||
color: #fff;
|
||||
}
|
||||
.waiting .wait {
|
||||
display: block;
|
||||
}
|
||||
.options {
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
background: #fff;
|
||||
box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,.5);
|
||||
max-width: 90%;
|
||||
margin: 0;
|
||||
z-index: 1001;
|
||||
transition: .5s;
|
||||
}
|
||||
.options.visible {
|
||||
top: 30%;
|
||||
}
|
||||
.options ul {
|
||||
margin: 0;
|
||||
}
|
||||
.options label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
text-align: right;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.options button {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
margin: 1em auto;
|
||||
min-width: 5em;
|
||||
background: #369;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
.ol-search {
|
||||
left: .5em!important;
|
||||
}
|
||||
.ol-search {
|
||||
max-width: calc(100% - 1em);
|
||||
}
|
||||
.ol-search > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ol-button {
|
||||
top: .5em;
|
||||
left: 3em;
|
||||
}
|
||||
.ol-touch .ol-button {
|
||||
left: 3.5em;
|
||||
}
|
||||
.ol-zoom {
|
||||
display: none;
|
||||
}
|
||||
#map .ol-bookmark {
|
||||
left: .5em;
|
||||
top: 3em;
|
||||
}
|
||||
#map .ol-touch .ol-bookmark {
|
||||
top: 3.5em;
|
||||
}
|
||||
.ol-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frame > img {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
#map .ol-control button {
|
||||
background-color: transparent!important;
|
||||
color: #333;
|
||||
}
|
||||
#map .ol-control button:before {
|
||||
color: #333;
|
||||
}
|
||||
.ol-search button {
|
||||
background: none;
|
||||
}
|
||||
.ol-search button:before {
|
||||
content: "\f002";
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.ol-control.ol-bookmark > button::before {
|
||||
content: "\f02e";
|
||||
font-family: FontAwesome;
|
||||
border: 0;
|
||||
height: auto;
|
||||
}
|
||||
.ol-control.ol-bookmark li {
|
||||
color: #333;
|
||||
}
|
||||
.ol-control a {
|
||||
color: #333;
|
||||
}
|
||||
.ol-control,
|
||||
.ol-attribution:not(.ol-collapsed),
|
||||
.frame h2 {
|
||||
background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 20%,#FCCD69 40%,#B07024 70%,#8E4E08 85%,#492004);
|
||||
box-shadow: inset 2px 2px 1px #100, 0 0 0.5em #100;
|
||||
text-shadow: 1px 1px 1px rgba(255,187,120,.6);
|
||||
border: .1em solid #FCCD69;
|
||||
color: #100;
|
||||
}
|
||||
.frame h2 {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 50%;
|
||||
z-index: 101;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
padding: .35em 1.7em .25em;
|
||||
max-width: 100%;
|
||||
letter-spacing: -.035em;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.frame h2:after, .frame h2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: .3em;
|
||||
height: .3em;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 44%,#FCCD69 45%,#FCCD69 55%,#B07024 56%,#8E4E08 85%,#492004);
|
||||
z-index: 1000;
|
||||
box-shadow: -0.5px -0.5px 1px #FCCD69, 0.05em 0.05em 0.05em 0.05em #492004;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.frame h2:after {
|
||||
left: .5em;
|
||||
}
|
||||
.frame h2:before {
|
||||
right: .5em;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./paint.css" />
|
||||
|
||||
</head>
|
||||
<body >
|
||||
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
||||
|
||||
<div class="frame">
|
||||
<img style="top:3em; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-t.png" />
|
||||
<img style="bottom:0; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-b.png" />
|
||||
<img style="top: 3em; bottom:0; right:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-r.png" />
|
||||
<img style="top: 3em; bottom:0; left:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-l.png" />
|
||||
<img style="top:3em; left:0;" src="../img/frame-tl.png" />
|
||||
<img style="top:3em; right:0;" class="top" src="../img/frame-tr.png" />
|
||||
<img style="bottom:0; right:0;" class="top" src="../img/frame-br.png" />
|
||||
<img style="bottom:0; left:0;" class="top" src="../img/frame-bl.png" />
|
||||
<div class="top"></div>
|
||||
<div class="bottom"></div>
|
||||
<h2>ol-ext</h2>
|
||||
</div>
|
||||
|
||||
|
||||
290
examples/filter/paint.css
Normal file
290
examples/filter/paint.css
Normal file
@ -0,0 +1,290 @@
|
||||
#map {
|
||||
position: fixed;
|
||||
top: calc(3em + 40px);
|
||||
left: 40px;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1em;
|
||||
}
|
||||
h2 {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
.fa-times {
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
right: .5em;
|
||||
}
|
||||
.fa-download {
|
||||
font-size: 1.5em;
|
||||
margin: 0 .3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wait {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
font-size: 6em;
|
||||
opacity: .8;
|
||||
display: none;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
}
|
||||
.wait i {
|
||||
color: #fff;
|
||||
}
|
||||
.waiting .wait {
|
||||
display: block;
|
||||
}
|
||||
.options {
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
background: #fff;
|
||||
box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,.5);
|
||||
max-width: 90%;
|
||||
margin: 0;
|
||||
z-index: 1001;
|
||||
transition: .5s;
|
||||
}
|
||||
.options.visible {
|
||||
top: 30%;
|
||||
}
|
||||
.options ul {
|
||||
margin: 0;
|
||||
}
|
||||
.options label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
text-align: right;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.options button {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
margin: 1em auto;
|
||||
min-width: 5em;
|
||||
background: #369;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
.ol-search {
|
||||
left: .5em!important;
|
||||
}
|
||||
.ol-search {
|
||||
max-width: calc(100% - 1em);
|
||||
}
|
||||
.ol-search > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ol-button {
|
||||
top: .5em;
|
||||
left: 3em;
|
||||
}
|
||||
.ol-touch .ol-button {
|
||||
left: 3.5em;
|
||||
}
|
||||
.ol-zoom {
|
||||
display: none;
|
||||
}
|
||||
#map .ol-bookmark {
|
||||
left: .5em;
|
||||
top: 3em;
|
||||
}
|
||||
#map .ol-touch .ol-bookmark {
|
||||
top: 3.5em;
|
||||
}
|
||||
.ol-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#map .ol-control button {
|
||||
background-color: transparent!important;
|
||||
color: #333;
|
||||
}
|
||||
#map .ol-control button:before {
|
||||
color: #333;
|
||||
}
|
||||
.ol-search button {
|
||||
background: none;
|
||||
}
|
||||
.ol-search button:before {
|
||||
content: "\f002";
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.ol-control.ol-bookmark > button::before {
|
||||
content: "\f02e";
|
||||
font-family: FontAwesome;
|
||||
border: 0;
|
||||
height: auto;
|
||||
}
|
||||
.ol-control.ol-bookmark li {
|
||||
color: #333;
|
||||
}
|
||||
.ol-control a {
|
||||
color: #333;
|
||||
}
|
||||
.ol-control,
|
||||
.ol-attribution:not(.ol-collapsed),
|
||||
.frame h2 {
|
||||
background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 20%,#FCCD69 40%,#B07024 70%,#8E4E08 85%,#492004);
|
||||
box-shadow: inset 2px 2px 1px #100, 0 0 0.5em #100;
|
||||
text-shadow: 1px 1px 1px rgba(255,187,120,.6);
|
||||
border: .1em solid #FCCD69;
|
||||
color: #100;
|
||||
}
|
||||
.frame h2 {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 50%;
|
||||
z-index: 101;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
padding: .35em 1.7em .25em;
|
||||
max-width: 100%;
|
||||
letter-spacing: -.035em;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.frame h2:after, .frame h2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: .3em;
|
||||
height: .3em;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 44%,#FCCD69 45%,#FCCD69 55%,#B07024 56%,#8E4E08 85%,#492004);
|
||||
z-index: 1000;
|
||||
box-shadow: -0.5px -0.5px 1px #FCCD69, 0.05em 0.05em 0.05em 0.05em #492004;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.frame h2:after {
|
||||
left: .5em;
|
||||
}
|
||||
.frame h2:before {
|
||||
right: .5em;
|
||||
}
|
||||
|
||||
|
||||
.frame {
|
||||
position: fixed;
|
||||
top: 3em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom:0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.frame > * {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.frame:before,
|
||||
.frame:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 43px;
|
||||
}
|
||||
.frame:before {
|
||||
background-repeat: repeat-y;
|
||||
background-image:
|
||||
linear-gradient(#492004 50px, transparent 180px),
|
||||
linear-gradient(0deg, #492004, transparent 130px),
|
||||
url(../img/frame-l.png);
|
||||
left: 0;
|
||||
}
|
||||
.frame:after {
|
||||
background-repeat: repeat-y;
|
||||
background-image:
|
||||
linear-gradient(#492004, transparent 130px),
|
||||
linear-gradient(0deg, #492004, transparent 130px),
|
||||
url(../img/frame-r.png);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.frame .top,
|
||||
.frame .bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 43px;
|
||||
}
|
||||
.frame .top {
|
||||
background-repeat: repeat-x;
|
||||
background-image:
|
||||
linear-gradient(90deg, transparent 25%, rgba(252, 205, 105, .5), transparent 70%),
|
||||
linear-gradient(90deg, #492004, transparent 180px),
|
||||
linear-gradient(270deg, #492004, transparent 130px),
|
||||
url(../img/frame-t.png);
|
||||
top: 0;
|
||||
}
|
||||
.frame .bottom {
|
||||
background-repeat: repeat-x;
|
||||
background-image:
|
||||
linear-gradient(90deg, transparent 30%, rgba(252, 205, 105, .5), transparent 75%),
|
||||
linear-gradient(90deg, #492004, transparent 130px),
|
||||
linear-gradient(270deg, #492004, transparent 130px),
|
||||
url(../img/frame-b.png);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.frame .top:before,
|
||||
.frame .top:after,
|
||||
.frame .bottom:before,
|
||||
.frame .bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.frame .top:before {
|
||||
background: url(../img/frame-tl.png);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.frame .top:after {
|
||||
background: url(../img/frame-tr.png);
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.frame .bottom:before {
|
||||
background: url(../img/frame-bl.png);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.frame .bottom:after {
|
||||
background: url(../img/frame-br.png);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
<img style="top:3em; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-t.png" />
|
||||
<img style="bottom:0; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-b.png" />
|
||||
<img style="top: 3em; bottom:0; right:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-r.png" />
|
||||
<img style="top: 3em; bottom:0; left:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-l.png" />
|
||||
<img style="top:3em; left:0;" src="../img/frame-tl.png" />
|
||||
<img style="top:3em; right:0;" class="top" src="../img/frame-tr.png" />
|
||||
<img style="bottom:0; right:0;" class="top" src="../img/frame-br.png" />
|
||||
<img style="bottom:0; left:0;" class="top" src="../img/frame-bl.png" />
|
||||
*/
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 594 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 497 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 604 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 825 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
Loading…
x
Reference in New Issue
Block a user