From 4be80ed0298e2f82cd31a79d8c14366648a48937 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Wed, 17 Feb 2016 20:38:16 +0200 Subject: [PATCH 1/2] Add stylelint --- .stylelintrc | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 .stylelintrc diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..a9b3bade --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,73 @@ +{ + "ignoreFiles": [ + "client/css/bootstrap.css" + ], + "rules": { + "at-rule-empty-line-before": ["always", { + "except": ["blockless-group", "first-nested"], + "ignore": ["after-comment"] + }], + "block-closing-brace-newline-after": "always", + "block-closing-brace-newline-before": "always-multi-line", + "block-closing-brace-space-before": "always-single-line", + "block-no-empty": true, + "block-opening-brace-newline-after": "always-multi-line", + "block-opening-brace-space-after": "always-single-line", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-hex-length": "short", + "color-no-invalid-hex": true, + "comment-empty-line-before": ["always", { + "except": ["first-nested"], + "ignore": ["stylelint-commands"] + }], + "comment-whitespace-inside": "always", + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-block-semicolon-newline-after": "always-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-single-line-max-declarations": 1, + "declaration-colon-newline-after": "always-multi-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "always-multi-line", + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-parentheses-newline-inside": "always-multi-line", + "function-parentheses-space-inside": "never-single-line", + "function-whitespace-after": "always", + "function-url-quotes": "double", + "indentation": "tab", + "max-empty-lines": 1, + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "media-query-list-comma-newline-after": "always-multi-line", + "media-query-list-comma-space-after": "always-single-line", + "media-query-list-comma-space-before": "never", + "media-query-parentheses-space-inside": "never", + "no-eol-whitespace": true, + "no-missing-eof-newline": true, + "number-leading-zero": "never", + "number-no-trailing-zeros": true, + "number-zero-length-no-unit": true, + "rule-no-duplicate-properties": true, + "rule-no-shorthand-property-overrides": true, + "rule-non-nested-empty-line-before": ["always-multi-line", { + "ignore": ["after-comment"] + }], + "rule-trailing-semicolon": "always", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-list-comma-newline-after": "always", + "selector-list-comma-space-before": "never", + "selector-pseudo-element-colon-notation": "single", + "string-quotes": "double", + "value-list-comma-newline-after": "always-multi-line", + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never" + } +} diff --git a/package.json b/package.json index b60e932d..f913074b 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "start": "node index", "build": "grunt", "test": "HOME=test/fixtures mocha test/**/*.js && npm run lint", - "lint": "eslint .", + "lint": "eslint . && stylelint \"**/*.css\"", "prepublish": "npm run build" }, "keywords": [ @@ -41,6 +41,7 @@ "socket.io": "~1.0.6" }, "devDependencies": { + "stylelint": "4.3.3", "eslint": "^1.5.1", "grunt": "~0.4.5", "grunt-cli": "^0.1.13", From ad6b4e8939bc4c98d9b3cd2459f54b96eee0c3a8 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Wed, 17 Feb 2016 20:38:42 +0200 Subject: [PATCH 2/2] Update css files to confront stylelint rules --- client/css/style.css | 460 +++++++++++++++++++++++++++++--------- client/themes/crypto.css | 93 ++++---- client/themes/example.css | 1 + client/themes/morning.css | 116 +++++----- client/themes/zenburn.css | 133 ++++++----- 5 files changed, 532 insertions(+), 271 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 5c11f08e..1f9c1810 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,125 +1,141 @@ @font-face { - font-family: 'Lato'; - font-weight: 400; - font-style: normal; - src: url('fonts/Lato-regular/Lato-regular.eot'); - src: url('fonts/Lato-regular/Lato-regular.eot?#iefix') format('embedded-opentype'), - local('Lato Regular'), - local('Lato-regular'), - url('fonts/Lato-regular/Lato-regular.woff2') format('woff2'), - url('fonts/Lato-regular/Lato-regular.woff') format('woff'), - url('fonts/Lato-regular/Lato-regular.ttf') format('truetype'), - url('fonts/Lato-regular/Lato-regular.svg#Lato') format('svg'); + font-family: "Lato"; + font-weight: 400; + font-style: normal; + src: url("fonts/Lato-regular/Lato-regular.eot"); + src: + url("fonts/Lato-regular/Lato-regular.eot?#iefix") format("embedded-opentype"), + local("Lato Regular"), + local("Lato-regular"), + url("fonts/Lato-regular/Lato-regular.woff2") format("woff2"), + url("fonts/Lato-regular/Lato-regular.woff") format("woff"), + url("fonts/Lato-regular/Lato-regular.ttf") format("truetype"), + url("fonts/Lato-regular/Lato-regular.svg#Lato") format("svg"); } @font-face { - font-family: 'Lato'; - font-weight: 700; - font-style: normal; - src: url('fonts/Lato-700/Lato-700.eot'); - src: url('fonts/Lato-700/Lato-700.eot?#iefix') format('embedded-opentype'), - local('Lato Bold'), - local('Lato-700'), - url('fonts/Lato-700/Lato-700.woff2') format('woff2'), - url('fonts/Lato-700/Lato-700.woff') format('woff'), - url('fonts/Lato-700/Lato-700.ttf') format('truetype'), - url('fonts/Lato-700/Lato-700.svg#Lato') format('svg'); -} -@font-face { - font-family: 'Open Sans'; - font-weight: 300; - font-style: normal; - src: url('fonts/Open-Sans-300/Open-Sans-300.eot'); - src: url('fonts/Open-Sans-300/Open-Sans-300.eot?#iefix') format('embedded-opentype'), - local('Open Sans Light'), - local('Open-Sans-300'), - url('fonts/Open-Sans-300/Open-Sans-300.woff2') format('woff2'), - url('fonts/Open-Sans-300/Open-Sans-300.woff') format('woff'), - url('fonts/Open-Sans-300/Open-Sans-300.ttf') format('truetype'), - url('fonts/Open-Sans-300/Open-Sans-300.svg#OpenSans') format('svg'); + font-family: "Lato"; + font-weight: 700; + font-style: normal; + src: url("fonts/Lato-700/Lato-700.eot"); + src: + url("fonts/Lato-700/Lato-700.eot?#iefix") format("embedded-opentype"), + local("Lato Bold"), + local("Lato-700"), + url("fonts/Lato-700/Lato-700.woff2") format("woff2"), + url("fonts/Lato-700/Lato-700.woff") format("woff"), + url("fonts/Lato-700/Lato-700.ttf") format("truetype"), + url("fonts/Lato-700/Lato-700.svg#Lato") format("svg"); } @font-face { - font-family: 'Open Sans'; - font-weight: 400; - font-style: normal; - src: url('fonts/Open-Sans-regular/Open-Sans-regular.eot'); - src: url('fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'), - local('Open Sans'), - local('Open-Sans-regular'), - url('fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'), - url('fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'), - url('fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'), - url('fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg'); + font-family: "Open Sans"; + font-weight: 300; + font-style: normal; + src: url("fonts/Open-Sans-300/Open-Sans-300.eot"); + src: + url("fonts/Open-Sans-300/Open-Sans-300.eot?#iefix") format("embedded-opentype"), + local("Open Sans Light"), + local("Open-Sans-300"), + url("fonts/Open-Sans-300/Open-Sans-300.woff2") format("woff2"), + url("fonts/Open-Sans-300/Open-Sans-300.woff") format("woff"), + url("fonts/Open-Sans-300/Open-Sans-300.ttf") format("truetype"), + url("fonts/Open-Sans-300/Open-Sans-300.svg#OpenSans") format("svg"); } @font-face { - font-family: 'Open Sans'; - font-weight: 700; - font-style: normal; - src: url('fonts/Open-Sans-700/Open-Sans-700.eot'); - src: url('fonts/Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'), - local('Open Sans Bold'), - local('Open-Sans-700'), - url('fonts/Open-Sans-700/Open-Sans-700.woff2') format('woff2'), - url('fonts/Open-Sans-700/Open-Sans-700.woff') format('woff'), - url('fonts/Open-Sans-700/Open-Sans-700.ttf') format('truetype'), - url('fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg'); + font-family: "Open Sans"; + font-weight: 400; + font-style: normal; + src: url("fonts/Open-Sans-regular/Open-Sans-regular.eot"); + src: + url("fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix") format("embedded-opentype"), + local("Open Sans"), + local("Open-Sans-regular"), + url("fonts/Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"), + url("fonts/Open-Sans-regular/Open-Sans-regular.woff") format("woff"), + url("fonts/Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"), + url("fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg"); } + +@font-face { + font-family: "Open Sans"; + font-weight: 700; + font-style: normal; + src: url("fonts/Open-Sans-700/Open-Sans-700.eot"); + src: + url("fonts/Open-Sans-700/Open-Sans-700.eot?#iefix") format("embedded-opentype"), + local("Open Sans Bold"), + local("Open-Sans-700"), + url("fonts/Open-Sans-700/Open-Sans-700.woff2") format("woff2"), + url("fonts/Open-Sans-700/Open-Sans-700.woff") format("woff"), + url("fonts/Open-Sans-700/Open-Sans-700.ttf") format("truetype"), + url("fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg"); +} + @font-face { font-family: FontAwesome; src: url("fonts/fontawesome.svg") format("svg"), url("fonts/fontawesome.woff") format("woff"); } + html, body { height: 100%; } + body { - background: #505d70; background: #455164; color: #222; font: 16px Lato, sans-serif; margin: 0; } + a { transition: opacity .2s; } + a:hover { text-decoration: none; opacity: .8; } + h1, h2 { font: inherit; line-height: inherit; margin: 0; } + input { outline: 0; } -button, .user { + +button, +.user { border: none; background: none; margin: 0; outline: none; padding: 0; } + .web-app-mode { padding-top: 20px; } + .tooltip-inner { background: #fff; border-radius: 2px; color: #262c36; } + .tooltip.top .tooltip-arrow { border-top-color: #fff; } + .btn { - border: 2px solid #84d1ff; border: 2px solid #84ce88; border-radius: 3px; - color: #84d1ff; color: #84ce88; display: inline-block; font: bold 12px Lato, sans-serif; @@ -130,19 +146,22 @@ button, .user { transition: background .2s, border-color .2s, color .2s; word-spacing: 3px; } + .btn:disabled, .btn:hover { - background: #84d1ff; background: #84ce88; color: #fff; } + .btn:active { box-shadow: none; opacity: .8; } + .btn:disabled { opacity: .6; } + .container { margin: 80px auto; max-width: 480px; @@ -151,28 +170,34 @@ button, .user { -webkit-overflow-scrolling: touch; padding: 0 30px; } + ::-moz-placeholder { color: rgba(0, 0, 0, .35); opacity: 1; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, .35); } + :-ms-input-placeholder { color: rgba(0, 0, 0, .35) !important; } + #wrap { height: 100%; overflow: hidden; } + #viewport { height: 100%; transition: all .4s; -webkit-transform: translateZ(0); - transform: translateZ(0); + transform: translateZ(0); -webkit-perspective: 1000; - perspective: 1000; + perspective: 1000; } + #viewport .lt, #viewport .rt { color: #ccc; @@ -183,37 +208,42 @@ button, .user { margin: 6px 12px 0 -12px; width: 36px; } + #viewport .lt:before { font: 14px FontAwesome; content: "\f0c9"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + #viewport .rt:before { font: 14px FontAwesome; content: "\f0c0"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + #viewport .rt { display: block; float: right; margin: 6px -12px 0 12px; } + #viewport.rt #chat .sidebar { -webkit-transform: translate3d(180px, 0, 0); - transform: translate3d(180px, 0, 0); + transform: translate3d(180px, 0, 0); } + #sidebar { bottom: 52px; left: 0; overflow: hidden; - /*overflow-y: auto;*/ -webkit-overflow-scrolling: touch; position: absolute; top: 0; width: 220px; } + #sidebar button, #sidebar .chan, #sidebar .sign-out { @@ -223,22 +253,27 @@ button, .user { cursor: pointer; font-size: 14px; } + #sidebar button:hover, #sidebar .chan:hover, #sidebar .active { color: #fff; } + #sidebar .networks { min-height: 100%; padding: 20px 30px 0; } + #sidebar .networks:empty { padding: 0; } + #sidebar .network, #sidebar .network-placeholder { margin-bottom: 30px; } + #sidebar .empty { color: #9ca5b4; line-height: 1.6; @@ -247,6 +282,7 @@ button, .user { padding: 20px 40px; text-align: center; } + #sidebar .chan, #sidebar .chan-placeholder { display: block; @@ -257,18 +293,22 @@ button, .user { transition: color .2s; width: 180px; } + #sidebar .chan-placeholder { padding-bottom: 10px; } + #sidebar .chan:first-child { color: #84ce88; font-size: 15px; font-weight: bold; } + #sidebar .chan:first-child:hover, #sidebar .chan:first-child.active { color: #c0f8c3; } + #sidebar .chan:before, #chat .title:before { font: 14px FontAwesome; @@ -278,27 +318,34 @@ button, .user { width: 14px; text-align: center; } + #chat .title:before { margin-top: 17px; } + #sidebar .chan.lobby:before, #chat .lobby .title:before { content: "\f0a0"; } + #sidebar .chan.query:before, #chat .query .title:before { content: "\f0e6"; } + #sidebar .chan.channel:before, #chat .channel .title:before { content: "\f0f6"; } + #sidebar .chan:hover .badge { opacity: 0; } + #sidebar .chan:hover .close { opacity: .2; } + #sidebar .badge { background: rgba(255, 255, 255, .06); border-radius: 3px; @@ -310,13 +357,16 @@ button, .user { right: 5px; transition: all .2s; } + #sidebar .badge.highlight { background: #fff; color: #49505a; } + #sidebar .badge:empty { opacity: 0; } + #sidebar .close { border-radius: 3px; margin-right: 5px; @@ -341,10 +391,12 @@ button, .user { background-color: rgba(0, 0, 0, .1); opacity: .7 !important; } + #sidebar .tse-scrollbar { top: 2px; right: 3px; } + #footer { background: rgba(0, 0, 0, .06); border-radius: 2px; @@ -356,45 +408,57 @@ button, .user { text-align: center; width: 210px; } + #footer button { border: 0; } + #footer button.active { color: #fff; } + #footer .icon { color: #9ca5b4; display: inline-block; font: 14px FontAwesome; line-height: 34px; - padding: 0px 12px; + padding: 0 12px; } + .signed-out #footer .sign-in { display: inline-block; } + .signed-out #footer .connect, .signed-out #footer .sign-out { display: none; } + .public #footer .sign-in, .public #footer .sign-out { display: none; } + #footer .sign-in { display: none; } + #footer .sign-in:before { content: "\f023"; } + #footer .connect:before { content: "\f067"; } + #footer .settings:before { content: "\f013"; } + #footer .sign-out:before { content: "\f13e"; } + #main { background: #fff; border-radius: 2px; @@ -405,6 +469,7 @@ button, .user { right: 5px; top: 4px; } + #header { display: none; height: 40px; @@ -412,15 +477,18 @@ button, .user { top: 0; width: 100%; } + #windows { bottom: 48px; position: absolute; - top: 0px; + top: 0; width: 100%; } + #windows label { font-size: 14px; } + #windows .input { border: 1px solid #cdd3da; border-radius: 2px; @@ -434,10 +502,12 @@ button, .user { -webkit-appearance: none; width: 100%; } + #windows .input:hover, #windows .input:focus { border-color: #79838c; } + #windows .window:before, #windows .chan:before { background: #f4f4f4; @@ -449,6 +519,7 @@ button, .user { position: relative; z-index: 10; } + #windows .chan, #windows .window { background: #fff; @@ -459,14 +530,17 @@ button, .user { right: 0; top: 0; } + #windows .window { bottom: -44px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } + #windows .window h1 { font: 36px Lato; } + #windows .window h2 { border-bottom: 1px solid #eee; color: #7f8c8d; @@ -474,9 +548,11 @@ button, .user { margin: 30px 0 10px; padding-bottom: 7px; } + #windows .active { display: block; } + #windows .header { border-bottom: 1px solid #e7e7e7; line-height: 50px !important; @@ -484,18 +560,22 @@ button, .user { padding: 0 20px; overflow: hidden; } + #windows .header .title { font: 14px Lato; } + #windows .header .topic { color: #777; margin-left: 8px; } + #windows .header .right { float: right; margin-right: -10px; margin-top: -2px; } + #windows .header .button { background: #f4f4f4; background-image: linear-gradient(#f4f4f4, #ececec); @@ -508,12 +588,15 @@ button, .user { line-height: 0; padding: 0 10px; } + #windows .header .button:hover { opacity: 1; } + #windows .window .header { display: none; } + #chat { bottom: 0; left: 0; @@ -521,18 +604,23 @@ button, .user { right: 0; top: 0; } + #chat, #windows .header { font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace; line-height: 1.4; } -#chat button:hover, .user:hover { + +#chat button:hover, +.user:hover { opacity: .6; } + #chat .chat, #chat .sidebar { top: 58px; } + #chat .chat { bottom: 0; left: 0; @@ -541,9 +629,11 @@ button, .user { position: absolute; right: 180px; } + #viewport.rt .chat { - right: 0; + right: 0; } + #chat .sidebar { background: #fff; border-left: 1px solid #e7e7e7; @@ -553,30 +643,36 @@ button, .user { width: 180px; transition: all .4s; -webkit-transform: translateZ(0); - transform: translateZ(0); + transform: translateZ(0); -webkit-perspective: 1000; - perspective: 1000; + perspective: 1000; } + #chat .lobby .chat, #chat .query .chat { right: 0; } + #chat .lobby .sidebar, #chat .query .sidebar { display: none; } + #chat .show-more { display: none; padding: 10px; position: absolute; width: 100%; } + #chat .show-more.show + .messages .msg:first-child { padding-top: 47px !important; } + #chat .show-more.show + .messages .msg:first-child > span { padding-top: 52px !important; } + #chat .show-more-button { background: #f4f4f4; background-image: linear-gradient(#f4f4f4, #ececec); @@ -589,32 +685,41 @@ button, .user { line-height: 0; width: 100%; } + #chat .show-more-button:hover { opacity: 1; } + #chat .messages { display: table; width: 100%; } + #chat .msg { display: table-row; word-wrap: break-word; } + #chat .msg:first-child > span { padding-top: 10px; } + #chat .msg:last-child { height: 100%; } + #chat .msg:last-child .text { padding-bottom: 10px; } + #chat .msg .inline-channel { cursor: pointer; } + #chat .msg .inline-channel:hover { opacity: .6; } + #chat .time, #chat .from, #chat .text { @@ -622,12 +727,14 @@ button, .user { padding: 2px 0; vertical-align: top; } + #chat .time { color: #ddd; text-align: right; width: 46px; min-width: 46px; } + #chat .from { border-right: 1px solid #f6f6f6; color: #b1c3ce; @@ -636,18 +743,21 @@ button, .user { width: 134px; min-width: 134px; } + #chat a { - color: #84ce88; color: #50a656; } + #chat.no-colors .from .user, #chat.no-colors .sidebar .user { color: #50a656 !important; } + #chat .text { padding-left: 10px; padding-right: 6px; } + #chat .wrap, #chat .text a { font-style: normal; @@ -655,15 +765,18 @@ button, .user { word-wrap: break-word; display: inline-block; } + #chat .self .text { color: #999; } + #chat .error, #chat .error .from, #chat .highlight, #chat .highlight .from { color: #f00; } + #chat.hide-join .join span, #chat.hide-mode .mode span, #chat.hide-motd .motd span, @@ -676,56 +789,65 @@ button, .user { #chat .invite .from:before { font-family: FontAwesome; content: "\f003"; - color: #2ECC40; + color: #2ecc40; } #chat .join .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f090"; - color: #2ECC40; + color: #2ecc40; } + #chat .kick .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f05e"; - color: #FF4136; + color: #ff4136; } + #chat .part .from:before, #chat .quit .from:before { font-family: FontAwesome; content: "\f08b"; - color: #FF4136; + color: #ff4136; display: inline-block; transform: rotate(180deg); } + #chat .topic .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f0a1"; - color: #2ECC40; + color: #2ecc40; } + #chat .mode .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f05a"; - color: #2ECC40; + color: #2ecc40; } + #chat .nick .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f007"; - color: #2ECC40; + color: #2ecc40; } + #chat .action .text, #chat .action .user { - color: #F39C12; + color: #f39c12; } + #chat .action .from:before { - font-family: FontAwesome; + font-family: FontAwesome; content: "\f005"; - color: #F39C12; + color: #f39c12; } + #chat .notice .time, #chat .notice .text, #chat .chan .notice .user { - color: #0074D9 !important; + color: #0074d9 !important; } + #chat .notice .user:before { content: "Notice: "; } @@ -736,9 +858,10 @@ button, .user { display: inline-block; color: #666; height: 1em; - line-height: 0px; - padding: 0px 6px; + line-height: 0; + padding: 0 6px; } + #chat .toggle-content { background: #f5f5f5; border-radius: 2px; @@ -749,31 +872,38 @@ button, .user { padding: 6px 8px; margin-top: 2px; } + #chat .toggle-content a { color: inherit; } + #chat .toggle-content img { max-width: 100%; max-height: 250px; display: block; margin: 2px 0; } + #chat .toggle-content .thumb { max-height: 110px; max-width: 210px; } + #chat .toggle-content .head { font-weight: bold; } + #chat .toggle-content .body { color: #999; max-width: 460px; word-break: normal; word-wrap: break-word; } + #chat .toggle-content.show { display: inline-block !important; } + #chat .count { background: #fafafa; height: 48px; @@ -782,6 +912,7 @@ button, .user { right: 0; top: 0; } + #chat .count:before { color: #cfcfcf; font: 14px FontAwesome; @@ -792,6 +923,7 @@ button, .user { transition: color .2s; z-index: 0; } + #chat .search { color: #222; border: 0; @@ -802,6 +934,7 @@ button, .user { position: relative; width: 100%; } + #chat .names { bottom: 0; overflow: auto; @@ -812,14 +945,17 @@ button, .user { top: 48px; width: 100%; } + #chat .names button { display: block; line-height: 1.6; padding: 0 16px; } + #chat .names .inner { width: 300px; } + #chat .user-mode:before { content: ""; border-bottom: 1px solid #eee; @@ -828,117 +964,144 @@ button, .user { padding: 12px 16px 10px; margin-bottom: 10px; } + #chat .user-mode.owner:before { content: "Owners"; } + #chat .user-mode.admin:before { content: "Administrators"; } + #chat .user-mode.op:before { content: "Operators"; } + #chat .user-mode.half-op:before { content: "Half-Operators"; } + #chat .user-mode.voice:before { content: "Voiced"; } + #chat .user-mode.normal:before { content: "Users"; } + #sign-in label { display: block; margin-top: 10px; } + #sign-in .title { margin-bottom: 10px; } + #sign-in .remember { float: left; font-size: 14px; margin-top: 12px; } + #sign-in .remember input { float: left; margin: 3px 10px 0 0; } + #sign-in .btn { margin-top: 25px; } + #sign-in .error { color: #e74c3c; margin-top: 1em; } + #sign-in .container { margin-top: 120px; } + #connect label { display: block; margin-top: 11px; } + #connect .title { margin-bottom: 10px; } + #connect .port:before { content: ":"; margin: 9px 0 0 -17px; position: absolute; } + #connect .tls { float: left; font-size: 14px; margin-top: 6px; } + #connect .tls input { float: left; margin: 3px 10px 0 0; } + #connect .btn { float: left; margin-top: 30px; } + #settings .title { margin-bottom: -10px; } + #settings .opt { display: block; padding: 5px 0 10px 1px; } + #settings .opt input { float: left; margin: 4px 10px 0 0; } + #settings .about, #settings #play { color: #7f8c8d; } + #settings .about small { margin-left: 2px; } + #settings #play:hover { opacity: .8; } + #settings #play:before { content: "\f028"; font: 14px FontAwesome; margin-right: 9px; } + #settings .about { font-size: 14px; padding-top: 2px; line-height: 1.8; } + #form { - background: #e4eaee; background: #eee; - border-top: 1px solid #cfdae1; border-top: 1px solid #ddd; bottom: 0; height: 48px; left: 0; position: absolute; - right: 0px; + right: 0; } + #form .inner { bottom: 7px; left: 7px; @@ -946,6 +1109,7 @@ button, .user { right: 7px; top: 6px; } + #form .input { font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace; left: 0; @@ -953,6 +1117,7 @@ button, .user { margin-right: 64px; position: relative; } + #form #nick { background: #f6f6f6; color: #666; @@ -965,12 +1130,12 @@ button, .user { padding: 0 9px; border-radius: 1px; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + #form #input { - border: 1px solid #cfdae1; border: 1px solid #ddd; font: inherit; border-radius: 2px; @@ -980,6 +1145,7 @@ button, .user { -webkit-appearance: none; width: 100%; } + #form #submit { background: #f4f4f4; background-image: linear-gradient(#f4f4f4, #ececec); @@ -995,55 +1161,85 @@ button, .user { width: 58px; } - /** * IRC Message Styling * https://github.com/megawac/irc-style-parser * Colours are credit to http://clrs.cc/ */ .irc-fg0 { color: #fff; } + .irc-fg1 { color: #000; } + .irc-fg2 { color: #001f3f; } + .irc-fg3 { color: #2ecc40; } + .irc-fg4 { color: #ff4136; } + .irc-fg5 { color: #85144b; } + .irc-fg6 { color: #b10dc9; } + .irc-fg7 { color: #ff851b; } + .irc-fg8 { color: #ffdc00; } + .irc-fg9 { color: #01ff70; } + .irc-fg10 { color: #39cccc; } + .irc-fg11 { color: #7fdbff; } + .irc-fg12 { color: #0074d9; } + .irc-fg13 { color: #f012be; } + .irc-fg14 { color: #aaa; } + .irc-fg15 { color: #ddd; } + .irc-bg0 { background: #fff; } + .irc-bg1 { background: #000; } + .irc-bg2 { background: #001f3f; } + .irc-bg3 { background: #2ecc40; } + .irc-bg4 { background: #ff4136; } + .irc-bg5 { background: #85144b; } + .irc-bg6 { background: #b10dc9; } + .irc-bg7 { background: #ff851b; } + .irc-bg8 { background: #ffdc00; } + .irc-bg9 { background: #01ff70; } + .irc-bg10 { background: #39cccc; } + .irc-bg11 { background: #7fdbff; } + .irc-bg12 { background: #0074d9; } + .irc-bg13 { background: #f012be; } + .irc-bg14 { background: #aaa; } + .irc-bg15 { background: #ddd; } .irc-bold { - font-weight: bold; + font-weight: bold; } .irc-underline { - text-decoration: underline; + text-decoration: underline; } .irc-italic { - font-style:italic + font-style: italic; } /** @@ -1056,15 +1252,18 @@ button, .user { position: relative; overflow: hidden; } + .tse-scrollable .tse-scroll-content { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } + .tse-scrollable .tse-scroll-content::-webkit-scrollbar { width: 0; height: 0; } + .tse-scrollbar { z-index: 99; position: absolute; @@ -1073,25 +1272,29 @@ button, .user { bottom: 0; width: 11px; } + .tse-scrollbar .drag-handle { position: absolute; right: 2px; border-radius: 2px; min-height: 10px; width: 6px; - opacity: 0.1; - transition: opacity 0.2s linear; + opacity: .1; + transition: opacity .2s linear; background: #000; -webkit-background-clip: padding-box; -moz-background-clip: padding; } + .tse-scrollbar:hover .drag-handle { - opacity: 0.25; + opacity: .25; transition: opacity 0 linear; } + .tse-scrollbar .drag-handle.visible { - opacity: 0.2; + opacity: .2; } + .scrollbar-width-tester::-webkit-scrollbar { width: 0; height: 0; @@ -1101,50 +1304,64 @@ button, .user { .container { margin-top: 60px !important; } + #viewport.lt { -webkit-transform: translate3d(220px, 0, 0); - transform: translate3d(220px, 0, 0); + transform: translate3d(220px, 0, 0); } + #viewport.rt #chat .sidebar { -webkit-transform: translate3d(-180px, 0, 0); - transform: translate3d(-180px, 0, 0); + transform: translate3d(-180px, 0, 0); } + #sidebar { left: -220px; } + #footer { left: -215px; width: 215px; } + #sidebar .close { display: none; } + #sidebar .chan:hover .badge { opacity: 1; } + #sidebar .empty:before { margin-top: 0; } + #main { left: 5px; right: 5px; } + #chat .chat { right: 0; } + #viewport .lt, #viewport .channel .rt { display: block; } + #viewport .rt { margin-left: 18px; } + #windows .window .header { display: block; } + #chat .sidebar { right: -180px; } + #chat .title:before { display: none; } @@ -1154,23 +1371,29 @@ button, .user { .container { margin: 40px 0 !important; } + #connect .tls { margin: 20px 0; } + #windows .input { margin-bottom: 2px; } + #chat .messages { display: block; padding: 5px 10px; } + #chat .msg { display: block; padding: 2px 0; } + #chat .msg:last-child { height: auto; } + #chat .from, #chat .text { background: none; @@ -1178,9 +1401,11 @@ button, .user { display: inline; padding: 0; } + #chat .time { display: none; } + #chat.hide-join .join, #chat.hide-mode .mode, #chat.hide-motd .motd, @@ -1196,9 +1421,11 @@ button, .user { position: relative !important; overflow: visible !important; } + body { background: #fff; } + .lt, .rt, .window:before, @@ -1206,38 +1433,47 @@ button, .user { .title:before { display: none !important; } + .sidebar, #form, #sidebar { display: none; } + #windows .header { border-bottom: 0; padding-left: 10px; } + #main { left: 0; } + #chat { font-size: 11px; } + #chat .chat { bottom: 0; left: 0; top: 0; right: 0; } + #chat .messages { display: block; padding: 5px 10px; } + #chat .msg { display: block; padding: 2px 0; } + #chat .msg:last-child { height: auto; } + #chat .from, #chat .text, #chat .time { @@ -1250,12 +1486,14 @@ button, .user { ::-webkit-scrollbar { width: 8px; - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); } + ::-webkit-scrollbar:hover { - background-color: rgba(0, 0, 0, 0.09); + background-color: rgba(0, 0, 0, .09); } + ::-webkit-scrollbar-thumb:vertical { - background: rgba(0,0,0,0.5); + background: rgba(0, 0, 0, .5); border-radius: 100px; } diff --git a/client/themes/crypto.css b/client/themes/crypto.css index bdc897ca..0530f9e3 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -9,75 +9,79 @@ GitHub: https://github.com/aynik */ @font-face { - font-family: Inconsolata-g; - src: url("fonts/inconsolatag.woff") format("woff"), url("fonts/inconsolatag.ttf") format("ttf"); + font-family: Inconsolata-g; + src: url("fonts/inconsolatag.woff") format("woff"), url("fonts/inconsolatag.ttf") format("ttf"); } body { - background: #000; - font: 16px Inconsolata-g, monospace; + background: #000; + font: 16px Inconsolata-g, monospace; } -a, #chat a { - color: #00FF0E; +a, +#chat a { + color: #00ff0e; } -a:hover, #chat a:hover { - color: #3EFF48; +a:hover, +#chat a:hover { + color: #3eff48; } #windows .window h2 { - color: #666; - font: regular 14px Leto, sans-serif; - border-bottom: none; + color: #666; + font: regular 14px Leto, sans-serif; + border-bottom: none; } #main { - right: 0px; - bottom: 0px; - top: 0px; - border-radius: 0px; + right: 0; + bottom: 0; + top: 0; + border-radius: 0; } .container { - margin: 40px auto; + margin: 40px auto; } #sign-in label { - font: 14px Lato, sans-serif; - color: #666; + font: 14px Lato, sans-serif; + color: #666; } #sign-in label input { - margin-top: 10px !important; - font: 14px Inconsolata-g, monospace; + margin-top: 10px !important; + font: 14px Inconsolata-g, monospace; } .btn { - border-color: #00FF0E; - color: #00FF0E; + border-color: #00ff0e; + color: #00ff0e; } -.btn:disabled, .btn:hover { - background: #00FF0E; +.btn:disabled, +.btn:hover { + background: #00ff0e; } -#windows .window:before, #windows .chan:before { - content: none; +#windows .window:before, +#windows .chan:before { + content: none; } #settings .opt { - line-height: 20px; - font-size: 12px; + line-height: 20px; + font-size: 12px; } #sign-in .remember { - font: 12px Inconsolata-g, monospace; - line-height: 30px; + font: 12px Inconsolata-g, monospace; + line-height: 30px; } #sidebar .chan:first-child { - color: #00FF0E; + color: #00ff0e; } #sidebar button, @@ -86,39 +90,40 @@ a:hover, #chat a:hover { #chat .time, #chat .count:before, #sidebar .empty { - color: #666; + color: #666; } #sidebar .active { - color: #fff; + color: #fff; } #chat, #windows .header { - font: 12px Inconsolata-g, monospace; - line-height: 1.8; + font: 12px Inconsolata-g, monospace; + line-height: 1.8; } #chat .chat, #chat .sidebar { - top: 48px; + top: 48px; } -#chat.no-colors .from button, #chat.no-colors .sidebar button { - color: #000 !important; - font-weight: bold +#chat.no-colors .from button, +#chat.no-colors .sidebar button { + color: #000 !important; + font-weight: bold; } #form .input { - font: 12px Inconsolata-g, monospace; + font: 12px Inconsolata-g, monospace; } #footer .icon { - color: #666; + color: #666; } @media (max-width: 768px) { - #main { - left: 0px; - } + #main { + left: 0; + } } diff --git a/client/themes/example.css b/client/themes/example.css index 3fe55b72..7a2206bf 100644 --- a/client/themes/example.css +++ b/client/themes/example.css @@ -3,4 +3,5 @@ */ body { + margin: 0; } diff --git a/client/themes/morning.css b/client/themes/morning.css index f3f06826..00f69a79 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -22,7 +22,7 @@ QUIT #d0907d #chat .sidebar, #windows .chan, #windows .window { - background: #333c4a; + background: #333c4a; } #main #chat, @@ -30,168 +30,174 @@ QUIT #d0907d #form .input, #chat, #windows .header { - font-family: 'Open Sans', sans-serif !important; - font-size: 13px; + font-family: "Open Sans", sans-serif !important; + font-size: 13px; } -#settings, #sign-in, #connect { - color: #cccccc; +#settings, +#sign-in, +#connect { + color: #ccc; } #chat .count { - background-color: #2e3642; + background-color: #2e3642; } #chat .search { - color: #cccccc; - padding: 15px 16px; + color: #ccc; + padding: 15px 16px; } #chat .search::-webkit-input-placeholder { - color: #99a2b4; - opacity: 0.5; + color: #99a2b4; + opacity: .5; } /* Borders */ -#chat .from, #windows .header, +#chat .from, +#windows .header, #chat .user-mode:before, #chat .sidebar { - border-color: #2a323d; + border-color: #2a323d; } - /* Attach chat to window borders */ -#windows .window:before, #windows .chan:before { - display: none; +#windows .window:before, +#windows .chan:before { + display: none; } #footer { - left: 0; - bottom: 0; - width: 220px; + left: 0; + bottom: 0; + width: 220px; } #main { - top: 0; - bottom: 0; - right: 0; - border-radius: 0; + top: 0; + bottom: 0; + right: 0; + border-radius: 0; } -#chat .chat, #chat .sidebar { - top: 48px; +#chat .chat, +#chat .sidebar { + top: 48px; } /* User list */ #chat .user-mode { - color: #fefefe; + color: #fefefe; } /* Nicknames */ #chat.no-colors .from button, #chat.no-colors .sidebar button { - color: #b0bacf !important; + color: #b0bacf !important; } #chat.no-colors .from button:hover, #chat.no-colors .sidebar button:hover { - color: #fefefe !important; + color: #fefefe !important; } #chat a { - color: #428bca; + color: #428bca; } #chat button:hover { - opacity: 1; + opacity: 1; } /* Message form */ #form { - background: #2a323d; - border-color: #242a33; + background: #2a323d; + border-color: #242a33; } #form #input { - background-color: #2e3642; - border-color: #242a33; - color: #cccccc; + background-color: #2e3642; + border-color: #242a33; + color: #ccc; } #form #nick { - background: #242a33; - color: #CCC; + background: #242a33; + color: #ccc; } /* Buttons */ #chat .show-more-button, #form #submit, #windows .header .button { - background: #2e3642; - border-color: #242a33; - color: #CCC; + background: #2e3642; + border-color: #242a33; + color: #ccc; } #chat .show-more-button:hover, #form #submit:hover, #windows .header .button:hover { - color: #FFF; + color: #fff; } - #chat .header { - color: #99a2b4; + color: #99a2b4; } /* Setup text colors */ #chat .msg { - color: #f3f3f3; + color: #f3f3f3; } + #chat .message { - color: #fefefe; + color: #fefefe; } #chat .self .text { - color: #99a2b4; + color: #99a2b4; } #chat .error, #chat .error .from, #chat .highlight, #chat .highlight .from { - color: #f92772; + color: #f92772; } #chat .highlight:not(.self) { - font-size: 1.2em; + font-size: 1.2em; } #chat .msg.quit .time, #chat .msg.quit .from button { - color: #d0907d !important; + color: #d0907d !important; } #chat .msg.topic { - color: #fefefe; + color: #fefefe; } #chat .msg.join .time, #chat .msg.join .from button { - color: #84ce88 !important; + color: #84ce88 !important; } + /* Embeds */ #chat .toggle-content, #chat .toggle-button { - background: #242a33; - color: #f3f3f3; + background: #242a33; + color: #f3f3f3; } + #chat .toggle-content img { - float: left; - margin-right: 0.5em; + float: left; + margin-right: .5em; } #chat .toggle-content .body { - color: #99a2b4; + color: #99a2b4; } @media (max-width: 768px) { diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index a75ce26f..1aa0a4c0 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -26,7 +26,7 @@ body { #chat .sidebar, #windows .chan, #windows .window { - background: #3f3f3f; + background: #3f3f3f; } #main #chat, @@ -34,181 +34,192 @@ body { #form .input, #chat, #windows .header { - font-family: 'Open Sans', sans-serif !important; - font-size: 13px; + font-family: "Open Sans", sans-serif !important; + font-size: 13px; } -#settings, #sign-in, #connect { - color: #dcdccc; +#settings, +#sign-in, +#connect { + color: #dcdccc; } -#settings, #sign-in, #connect .title { - color: #88b090; +#settings, +#sign-in, +#connect .title { + color: #88b090; } -#settings, #sign-in, #connect .opt { - color: #dcdccc; +#settings, +#sign-in, +#connect .opt { + color: #dcdccc; } #sidebar { - background: #2b2b2b; - bottom: 48px; + background: #2b2b2b; + bottom: 48px; } #footer { - background: #33332f; - border-top: 1px solid #000; + background: #33332f; + border-top: 1px solid #000; } #chat .count { - background-color: #434443; + background-color: #434443; } #chat .search { - color: #88b090; - padding: 15px 16px; + color: #88b090; + padding: 15px 16px; } #chat .search::-webkit-input-placeholder { - color: #d2d39b; - opacity: 0.5; + color: #d2d39b; + opacity: .5; } /* Borders */ -#chat .from, #windows .header, +#chat .from, +#windows .header, #chat .user-mode:before, #chat .sidebar { - border-color: #333333; + border-color: #333; } /* Attach chat to window borders */ -#windows .window:before, #windows .chan:before { - display: none; +#windows .window:before, +#windows .chan:before { + display: none; } #footer { - left: 0; - bottom: 0; - width: 220px; + left: 0; + bottom: 0; + width: 220px; } #main { - top: 0; - bottom: 0; - right: 0; - border-radius: 0; + top: 0; + bottom: 0; + right: 0; + border-radius: 0; } -#chat .chat, #chat .sidebar { - top: 48px; +#chat .chat, +#chat .sidebar { + top: 48px; } /* User list */ #chat .user-mode { - color: #dcdccc; + color: #dcdccc; } /* Nicknames */ #chat.no-colors .from button, #chat.no-colors .sidebar button { - color: #bc8cbc !important; + color: #bc8cbc !important; } #chat.no-colors .from button:hover, #chat.no-colors .sidebar button:hover { - color: #dcdccc !important; + color: #dcdccc !important; } #chat a { - color: #8c8cbc; + color: #8c8cbc; } #chat button:hover { - opacity: 1; + opacity: 1; } /* Message form */ #form { - background: #333333; - border-color: #101010; + background: #333; + border-color: #101010; } #form #input { - background-color: #434443; - border-color: #101010; - color: #dcdccc; + background-color: #434443; + border-color: #101010; + color: #dcdccc; } #form #nick { - background: #101010; - color: #dcdccc; + background: #101010; + color: #dcdccc; } /* Buttons */ #chat .show-more-button, #form #submit, #windows .header .button { - background: #434443; - border-color: #101010; - color: #dcdccc; + background: #434443; + border-color: #101010; + color: #dcdccc; } #chat .show-more-button:hover, #form #submit:hover, #windows .header .button:hover { - color: #FFF; + color: #fff; } - #chat .header { - color: #d2d39b; + color: #d2d39b; } /* Setup text colors */ #chat .msg { - color: #ffcfaf; + color: #ffcfaf; } + #chat .message { - color: #dcdccc; + color: #dcdccc; } #chat .self .text { - color: #d2d39b; + color: #d2d39b; } #chat .error, #chat .error .from, #chat .highlight, #chat .highlight .from { - color: #bc6c4c; + color: #bc6c4c; } #chat .msg.quit .time, #chat .msg.quit .from button { - color: #bc6c9c !important; + color: #bc6c9c !important; } #chat .msg.topic { - color: #dcdccc; + color: #dcdccc; } #chat .msg.join .time, #chat .msg.join .from button { - color: #8cd0d3 !important; + color: #8cd0d3 !important; } + /* Embeds */ #chat .toggle-content, #chat .toggle-button { - background: #93b3a3; - color: #dcdccc; + background: #93b3a3; + color: #dcdccc; } + #chat .toggle-content img { - float: left; - margin-right: 0.5em; + float: left; + margin-right: .5em; } #chat .toggle-content .body { - color: #d2d39b; + color: #d2d39b; } @media (max-width: 768px) {