diff --git a/client/client.js b/client/client.js index d40d779..1f99177 100644 --- a/client/client.js +++ b/client/client.js @@ -960,7 +960,16 @@ var schemes = [ 'pop', 'railscasts', 'solarized', - 'tomorrow' + 'tomorrow', + 'tk-night', + 'carrot', + 'lax', + 'Ubuntu', + 'gruvbox-light', + 'fried-egg', + 'rainbow', + 'amoled', + 'retro' ]; var highlights = [ @@ -970,6 +979,7 @@ var highlights = [ 'darcula', 'github', 'rainbow', + 'tk-night', 'tomorrow', 'xcode', 'zenburn' diff --git a/client/schemes/Ubuntu.css b/client/schemes/Ubuntu.css new file mode 100644 index 0000000..5544858 --- /dev/null +++ b/client/schemes/Ubuntu.css @@ -0,0 +1,51 @@ +body { + background-color: #2C001E; + color: #E95420; +} +input, +textarea { + color: #ccc; + background-color: #111; +} +.message { + border-left: 1px solid #2C001E; +} +.refmessage { + border-left: 1px solid #2C001E; +} +.nick { + color: #E95420; +} +.trip { + color: #AEA79F; +} +.text a { + color: #00AA00; +} +.admin .nick { + color: #ac4142; +} +.mod .nick { + color: #1FAD83; +} +.me .nick { + color: #b854d4; +} +.info .nick, +.info .text { + color: #00AA22; +} +.warn .nick, +.warn .text { + color: #CFB017; +} +#footer { + background: #2C001E; +} +#sidebar { + background: #2C001E; + border-color: #5E2750; +} +#charform { + border-color: #5E2750; +} diff --git a/client/schemes/amoled.css b/client/schemes/amoled.css new file mode 100644 index 0000000..695838b --- /dev/null +++ b/client/schemes/amoled.css @@ -0,0 +1,50 @@ +body { + background: #000000; + color: #a6a28c; +} +input, +textarea { + color: #a6a28c; +} +.message { + border-left: #000000; +} +.refmessage { + border-left: #000000; +} +.nick { + color: #778fd8; +} +.trip { + color: #6e6b5e; +} +.text a { + color: #ffffff; +} +.admin .nick { + color: #d73737; +} +.mod .nick { + color: #36b08c; +} +.me .nick { + color: #b479c5; +} +.info .nick, +.info .text { + color: #97ca7d; +} +.warn .nick, +.warn .text { + color: #cfb017; +} +#footer { + background: #000000; +} +#sidebar { + background: #000000; + border-color: #000000; +} +#chatform { + border-color: #000000; +} diff --git a/client/schemes/carrot.css b/client/schemes/carrot.css new file mode 100644 index 0000000..8419df2 --- /dev/null +++ b/client/schemes/carrot.css @@ -0,0 +1,55 @@ +body { + background: #000000; + color: #ee600d; +} +input, +textarea { + color: #ee600d; +} + +.message { + border-left: 1px solid #ee600d; +} +.refmessage { + border-left: 1px solid #ee600d; +} +.nick { + color: #1db80f; +} +.trip { + color: #7cbb81; +} +.text a { + color: #97ff97ef; +} +.admin .nick { + color: #ffffff; +} +.mod .nick { + color: #00ffaa; +} +.me .nick { + color: #33ff00; +} +.info .nick, +.info .text { + color: #ee600d; +} +.warn .nick, +.warn .text { + color: #ffbb00; +} + +#footer { + background: #000000; +} + +#sidebar { + background: #000000; + border-color: #000000; +} + +#chatform { + border-color: #ee600d; +} + diff --git a/client/schemes/fried-egg.css b/client/schemes/fried-egg.css new file mode 100644 index 0000000..d86f606 --- /dev/null +++ b/client/schemes/fried-egg.css @@ -0,0 +1,50 @@ +body { + background: #f7f7f7; + color: #000000; +} +input, +textarea { + color: #000000; +} +.message { + border-left: 1px solid rgba(146, 121, 38, 0.6); +} +.refmessage { + border-left: 1px solid rgb(146, 121, 38) +} +.nick { + color: #ffd700; +} +.trip { + color: #8b8263 +} +.text a { + color: #000000; +} +.admin .nick { + color: #ff632a; +} +.mod .nick { + color: #cd853f; +} +.me .nick { + color: #ff7b00; +} +.info .nick, +.info .text { + color: #a37939; +} +.warn .nick, +.warn .text { + color: #ff0000; +} +#footer { + background: #ffffff; +} +#sidebar { + background: #ffcc26; + border-color: #a0522d; +} +#chatform { + border-color: #8b8263; +} \ No newline at end of file diff --git a/client/schemes/gruvbox-light.css b/client/schemes/gruvbox-light.css new file mode 100644 index 0000000..1fea197 --- /dev/null +++ b/client/schemes/gruvbox-light.css @@ -0,0 +1,50 @@ +body { + background: #fbf1c7; + color: #3c3836; +} +input, +textarea { + color: #3c3836; +} +.message { + border-left: 1px solid rgba(125, 122, 104, 0.5); +} +.refmessage { + border-left: 1px solid rgba(125, 122, 104, 1); +} +.nick { + color: #427b58; +} +.trip { + color: #7c6f64; +} +.text a { + color: #3c3836; +} +.admin .nick { + color: #9d0006; +} +.mod .nick { + color: #8f3f71; +} +.me .nick { + color: #79740e; +} +.info .nick, +.info .text { + color: #b57614; +} +.warn .nick, +.warn .text { + color: #b57614; +} +#footer { + background: #fbf1c7; +} +#sidebar { + background: #a89984; + border-color: #7d7a68; +} +#chatform { + border-color: #7d7a68; +} diff --git a/client/schemes/lax.css b/client/schemes/lax.css new file mode 100644 index 0000000..05d9b0d --- /dev/null +++ b/client/schemes/lax.css @@ -0,0 +1,69 @@ +:root { + color-scheme: dark!important; + scrollbar-color: #8e8e8e #151515; +} + +body { + background: #151515; + color: #8e8e8e; +} +pre { + margin-top: 0.3rem; + margin-bottom: 0.3rem; + overflow: hidden; + padding: 0.1rem; + font-weight: 400; + background: #1d1f21; + border: 0; + border-radius: 3px; +} +code{ + background: #444; +} + +input, +textarea { + color: #8e8e8e; +} +.message { + border-left: 1px solid rgba(116, 115, 105, 0.1); +} +.refmessage { + border-left: 1px solid rgba(116, 115, 105, 1); +} +.nick { + color: #6699cc; +} +.trip { + color: #515151; +} +.text a { + color: #5c9c9f; +} +.admin .nick { + color: #f2777a; +} +.mod .nick { + color: #66cccc; +} +.me .nick { + color: #cc99cc; +} +.info .nick, +.info .text { + color: #3e9353; +} +.warn .nick, +.warn .text { + color: #ffcc66; +} +#footer { + background: #151515; +} +#sidebar { + background: #111; + border-color: #20201e; +} +#chatform { + border-color: rgba(116, 115, 105, 0.15); +} diff --git a/client/schemes/rainbow.css b/client/schemes/rainbow.css new file mode 100644 index 0000000..bf567d9 --- /dev/null +++ b/client/schemes/rainbow.css @@ -0,0 +1,71 @@ +body { + background: #111; + color: #ccc; +} +input, +textarea { + color: #a6a28c; +} +.message { + border-left: 1px solid rgba(125, 122, 104, 0.5) !important; +} +.refmessage { + border-left: 1px solid rgba(125, 122, 104, 1) !important; +} +.nick { + background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} +.trip { + color: #777; +} +.text a { + color: #e8e4cf; +} +.admin .nick { + background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} +.mod .nick { + background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} +.me .nick { + background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} +.info .nick, +.info .text { + color: #60ac39; +} +.warn .nick, +.warn .text { + color: #cfb017; +} +#footer { + background: #111; +} +#sidebar { + background: #111; + border-color: #777; +} +#chatform { + border-color: #777; +} + diff --git a/client/schemes/retro.css b/client/schemes/retro.css new file mode 100644 index 0000000..ab04a9d --- /dev/null +++ b/client/schemes/retro.css @@ -0,0 +1,285 @@ +/** defaults **/ + +body { + background: #20201d; + color: #a6a28c; +} +input, +textarea { + color: #a6a28c; +} +.message { + border-left: 1px solid rgba(125, 122, 104, 0.5) !important; +} +.refmessage { + border-left: 1px solid rgba(125, 122, 104, 1) !important; +} +.nick { + color: #6684e1; +} +.trip { + color: #6e6b5e; +} +.text a { + color: #e8e4cf; +} +.admin .nick { + color: #d73737; +} +.mod .nick { + color: #1fad83; +} +.me .nick { + color: #b854d4; +} +.info .nick, +.info .text { + color: #60ac39; +} +.warn .nick, +.warn .text { + color: #cfb017; +} +#footer { + background: #20201d; +} +#sidebar { + background: #292824; + border-color: #7d7a68; +} +#chatform { + border-color: #7d7a68; +} + + +/** customizations **/ + +:root { + color-scheme: dark!important; + scrollbar-color: #8e8e8e #151515; +} + +html { + font-family: 'Courier New', 'Consolas', 'Lucida Console', 'Menlo', Courier, monospace; +} +body, #footer, #sidebar { + background: #050505; +} +article.container { + min-height: 100vh; + width: 100%; + max-width: calc(100% - 264px); + margin: 36px 36px 0em 36px; + overflow: hidden; + border: 2px solid gray; + border-top: 0; + border-bottom: 0; + padding-bottom: 2px; +} +.hidden { + display: inherit; +} +@keyframes changeColors { + 0%, 100% { + background-color: initial; + } + 0.1% { + background-color: #0d1b62; + } + 99.9% { + background-color: #0d1b62; + } +} +.message { + animation-name: changeColors; + animation-duration: 10s; + animation-timing-function: steps(1, start); + animation-iteration-count: 1; +} + +#pin-sidebar { + display: none; +} +label[for=pin-sidebar] { + display: none; +} +#messages { + padding: 0; + border-bottom: 0; +} +#messages::after { + width: 100%; + max-width: calc(100% - 270px); + position: absolute; + display: block; + top: 15px; + left: 36px; + height: 14px; + padding: 2px 3px; + content: "#programming [+ver 1.0] :: https://hack.chat - The Next Frontier of Unknown Pleasures"; + border: 2px solid gray; + border-bottom: 2px solid gray; + background: linear-gradient(to right, #000080, #1084d0); + color: white; + font-size: 12px; + text-overflow:ellipsis; + overflow: hidden; + white-space: nowrap; +} +#messages > :first-child { + background: #1f71a4!important; +} +#sidebar { + width: 195px; +} +#users li { + list-style-type: none!important; + margin-left: -1.3em; + margin-top: 0.5em; +} +#sidebar-content { + display: flex; + flex-direction: column-reverse; + justify-content:start; + align-items:start; +} +#sidebar-content hr { + display:none; +} +#sidebar-content select, #sidebar-content button { + border-radius: 0; + margin-bottom: 0.5em; +} +#sidebar-content > :nth-child(19) { + /* border: 1px solid red; */ + margin-top: 80vh; + margin-bottom: 2.5em; +} +#sidebar-content > :nth-child(22) { + display: none; +} +#sidebar-content > :nth-child(21) { + display: none; +} +#sidebar-content > :nth-child(1) { + display: none; +} + +/* chat form */ +#footer { + margin-bottom: 0px; +} +#footer .container { + margin: 0 0 0 3em; + border: 2px solid gray; + max-width: calc(100% - 22em); + overflow: hidden; +} +#chatform { + height: 4em; + overflow: hidden; + overflow-y: scroll; +} +#chatinput { + padding: 1px 5px; + overflow: hidden; +} + +/* chat room */ +pre { + margin-top: 0.3rem; + margin-bottom: 0.3rem; + margin-left: 0em; + overflow: hidden; + padding: 0.1rem; + font-weight: 400; + background: #1d1f21; + border: 0; + border-radius: 3px; + width: calc(100% - 17em); +} +.message { + position: relative; + border: 0 !important; + padding: 0.2em 0; +} +.message .nick { + display: inline-block; + text-align: right; + margin-left: 6.6em; + width: 226px; +} +.trip { + display: inline-block!important; + width: 6em; + text-align: right; + margin-right: 0.75em; +} +.nick > a { + font-weight: bold; + display: inline-block; +} +.nick > a::before { + display: inline; + content: attr(title); + font-weight: normal; + margin-left: -5.8em; + position: absolute; + left: 0; +} +/* Missing trip */ +.message .nick a:only-child { + margin-left: 5.5em; +} +.message .nick a::after { + content: "|"; + position: absolute; + font-weight: bolder; + color: #6e6b5e; + font-size: 10px; + margin-top: 1px; + margin-left: 0.6em; +} +/* system */ +.message.info { + background: #2a7550!important; +} +.message.info * { + color: black!important; +} +.message.warn { + background: #887221!important; +} +.message.warn * { + color: black!important; +} +.info > .nick { + margin-left: 6.6em; +} +.info > .nick > :only-child { + margin-left: 15em; +} +.message.info .nick a::after, .message.warn .nick a::after { + color: black; +} +/* misc */ +.text > p { + line-height: 1.2em !important; + width: calc(100% - 20px); + display: inline-block; + margin-left: 0.5em; +} +.text > pre, .text > blockquote:first-child { + display: block; + margin: 6px 0 5px 6px; + width: calc(100% - 2.3em); +} +.text > ol { + margin-left: 20px; +} +.message .text:not(:first-child) { + width: auto; + margin-left: 320px; +} + + diff --git a/client/schemes/tk-night.css b/client/schemes/tk-night.css new file mode 100644 index 0000000..7459c35 --- /dev/null +++ b/client/schemes/tk-night.css @@ -0,0 +1,54 @@ +body { + background: #1f2224; + color: #b9a8eb; +} +input, +textarea { + color: #b9a8eb; +} + +.message { + border-left: 1px solid #cf56ff57; +} +.refmessage { + border-left: 1px solid #cf56ff57; +} +.nick { + color: #55586d; +} +.trip { + color: #7b80a3; +} +.text a { + color: #97ff97ef; +} +.admin .nick { + color: #fd9652; +} +.mod .nick { + color: #ec8476; +} +.me .nick { + color: #55586d; +} +.info .nick, +.info .text { + color: #d179d4; +} +.warn .nick, +.warn .text { + color: #eba8a8; +} + +#footer { + background: #1f2224e7; +} + +#sidebar { + background: #0000008c; + border-color: #cf56ff57; +} + +#chatform { + border-color: #cf56ff67; +} diff --git a/client/vendor/hljs/styles/tk-night.min.css b/client/vendor/hljs/styles/tk-night.min.css new file mode 100644 index 0000000..c852f72 --- /dev/null +++ b/client/vendor/hljs/styles/tk-night.min.css @@ -0,0 +1 @@ +.hljs{display:block;overflow-x:auto;padding:0.5em;color:#7f8ba0;background:#282c34;}.hljs-comment,.hljs-quote{color:#f7297f;font-style:italic;}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#ad6fe7;}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e44855;}.hljs-literal{color:#46c2d3;}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#797bf0;}.hljs-built_in,.hljs-class.hljs-title{color:#c0e068;}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#ffc760;}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#59b4ff;}.hljs-emphasis{font-style:italic;}.hljs-strong{font-weight:bold;}.hljs-link{text-decoration:underline;} \ No newline at end of file