Moved styles to a css file, renamed global variables to prevent clashing with other extensions or page scripts

2022-09-02 21:09:18 +03:00
parent e2201ce3d4
commit faba04d67f
3 changed files with 160 additions and 136 deletions
--- a/extension/twitchnotes.css
+++ b/extension/twitchnotes.css
@@ -0,0 +1,97 @@
+:root {
+  --window-close: #f77669;
+  --window-minify: #ffcb6b;
+  --window-expand: #c3e88d;
+
+  --background-header: #393d3e;
+  --background-code: #1f1e1e;
+}
+
+.twitchnote img {
+  height: 18px;
+  padding: 0 4px 0;
+}
+
+.twitch-note-container {
+  position: fixed;
+  z-index: 1000000;
+  min-width: 420px;
+  max-width: 95vw;
+  min-height: 240px;
+  max-height: 50vh;
+  background: var(--color-background-base);
+  border: var(--border-width-default) solid var(--color-border-base) !important;
+}
+
+.twitch-note-header {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
+  position: relative;
+  cursor: move;
+}
+
+.twitch-note-title {
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  padding-left: calc((32px - var(--font-size-6)) / 2);
+}
+
+.twitch-note-close-button {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  aspect-ration: 1;
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  border: var(--border-width-default) solid var(--color-border-base) !important;
+  cursor: pointer;
+}
+
+.twitch-note-content {
+  position: absolute;
+  top: 32px;
+  left: 0;
+  right: 0;
+  bottom: 32px;
+  background: transparent;
+  color: var(--color-text-base) !important;
+  font-family: var(--font-base);
+  vertical-align: baseline;
+  outline: none;
+  overflow: auto;
+  padding: calc((32px - var(--font-size-6)) / 2);
+}
+
+.twitch-note-save-button {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  border-top: var(--border-width-default) solid var(--color-border-base) !important;
+  cursor: pointer;
+  color: var(--color-text-alt) !important;
+  font-size: var(--font-size-6) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  text-transform: uppercase !important;
+  text-align: center;
+  line-height: 32px;
+}
+
+.twitch-note-settings-container {
+  position: absolute;
+  z-index: var(--z-index-balloon);
+  inset: auto 0px 100% auto;
+  margin-bottom: 8px;
+  margin-right: -5.3rem;
+}