Merge pull request #865 from thecodingmachine/cowebsiteControls
FEATURE: improved the fullscreen and close buttons
This commit is contained in:
commit
512c370f3f
8
front/dist/index.tmpl.html
vendored
8
front/dist/index.tmpl.html
vendored
@ -73,11 +73,11 @@
|
|||||||
</aside>
|
</aside>
|
||||||
<main id="cowebsite-main">
|
<main id="cowebsite-main">
|
||||||
</main>
|
</main>
|
||||||
<button class="top-right-btn" id="cowebsite-fullscreen">
|
<button class="top-right-btn" id="cowebsite-fullscreen" alt="fullscreen mode">
|
||||||
<img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/>
|
<img id="cowebsite-fullscreen-open" src="resources/logos/fullscreen.svg"/>
|
||||||
<img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/>
|
<img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/fullscreen-exit.svg"/>
|
||||||
</button>
|
</button>
|
||||||
<button class="top-right-btn" id="cowebsite-close">
|
<button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
|
||||||
<img src="resources/logos/close.svg"/>
|
<img src="resources/logos/close.svg"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
3
front/dist/resources/logos/fullscreen-exit.svg
vendored
Normal file
3
front/dist/resources/logos/fullscreen-exit.svg
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen-exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||||
|
<path d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 329 B |
3
front/dist/resources/logos/fullscreen.svg
vendored
Normal file
3
front/dist/resources/logos/fullscreen.svg
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||||
|
<path d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 322 B |
62
front/dist/resources/style/cowebsite.scss
vendored
62
front/dist/resources/style/cowebsite.scss
vendored
@ -35,9 +35,8 @@
|
|||||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 20px;
|
height: 25px;
|
||||||
background-color: rgba(0,0.0,0,0.3);
|
padding: 4px;
|
||||||
padding: 5px;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -78,31 +77,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-right-btn{
|
.top-right-btn{
|
||||||
top: 10px;
|
left: -6px;
|
||||||
right: -100px;
|
&#cowebsite-close {
|
||||||
animation: right .2s ease;
|
top: 0px;
|
||||||
|
|
||||||
img {
|
|
||||||
right: 15px;
|
|
||||||
}
|
}
|
||||||
|
&#cowebsite-fullscreen {
|
||||||
|
top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cowebsite-close {
|
|
||||||
right: -140px;
|
|
||||||
}
|
|
||||||
#cowebsite-fullscreen {
|
|
||||||
right: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#cowebsite:hover {
|
|
||||||
#cowebsite-close{
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cowebsite-fullscreen{
|
|
||||||
right: 45px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -140,31 +121,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-right-btn {
|
.top-right-btn {
|
||||||
top: 10px;
|
&#cowebsite-close {
|
||||||
right: -100px;
|
right: 0px;
|
||||||
animation: right .2s ease;
|
}
|
||||||
|
&#cowebsite-fullscreen {
|
||||||
img {
|
right: 25px;
|
||||||
right: 15px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#cowebsite-close {
|
|
||||||
right: -140px;
|
|
||||||
}
|
|
||||||
#cowebsite-fullscreen {
|
|
||||||
right: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#cowebsite:hover {
|
|
||||||
#cowebsite-close{
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cowebsite-fullscreen{
|
|
||||||
right: 45px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user