2019-08-22 01:02:43 +00:00
|
|
|
let ruffle_shadow_tmpl = document.createElement("template");
|
|
|
|
ruffle_shadow_tmpl.innerHTML = `
|
|
|
|
<style>
|
|
|
|
:host {
|
2019-08-26 00:03:35 +00:00
|
|
|
display: inline-block;
|
2020-04-28 12:50:50 +00:00
|
|
|
/* Default width/height; this will get overridden by user styles/attributes */
|
|
|
|
width: 550px;
|
|
|
|
height: 400px;
|
2020-08-24 00:13:10 +00:00
|
|
|
touch-action: none;
|
|
|
|
user-select: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
2020-11-01 12:54:47 +00:00
|
|
|
position: relative;
|
2019-08-22 01:02:43 +00:00
|
|
|
}
|
|
|
|
|
2020-04-27 10:34:47 +00:00
|
|
|
#container {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2020-05-14 08:12:24 +00:00
|
|
|
#container canvas {
|
2019-08-22 01:02:43 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2020-10-28 22:41:27 +00:00
|
|
|
|
2020-04-27 10:34:47 +00:00
|
|
|
#play_button {
|
2020-04-28 12:50:50 +00:00
|
|
|
position: absolute;
|
2020-04-27 10:34:47 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
cursor: pointer;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#play_button .icon {
|
2020-11-24 20:56:31 +00:00
|
|
|
position: absolute;
|
2020-04-27 10:34:47 +00:00
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
width: 90%;
|
|
|
|
height: 90%;
|
|
|
|
max-width: 500px;
|
|
|
|
max-height: 500px;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
#play_button:hover .icon {
|
2020-05-04 23:12:55 +00:00
|
|
|
filter: brightness(1.3);
|
2020-04-27 10:34:47 +00:00
|
|
|
}
|
2020-09-10 18:18:21 +00:00
|
|
|
|
|
|
|
#panic {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
/* Inverted colours from play button! */
|
|
|
|
background: linear-gradient(180deg, rgba(253,58,64,1) 0%, rgba(253,161,56,1) 100%);
|
|
|
|
color: black;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-10 18:18:21 +00:00
|
|
|
#panic a {
|
|
|
|
color: #37528C;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-10 18:18:21 +00:00
|
|
|
#panic-title {
|
2020-09-12 22:03:19 +00:00
|
|
|
margin-top: 30px;
|
2020-09-10 18:18:21 +00:00
|
|
|
text-align: center;
|
|
|
|
font-size: 42px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-10 18:18:21 +00:00
|
|
|
#panic-body {
|
|
|
|
text-align: center;
|
|
|
|
font-size: 20px;
|
2020-09-12 22:03:19 +00:00
|
|
|
position: absolute;
|
|
|
|
top: 100px;
|
|
|
|
bottom: 80px;
|
|
|
|
left: 50px;
|
|
|
|
right: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#panic-body textarea {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-12 22:03:19 +00:00
|
|
|
#panic-footer {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 30px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 20px;
|
|
|
|
width: 100%;
|
2020-09-10 18:18:21 +00:00
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-10 18:18:21 +00:00
|
|
|
#panic ul {
|
|
|
|
margin: 35px 0 0 0;
|
|
|
|
padding: 0;
|
|
|
|
max-width: 100%;
|
|
|
|
display: flex;
|
|
|
|
list-style-type: none;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
2020-09-10 18:18:21 +00:00
|
|
|
#panic li {
|
|
|
|
padding: 10px 50px;
|
|
|
|
}
|
2020-10-28 22:41:27 +00:00
|
|
|
|
|
|
|
#right_click_menu {
|
|
|
|
background-color: #37528c;
|
|
|
|
color: #FFAD33;
|
|
|
|
border-radius: 5px;
|
|
|
|
position: absolute;
|
|
|
|
list-style: none;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu .menu_item {
|
|
|
|
padding: 5px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu .menu_separator {
|
|
|
|
padding: 5px 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu .active {
|
|
|
|
cursor: pointer;
|
|
|
|
color: #FFAD33;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu .disabled {
|
|
|
|
cursor: default;
|
|
|
|
color: #94672f;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu .active:hover {
|
|
|
|
background-color: #184778;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu hr {
|
|
|
|
color: #FFAD33;
|
|
|
|
}
|
2020-11-17 14:03:22 +00:00
|
|
|
|
|
|
|
#right_click_menu > :first-child {
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#right_click_menu > :last-child {
|
|
|
|
border-bottom-right-radius: 5px;
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
}
|
2019-08-22 01:02:43 +00:00
|
|
|
</style>
|
2019-08-25 19:46:38 +00:00
|
|
|
<style id="dynamic_styles"></style>
|
2020-04-27 10:34:47 +00:00
|
|
|
|
|
|
|
<div id="container">
|
2020-05-04 23:12:55 +00:00
|
|
|
<div id="play_button"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="0 0 250 250" style="width:100%;height:100%;"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="125" y1="0" x2="125" y2="250" spreadMethod="pad"><stop offset="0%" stop-color="#FDA138"/><stop offset="100%" stop-color="#FD3A40"/></linearGradient><g id="b"><path fill="url(#a)" d="M250 125q0-52-37-88-36-37-88-37T37 37Q0 73 0 125t37 88q36 37 88 37t88-37q37-36 37-88M87 195V55l100 70-100 70z"/><path fill="#FFF" d="M87 55v140l100-70L87 55z"/></g></defs><use xlink:href="#b"/></svg></div></div>
|
2020-04-27 10:34:47 +00:00
|
|
|
</div>
|
2020-10-28 22:41:27 +00:00
|
|
|
|
|
|
|
<ul id="right_click_menu" style="display: none"></ul>
|
2019-08-22 01:02:43 +00:00
|
|
|
`;
|
|
|
|
|
2020-05-17 21:31:43 +00:00
|
|
|
module.exports = ruffle_shadow_tmpl;
|