diff --git a/Resources/Scripts/imports/styles/update.css b/Resources/Scripts/imports/styles/update.css new file mode 100644 index 00000000..e689fef3 --- /dev/null +++ b/Resources/Scripts/imports/styles/update.css @@ -0,0 +1,126 @@ +#tweetduck-update { + position: fixed; + bottom: 0; + width: 200px; + height: 178px; + z-index: 9999; + color: #fff; + background-color: rgb(32, 94, 138); + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + transition: transform 400ms cubic-bezier(.02, .01, .47, 1); +} + +#tweetduck-update.hidden-below { + transform: translateY(178px); +} + +#tweetduck-update .tdu-title { + font-size: 15px; + font-weight: bold; + margin: 8px 0 2px; + cursor: default; +} + +#tweetduck-update .tdu-info { + display: inline-block; + font-size: 14px; + margin: 3px 0; +} + +#tweetduck-update .tdu-showlog { + text-decoration: underline; + cursor: pointer; +} + +#tweetduck-update .tdu-buttons button { + display: block; + margin: 7px auto 0; + padding: 4px 10px; + width: 80%; + height: 30px; + border: 0; + border-radius: 1px; + outline: none; + font-size: 14px; + color: #fff; + background-color: #419de0; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 1px 1px rgba(17, 17, 17, 0.5) !important; + transition: box-shadow 0.2s ease; +} + +#tweetduck-update .tdu-buttons button:hover { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); + box-shadow: 1px 1px 1px rgba(17, 17, 17, 0.75), 0 -2px 0 rgba(17, 17, 17, 0.33) inset !important; +} + +#tweetduck-update .tdu-buttons button.tdu-btn-ignore, .tdu-buttons button.tdu-btn-later { + background-color: #607a8e; + color: #dfdfdf; +} + +#tweetduck-changelog { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9998; +} + +#tweetduck-changelog-box { + position: absolute; + width: 60%; + height: 75%; + max-width: calc(90% - 200px); + max-height: 90%; + left: calc(50% + 100px); + top: 50%; + padding: 12px; + overflow-y: auto; + transform: translateX(-50%) translateY(-50%); + font-size: 14px; + color: #000; + background-color: #fff; + box-sizing: border-box; +} + +#tweetduck-changelog h2 { + margin: 0 0 7px; + font-size: 23px; +} + +#tweetduck-changelog h2 + br { + display: none; +} + +#tweetduck-changelog h3 { + margin: 0 0 5px 7px; + font-size: 18px; +} + +#tweetduck-changelog p { + margin: 8px 8px 0 6px; +} + +#tweetduck-changelog p.li { + margin: 0 8px 2px 30px; + display: list-item; +} + +#tweetduck-changelog p.l2 { + margin-left: 50px !important; +} + +#tweetduck-changelog a { + color: #247fbb; +} + +#tweetduck-changelog code { + padding: 0 4px; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + color: #24292e; + background-color: rgba(27, 31, 35, 0.05); +} diff --git a/Resources/Scripts/update.js b/Resources/Scripts/update.js index 65ce63ab..fdf40f0b 100644 --- a/Resources/Scripts/update.js +++ b/Resources/Scripts/update.js @@ -10,134 +10,7 @@ if (!css){ css = document.createElement("style"); css.id = "tweetduck-update-css"; - css.innerText = ` -#tweetduck-update { - position: fixed; - bottom: 0; - width: 200px; - height: 178px; - z-index: 9999; - color: #fff; - background-color: rgb(32, 94, 138); - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); - transition: transform 400ms cubic-bezier(.02, .01, .47, 1); -} - -#tweetduck-update.hidden-below { - transform: translateY(178px); -} - -#tweetduck-update .tdu-title { - font-size: 15px; - font-weight: bold; - margin: 8px 0 2px; - cursor: default; -} - -#tweetduck-update .tdu-info { - display: inline-block; - font-size: 14px; - margin: 3px 0; -} - -#tweetduck-update .tdu-showlog { - text-decoration: underline; - cursor: pointer; -} - -#tweetduck-update .tdu-buttons button { - display: block; - margin: 7px auto 0; - padding: 4px 10px; - width: 80%; - height: 30px; - border: 0; - border-radius: 1px; - outline: none; - font-size: 14px; - color: #fff; - background-color: #419de0; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); - box-shadow: 1px 1px 1px rgba(17, 17, 17, 0.5) !important; - transition: box-shadow 0.2s ease; -} - -#tweetduck-update .tdu-buttons button:hover { - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); - box-shadow: 1px 1px 1px rgba(17, 17, 17, 0.75), 0 -2px 0 rgba(17, 17, 17, 0.33) inset !important; -} - -#tweetduck-update .tdu-buttons button.tdu-btn-ignore, .tdu-buttons button.tdu-btn-later { - background-color: #607a8e; - color: #dfdfdf; -} - -#tweetduck-changelog { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 9998; -} - -#tweetduck-changelog-box { - position: absolute; - width: 60%; - height: 75%; - max-width: calc(90% - 200px); - max-height: 90%; - left: calc(50% + 100px); - top: 50%; - padding: 12px; - overflow-y: auto; - transform: translateX(-50%) translateY(-50%); - font-size: 14px; - color: #000; - background-color: #fff; - box-sizing: border-box; -} - -#tweetduck-changelog h2 { - margin: 0 0 7px; - font-size: 23px; -} - -#tweetduck-changelog h2 + br { - display: none; -} - -#tweetduck-changelog h3 { - margin: 0 0 5px 7px; - font-size: 18px; -} - -#tweetduck-changelog p { - margin: 8px 8px 0 6px; -} - -#tweetduck-changelog p.li { - margin: 0 8px 2px 30px; - display: list-item; -} - -#tweetduck-changelog p.l2 { - margin-left: 50px !important; -} - -#tweetduck-changelog a { - color: #247fbb; -} - -#tweetduck-changelog code { - padding: 0 4px; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - color: #24292e; - background-color: rgba(27, 31, 35, 0.05); -}`; - + css.innerText = `#import "styles/update.css"`; document.head.appendChild(css); }