From 482cc96bd4266d843e0a5bfa233ae58d8c43cc04 Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Thu, 27 Feb 2014 08:43:22 +0000 Subject: [PATCH 01/23] Fixes CSS parsing error, throws an end of comment issue. fixes #69 --- index.js | 6 +++++- test/css-parse.js | 15 +++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index b82beb7..88dd62a 100644 --- a/index.js +++ b/index.js @@ -157,9 +157,13 @@ module.exports = function(css, options){ if ('/' != css.charAt(0) || '*' != css.charAt(1)) return; var i = 2; - while (null != css.charAt(i) && ('*' != css.charAt(i) || '/' != css.charAt(i + 1))) ++i; + while ("" != css.charAt(i) && ('*' != css.charAt(i) || '/' != css.charAt(i + 1))) ++i; i += 2; + if ("" === css.charAt(i-1)) { + return error('End of comment missing'); + } + var str = css.slice(2, i - 2); column += 2; updatePosition(str); diff --git a/test/css-parse.js b/test/css-parse.js index 58598bd..1e22712 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -45,4 +45,19 @@ describe('parse(str)', function(){ parse('b { color: red; }\n{ color: green; }\na {color: blue; }'); }); }) + + it('should throw when a broken comment is found', function () { + assert.throws(function(){ + parse('thing { color: red; } /* b { color: blue; }'); + }); + + assert.throws(function(){ + parse('/*'); + }); + + /* Nested comments should be fine */ + assert.doesNotThrow(function(){ + parse('/* /* */'); + }); + }) }) From 35029a6e7e0890b7f25ed544238c22a2d7ddcabd Mon Sep 17 00:00:00 2001 From: fb55 Date: Sat, 1 Mar 2014 11:24:15 +0100 Subject: [PATCH 02/23] Compile atrules in advance --- index.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/index.js b/index.js index 88dd62a..128043a 100644 --- a/index.js +++ b/index.js @@ -37,7 +37,7 @@ module.exports = function(css, options){ node.position = new Position(start); whitespace(); return node; - } + }; } function Position(start) { @@ -428,37 +428,35 @@ module.exports = function(css, options){ * Parse import */ - function atimport() { - return _atrule('import'); - } + var atimport = _compileAtrule('import'); /** * Parse charset */ - function atcharset() { - return _atrule('charset'); - } + var atcharset = _compileAtrule('charset'); /** * Parse namespace */ - function atnamespace() { - return _atrule('namespace') - } + var atnamespace = _compileAtrule('namespace'); /** * Parse non-block at-rules */ - function _atrule(name) { - var pos = position(); - var m = match(new RegExp('^@' + name + ' *([^;\\n]+);')); - if (!m) return; - var ret = { type: name }; - ret[name] = trim(m[1]); - return pos(ret); + + function _compileAtrule(name) { + var re = new RegExp('^@' + name + ' *([^;\\n]+);'); + return function() { + var pos = position(); + var m = match(re); + if (!m) return; + var ret = { type: name }; + ret[name] = m[1].trim(); + return pos(ret); + } } /** From 018175e97e89695e32d40ca2378d86573a8a437e Mon Sep 17 00:00:00 2001 From: Conrad Zimmerman Date: Thu, 6 Mar 2014 11:58:07 -0500 Subject: [PATCH 03/23] Revert "rename source -> filename" This reverts commit 190ba98e4414c39a22c96d8fef4af98d82f413fd. Conflicts: History.md Readme.md test/css-parse.js --- History.md | 4 - Readme.md | 14 +-- index.js | 31 +++-- test/cases/charset.json | 8 +- test/cases/colon-space.json | 6 +- test/cases/comment.json | 18 +-- test/cases/comment.url.json | 14 +-- test/cases/document.json | 10 +- test/cases/escapes.json | 180 ++++++++++++++--------------- test/cases/host.json | 6 +- test/cases/import.json | 10 +- test/cases/import.messed.json | 10 +- test/cases/keyframes.advanced.json | 14 +-- test/cases/keyframes.complex.json | 22 ++-- test/cases/keyframes.json | 18 +-- test/cases/keyframes.messed.json | 10 +- test/cases/keyframes.vendor.json | 10 +- test/cases/media.json | 36 +++--- test/cases/media.messed.json | 28 ++--- test/cases/messed-up.json | 16 +-- test/cases/namespace.json | 4 +- test/cases/no-semi.json | 6 +- test/cases/paged-media.json | 12 +- test/cases/props.json | 8 +- test/cases/quoted.json | 4 +- test/cases/rule.json | 4 +- test/cases/rules.json | 8 +- test/cases/supports.json | 12 +- test/cases/wtf.json | 8 +- test/css-parse.js | 2 +- 30 files changed, 262 insertions(+), 271 deletions(-) diff --git a/History.md b/History.md index 864e709..fd8f535 100644 --- a/History.md +++ b/History.md @@ -1,10 +1,6 @@ - 2.0.0 / 2014-01-24 ================== - * rename source to filename - - `source` is now the CSS string - - `filename` is now the optional filename * changed default `options.position` value to `true` * remove comments from properties and values * asserts when selectors are missing diff --git a/Readme.md b/Readme.md index 3aaa0f2..ecc83e1 100644 --- a/Readme.md +++ b/Readme.md @@ -16,8 +16,8 @@ var css = "body { \n background-color: #fff;\n }"; var output_obj = parse(css); -// Filename parameter for source mapping -var output_obj_pos = parse(css, { filename: 'file.css' }); +// Source parameter to specify source file name for source maps +var output_obj_pos = parse(css, { source: 'file.css' }); // Print parsed object as CSS string console.log(JSON.stringify(output_obj, null, 2)); @@ -145,17 +145,17 @@ parse tree with `.position` enabled: } ``` -If you also pass in `filename: 'path/to/original.css'`, that will be set -on `node.position.filename`. +If you also pass in `source: 'path/to/original.css'`, that will be set +on `node.position.source`. ## Performance Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air. ## Related - - [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") - [css-value](https://github.com/visionmedia/css-value "CSS-Value") + + [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") + [css-value](https://github.com/visionmedia/css-value "CSS-Value") ## License diff --git a/index.js b/index.js index 128043a..7d80ee5 100644 --- a/index.js +++ b/index.js @@ -29,29 +29,21 @@ module.exports = function(css, options){ */ function position() { - if (!options.position) return positionNoop; - var start = { line: lineno, column: column }; + if (!options.position) return positionNoop; return function(node){ - node.position = new Position(start); + node.position = { + start: start, + end: { line: lineno, column: column }, + source: options.source + }; + whitespace(); return node; }; } - function Position(start) { - this.start = start; - this.end = { line: lineno, column: column }; - this.filename = options.filename; - } - - /** - * Non-enumerable source string. - */ - - Position.prototype.source = css; - /** * Return `node`. */ @@ -65,9 +57,12 @@ module.exports = function(css, options){ * Error `msg`. */ - function error(msg, start) { + function error(msg) { var err = new Error(msg + ' near line ' + lineno + ':' + column); - err.position = new Position(start); + err.filename = options.source; + err.line = lineno; + err.column = column; + err.source = css; throw err; } @@ -183,7 +178,7 @@ module.exports = function(css, options){ function selector() { var m = match(/^([^{]+)/); if (!m) return; - /* @fix Remove all comments from selectors + /* @fix Remove all comments from selectors * http://ostermiller.org/findcomment.html */ return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').split(/\s*,\s*/); } diff --git a/test/cases/charset.json b/test/cases/charset.json index 85b241f..7f8eafa 100644 --- a/test/cases/charset.json +++ b/test/cases/charset.json @@ -14,7 +14,7 @@ "line": 1, "column": 18 }, - "filename": "charset.css" + "source": "charset.css" } }, { @@ -29,7 +29,7 @@ "line": 1, "column": 82 }, - "filename": "charset.css" + "source": "charset.css" } }, { @@ -44,7 +44,7 @@ "line": 2, "column": 24 }, - "filename": "charset.css" + "source": "charset.css" } }, { @@ -59,7 +59,7 @@ "line": 2, "column": 122 }, - "filename": "charset.css" + "source": "charset.css" } } ] diff --git a/test/cases/colon-space.json b/test/cases/colon-space.json index 9e0f883..607ad36 100644 --- a/test/cases/colon-space.json +++ b/test/cases/colon-space.json @@ -21,7 +21,7 @@ "line": 2, "column": 19 }, - "filename": "colon-space.css" + "source": "colon-space.css" } }, { @@ -37,7 +37,7 @@ "line": 3, "column": 16 }, - "filename": "colon-space.css" + "source": "colon-space.css" } } ], @@ -50,7 +50,7 @@ "line": 4, "column": 2 }, - "filename": "colon-space.css" + "source": "colon-space.css" } } ] diff --git a/test/cases/comment.json b/test/cases/comment.json index 7a47a14..041649b 100644 --- a/test/cases/comment.json +++ b/test/cases/comment.json @@ -14,7 +14,7 @@ "line": 1, "column": 8 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -36,7 +36,7 @@ "line": 3, "column": 44 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -51,7 +51,7 @@ "line": 4, "column": 10 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -66,7 +66,7 @@ "line": 5, "column": 7 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -82,7 +82,7 @@ "line": 5, "column": 17 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -97,7 +97,7 @@ "line": 6, "column": 10 }, - "filename": "comment.css" + "source": "comment.css" } } ], @@ -110,7 +110,7 @@ "line": 7, "column": 2 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -125,7 +125,7 @@ "line": 7, "column": 10 }, - "filename": "comment.css" + "source": "comment.css" } }, { @@ -140,7 +140,7 @@ "line": 9, "column": 8 }, - "filename": "comment.css" + "source": "comment.css" } } ] diff --git a/test/cases/comment.url.json b/test/cases/comment.url.json index 02643f4..eb00189 100644 --- a/test/cases/comment.url.json +++ b/test/cases/comment.url.json @@ -14,7 +14,7 @@ "line": 1, "column": 34 }, - "filename": "comment.url.css" + "source": "comment.url.css" } }, { @@ -29,7 +29,7 @@ "line": 2, "column": 5 }, - "filename": "comment.url.css" + "source": "comment.url.css" } }, { @@ -50,7 +50,7 @@ "line": 4, "column": 12 }, - "filename": "comment.url.css" + "source": "comment.url.css" } }, { @@ -65,7 +65,7 @@ "line": 5, "column": 18 }, - "filename": "comment.url.css" + "source": "comment.url.css" } }, { @@ -81,7 +81,7 @@ "line": 6, "column": 11 }, - "filename": "comment.url.css" + "source": "comment.url.css" } }, { @@ -96,7 +96,7 @@ "line": 6, "column": 46 }, - "filename": "comment.url.css" + "source": "comment.url.css" } } ], @@ -109,7 +109,7 @@ "line": 7, "column": 2 }, - "filename": "comment.url.css" + "source": "comment.url.css" } } ] diff --git a/test/cases/document.json b/test/cases/document.json index ccfff9d..916e0dc 100644 --- a/test/cases/document.json +++ b/test/cases/document.json @@ -19,7 +19,7 @@ "line": 2, "column": 17 }, - "filename": "document.css" + "source": "document.css" } }, { @@ -40,7 +40,7 @@ "line": 4, "column": 20 }, - "filename": "document.css" + "source": "document.css" } }, { @@ -56,7 +56,7 @@ "line": 6, "column": 3 }, - "filename": "document.css" + "source": "document.css" } } ], @@ -69,7 +69,7 @@ "line": 6, "column": 4 }, - "filename": "document.css" + "source": "document.css" } } ], @@ -82,7 +82,7 @@ "line": 7, "column": 2 }, - "filename": "document.css" + "source": "document.css" } } ] diff --git a/test/cases/escapes.json b/test/cases/escapes.json index f835084..8b99960 100644 --- a/test/cases/escapes.json +++ b/test/cases/escapes.json @@ -14,7 +14,7 @@ "line": 1, "column": 40 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -29,7 +29,7 @@ "line": 2, "column": 48 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -44,7 +44,7 @@ "line": 3, "column": 43 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -62,7 +62,7 @@ "line": 4, "column": 12 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -77,7 +77,7 @@ "line": 5, "column": 46 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -95,7 +95,7 @@ "line": 6, "column": 13 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -110,7 +110,7 @@ "line": 7, "column": 48 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -128,7 +128,7 @@ "line": 8, "column": 13 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -143,7 +143,7 @@ "line": 9, "column": 43 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -161,7 +161,7 @@ "line": 10, "column": 8 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -176,7 +176,7 @@ "line": 11, "column": 47 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -194,7 +194,7 @@ "line": 12, "column": 11 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -209,7 +209,7 @@ "line": 13, "column": 41 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -227,7 +227,7 @@ "line": 14, "column": 5 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -242,7 +242,7 @@ "line": 15, "column": 60 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -264,7 +264,7 @@ "line": 16, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -277,7 +277,7 @@ "line": 16, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -299,7 +299,7 @@ "line": 17, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -312,7 +312,7 @@ "line": 17, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -334,7 +334,7 @@ "line": 18, "column": 43 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -350,7 +350,7 @@ "line": 18, "column": 56 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -363,7 +363,7 @@ "line": 18, "column": 58 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -385,7 +385,7 @@ "line": 19, "column": 21 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -398,7 +398,7 @@ "line": 19, "column": 23 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -420,7 +420,7 @@ "line": 20, "column": 19 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -433,7 +433,7 @@ "line": 20, "column": 21 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -455,7 +455,7 @@ "line": 21, "column": 19 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -468,7 +468,7 @@ "line": 21, "column": 21 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -490,7 +490,7 @@ "line": 22, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -503,7 +503,7 @@ "line": 22, "column": 24 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -525,7 +525,7 @@ "line": 23, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -538,7 +538,7 @@ "line": 23, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -560,7 +560,7 @@ "line": 24, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -573,7 +573,7 @@ "line": 24, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -595,7 +595,7 @@ "line": 25, "column": 24 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -608,7 +608,7 @@ "line": 25, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -630,7 +630,7 @@ "line": 26, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -643,7 +643,7 @@ "line": 26, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -665,7 +665,7 @@ "line": 27, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -678,7 +678,7 @@ "line": 27, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -700,7 +700,7 @@ "line": 28, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -713,7 +713,7 @@ "line": 28, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -735,7 +735,7 @@ "line": 29, "column": 24 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -748,7 +748,7 @@ "line": 29, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -770,7 +770,7 @@ "line": 30, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -783,7 +783,7 @@ "line": 30, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -805,7 +805,7 @@ "line": 31, "column": 24 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -818,7 +818,7 @@ "line": 31, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -840,7 +840,7 @@ "line": 32, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -853,7 +853,7 @@ "line": 32, "column": 29 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -875,7 +875,7 @@ "line": 33, "column": 23 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -888,7 +888,7 @@ "line": 33, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -910,7 +910,7 @@ "line": 34, "column": 36 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -923,7 +923,7 @@ "line": 34, "column": 38 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -945,7 +945,7 @@ "line": 35, "column": 240 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -958,7 +958,7 @@ "line": 35, "column": 242 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -980,7 +980,7 @@ "line": 36, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -993,7 +993,7 @@ "line": 36, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1015,7 +1015,7 @@ "line": 37, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1028,7 +1028,7 @@ "line": 37, "column": 24 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1050,7 +1050,7 @@ "line": 38, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1063,7 +1063,7 @@ "line": 38, "column": 30 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1085,7 +1085,7 @@ "line": 39, "column": 20 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1098,7 +1098,7 @@ "line": 39, "column": 22 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1120,7 +1120,7 @@ "line": 40, "column": 31 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1133,7 +1133,7 @@ "line": 40, "column": 33 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1155,7 +1155,7 @@ "line": 41, "column": 26 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1168,7 +1168,7 @@ "line": 41, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1190,7 +1190,7 @@ "line": 42, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1203,7 +1203,7 @@ "line": 42, "column": 29 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1225,7 +1225,7 @@ "line": 43, "column": 46 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1238,7 +1238,7 @@ "line": 43, "column": 48 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1260,7 +1260,7 @@ "line": 44, "column": 33 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1273,7 +1273,7 @@ "line": 44, "column": 35 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1295,7 +1295,7 @@ "line": 45, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1308,7 +1308,7 @@ "line": 45, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1330,7 +1330,7 @@ "line": 46, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1343,7 +1343,7 @@ "line": 46, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1365,7 +1365,7 @@ "line": 47, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1378,7 +1378,7 @@ "line": 47, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1400,7 +1400,7 @@ "line": 48, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1413,7 +1413,7 @@ "line": 48, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1435,7 +1435,7 @@ "line": 49, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1448,7 +1448,7 @@ "line": 49, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1470,7 +1470,7 @@ "line": 50, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1483,7 +1483,7 @@ "line": 50, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1505,7 +1505,7 @@ "line": 51, "column": 25 }, - "filename": "escapes.css" + "source": "escapes.css" } } ], @@ -1518,7 +1518,7 @@ "line": 51, "column": 27 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1533,7 +1533,7 @@ "line": 53, "column": 44 }, - "filename": "escapes.css" + "source": "escapes.css" } }, { @@ -1548,7 +1548,7 @@ "line": 54, "column": 28 }, - "filename": "escapes.css" + "source": "escapes.css" } } ] diff --git a/test/cases/host.json b/test/cases/host.json index 867a4af..4967920 100644 --- a/test/cases/host.json +++ b/test/cases/host.json @@ -24,7 +24,7 @@ "line": 3, "column": 19 }, - "filename": "host.css" + "source": "host.css" } } ], @@ -37,7 +37,7 @@ "line": 4, "column": 4 }, - "filename": "host.css" + "source": "host.css" } } ], @@ -50,7 +50,7 @@ "line": 5, "column": 2 }, - "filename": "host.css" + "source": "host.css" } } ] diff --git a/test/cases/import.json b/test/cases/import.json index c6cad3a..ce1f2ac 100644 --- a/test/cases/import.json +++ b/test/cases/import.json @@ -14,7 +14,7 @@ "line": 2, "column": 36 }, - "filename": "import.css" + "source": "import.css" } }, { @@ -29,7 +29,7 @@ "line": 3, "column": 42 }, - "filename": "import.css" + "source": "import.css" } }, { @@ -44,7 +44,7 @@ "line": 4, "column": 22 }, - "filename": "import.css" + "source": "import.css" } }, { @@ -59,7 +59,7 @@ "line": 5, "column": 41 }, - "filename": "import.css" + "source": "import.css" } }, { @@ -74,7 +74,7 @@ "line": 6, "column": 65 }, - "filename": "import.css" + "source": "import.css" } } ] diff --git a/test/cases/import.messed.json b/test/cases/import.messed.json index 9eb9fd3..78139d7 100644 --- a/test/cases/import.messed.json +++ b/test/cases/import.messed.json @@ -14,7 +14,7 @@ "line": 2, "column": 39 }, - "filename": "import.messed.css" + "source": "import.messed.css" } }, { @@ -29,7 +29,7 @@ "line": 3, "column": 44 }, - "filename": "import.messed.css" + "source": "import.messed.css" } }, { @@ -44,7 +44,7 @@ "line": 4, "column": 28 }, - "filename": "import.messed.css" + "source": "import.messed.css" } }, { @@ -59,7 +59,7 @@ "line": 5, "column": 45 }, - "filename": "import.messed.css" + "source": "import.messed.css" } }, { @@ -74,7 +74,7 @@ "line": 7, "column": 67 }, - "filename": "import.messed.css" + "source": "import.messed.css" } } ] diff --git a/test/cases/keyframes.advanced.json b/test/cases/keyframes.advanced.json index e094884..e1a2f46 100644 --- a/test/cases/keyframes.advanced.json +++ b/test/cases/keyframes.advanced.json @@ -25,7 +25,7 @@ "line": 3, "column": 21 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } } ], @@ -38,7 +38,7 @@ "line": 4, "column": 4 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } }, { @@ -60,7 +60,7 @@ "line": 7, "column": 17 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } } ], @@ -73,7 +73,7 @@ "line": 8, "column": 4 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } }, { @@ -95,7 +95,7 @@ "line": 11, "column": 15 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } } ], @@ -108,7 +108,7 @@ "line": 12, "column": 4 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } } ], @@ -121,7 +121,7 @@ "line": 13, "column": 2 }, - "filename": "keyframes.advanced.css" + "source": "keyframes.advanced.css" } } ] diff --git a/test/cases/keyframes.complex.json b/test/cases/keyframes.complex.json index 4aa578b..379c421 100644 --- a/test/cases/keyframes.complex.json +++ b/test/cases/keyframes.complex.json @@ -25,7 +25,7 @@ "line": 2, "column": 14 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } }, { @@ -41,7 +41,7 @@ "line": 2, "column": 24 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ], @@ -54,7 +54,7 @@ "line": 2, "column": 25 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } }, { @@ -76,7 +76,7 @@ "line": 3, "column": 22 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ], @@ -89,7 +89,7 @@ "line": 3, "column": 23 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } }, { @@ -113,7 +113,7 @@ "line": 6, "column": 26 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ], @@ -126,7 +126,7 @@ "line": 6, "column": 27 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } }, { @@ -148,7 +148,7 @@ "line": 7, "column": 20 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } }, { @@ -164,7 +164,7 @@ "line": 7, "column": 33 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ], @@ -177,7 +177,7 @@ "line": 7, "column": 34 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ], @@ -190,7 +190,7 @@ "line": 8, "column": 2 }, - "filename": "keyframes.complex.css" + "source": "keyframes.complex.css" } } ] diff --git a/test/cases/keyframes.json b/test/cases/keyframes.json index c907160..0ef0637 100644 --- a/test/cases/keyframes.json +++ b/test/cases/keyframes.json @@ -18,7 +18,7 @@ "line": 2, "column": 19 }, - "filename": "keyframes.css" + "source": "keyframes.css" } }, { @@ -39,7 +39,7 @@ "line": 4, "column": 22 }, - "filename": "keyframes.css" + "source": "keyframes.css" } }, { @@ -55,7 +55,7 @@ "line": 5, "column": 15 }, - "filename": "keyframes.css" + "source": "keyframes.css" } } ], @@ -68,7 +68,7 @@ "line": 6, "column": 4 }, - "filename": "keyframes.css" + "source": "keyframes.css" } }, { @@ -83,7 +83,7 @@ "line": 8, "column": 17 }, - "filename": "keyframes.css" + "source": "keyframes.css" } }, { @@ -104,7 +104,7 @@ "line": 10, "column": 20 }, - "filename": "keyframes.css" + "source": "keyframes.css" } }, { @@ -120,7 +120,7 @@ "line": 11, "column": 15 }, - "filename": "keyframes.css" + "source": "keyframes.css" } } ], @@ -133,7 +133,7 @@ "line": 12, "column": 4 }, - "filename": "keyframes.css" + "source": "keyframes.css" } } ], @@ -146,7 +146,7 @@ "line": 13, "column": 2 }, - "filename": "keyframes.css" + "source": "keyframes.css" } } ] diff --git a/test/cases/keyframes.messed.json b/test/cases/keyframes.messed.json index 165b261..9c92591 100644 --- a/test/cases/keyframes.messed.json +++ b/test/cases/keyframes.messed.json @@ -25,7 +25,7 @@ "line": 2, "column": 14 }, - "filename": "keyframes.messed.css" + "source": "keyframes.messed.css" } } ], @@ -38,7 +38,7 @@ "line": 3, "column": 7 }, - "filename": "keyframes.messed.css" + "source": "keyframes.messed.css" } }, { @@ -60,7 +60,7 @@ "line": 6, "column": 16 }, - "filename": "keyframes.messed.css" + "source": "keyframes.messed.css" } } ], @@ -73,7 +73,7 @@ "line": 6, "column": 18 }, - "filename": "keyframes.messed.css" + "source": "keyframes.messed.css" } } ], @@ -86,7 +86,7 @@ "line": 6, "column": 19 }, - "filename": "keyframes.messed.css" + "source": "keyframes.messed.css" } } ] diff --git a/test/cases/keyframes.vendor.json b/test/cases/keyframes.vendor.json index b6c1f70..02def17 100644 --- a/test/cases/keyframes.vendor.json +++ b/test/cases/keyframes.vendor.json @@ -26,7 +26,7 @@ "line": 2, "column": 21 }, - "filename": "keyframes.vendor.css" + "source": "keyframes.vendor.css" } } ], @@ -39,7 +39,7 @@ "line": 2, "column": 22 }, - "filename": "keyframes.vendor.css" + "source": "keyframes.vendor.css" } }, { @@ -61,7 +61,7 @@ "line": 3, "column": 19 }, - "filename": "keyframes.vendor.css" + "source": "keyframes.vendor.css" } } ], @@ -74,7 +74,7 @@ "line": 3, "column": 20 }, - "filename": "keyframes.vendor.css" + "source": "keyframes.vendor.css" } } ], @@ -87,7 +87,7 @@ "line": 4, "column": 2 }, - "filename": "keyframes.vendor.css" + "source": "keyframes.vendor.css" } } ] diff --git a/test/cases/media.json b/test/cases/media.json index 379f840..8dabf65 100644 --- a/test/cases/media.json +++ b/test/cases/media.json @@ -18,7 +18,7 @@ "line": 2, "column": 19 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -39,7 +39,7 @@ "line": 4, "column": 22 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -55,7 +55,7 @@ "line": 5, "column": 24 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -71,7 +71,7 @@ "line": 6, "column": 16 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -84,7 +84,7 @@ "line": 7, "column": 4 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -99,7 +99,7 @@ "line": 9, "column": 19 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -120,7 +120,7 @@ "line": 11, "column": 22 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -136,7 +136,7 @@ "line": 12, "column": 20 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -152,7 +152,7 @@ "line": 13, "column": 19 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -165,7 +165,7 @@ "line": 14, "column": 4 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -178,7 +178,7 @@ "line": 15, "column": 2 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -204,7 +204,7 @@ "line": 19, "column": 21 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -220,7 +220,7 @@ "line": 20, "column": 16 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -233,7 +233,7 @@ "line": 21, "column": 4 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -255,7 +255,7 @@ "line": 23, "column": 17 }, - "filename": "media.css" + "source": "media.css" } }, { @@ -271,7 +271,7 @@ "line": 24, "column": 29 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -284,7 +284,7 @@ "line": 25, "column": 4 }, - "filename": "media.css" + "source": "media.css" } } ], @@ -297,7 +297,7 @@ "line": 26, "column": 2 }, - "filename": "media.css" + "source": "media.css" } } ] diff --git a/test/cases/media.messed.json b/test/cases/media.messed.json index e187e83..42757a6 100644 --- a/test/cases/media.messed.json +++ b/test/cases/media.messed.json @@ -25,7 +25,7 @@ "line": 4, "column": 20 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -41,7 +41,7 @@ "line": 5, "column": 15 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -54,7 +54,7 @@ "line": 6, "column": 4 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -76,7 +76,7 @@ "line": 10, "column": 20 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -92,7 +92,7 @@ "line": 11, "column": 19 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -105,7 +105,7 @@ "line": 14, "column": 2 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -118,7 +118,7 @@ "line": 15, "column": 4 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -144,7 +144,7 @@ "line": 20, "column": 31 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -160,7 +160,7 @@ "line": 21, "column": 26 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -173,7 +173,7 @@ "line": 22, "column": 16 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -195,7 +195,7 @@ "line": 24, "column": 27 }, - "filename": "media.messed.css" + "source": "media.messed.css" } }, { @@ -211,7 +211,7 @@ "line": 25, "column": 39 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -224,7 +224,7 @@ "line": 26, "column": 16 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ], @@ -237,7 +237,7 @@ "line": 27, "column": 2 }, - "filename": "media.messed.css" + "source": "media.messed.css" } } ] diff --git a/test/cases/messed-up.json b/test/cases/messed-up.json index 1c11189..6fa5739 100644 --- a/test/cases/messed-up.json +++ b/test/cases/messed-up.json @@ -21,7 +21,7 @@ "line": 3, "column": 9 }, - "filename": "messed-up.css" + "source": "messed-up.css" } } ], @@ -34,7 +34,7 @@ "line": 3, "column": 10 }, - "filename": "messed-up.css" + "source": "messed-up.css" } }, { @@ -56,7 +56,7 @@ "line": 5, "column": 16 }, - "filename": "messed-up.css" + "source": "messed-up.css" } }, { @@ -72,7 +72,7 @@ "line": 5, "column": 24 }, - "filename": "messed-up.css" + "source": "messed-up.css" } } ], @@ -85,7 +85,7 @@ "line": 5, "column": 25 }, - "filename": "messed-up.css" + "source": "messed-up.css" } }, { @@ -107,7 +107,7 @@ "line": 11, "column": 6 }, - "filename": "messed-up.css" + "source": "messed-up.css" } }, { @@ -123,7 +123,7 @@ "line": 15, "column": 6 }, - "filename": "messed-up.css" + "source": "messed-up.css" } } ], @@ -136,7 +136,7 @@ "line": 15, "column": 7 }, - "filename": "messed-up.css" + "source": "messed-up.css" } } ] diff --git a/test/cases/namespace.json b/test/cases/namespace.json index c1167cb..f6f4a12 100644 --- a/test/cases/namespace.json +++ b/test/cases/namespace.json @@ -14,7 +14,7 @@ "line": 1, "column": 43 }, - "filename": "namespace.css" + "source": "namespace.css" } }, { @@ -29,7 +29,7 @@ "line": 2, "column": 45 }, - "filename": "namespace.css" + "source": "namespace.css" } } ] diff --git a/test/cases/no-semi.json b/test/cases/no-semi.json index 5561201..5d313ea 100644 --- a/test/cases/no-semi.json +++ b/test/cases/no-semi.json @@ -21,7 +21,7 @@ "line": 3, "column": 13 }, - "filename": "no-semi.css" + "source": "no-semi.css" } }, { @@ -37,7 +37,7 @@ "line": 5, "column": 1 }, - "filename": "no-semi.css" + "source": "no-semi.css" } } ], @@ -50,7 +50,7 @@ "line": 5, "column": 2 }, - "filename": "no-semi.css" + "source": "no-semi.css" } } ] diff --git a/test/cases/paged-media.json b/test/cases/paged-media.json index d783257..77effee 100644 --- a/test/cases/paged-media.json +++ b/test/cases/paged-media.json @@ -14,7 +14,7 @@ "line": 1, "column": 16 }, - "filename": "paged-media.css" + "source": "paged-media.css" } }, { @@ -36,7 +36,7 @@ "line": 3, "column": 19 }, - "filename": "paged-media.css" + "source": "paged-media.css" } }, { @@ -52,7 +52,7 @@ "line": 4, "column": 15 }, - "filename": "paged-media.css" + "source": "paged-media.css" } } ], @@ -65,7 +65,7 @@ "line": 5, "column": 2 }, - "filename": "paged-media.css" + "source": "paged-media.css" } }, { @@ -85,7 +85,7 @@ "line": 8, "column": 18 }, - "filename": "paged-media.css" + "source": "paged-media.css" } } ], @@ -98,7 +98,7 @@ "line": 9, "column": 2 }, - "filename": "paged-media.css" + "source": "paged-media.css" } } ] diff --git a/test/cases/props.json b/test/cases/props.json index 63ccef3..a0fcaab 100644 --- a/test/cases/props.json +++ b/test/cases/props.json @@ -21,7 +21,7 @@ "line": 3, "column": 13 }, - "filename": "props.css" + "source": "props.css" } }, { @@ -37,7 +37,7 @@ "line": 4, "column": 32 }, - "filename": "props.css" + "source": "props.css" } }, { @@ -53,7 +53,7 @@ "line": 5, "column": 19 }, - "filename": "props.css" + "source": "props.css" } } ], @@ -66,7 +66,7 @@ "line": 6, "column": 2 }, - "filename": "props.css" + "source": "props.css" } } ] diff --git a/test/cases/quoted.json b/test/cases/quoted.json index 8a75d8f..7092353 100644 --- a/test/cases/quoted.json +++ b/test/cases/quoted.json @@ -21,7 +21,7 @@ "line": 2, "column": 55 }, - "filename": "quoted.css" + "source": "quoted.css" } } ], @@ -34,7 +34,7 @@ "line": 3, "column": 2 }, - "filename": "quoted.css" + "source": "quoted.css" } } ] diff --git a/test/cases/rule.json b/test/cases/rule.json index e64bc47..0af5c6f 100644 --- a/test/cases/rule.json +++ b/test/cases/rule.json @@ -21,7 +21,7 @@ "line": 2, "column": 13 }, - "filename": "rule.css" + "source": "rule.css" } } ], @@ -34,7 +34,7 @@ "line": 3, "column": 2 }, - "filename": "rule.css" + "source": "rule.css" } } ] diff --git a/test/cases/rules.json b/test/cases/rules.json index 624faa4..9fda096 100644 --- a/test/cases/rules.json +++ b/test/cases/rules.json @@ -21,7 +21,7 @@ "line": 2, "column": 15 }, - "filename": "rules.css" + "source": "rules.css" } } ], @@ -34,7 +34,7 @@ "line": 3, "column": 2 }, - "filename": "rules.css" + "source": "rules.css" } }, { @@ -56,7 +56,7 @@ "line": 5, "column": 15 }, - "filename": "rules.css" + "source": "rules.css" } } ], @@ -69,7 +69,7 @@ "line": 6, "column": 2 }, - "filename": "rules.css" + "source": "rules.css" } } ] diff --git a/test/cases/supports.json b/test/cases/supports.json index 7e61f06..065a7ce 100644 --- a/test/cases/supports.json +++ b/test/cases/supports.json @@ -18,7 +18,7 @@ "line": 2, "column": 19 }, - "filename": "supports.css" + "source": "supports.css" } }, { @@ -39,7 +39,7 @@ "line": 4, "column": 22 }, - "filename": "supports.css" + "source": "supports.css" } }, { @@ -55,7 +55,7 @@ "line": 5, "column": 17 }, - "filename": "supports.css" + "source": "supports.css" } }, { @@ -71,7 +71,7 @@ "line": 6, "column": 18 }, - "filename": "supports.css" + "source": "supports.css" } } ], @@ -84,7 +84,7 @@ "line": 7, "column": 4 }, - "filename": "supports.css" + "source": "supports.css" } } ], @@ -97,7 +97,7 @@ "line": 8, "column": 2 }, - "filename": "supports.css" + "source": "supports.css" } } ] diff --git a/test/cases/wtf.json b/test/cases/wtf.json index 586082a..df6233d 100644 --- a/test/cases/wtf.json +++ b/test/cases/wtf.json @@ -21,7 +21,7 @@ "line": 2, "column": 22 }, - "filename": "wtf.css" + "source": "wtf.css" } }, { @@ -37,7 +37,7 @@ "line": 3, "column": 22 }, - "filename": "wtf.css" + "source": "wtf.css" } }, { @@ -53,7 +53,7 @@ "line": 4, "column": 16 }, - "filename": "wtf.css" + "source": "wtf.css" } } ], @@ -66,7 +66,7 @@ "line": 5, "column": 2 }, - "filename": "wtf.css" + "source": "wtf.css" } } ] diff --git a/test/css-parse.js b/test/css-parse.js index 1e22712..8a8e29f 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -17,7 +17,7 @@ describe('parse(str)', function(){ it('should parse ' + file, function(){ var css = read(path.join('test', 'cases', file + '.css'), 'utf8'); var json = read(path.join('test', 'cases', file + '.json'), 'utf8'); - var ret = parse(css, { filename: file + '.css' }); + var ret = parse(css, { source: file + '.css' }); ret = JSON.stringify(ret, null, 2); ret.should.equal(json); }) From 214ebda48b7d0a3c3006ab2d13d87ccbd9cb9ffa Mon Sep 17 00:00:00 2001 From: Conrad Zimmerman Date: Thu, 6 Mar 2014 12:04:52 -0500 Subject: [PATCH 04/23] Get tests working again --- test/cases/comment.in.json | 6 +++--- test/css-parse.js | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/test/cases/comment.in.json b/test/cases/comment.in.json index ff58973..6dd1785 100644 --- a/test/cases/comment.in.json +++ b/test/cases/comment.in.json @@ -21,7 +21,7 @@ "line": 2, "column": 20 }, - "filename": "comment.in.css" + "source": "comment.in.css" } }, { @@ -37,7 +37,7 @@ "line": 3, "column": 51 }, - "filename": "comment.in.css" + "source": "comment.in.css" } } ], @@ -50,7 +50,7 @@ "line": 4, "column": 2 }, - "filename": "comment.in.css" + "source": "comment.in.css" } } ] diff --git a/test/css-parse.js b/test/css-parse.js index 8a8e29f..042f26e 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -26,14 +26,13 @@ describe('parse(str)', function(){ it('should save the filename and source', function(){ var css = 'booty {\n size: large;\n}\n'; var ast = parse(css, { - filename: 'booty.css' + source: 'booty.css' }); var position = ast.stylesheet.rules[0].position position.start.should.be.ok; position.end.should.be.ok; - position.filename.should.equal('booty.css'); - position.source.should.equal(css); + position.source.should.equal('booty.css'); }); it('should throw when a selector is missing', function(){ From 759dc565f1ca4a6b110a3775cd7e5128cff0f4a8 Mon Sep 17 00:00:00 2001 From: Conrad Zimmerman Date: Thu, 6 Mar 2014 13:25:23 -0500 Subject: [PATCH 05/23] Update readme --- Readme.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Readme.md b/Readme.md index ecc83e1..44aa46b 100644 --- a/Readme.md +++ b/Readme.md @@ -30,7 +30,7 @@ console.log(JSON.stringify(output_obj, null, 2)); `options`: -- `filename` - recommended for debugging. +- `source` - recommended for debugging. - `position` - `true` by default. ### Errors @@ -39,8 +39,7 @@ Errors will have `err.position` where `position` is: - `start` - start line and column numbers - `end` - end line and column numbers -- `filename` - filename if passed to options -- `source` - source CSS string +- `source` - `options.source` if passed to options If you create any errors in plugins such as in [rework](https://github.com/reworkcss/rework), you __must__ set the `position` as well for consistency. From a7a0f7c442971c4e6740a82bb41c0381c1d6039a Mon Sep 17 00:00:00 2001 From: Conrad Zimmerman Date: Fri, 7 Mar 2014 07:48:18 -0500 Subject: [PATCH 06/23] Add node.position.content containing source string --- History.md | 1 + Readme.md | 5 +++-- index.js | 23 +++++++++++++++++------ test/css-parse.js | 1 + 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/History.md b/History.md index fd8f535..23a654e 100644 --- a/History.md +++ b/History.md @@ -4,6 +4,7 @@ * changed default `options.position` value to `true` * remove comments from properties and values * asserts when selectors are missing + * added `node.position.content` property 1.7.0 / 2013-12-21 ================== diff --git a/Readme.md b/Readme.md index 44aa46b..07c1068 100644 --- a/Readme.md +++ b/Readme.md @@ -144,8 +144,9 @@ parse tree with `.position` enabled: } ``` -If you also pass in `source: 'path/to/original.css'`, that will be set -on `node.position.source`. +`node.position.content` is set on each node to the full source string. If you +also pass in `source: 'path/to/original.css'`, that will be set on +`node.position.source`. ## Performance diff --git a/index.js b/index.js index 7d80ee5..a57f156 100644 --- a/index.js +++ b/index.js @@ -33,17 +33,28 @@ module.exports = function(css, options){ if (!options.position) return positionNoop; return function(node){ - node.position = { - start: start, - end: { line: lineno, column: column }, - source: options.source - }; - + node.position = new Position(start); whitespace(); return node; }; } + /** + * Store position information for a node + */ + + function Position(start) { + this.start = start; + this.end = { line: lineno, column: column }; + this.source = options.source; + } + + /** + * Non-enumerable source string + */ + + Position.prototype.content = css; + /** * Return `node`. */ diff --git a/test/css-parse.js b/test/css-parse.js index 042f26e..81312b1 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -33,6 +33,7 @@ describe('parse(str)', function(){ position.start.should.be.ok; position.end.should.be.ok; position.source.should.equal('booty.css'); + position.content.should.equal(css); }); it('should throw when a selector is missing', function(){ From 3f1f9fea1611dbe2e70d118e940ad823a05cb552 Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Wed, 12 Mar 2014 12:50:02 -0400 Subject: [PATCH 07/23] Add support for @font-face, which should not be considered a selector This change parses `@font-face` rules as an at-rule, instead of treating them as a standard rule with `@font-face` being the selector. --- index.js | 32 +++++++++++++- test/cases/font-face.css | 8 ++++ test/cases/font-face.json | 90 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 test/cases/font-face.css create mode 100644 test/cases/font-face.json diff --git a/index.js b/index.js index a57f156..b950bb8 100644 --- a/index.js +++ b/index.js @@ -189,7 +189,7 @@ module.exports = function(css, options){ function selector() { var m = match(/^([^{]+)/); if (!m) return; - /* @fix Remove all comments from selectors + /* @fix Remove all comments from selectors * http://ostermiller.org/findcomment.html */ return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').split(/\s*,\s*/); } @@ -430,6 +430,33 @@ module.exports = function(css, options){ }); } + /** + * Parse font-face. + */ + + function atfontface() { + var pos = position(); + var m = match(/^@font-face */); + if (!m) return; + + if (!open()) return error("@font-face missing '{'"); + var decls = comments(); + + // declarations + var decl; + while (decl = declaration()) { + decls.push(decl); + decls = decls.concat(comments()); + } + + if (!close()) return error("@font-face missing '}'"); + + return pos({ + type: 'font-face', + declarations: decls + }); + } + /** * Parse import */ @@ -480,7 +507,8 @@ module.exports = function(css, options){ || atnamespace() || atdocument() || atpage() - || athost(); + || athost() + || atfontface(); } /** diff --git a/test/cases/font-face.css b/test/cases/font-face.css new file mode 100644 index 0000000..0ca66db --- /dev/null +++ b/test/cases/font-face.css @@ -0,0 +1,8 @@ +@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} \ No newline at end of file diff --git a/test/cases/font-face.json b/test/cases/font-face.json new file mode 100644 index 0000000..fea467c --- /dev/null +++ b/test/cases/font-face.json @@ -0,0 +1,90 @@ +{ + "type": "stylesheet", + "stylesheet": { + "rules": [ + { + "type": "font-face", + "declarations": [ + { + "type": "declaration", + "property": "font-family", + "value": "\"Bitstream Vera Serif Bold\"", + "position": { + "start": { + "line": 2, + "column": 3 + }, + "end": { + "line": 2, + "column": 43 + }, + "source": "font-face.css" + } + }, + { + "type": "declaration", + "property": "src", + "value": "url(\"http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf\")", + "position": { + "start": { + "line": 3, + "column": 3 + }, + "end": { + "line": 3, + "column": 78 + }, + "source": "font-face.css" + } + } + ], + "position": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 4, + "column": 2 + }, + "source": "font-face.css" + } + }, + { + "type": "rule", + "selectors": [ + "body" + ], + "declarations": [ + { + "type": "declaration", + "property": "font-family", + "value": "\"Bitstream Vera Serif Bold\", serif", + "position": { + "start": { + "line": 7, + "column": 3 + }, + "end": { + "line": 7, + "column": 50 + }, + "source": "font-face.css" + } + } + ], + "position": { + "start": { + "line": 6, + "column": 1 + }, + "end": { + "line": 8, + "column": 2 + }, + "source": "font-face.css" + } + } + ] + } +} \ No newline at end of file From d049ce902942b989e3c5a016b4b9b4f1b5ca2911 Mon Sep 17 00:00:00 2001 From: suisho Date: Mon, 31 Mar 2014 03:18:33 +0900 Subject: [PATCH 08/23] fix backslash hack parse error --- index.js | 2 +- test/cases/comment.in.css | 3 ++- test/cases/comment.in.json | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index b950bb8..afa189a 100644 --- a/index.js +++ b/index.js @@ -202,7 +202,7 @@ module.exports = function(css, options){ var pos = position(); // prop - var prop = match(/^(\*?[-#\/\*\w]+(\[[0-9a-z_-]+\])?)\s*/); + var prop = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/); if (!prop) return; prop = trim(prop[0]); diff --git a/test/cases/comment.in.css b/test/cases/comment.in.css index f45a0d7..3b8aa99 100644 --- a/test/cases/comment.in.css +++ b/test/cases/comment.in.css @@ -1,4 +1,5 @@ a { color/**/: 12px; padding/*4815162342*/: 1px /**/ 2px /*13*/ 3px; -} \ No newline at end of file + border/*\**/: solid; border-top/*\**/: none\9; +} diff --git a/test/cases/comment.in.json b/test/cases/comment.in.json index 6dd1785..b035ad3 100644 --- a/test/cases/comment.in.json +++ b/test/cases/comment.in.json @@ -39,6 +39,38 @@ }, "source": "comment.in.css" } + }, + { + "type": "declaration", + "property": "border", + "value": "solid", + "position": { + "start": { + "line": 4, + "column": 5 + }, + "end": { + "line": 4, + "column": 24 + }, + "source": "comment.in.css" + } + }, + { + "type": "declaration", + "property": "border-top", + "value": "none\\9", + "position": { + "start": { + "line": 4, + "column": 26 + }, + "end": { + "line": 4, + "column": 50 + }, + "source": "comment.in.css" + } } ], "position": { @@ -47,7 +79,7 @@ "column": 1 }, "end": { - "line": 4, + "line": 5, "column": 2 }, "source": "comment.in.css" From b00ff747385ae03e8babd1b19dcd3b948c38f91f Mon Sep 17 00:00:00 2001 From: marcelduran Date: Thu, 17 Apr 2014 15:22:13 -0700 Subject: [PATCH 09/23] fixed selector parser to parse attribute selectors with/without comma properly --- index.js | 10 +- test/cases/comma-attribute.css | 39 ++++++ test/cases/comma-attribute.json | 202 ++++++++++++++++++++++++++++++++ 3 files changed, 250 insertions(+), 1 deletion(-) create mode 100644 test/cases/comma-attribute.css create mode 100644 test/cases/comma-attribute.json diff --git a/index.js b/index.js index b950bb8..4a52f42 100644 --- a/index.js +++ b/index.js @@ -191,7 +191,15 @@ module.exports = function(css, options){ if (!m) return; /* @fix Remove all comments from selectors * http://ostermiller.org/findcomment.html */ - return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').split(/\s*,\s*/); + return trim(m[0]) + .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '') + .replace(/(?:"[^"]*"|'[^']*')/g, function(m) { + return m.replace(/,/g, '\u200C'); + }) + .split(/\s*,\s*/) + .map(function(s) { + return s.replace(/\u200C/g, ','); + }); } /** diff --git a/test/cases/comma-attribute.css b/test/cases/comma-attribute.css new file mode 100644 index 0000000..c45d32e --- /dev/null +++ b/test/cases/comma-attribute.css @@ -0,0 +1,39 @@ +.foo[bar="baz,quz"] { + foobar: 123; +} + +.bar, +#bar[baz="qux,foo"], +#qux { + foobar: 456; +} + +.baz[qux=",foo"], +.baz[qux="foo,"], +.baz[qux="foo,bar,baz"], +.baz[qux=",foo,bar,baz,"], +.baz[qux=" , foo , bar , baz , "] { + foobar: 789; +} + +.qux[foo='bar,baz'], +.qux[bar="baz,foo"], +#qux[foo="foobar"], +#qux[foo=',bar,baz, '] { + foobar: 012; +} + +#foo[foo=""], +#foo[bar=" "], +#foo[bar=","], +#foo[bar=", "], +#foo[bar=" ,"], +#foo[bar=" , "], +#foo[baz=''], +#foo[qux=' '], +#foo[qux=','], +#foo[qux=', '], +#foo[qux=' ,'], +#foo[qux=' , '] { + foobar: 345; +} diff --git a/test/cases/comma-attribute.json b/test/cases/comma-attribute.json new file mode 100644 index 0000000..530b254 --- /dev/null +++ b/test/cases/comma-attribute.json @@ -0,0 +1,202 @@ +{ + "type": "stylesheet", + "stylesheet": { + "rules": [ + { + "type": "rule", + "selectors": [ + ".foo[bar=\"baz,quz\"]" + ], + "declarations": [ + { + "type": "declaration", + "property": "foobar", + "value": "123", + "position": { + "start": { + "line": 2, + "column": 3 + }, + "end": { + "line": 2, + "column": 14 + }, + "source": "comma-attribute.css" + } + } + ], + "position": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 3, + "column": 2 + }, + "source": "comma-attribute.css" + } + }, + { + "type": "rule", + "selectors": [ + ".bar", + "#bar[baz=\"qux,foo\"]", + "#qux" + ], + "declarations": [ + { + "type": "declaration", + "property": "foobar", + "value": "456", + "position": { + "start": { + "line": 8, + "column": 3 + }, + "end": { + "line": 8, + "column": 14 + }, + "source": "comma-attribute.css" + } + } + ], + "position": { + "start": { + "line": 5, + "column": 1 + }, + "end": { + "line": 9, + "column": 2 + }, + "source": "comma-attribute.css" + } + }, + { + "type": "rule", + "selectors": [ + ".baz[qux=\",foo\"]", + ".baz[qux=\"foo,\"]", + ".baz[qux=\"foo,bar,baz\"]", + ".baz[qux=\",foo,bar,baz,\"]", + ".baz[qux=\" , foo , bar , baz , \"]" + ], + "declarations": [ + { + "type": "declaration", + "property": "foobar", + "value": "789", + "position": { + "start": { + "line": 16, + "column": 3 + }, + "end": { + "line": 16, + "column": 14 + }, + "source": "comma-attribute.css" + } + } + ], + "position": { + "start": { + "line": 11, + "column": 1 + }, + "end": { + "line": 17, + "column": 2 + }, + "source": "comma-attribute.css" + } + }, + { + "type": "rule", + "selectors": [ + ".qux[foo='bar,baz']", + ".qux[bar=\"baz,foo\"]", + "#qux[foo=\"foobar\"]", + "#qux[foo=',bar,baz, ']" + ], + "declarations": [ + { + "type": "declaration", + "property": "foobar", + "value": "012", + "position": { + "start": { + "line": 23, + "column": 3 + }, + "end": { + "line": 23, + "column": 14 + }, + "source": "comma-attribute.css" + } + } + ], + "position": { + "start": { + "line": 19, + "column": 1 + }, + "end": { + "line": 24, + "column": 2 + }, + "source": "comma-attribute.css" + } + }, + { + "type": "rule", + "selectors": [ + "#foo[foo=\"\"]", + "#foo[bar=\" \"]", + "#foo[bar=\",\"]", + "#foo[bar=\", \"]", + "#foo[bar=\" ,\"]", + "#foo[bar=\" , \"]", + "#foo[baz='']", + "#foo[qux=' ']", + "#foo[qux=',']", + "#foo[qux=', ']", + "#foo[qux=' ,']", + "#foo[qux=' , ']" + ], + "declarations": [ + { + "type": "declaration", + "property": "foobar", + "value": "345", + "position": { + "start": { + "line": 38, + "column": 3 + }, + "end": { + "line": 38, + "column": 14 + }, + "source": "comma-attribute.css" + } + } + ], + "position": { + "start": { + "line": 26, + "column": 1 + }, + "end": { + "line": 39, + "column": 2 + }, + "source": "comma-attribute.css" + } + } + ] + } +} \ No newline at end of file From aa83a037a51cd9a27b4202e9dcec4012326e8417 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Lal?= Date: Fri, 2 May 2014 18:51:43 +0200 Subject: [PATCH 10/23] Replace benchmark css files by files from projects with known licenses --- benchmark/LICENSES | 30 + benchmark/large.css | 19396 +++++++++++++++++++++++++++++++----------- benchmark/small.css | 498 +- 3 files changed, 14786 insertions(+), 5138 deletions(-) create mode 100644 benchmark/LICENSES diff --git a/benchmark/LICENSES b/benchmark/LICENSES new file mode 100644 index 0000000..a81e97d --- /dev/null +++ b/benchmark/LICENSES @@ -0,0 +1,30 @@ +File: large.css +Copyright: 2013 Contributors +License: MIT +Origin: https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/0.16.1/build/packaged/css/semantic.css + +File: small.css +Copyright: Nicolas Gallagher and Jonathan Neal +License: MIT +Origin: https://raw.githubusercontent.com/necolas/normalize.css/3.0.1/normalize.css + + +License: MIT + Permission is hereby granted, free of charge, to any person obtaining a + copy of this software and associated documentation files (the + 'Software'), to deal in the Software without restriction, including + without limitation the rights to use, copy, modify, merge, publish, + distribute, sublicense, and/or sell copies of the Software, and to + permit persons to whom the Software is furnished to do so, subject to + the following conditions: + + The above copyright notice and this permission notice shall be included + in all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS + OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF + MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. + IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY + CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, + TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE + SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/benchmark/large.css b/benchmark/large.css index c667ec3..d84725f 100644 --- a/benchmark/large.css +++ b/benchmark/large.css @@ -1,5713 +1,15135 @@ - -#dialog { - position: fixed; - left: 50%; - top: 150px; - max-width: 600px; - min-width: 250px; - border: 1px solid #eee; - background: white; - z-index: 1000; +/* + * # Semantic - Breadcrumb + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Breadcrumb +*******************************/ +.ui.breadcrumb { + margin: 1em 0em; + display: inline-block; + vertical-align: middle; } - -#dialog .content { - padding: 15px 20px; +.ui.breadcrumb:first-child { + margin-top: 0em; } - -#dialog h1 { - margin: 0 0 5px 0; - font-size: 16px; - font-weight: normal; +.ui.breadcrumb:last-child { + margin-bottom: 0em; } - -#dialog p { - margin: 0; - padding: 0; - font-size: .9em; +/******************************* + Content +*******************************/ +.ui.breadcrumb .divider { + display: inline-block; + opacity: 0.5; + margin: 0em 0.15em 0em; + font-size: 1em; + color: rgba(0, 0, 0, 0.3); } - -/* close */ - -#dialog .close { - position: absolute; - top: 3px; - right: 10px; - text-decoration: none; - color: #888; - font-size: 16px; - font-weight: bold; - display: none; +.ui.breadcrumb a.section { + cursor: pointer; } - -#dialog .close em { - display: none; +.ui.breadcrumb .section { + display: inline-block; + margin: 0em; + padding: 0em; } - -#dialog.closable .close { - display: block; +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: 0.5em 1em; } - -#dialog .close:hover { - color: black; +/******************************* + States +*******************************/ +.ui.breadcrumb .active.section { + font-weight: bold; } - -#dialog .close:active { - margin-top: 1px; +/******************************* + Variations +*******************************/ +.ui.small.breadcrumb { + font-size: 0.75em; } - -/* slide */ - -#dialog.slide { - -webkit-transition: opacity 300ms, top 300ms; - -moz-transition: opacity 300ms, top 300ms; +.ui.large.breadcrumb { + font-size: 1.1em; } - -#dialog.slide.hide { - opacity: 0; - top: -500px; +.ui.huge.breadcrumb { + font-size: 1.3em; } -/* fade */ - -#dialog.fade { - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; +/* + * # Semantic - Form + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Form +---------------------*/ +.ui.form { + position: relative; + max-width: 100%; } - -#dialog.fade.hide { - opacity: 0; +.ui.form :first-child { + margin-top: 0em; } - -/* scale */ - -#dialog.scale { - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -moz-transform 300ms; - -webkit-transform: scale(1); - -moz-transform: scale(1); +.ui.form :last-child { + margin-bottom: 0em; } - -#dialog.scale.hide { - -webkit-transform: scale(0); - -moz-transform: scale(0); +/*-------------------- + Content +---------------------*/ +.ui.form > p { + margin: 1em 0; } -#overlay { - position: fixed; - top: 0; - left: 0; - opacity: 1; - width: 100%; - height: 100%; - background: rgba(0,0,0,.75); - transition: opacity 300ms; - z-index: 500; +/*-------------------- + Field +---------------------*/ +.ui.form .field { + clear: both; + margin: 0em 0em 1em; } - -#overlay.hide { - pointer-events: none; - opacity: 0; +/*-------------------- + Labels +---------------------*/ +.ui.form .field > label { + margin: 0em 0em 0.3em; + display: block; + color: #555555; + font-size: 0.875em; +} +/*-------------------- + Standard Inputs +---------------------*/ +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="url"], +.ui.form input[type="tel"], +.ui.form .ui.input { + width: 100%; } - -#notifications { - position: fixed; - top: 10px; - right: 15px; +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="url"], +.ui.form input[type="tel"] { + margin: 0em; + padding: 0.65em 1em; + font-size: 1em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } - -#notifications li { - margin-bottom: 5px; - list-style: none; +.ui.textarea, +.ui.form textarea { + line-height: 1.33; + min-height: 8em; + height: 12em; + max-height: 24em; + resize: vertical; } - -.notification { - position: relative; - max-width: 600px; - min-width: 250px; - border: 1px solid #eee; - background: white; - z-index: 100; +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; } - -.notification .content { - padding: 15px 20px; +/*-------------------- + Dividers +---------------------*/ +.ui.form .divider { + clear: both; + margin: 1em 0em; +} +/*-------------------- + Types of Messages +---------------------*/ +.ui.form .info.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; } - -.notification .title { - margin: 0 0 5px 0; - font-size: 16px; - font-weight: normal; +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; } - -.notification p { - margin: 0; - padding: 0; - font-size: .9em; +/*-------------------- + Validation Prompt +---------------------*/ +.ui.form .field .prompt.label { + white-space: nowrap; } - -.notification .close { - position: absolute; - top: 5px; - right: 10px; - text-decoration: none; - color: #888; - display: none; +.ui.form .inline.field .prompt { + margin-top: 0em; + margin-left: 1em; } - -.notification.closable .close { +.ui.form .inline.field .prompt:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/******************************* + States +*******************************/ +/*-------------------- + Focus +---------------------*/ +.ui.form input[type="text"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="url"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.85); + border-color: rgba(0, 0, 0, 0.2); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; + box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; +} +/*-------------------- + Error +---------------------*/ +/* On Form */ +.ui.form.warning .warning.message { display: block; } - -.notification .close:hover { - color: black; +/*-------------------- + Warning +---------------------*/ +/* On Form */ +.ui.form.error .error.message { + display: block; } - -.notification .close:active { - margin-top: 1px; +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: #D95C5C; +} +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: #D95C5C; + color: #FFFFFF; +} +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="url"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .field.error textarea, +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="url"], +.ui.form .field.error input[type="tel"] { + background-color: #FFFAFA; + border-color: #E7BEBE; + border-left: none; + color: #D95C5C; + padding-left: 1.2em; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + box-shadow: 0.3em 0em 0em 0em #D95C5C inset; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="url"]:focus, +.ui.form .field.error input[type="tel"]:focus { + border-color: #ff5050; + color: #ff5050; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + box-shadow: 0.3em 0em 0em 0em #FF5050 inset; +} +/*---------------------------- + Dropdown Selection Warning +-----------------------------*/ +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .item { + background-color: #FFFAFA; + color: #D95C5C; +} +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; + box-shadow: 0px 0px 0px 1px #E7BEBE !important; +} +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; + box-shadow: 0px 0px 0px 1px #E7BEBE !important; +} +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE; + box-shadow: 0px 1px 0px 1px #E7BEBE; +} +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: #FFF2F2; +} +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: #FDCFCF !important; +} +/*-------------------- + Empty (Placeholder) +---------------------*/ +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.form ::-moz-placeholder { + color: #AAAAAA; +} +.ui.form :focus::-webkit-input-placeholder { + color: #999999; +} +.ui.form :focus::-moz-placeholder { + color: #999999; +} +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.form .error :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/*-------------------- + Disabled +---------------------*/ +.ui.form .field :disabled, +.ui.form .field.disabled { + opacity: 0.5; } - -/* close */ - -.notification .close { - position: absolute; - top: 3px; - right: 10px; - text-decoration: none; - color: #888; - font-size: 16px; - font-weight: bold; - display: none; +.ui.form .field.disabled label { + opacity: 0.5; } - -/* slide */ - -.notification.slide { - -webkit-transition: opacity 300ms, top 300ms; - -moz-transition: opacity 300ms, top 300ms; +.ui.form .field.disabled :disabled { + opacity: 1; } - -.notification.slide.hide { - opacity: 0; - top: -500px; +/*-------------------- + Loading State +---------------------*/ +/* On Form */ +.ui.form.loading { + position: relative; } - -/* fade */ - -.notification.fade { - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; +.ui.form.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; + visibility: visible; } - -.notification.fade.hide { - opacity: 0; +/******************************* + Variations +*******************************/ +/*-------------------- + Fluid Width +---------------------*/ +.ui.form.fluid { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } - -/* scale */ - -.notification.scale { - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -moz-transform 300ms; - -webkit-transform: scale(1); - -moz-transform: scale(1); +/*-------------------------- + Input w/ attached Button +---------------------------*/ +.ui.form input.attached { + width: auto; } - -.notification.scale.hide { - -webkit-transform: scale(0); - -moz-transform: scale(0); +/*-------------------- + Date Input +---------------------*/ +.ui.form .date.field > label { + position: relative; } -.touch { +.ui.form .date.field > label:after { position: absolute; - z-index: 1000000; + top: 2em; + right: 0.5em; + font-family: 'Icons'; + content: '\f133'; + font-size: 1.2em; + font-weight: normal; + color: #CCCCCC; +} +/*-------------------- + Inverted Colors +---------------------*/ +.ui.inverted.form label { + color: #FFFFFF; +} +.ui.inverted.form .field.error textarea, +.ui.inverted.form .field.error input[type="text"], +.ui.inverted.form .field.error input[type="email"], +.ui.inverted.form .field.error input[type="date"], +.ui.inverted.form .field.error input[type="password"], +.ui.inverted.form .field.error input[type="number"], +.ui.inverted.form .field.error input[type="url"], +.ui.inverted.form .field.error input[type="tel"] { + background-color: #FFCCCC; +} +.ui.inverted.form .ui.checkbox label { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.form .ui.checkbox label:hover, +.ui.inverted.form .ui.checkbox .box:hover { + color: #FFFFFF; +} +/*-------------------- + Field Groups +---------------------*/ +/* Grouped Vertically */ +.ui.form .grouped.fields { + margin: 0em 0em 1em; +} +.ui.form .grouped.fields .field { display: block; - width: 50px; - height: 50px; - margin-top: -25px; - margin-left: -25px; - background: #a0a0a0; - border: 1px solid #d9d9d9; - opacity: .45; - -webkit-border-radius: 50px; + float: none; + margin: 0.5em 0em; + padding: 0em; +} +/*-------------------- + Fields +---------------------*/ +/* Split fields */ +.ui.form .fields { + clear: both; } - -/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ - -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ - -/* - * Corrects block display not defined in IE6/7/8/9 & FF3 - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; +.ui.form .fields:after { + content: ' '; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; } - -/* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 - */ - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; +.ui.form .fields > .field { + clear: none; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } - -/* - * Prevents modern browsers from displaying 'audio' without controls - * Remove excess height in iOS5 devices - */ - -audio:not([controls]) { - display: none; - height: 0; +.ui.form .fields > .field:first-child { + border-left: none; + -webkit-box-shadow: none; + box-shadow: none; } - -/* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support - */ - -[hidden] { - display: none; +/* Other Combinations */ +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: 25%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: 20%; + padding-left: 1%; + padding-right: 1%; } - - -/* ============================================================================= - Base - ========================================================================== */ - -/* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ - */ - -html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ +.ui.form .fields .field:first-child { + padding-left: 0%; } - -/* - * Addresses font-family inconsistency between 'textarea' and other form elements. - */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; +.ui.form .fields .field:last-child { + padding-right: 0%; } - -/* - * Addresses margins handled incorrectly in IE6/7 - */ - -body { - margin: 0; +/* Fields grid support */ +.ui.form .fields .wide.field { + width: 6.25%; + padding-left: 1%; + padding-right: 1%; } - - -/* ============================================================================= - Links - ========================================================================== */ - -/* - * Addresses outline displayed oddly in Chrome - */ - -a:focus { - outline: thin dotted; +.ui.form .fields .wide.field:first-child { + padding-left: 0%; } - -/* - * Improves readability when focused and also mouse hovered in all browsers - * people.opera.com/patrickl/experiments/keyboard/test - */ - -a:hover, -a:active { - outline: 0; +.ui.form .fields .wide.field:last-child { + padding-right: 0%; } - - -/* ============================================================================= - Typography - ========================================================================== */ - -/* - * Addresses font sizes and margins set differently in IE6/7 - * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; +.ui.form .fields > .one.wide.field { + width: 6.25%; } - -h2 { - font-size: 1.5em; - margin: 0.83em 0; +.ui.form .fields > .two.wide.field { + width: 12.5%; } - -h3 { - font-size: 1.17em; - margin: 1em 0; +.ui.form .fields > .three.wide.field { + width: 18.75%; } - -h4 { - font-size: 1em; - margin: 1.33em 0; +.ui.form .fields > .four.wide.field { + width: 25%; } - -h5 { - font-size: 0.83em; - margin: 1.67em 0; +.ui.form .fields > .five.wide.field { + width: 31.25%; } - -h6 { - font-size: 0.75em; - margin: 2.33em 0; +.ui.form .fields > .six.wide.field { + width: 37.5%; } - -/* - * Addresses styling not present in IE7/8/9, S5, Chrome - */ - -abbr[title] { - border-bottom: 1px dotted; +.ui.form .fields > .seven.wide.field { + width: 43.75%; } - -/* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ - -b, -strong { - font-weight: bold; +.ui.form .fields > .eight.wide.field { + width: 50%; } - -blockquote { - margin: 1em 40px; +.ui.form .fields > .nine.wide.field { + width: 56.25%; } - -/* - * Addresses styling not present in S5, Chrome - */ - -dfn { - font-style: italic; +.ui.form .fields > .ten.wide.field { + width: 62.5%; } - -/* - * Addresses styling not present in IE6/7/8/9 - */ - -mark { - background: #ff0; - color: #000; +.ui.form .fields > .eleven.wide.field { + width: 68.75%; } - -/* - * Addresses margins set differently in IE6/7 - */ - -p, -pre { - margin: 1em 0; +.ui.form .fields > .twelve.wide.field { + width: 75%; } - -/* - * Corrects font family set oddly in IE6, S4/5, Chrome - * en.wikipedia.org/wiki/User:Davidgothberg/Test59 - */ - -pre, -code, -kbd, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; +.ui.form .fields > .thirteen.wide.field { + width: 81.25%; } - -/* - * Improves readability of pre-formatted text in all browsers - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; +.ui.form .fields > .fourteen.wide.field { + width: 87.5%; } - -/* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 - */ - -/* 1 */ - -q { - quotes: none; +.ui.form .fields > .fifteen.wide.field { + width: 93.75%; } - -/* 2 */ - -q:before, -q:after { - content: ''; - content: none; +.ui.form .fields > .sixteen.wide.field { + width: 100%; } - -small { - font-size: 75%; +/* Swap to full width on mobile */ +@media only screen and (max-width: 767px) { + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .fields > .two.wide.field, + .ui.form .fields > .three.wide.field, + .ui.form .fields > .four.wide.field, + .ui.form .fields > .five.wide.field, + .ui.form .fields > .six.wide.field, + .ui.form .fields > .seven.wide.field, + .ui.form .fields > .eight.wide.field, + .ui.form .fields > .nine.wide.field, + .ui.form .fields > .ten.wide.field, + .ui.form .fields > .eleven.wide.field, + .ui.form .fields > .twelve.wide.field, + .ui.form .fields > .thirteen.wide.field, + .ui.form .fields > .fourteen.wide.field, + .ui.form .fields > .fifteen.wide.field, + .ui.form .fields > .sixteen.wide.field { + width: 100%; + padding-left: 0%; + padding-right: 0%; + } +} +/*-------------------- + Inline Fields +---------------------*/ +.ui.form .inline.fields .field { + min-height: 1.3em; + margin-right: 0.5em; +} +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.fields .field > input, +.ui.form .inline.field > label, +.ui.form .inline.field > p, +.ui.form .inline.field > input { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; + font-size: 1em; +} +.ui.form .inline.fields .field > input, +.ui.form .inline.field > input { + font-size: 0.875em; +} +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em 0.5em 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} +/*-------------------- + Sizes +---------------------*/ +/* Standard */ +.ui.small.form { + font-size: 0.875em; +} +.ui.small.form textarea, +.ui.small.form input[type="text"], +.ui.small.form input[type="email"], +.ui.small.form input[type="date"], +.ui.small.form input[type="password"], +.ui.small.form input[type="number"], +.ui.small.form input[type="url"], +.ui.small.form input[type="tel"], +.ui.small.form label { + font-size: 1em; +} +/* Large */ +.ui.large.form { + font-size: 1.125em; } /* - * Prevents sub and sup affecting line-height in all browsers - * gist.github.com/413930 + * # Semantic - Grid + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +/******************************* + Grid +*******************************/ +.ui.grid { + display: block; + text-align: left; + font-size: 0em; + margin: 0% -1.5%; + padding: 0%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - -sup { - top: -0.5em; +body > .ui.grid { + margin-left: 0% !important; + margin-right: 0% !important; } - -sub { - bottom: -0.25em; +.ui.grid:after, +.ui.row:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } - - -/* ============================================================================= - Lists - ========================================================================== */ - -/* - * Addresses margins set differently in IE6/7 - */ - -dl, -menu, -ol, -ul { - margin: 1em 0; +/*------------------- + Columns +--------------------*/ +/* Standard 16 column */ +.ui.grid > .column, +.ui.grid > .row > .column { + display: inline-block; + text-align: left; + font-size: 1rem; + width: 6.25%; + padding-left: 1.5%; + padding-right: 1.5%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + vertical-align: top; } - -dd { - margin: 0 0 0 40px; +/* Vertical padding when no rows */ +.ui.grid > .column { + margin-top: 1rem; + margin-bottom: 1rem; } - -/* - * Addresses paddings set differently in IE6/7 - */ - -menu, -ol, -ul { - padding: 0 0 0 40px; +/*------------------- + Rows +--------------------*/ +.ui.grid > .row { + display: block; + width: 100% !important; + margin-top: 1.5%; + padding: 1rem 0% 0%; + font-size: 0rem; +} +.ui.grid > .row:first-child { + padding-top: 0rem; + margin-top: 0rem; +} +/*------------------- + Content +--------------------*/ +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: 100%; +} +.ui.grid .column > .ui.segment:only-child { + margin: 0em; +} +/******************************* + Variations +*******************************/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ +.ui.page.grid { + min-width: 320px; + margin-left: 0%; + margin-right: 0%; } - -/* - * Corrects list images handled incorrectly in IE7 - */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; +@media only screen and (max-width: 991px) { + .ui.page.grid { + padding: 0% 4%; + } } - - -/* ============================================================================= - Embedded content - ========================================================================== */ - -/* - * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 - * 2. Improves image quality when scaled in IE7 - * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ - */ - -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ +@media only screen and (min-width: 992px) { + .ui.page.grid { + padding: 0% 8%; + } } - -/* - * Corrects overflow displayed oddly in IE9 - */ - -svg:not(:root) { - overflow: hidden; +@media only screen and (min-width: 1500px) { + .ui.page.grid { + padding: 0% 13%; + } } - - -/* ============================================================================= - Figures - ========================================================================== */ - -/* - * Addresses margin not present in IE6/7/8/9, S5, O11 - */ - -figure { - margin: 0; +@media only screen and (min-width: 1750px) { + .ui.page.grid { + padding: 0% 18%; + } } - - -/* ============================================================================= - Forms - ========================================================================== */ - -/* - * Corrects margin displayed oddly in IE6/7 - */ - -form { - margin: 0; +@media only screen and (min-width: 2000px) { + .ui.page.grid { + padding: 0% 23%; + } } - -/* - * Define consistent border, margin, and padding - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +/*------------------- + Column Width +--------------------*/ +/* Sizing Combinations */ +.ui.grid > .row > .one.wide.column, +.ui.grid > .column.row > .one.wide.column, +.ui.grid > .one.wide.column, +.ui.column.grid > .one.wide.column { + width: 6.25%; +} +.ui.grid > .row > .two.wide.column, +.ui.grid > .column.row > .two.wide.column, +.ui.grid > .two.wide.column, +.ui.column.grid > .two.wide.column { + width: 12.5%; +} +.ui.grid > .row > .three.wide.column, +.ui.grid > .column.row > .three.wide.column, +.ui.grid > .three.wide.column, +.ui.column.grid > .three.wide.column { + width: 18.75%; +} +.ui.grid > .row > .four.wide.column, +.ui.grid > .column.row > .four.wide.column, +.ui.grid > .four.wide.column, +.ui.column.grid > .four.wide.column { + width: 25%; +} +.ui.grid > .row > .five.wide.column, +.ui.grid > .column.row > .five.wide.column, +.ui.grid > .five.wide.column, +.ui.column.grid > .five.wide.column { + width: 31.25%; +} +.ui.grid > .row > .six.wide.column, +.ui.grid > .column.row > .six.wide.column, +.ui.grid > .six.wide.column, +.ui.column.grid > .six.wide.column { + width: 37.5%; +} +.ui.grid > .row > .seven.wide.column, +.ui.grid > .column.row > .seven.wide.column, +.ui.grid > .seven.wide.column, +.ui.column.grid > .seven.wide.column { + width: 43.75%; +} +.ui.grid > .row > .eight.wide.column, +.ui.grid > .column.row > .eight.wide.column, +.ui.grid > .eight.wide.column, +.ui.column.grid > .eight.wide.column { + width: 50%; } - -/* - * 1. Corrects color not being inherited in IE6/7/8/9 - * 2. Corrects text not wrapping in FF3 - * 3. Corrects alignment displayed oddly in IE6/7 - */ - -legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ +.ui.grid > .row > .nine.wide.column, +.ui.grid > .column.row > .nine.wide.column, +.ui.grid > .nine.wide.column, +.ui.column.grid > .nine.wide.column { + width: 56.25%; +} +.ui.grid > .row > .ten.wide.column, +.ui.grid > .column.row > .ten.wide.column, +.ui.grid > .ten.wide.column, +.ui.column.grid > .ten.wide.column { + width: 62.5%; +} +.ui.grid > .row > .eleven.wide.column, +.ui.grid > .column.row > .eleven.wide.column, +.ui.grid > .eleven.wide.column, +.ui.column.grid > .eleven.wide.column { + width: 68.75%; +} +.ui.grid > .row > .twelve.wide.column, +.ui.grid > .column.row > .twelve.wide.column, +.ui.grid > .twelve.wide.column, +.ui.column.grid > .twelve.wide.column { + width: 75%; +} +.ui.grid > .row > .thirteen.wide.column, +.ui.grid > .column.row > .thirteen.wide.column, +.ui.grid > .thirteen.wide.column, +.ui.column.grid > .thirteen.wide.column { + width: 81.25%; +} +.ui.grid > .row > .fourteen.wide.column, +.ui.grid > .column.row > .fourteen.wide.column, +.ui.grid > .fourteen.wide.column, +.ui.column.grid > .fourteen.wide.column { + width: 87.5%; +} +.ui.grid > .row > .fifteen.wide.column, +.ui.grid > .column.row > .fifteen.wide.column, +.ui.grid > .fifteen.wide.column, +.ui.column.grid > .fifteen.wide.column { + width: 93.75%; +} +.ui.grid > .row > .sixteen.wide.column, +.ui.grid > .column.row > .sixteen.wide.column, +.ui.grid > .sixteen.wide.column, +.ui.column.grid > .sixteen.wide.column { + width: 100%; } - -/* - * 1. Corrects font size not being inherited in all browsers - * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome - * 3. Improves appearance and consistency in all browsers - */ - -button, -input, -select, -textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ +/*------------------- + Column Count +--------------------*/ +/* Assume full width with one column */ +.ui.one.column.grid > .row > .column, +.ui.one.column.grid > .column, +.ui.grid > .one.column.row > .column { + width: 100%; } - -/* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet - */ - -button, -input { - line-height: normal; /* 1 */ +.ui.two.column.grid > .row > .column, +.ui.two.column.grid > .column, +.ui.grid > .two.column.row > .column { + width: 50%; } - -/* - * 1. Improves usability and consistency of cursor style between image-type 'input' and others - * 2. Corrects inability to style clickable 'input' types in iOS - * 3. Removes inner spacing in IE7 without affecting normal text inputs - * Known issue: inner spacing remains in IE6 - */ - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; /* 1 */ - -webkit-appearance: button; /* 2 */ - *overflow: visible; /* 3 */ +.ui.three.column.grid > .row > .column, +.ui.three.column.grid > .column, +.ui.grid > .three.column.row > .column { + width: 33.3333%; } - -/* - * Re-set default cursor for disabled elements - */ - -button[disabled], -input[disabled] { - cursor: default; +.ui.four.column.grid > .row > .column, +.ui.four.column.grid > .column, +.ui.grid > .four.column.row > .column { + width: 25%; } - -/* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ +.ui.five.column.grid > .row > .column, +.ui.five.column.grid > .column, +.ui.grid > .five.column.row > .column { + width: 20%; } - -/* - * 1. Addresses appearance set to searchfield in S5, Chrome - * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; +.ui.six.column.grid > .row > .column, +.ui.six.column.grid > .column, +.ui.grid > .six.column.row > .column { + width: 16.66667%; +} +.ui.seven.column.grid > .row > .column, +.ui.seven.column.grid > .column, +.ui.grid > .seven.column.row > .column { + width: 14.2857%; +} +.ui.eight.column.grid > .row > .column, +.ui.eight.column.grid > .column, +.ui.grid > .eight.column.row > .column { + width: 12.5%; +} +.ui.nine.column.grid > .row > .column, +.ui.nine.column.grid > .column, +.ui.grid > .nine.column.row > .column { + width: 11.1111%; +} +.ui.ten.column.grid > .row > .column, +.ui.ten.column.grid > .column, +.ui.grid > .ten.column.row > .column { + width: 10%; } - -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X - */ - -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; +.ui.eleven.column.grid > .row > .column, +.ui.eleven.column.grid > .column, +.ui.grid > .eleven.column.row > .column { + width: 9.0909%; +} +.ui.twelve.column.grid > .row > .column, +.ui.twelve.column.grid > .column, +.ui.grid > .twelve.column.row > .column { + width: 8.3333%; +} +.ui.thirteen.column.grid > .row > .column, +.ui.thirteen.column.grid > .column, +.ui.grid > .thirteen.column.row > .column { + width: 7.6923%; +} +.ui.fourteen.column.grid > .row > .column, +.ui.fourteen.column.grid > .column, +.ui.grid > .fourteen.column.row > .column { + width: 7.1428%; +} +.ui.fifteen.column.grid > .row > .column, +.ui.fifteen.column.grid > .column, +.ui.grid > .fifteen.column.row > .column { + width: 6.6666%; +} +.ui.sixteen.column.grid > .row > .column, +.ui.sixteen.column.grid > .column, +.ui.grid > .sixteen.column.row > .column { + width: 6.25%; +} +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: 100%; } - -/* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +/*---------------------- + Relaxed +-----------------------*/ +.ui.relaxed.grid { + margin: 0% -2.5%; +} +.ui.relaxed.grid > .column, +.ui.relaxed.grid > .row > .column { + padding-left: 2.5%; + padding-right: 2.5%; +} +/*---------------------- + "Floated" +-----------------------*/ +.ui.grid .left.floated.column { + float: left; } - -/* - * 1. Removes default vertical scrollbar in IE6/7/8/9 - * 2. Improves readability and alignment in all browsers - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ +.ui.grid .right.floated.column { + float: right; } - - -/* ============================================================================= - Tables - ========================================================================== */ - -/* - * Remove most spacing between table cells - */ - -table { - border-collapse: collapse; - border-spacing: 0; +/*---------------------- + Divided +-----------------------*/ +.ui.divided.grid, +.ui.divided.grid > .row { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; } - - - -.tip { - font-size: 11px; - position: absolute; - padding: 5px; - z-index: 1000; +.ui.divided.grid > .column:not(.row), +.ui.divided.grid > .row > .column { + display: table-cell; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); } - -.tip-inner { - background-color: rgba(0,0,0,.75); - color: #fff; - max-width: 200px; - padding: 8px 10px 7px 10px; - text-align: center; +.ui.divided.grid > .column.row { + display: table; } - -.tip-inner { - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; +.ui.divided.grid > .column:first-child, +.ui.divided.grid > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; } - -.tip-arrow { - position: absolute; - width: 0; - height: 0; - line-height: 0; - border: 5px dashed rgba(0,0,0,.75); -} - -.tip-arrow-south { border-bottom-color: rgba(0,0,0,.75) } -.tip-arrow-north { border-top-color: rgba(0,0,0,.75) } -.tip-arrow-west { border-left-color: rgba(0,0,0,.75) } -.tip-arrow-east { border-right-color: rgba(0,0,0,.75) } - -.tip-south .tip-arrow { - top: 0px; - left: 50%; - margin-left: -5px; - border-bottom-style: solid; - border-top: none; - border-left-color: transparent; - border-right-color: transparent +/* Vertically Divided */ +.ui.vertically.divided.grid > .row { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; +} +.ui.vertically.divided.grid > .row > .column, +.ui.vertically.divided.grid > .column:not(.row), +.ui.vertically.divided.grid > .row:first-child { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +/*---------------------- + Celled +-----------------------*/ +.ui.celled.grid { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; + -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; + box-shadow: 0px 0px 0px 1px #DFDFDF; +} +.ui.celled.grid > .row, +.ui.celled.grid > .column.row, +.ui.celled.grid > .column.row:first-child { + display: table; + width: 100%; + margin-top: 0em; + padding-top: 0em; + -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; + box-shadow: 0px -1px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + display: table-cell; + padding: 0.75em; + -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; + box-shadow: -1px 0px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; } - -.tip-north .tip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-top-style: solid; - border-bottom: none; - border-left-color: transparent; - border-right-color: transparent +.ui.celled.page.grid { + -webkit-box-shadow: none; + box-shadow: none; } - -.tip-west .tip-arrow, -.tip-north-west .tip-arrow, -.tip-south-west .tip-arrow { - right: 0; - top: 50%; - margin-top: -5px; - border-left-style: solid; - border-right: none; - border-top-color: transparent; - border-bottom-color: transparent +/*---------------------- + Horizontally Centered +-----------------------*/ +/* Vertical Centered */ +.ui.left.aligned.grid, +.ui.left.aligned.grid > .row > .column, +.ui.left.aligned.grid > .column, +.ui.grid .left.aligned.column, +.ui.grid > .left.aligned.row > .column { + text-align: left; } - -.tip-east .tip-arrow, -.tip-north-east .tip-arrow, -.tip-south-east .tip-arrow { - left: 0; - top: 50%; - margin-top: -5px; - border-right-style: solid; - border-left: none; - border-top-color: transparent; - border-bottom-color: transparent +.ui.center.aligned.grid, +.ui.center.aligned.grid > .row > .column, +.ui.center.aligned.grid > .column, +.ui.grid .center.aligned.column, +.ui.grid > .center.aligned.row > .column { + text-align: center; } - -.tip-north-west .tip-arrow, -.tip-north-east .tip-arrow { - top: 25%; +.ui.right.aligned.grid, +.ui.right.aligned.grid > .row > .column, +.ui.right.aligned.grid > .column, +.ui.grid .right.aligned.column, +.ui.grid > .right.aligned.row > .column { + text-align: right; } - -.tip-south-west .tip-arrow, -.tip-south-east .tip-arrow { - top: 75%; +.ui.justified.grid, +.ui.justified.grid > .row > .column, +.ui.justified.grid > .column, +.ui.grid .justified.column, +.ui.grid > .justified.row > .column { + text-align: justify; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +/*---------------------- + Vertically Centered +-----------------------*/ +/* Vertical Centered */ +.ui.top.aligned.grid, +.ui.top.aligned.grid > .row > .column, +.ui.top.aligned.grid > .column, +.ui.grid .top.aligned.column, +.ui.grid > .top.aligned.row > .column { + vertical-align: top; } - -/* effects */ - -.tip.fade { - transition: opacity 100ms; - -moz-transition: opacity 100ms; - -webkit-transition: opacity 100ms; +.ui.middle.aligned.grid, +.ui.middle.aligned.grid > .row > .column, +.ui.middle.aligned.grid > .column, +.ui.grid .middle.aligned.column, +.ui.grid > .middle.aligned.row > .column { + vertical-align: middle; } - -.tip-hide { - opacity: 0; +.ui.bottom.aligned.grid, +.ui.bottom.aligned.grid > .row > .column, +.ui.bottom.aligned.grid > .column, +.ui.grid .bottom.aligned.column, +.ui.grid > .bottom.aligned.row > .column { + vertical-align: bottom; +} +/*---------------------- + Equal Height Columns +-----------------------*/ +.ui.grid > .equal.height.row { + display: table; + width: 100%; } - - - - - -.dropdown-link { - padding: 5px 30px 5px 12px; - border: 1px solid rgba(0,0,0,0.2); - display: inline-block; - cursor: pointer +.ui.grid > .equal.height.row > .column { + display: table-cell; } - -.dropdown-link:hover { - background-color: #f1faff; +/*---------------------- + Only (Device) +-----------------------*/ +/* Mobile Only */ +@media only screen and (max-width: 767px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row { + display: block !important; + } + .ui.grid > .row > .mobile.only.column { + display: inline-block !important; + } + .ui.divided.mobile.only.grid, + .ui.celled.mobile.only.grid, + .ui.divided.mobile.only.grid .row, + .ui.celled.mobile.only.grid .row, + .ui.divided.grid .mobile.only.row, + .ui.celled.grid .mobile.only.row, + .ui.grid .mobile.only.equal.height.row, + .ui.mobile.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .mobile.only.column, + .ui.celled.grid > .row > .mobile.only.column, + .ui.divided.mobile.only.grid > .row > .column, + .ui.celled.mobile.only.grid > .row > .column, + .ui.divided.mobile.only.grid > .column, + .ui.celled.mobile.only.grid > .column { + display: table-cell !important; + } } - -ul.dropdowni li.current, -ul.dropdown-menu li.current { - background-color: #eee; +@media only screen and (min-width: 768px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row, + .ui.grid > .mobile.only.column, + .ui.grid > .row > .mobile.only.column { + display: none; + } } - -ul.menu.dropdown-menu { - margin-top: -1px; +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row { + display: block !important; + } + .ui.grid > .row > .tablet.only.column { + display: inline-block !important; + } + .ui.divided.tablet.only.grid, + .ui.celled.tablet.only.grid, + .ui.divided.tablet.only.grid .row, + .ui.celled.tablet.only.grid .row, + .ui.divided.grid .tablet.only.row, + .ui.celled.grid .tablet.only.row, + .ui.grid .tablet.only.equal.height.row, + .ui.tablet.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .tablet.only.column, + .ui.celled.grid > .row > .tablet.only.column, + .ui.divided.tablet.only.grid > .row > .column, + .ui.celled.tablet.only.grid > .row > .column, + .ui.divided.tablet.only.grid > .column, + .ui.celled.tablet.only.grid > .column { + display: table-cell !important; + } } - -.menu { - position: absolute; - top: 0; - left: 0; - z-index: 100; - margin: 0; - padding: 0; - background: white; - border: 1px solid rgba(0,0,0,0.2); +@media only screen and (max-width: 767px), (min-width: 992px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row, + .ui.grid > .tablet.only.column, + .ui.grid > .row > .tablet.only.column { + display: none; + } } - -.menu li { - list-style: none; +/* Computer Only */ +@media only screen and (min-width: 992px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row { + display: block !important; + } + .ui.grid > .row > .computer.only.column { + display: inline-block !important; + } + .ui.divided.computer.only.grid, + .ui.celled.computer.only.grid, + .ui.divided.computer.only.grid .row, + .ui.celled.computer.only.grid .row, + .ui.divided.grid .computer.only.row, + .ui.celled.grid .computer.only.row, + .ui.grid .computer.only.equal.height.row, + .ui.computer.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .computer.only.column, + .ui.celled.grid > .row > .computer.only.column, + .ui.divided.computer.only.grid > .row > .column, + .ui.celled.computer.only.grid > .row > .column, + .ui.divided.computer.only.grid > .column, + .ui.celled.computer.only.grid > .column { + display: table-cell !important; + } } - -.menu li a { - display: block; - padding: 5px 30px 5px 12px; - text-decoration: none; - border-top: 1px solid #eee; - color: #2e2e2e; - outline: none; +@media only screen and (max-width: 991px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row, + .ui.grid > .computer.only.column, + .ui.grid > .row > .computer.only.column { + display: none; + } } - -.menu li:first-child a { - border-top: none; +/*------------------- + Doubling +--------------------*/ +/* Mobily Only */ +@media only screen and (max-width: 767px) { + .ui.two.column.doubling.grid > .row > .column, + .ui.two.column.doubling.grid > .column, + .ui.grid > .two.column.doubling.row > .column { + width: 100%; + } + .ui.three.column.doubling.grid > .row > .column, + .ui.three.column.doubling.grid > .column, + .ui.grid > .three.column.doubling.row > .column { + width: 100%; + } + .ui.four.column.doubling.grid > .row > .column, + .ui.four.column.doubling.grid > .column, + .ui.grid > .four.column.doubling.row > .column { + width: 100%; + } + .ui.five.column.doubling.grid > .row > .column, + .ui.five.column.doubling.grid > .column, + .ui.grid > .five.column.doubling.row > .column { + width: 100%; + } + .ui.six.column.doubling.grid > .row > .column, + .ui.six.column.doubling.grid > .column, + .ui.grid > .six.column.doubling.row > .column { + width: 50%; + } + .ui.seven.column.doubling.grid > .row > .column, + .ui.seven.column.doubling.grid > .column, + .ui.grid > .seven.column.doubling.row > .column { + width: 50%; + } + .ui.eight.column.doubling.grid > .row > .column, + .ui.eight.column.doubling.grid > .column, + .ui.grid > .eight.column.doubling.row > .column { + width: 50%; + } + .ui.nine.column.doubling.grid > .row > .column, + .ui.nine.column.doubling.grid > .column, + .ui.grid > .nine.column.doubling.row > .column { + width: 50%; + } + .ui.ten.column.doubling.grid > .row > .column, + .ui.ten.column.doubling.grid > .column, + .ui.grid > .ten.column.doubling.row > .column { + width: 50%; + } + .ui.twelve.column.doubling.grid > .row > .column, + .ui.twelve.column.doubling.grid > .column, + .ui.grid > .twelve.column.doubling.row > .column { + width: 33.3333333333333%; + } + .ui.fourteen.column.doubling.grid > .row > .column, + .ui.fourteen.column.doubling.grid > .column, + .ui.grid > .fourteen.column.doubling.row > .column { + width: 33.3333333333333%; + } + .ui.sixteen.column.doubling.grid > .row > .column, + .ui.sixteen.column.doubling.grid > .column, + .ui.grid > .sixteen.column.doubling.row > .column { + width: 25%; + } } - -.menu li a:hover, -.menu li.selected a { - background: #f1faff; +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.two.column.doubling.grid > .row > .column, + .ui.two.column.doubling.grid > .column, + .ui.grid > .two.column.doubling.row > .column { + width: 100%; + } + .ui.three.column.doubling.grid > .row > .column, + .ui.three.column.doubling.grid > .column, + .ui.grid > .three.column.doubling.row > .column { + width: 50%; + } + .ui.four.column.doubling.grid > .row > .column, + .ui.four.column.doubling.grid > .column, + .ui.grid > .four.column.doubling.row > .column { + width: 50%; + } + .ui.five.column.doubling.grid > .row > .column, + .ui.five.column.doubling.grid > .column, + .ui.grid > .five.column.doubling.row > .column { + width: 33.3333333%; + } + .ui.six.column.doubling.grid > .row > .column, + .ui.six.column.doubling.grid > .column, + .ui.grid > .six.column.doubling.row > .column { + width: 33.3333333%; + } + .ui.eight.column.doubling.grid > .row > .column, + .ui.eight.column.doubling.grid > .column, + .ui.grid > .eight.column.doubling.row > .column { + width: 33.3333333%; + } + .ui.eight.column.doubling.grid > .row > .column, + .ui.eight.column.doubling.grid > .column, + .ui.grid > .eight.column.doubling.row > .column { + width: 25%; + } + .ui.nine.column.doubling.grid > .row > .column, + .ui.nine.column.doubling.grid > .column, + .ui.grid > .nine.column.doubling.row > .column { + width: 25%; + } + .ui.ten.column.doubling.grid > .row > .column, + .ui.ten.column.doubling.grid > .column, + .ui.grid > .ten.column.doubling.row > .column { + width: 20%; + } + .ui.twelve.column.doubling.grid > .row > .column, + .ui.twelve.column.doubling.grid > .column, + .ui.grid > .twelve.column.doubling.row > .column { + width: 16.6666666%; + } + .ui.fourteen.column.doubling.grid > .row > .column, + .ui.fourteen.column.doubling.grid > .column, + .ui.grid > .fourteen.column.doubling.row > .column { + width: 14.28571428571429%; + } + .ui.sixteen.column.doubling.grid > .row > .column, + .ui.sixteen.column.doubling.grid > .column, + .ui.grid > .sixteen.column.doubling.row > .column { + width: 12.5%; + } } - - -@-webkit-keyframes blink { - 0% { - opacity: 1; +/*------------------- + Stackable +--------------------*/ +@media only screen and (max-width: 767px) { + .ui.stackable.grid { + display: block !important; + padding: 0em; + margin: 0em; } - - 49.99% { - opacity: 1; + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column { + display: block !important; + width: auto !important; + margin: 1em 0em 0em !important; + padding: 1em 0em 0em !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } - - 50% { - opacity: 0; + .ui.stackable.divided.grid .column, + .ui.stackable.celled.grid .column { + border-top: 1px dotted rgba(0, 0, 0, 0.1); } - - 100% { - opacity: 0; + .ui.stackable.grid > .row:first-child > .column:first-child, + .ui.stackable.grid > .column:first-child { + margin-top: 0em !important; + padding-top: 0em !important; + } + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:first-child, + .ui.stackable.celled.grid > .column:first-child { + border-top: none !important; + } + .ui.stackable.page.grid > .row > .column, + .ui.stackable.page.grid > .column { + padding-left: 1em !important; + padding-right: 1em !important; + } + /* Remove pointers from vertical menus */ + .ui.stackable.grid .vertical.pointing.menu .item:after { + display: none; } } -.mr-editor { - background: white; - position: relative; - border: 1px solid #999; - display: inline-block; - width: 400px; + +/* + * # Semantic - Menu + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------- + Menu +---------------*/ +.ui.menu { + margin: 1rem 0rem; + background-color: #FFFFFF; + font-size: 0px; + font-weight: normal; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-radius: 0.1875rem; +} +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} +.ui.menu:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.menu > .item:first-child { + border-radius: 0.1875em 0px 0px 0.1875em; +} +.ui.menu > .item:last-child { + border-radius: 0px 0.1875em 0.1875em 0px; +} +.ui.menu .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - -o-user-select: none; user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease; + -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; +} +/*-------------- + Colors +---------------*/ +/* Text Color */ +.ui.menu .item, +.ui.menu .item > a:not(.button) { + color: rgba(0, 0, 0, 0.75); +} +.ui.menu .item .item, +.ui.menu .item .item > a:not(.button) { + color: rgba(30, 30, 30, 0.7); +} +.ui.menu .item .item .item, +.ui.menu .item .item .item > a:not(.button) { + color: rgba(30, 30, 30, 0.6); +} +.ui.menu .dropdown .menu .item, +.ui.menu .dropdown .menu .item a:not(.button) { + color: rgba(0, 0, 0, 0.75); +} +/* Hover */ +.ui.menu .item .menu a.item:hover, +.ui.menu .item .menu .link.item:hover { + color: rgba(0, 0, 0, 0.85); +} +.ui.menu .dropdown .menu .item a:not(.button):hover { + color: rgba(0, 0, 0, 0.85); +} +/* Active */ +.ui.menu .active.item, +.ui.menu .active.item a:not(.button) { + color: rgba(0, 0, 0, 0.85); + border-radius: 0px; } -.mr-render-target { +/*-------------- + Items +---------------*/ +.ui.menu .item { position: relative; - white-space: pre-wrap; - word-wrap: break-word; - width: 100%; - z-index: 0; + display: inline-block; + padding: 0.83em 0.95em; + border-top: 0em solid rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-user-select: -moz-none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } -.mr-caret-head { - -webkit-animation-name: blink; - -webkit-animation-duration: 0.8s; - -webkit-animation-iteration-count: infinite; +.ui.menu .menu { + margin: 0em; +} +.ui.menu .item.left, +.ui.menu .menu.left { + float: left; +} +.ui.menu .item.right, +.ui.menu .menu.right { + float: right; +} +/*-------------- + Borders +---------------*/ +.ui.menu .item:before { position: absolute; + content: ''; + top: 0%; + left: 0px; width: 1px; - background: black; - visibility: hidden; + height: 100%; + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.05)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); } -.mr-editor.focused .mr-caret-head { - visibility: visible; +.ui.menu > .menu:not(.right):first-child > .item:first-child:before, +.ui.menu .item:first-child:before { + display: none; } -.mr-caret-body { - z-index: -1; - position: absolute; - background: Highlight; +.ui.menu .menu.right .item:before, +.ui.menu .item.right:before { + right: auto; + left: 0px; +} +/*-------------- + Text Content +---------------*/ +.ui.menu .text.item > *, +.ui.menu .item > p:only-child { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + line-height: 1.3; + color: rgba(0, 0, 0, 0.6); +} +.ui.menu .item > p:first-child { + margin-top: 0px; +} +.ui.menu .item > p:last-child { + margin-bottom: 0px; +} +/*-------------- + Button +---------------*/ +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: -0.05em; + margin: -0.55em 0; + padding-bottom: 0.55em; + padding-top: 0.55em; + font-size: 0.875em; +} +/*-------------- + Inputs +---------------*/ +.ui.menu:not(.vertical) .item > .input { + margin-top: -0.85em; + margin-bottom: -0.85em; + padding-top: 0.3em; + padding-bottom: 0.3em; + width: 100%; + vertical-align: top; } -.mr-input-trap { - white-space: pre-wrap; - position: absolute; - font: inherit; - margin: 0; - padding: 0; - border: none; - outline: none; - display: block; - resize: none; - left: 0; - right: 0; - outline: none; - background: none; - overflow:　hidden; +.ui.menu .item > .input input { + padding-top: 0.35em; + padding-bottom: 0.35em; } -.mr-ime-knockout { - z-index: 0; - background: white; +.ui.vertical.menu .item > .input input { + margin: 0em; + padding-top: 0.63em; + padding-bottom: 0.63em; } - - - -.popover .tip-inner { - padding: 0; - border: 2px solid #1c1c1c; - background: white; - color: inherit; +/* Action Input */ +.ui.menu:not(.vertical) .item > .button.labeled > .icon { + padding-top: 0.6em; } - -.popover-title { - display: block; - width: 100%; - text-align: left; - font-weight: bold; - padding: 10px; +.ui.menu:not(.vertical) .item .action.input > .button { + font-size: 0.8em; + padding: 0.55em 0.8em; } - -.popover-content { - padding: 10px; - padding-top: 0; +/* Resizes */ +.ui.small.menu:not(.vertical) .item > .input input { + padding-top: 0.4em; + padding-bottom: 0.4em; } - - - -.color-picker canvas { - border: 1px solid #888; +.ui.large.menu:not(.vertical) .item > .input input { + top: -0.125em; + padding-bottom: 0.6em; + padding-top: 0.6em; } - -.color-picker canvas.main:hover { - cursor: crosshair; +.ui.large.menu:not(.vertical) .item .action.input > .button { + font-size: 0.8em; + padding: 0.9em; } - -.color-picker canvas.spectrum:hover { - cursor: row-resize; +.ui.large.menu:not(.vertical) .item .action.input > .button > .icon { + padding-top: 0.8em; } - -.color-picker canvas:active { - cursor: none; +/*-------------- + Header +---------------*/ +.ui.menu .header.item { + background-color: rgba(0, 0, 0, 0.04); + margin: 0em; } - - -canvas.sketch { - cursor: crosshair; +.ui.vertical.menu .header.item { + font-weight: bold; } - - -.gist { - color: #000; +/*-------------- + Dropdowns +---------------*/ +.ui.menu .dropdown .menu .item .icon { + float: none; + margin: 0em 0.75em 0em 0em; } - -.gist-syntax pre { - margin: 0; - padding: 0; - text-align: left; +.ui.menu .dropdown.item .menu { + left: 1px; + margin: 0px; + min-width: -webkit-calc(99%); + min-width: -moz-calc(99%); + min-width: calc(99%); + -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); } - -.gist-syntax table { - margin-top: 0; +.ui.secondary.menu .dropdown.item .menu { + left: 0px; + min-width: 100%; } - -.gist-syntax td { - margin: 0; - padding: 0; +.ui.menu .pointing.dropdown.item .menu { + margin-top: 0.75em; } - -.gist-syntax .linenos { - margin-top: 0; - margin-bottom: 0; - margin-right: 5px; - padding: 0 2px; - font-size: 11px; - border-right: 1px solid #F3F3F3; - background: #FAFAFA; - color: #B1B1B1; +.ui.menu .simple.dropdown.item .menu { + margin: 0px !important; } - -.gist-syntax .code { - padding: 5px; - font-size: 12px; +.ui.menu .dropdown.item .menu .item { + width: 100%; + color: rgba(0, 0, 0, 0.75); } - -.gist-syntax .linenodiv { - padding: 0 10px; +.ui.menu .dropdown.item .menu .active.item { + -webkit-box-shadow: none !important; + box-shadow: none !important; } - -.gist-syntax .linenodiv pre { - text-align: center; +.ui.menu .ui.dropdown .menu .item:before { + display: none; } - - .gist div { - padding: 0; - margin: 0; - } - - .gist .gist-file { - border: 1px solid #dedede; /* gray */ - font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; - margin-bottom: 1em; - } - - .gist .gist-file .gist-meta { - overflow: hidden; - font-size: 85%; - padding: .5em; - color: #666; - background-color: #eaeaea; - } - - .gist .gist-file .gist-meta a { - color: #369; - } - - .gist .gist-file .gist-meta a:visited { - color: #737; - } - - .gist .gist-file .gist-data { - overflow: auto; - word-wrap: normal; - background-color: #f8f8ff; - border-bottom: 1px solid #ddd; - font-size: 100%; - } - - .gist .gist-file .gist-data pre { - font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace; - background: transparent !important; - margin: 0 !important; - border: none !important; - padding: .25em .5em .5em .5em !important; - } - - .gist .gist-file .gist-data .gist-highlight { - background: transparent !important; - } - - .gist .gist-file .gist-data .gist-line-numbers { - background-color: #ececec; - color: #aaa; - border-right: 1px solid #ddd; - text-align: right; - } - - .gist .gist-file .gist-data .gist-line-numbers span { - clear: right; - display: block; - } - -.gist-syntax { background: #ffffff; } -.gist-syntax .c { color: #999988; font-style: italic } /* Comment */ -.gist-syntax .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.gist-syntax .k { color: #000000; font-weight: bold } /* Keyword */ -.gist-syntax .o { color: #000000; font-weight: bold } /* Operator */ -.gist-syntax .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.gist-syntax .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.gist-syntax .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.gist-syntax .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.gist-syntax .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.gist-syntax .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.gist-syntax .ge { color: #000000; font-style: italic } /* Generic.Emph */ -.gist-syntax .gr { color: #aa0000 } /* Generic.Error */ -.gist-syntax .gh { color: #999999 } /* Generic.Heading */ -.gist-syntax .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.gist-syntax .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.gist-syntax .go { color: #888888 } /* Generic.Output */ -.gist-syntax .gp { color: #555555 } /* Generic.Prompt */ -.gist-syntax .gs { font-weight: bold } /* Generic.Strong */ -.gist-syntax .gu { color: #aaaaaa } /* Generic.Subheading */ -.gist-syntax .gt { color: #aa0000 } /* Generic.Traceback */ -.gist-syntax .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ -.gist-syntax .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ -.gist-syntax .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ -.gist-syntax .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ -.gist-syntax .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.gist-syntax .m { color: #009999 } /* Literal.Number */ -.gist-syntax .s { color: #d14 } /* Literal.String */ -.gist-syntax .na { color: #008080 } /* Name.Attribute */ -.gist-syntax .nb { color: #0086B3 } /* Name.Builtin */ -.gist-syntax .nc { color: #445588; font-weight: bold } /* Name.Class */ -.gist-syntax .no { color: #008080 } /* Name.Constant */ -.gist-syntax .ni { color: #800080 } /* Name.Entity */ -.gist-syntax .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.gist-syntax .nf { color: #990000; font-weight: bold } /* Name.Function */ -.gist-syntax .nn { color: #555555 } /* Name.Namespace */ -.gist-syntax .nt { color: #000080 } /* Name.Tag */ -.gist-syntax .nv { color: #008080 } /* Name.Variable */ -.gist-syntax .ow { color: #000000; font-weight: bold } /* Operator.Word */ -.gist-syntax .w { color: #bbbbbb } /* Text.Whitespace */ -.gist-syntax .mf { color: #009999 } /* Literal.Number.Float */ -.gist-syntax .mh { color: #009999 } /* Literal.Number.Hex */ -.gist-syntax .mi { color: #009999 } /* Literal.Number.Integer */ -.gist-syntax .mo { color: #009999 } /* Literal.Number.Oct */ -.gist-syntax .sb { color: #d14 } /* Literal.String.Backtick */ -.gist-syntax .sc { color: #d14 } /* Literal.String.Char */ -.gist-syntax .sd { color: #d14 } /* Literal.String.Doc */ -.gist-syntax .s2 { color: #d14 } /* Literal.String.Double */ -.gist-syntax .se { color: #d14 } /* Literal.String.Escape */ -.gist-syntax .sh { color: #d14 } /* Literal.String.Heredoc */ -.gist-syntax .si { color: #d14 } /* Literal.String.Interpol */ -.gist-syntax .sx { color: #d14 } /* Literal.String.Other */ -.gist-syntax .sr { color: #009926 } /* Literal.String.Regex */ -.gist-syntax .s1 { color: #d14 } /* Literal.String.Single */ -.gist-syntax .ss { color: #990073 } /* Literal.String.Symbol */ -.gist-syntax .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.gist-syntax .vc { color: #008080 } /* Name.Variable.Class */ -.gist-syntax .vg { color: #008080 } /* Name.Variable.Global */ -.gist-syntax .vi { color: #008080 } /* Name.Variable.Instance */ -.gist-syntax .il { color: #009999 } /* Literal.Number.Integer.Long */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - -.confirmation-notification .title { +/*-------------- + Labels +---------------*/ +.ui.menu .item > .label { + background-color: rgba(0, 0, 0, 0.35); + color: #FFFFFF; + margin: -0.15em 0em -0.15em 0.5em; + padding: 0.3em 0.8em; + vertical-align: baseline; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.8em; +} +/*-------------- + Images +---------------*/ +.ui.menu .item > img:only-child { display: block; - padding: 10px 0 0 10px; + max-width: 100%; + margin: 0em auto; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.link.menu .item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover, +.ui.menu .ui.dropdown .menu .item:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.02); } - -.confirmation-notification .content { - padding: 0; +.ui.menu .ui.dropdown.item.active { + background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: none; + box-shadow: none; + -moz-border-bottom-right-radius: 0em; + border-bottom-right-radius: 0em; + -moz-border-bottom-left-radius: 0em; + border-bottom-left-radius: 0em; +} +/*-------------- + Down +---------------*/ +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active, +.ui.menu .ui.dropdown .menu .item:active { + background-color: rgba(0, 0, 0, 0.05); +} +/*-------------- + Active +---------------*/ +.ui.menu .active.item { + background-color: rgba(0, 0, 0, 0.01); + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: 0em 0.2em 0em inset; + box-shadow: 0em 0.2em 0em inset; +} +.ui.vertical.menu .active.item { + border-radius: 0em; + -webkit-box-shadow: 0.2em 0em 0em inset; + box-shadow: 0.2em 0em 0em inset; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: 0em 0.1875em 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em 0.1875em 0em; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: 0em 0.1875em 0.1875em 0em; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; } - -.confirmation-notification-message { - padding: 10px; +.ui.vertical.menu .active.item .menu .active.item { + padding-left: 1.5rem; } - -.confirmation-notification-actions { - border-top: 1px solid #eee; - padding: 5px; - text-align: right; - background: #fafafa; - box-shadow: inset 0 1px 0 white; +.ui.vertical.menu .item .menu .active.item { + background-color: rgba(0, 0, 0, 0.03); + -webkit-box-shadow: none; + box-shadow: none; } - - - - - - - -.pie { - color: #EC4E89; - background: #bbb; - border: 2px solid white; +/*-------------- + Disabled +---------------*/ +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover { + cursor: default; + color: rgba(0, 0, 0, 0.2); + background-color: transparent !important; +} +/*-------------------- + Loading +---------------------*/ +/* On Form */ +.ui.menu.loading { + position: relative; } - - -.pie { - color: #EC4E89; - background: #bbb; - border: 2px solid white; +.ui.menu.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; + visibility: visible; } - - -.noticon { - color: white; - background: #ED372A; +/******************************* + Types +*******************************/ +/*-------------- + Vertical +---------------*/ +.ui.vertical.menu .item { + display: block; + height: auto !important; + border-top: none; + border-left: 0em solid rgba(0, 0, 0, 0); + border-right: none; } - - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-font-smoothing: subpixel-antialiased; +.ui.vertical.menu > .item:first-child { + border-radius: 0.1875em 0.1875em 0px 0px; } -body { - background: url("/core/bg.jpg"); +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px 0.1875em 0.1875em; +} +.ui.vertical.menu .item > .label { + float: right; text-align: center; - font: normal 14px "proxima-nova", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -h1, -h2 { - font-weight: 700; -} -h3, -h4, -h5, -h6, -a { - font-weight: 600; -} -p { - line-height: 1.5; - font-weight: 400; - -webkit-font-smoothing: antialiased; } -a { - color: #1f7dca; - text-decoration: none; +.ui.vertical.menu .item > i.icon { + float: right; + width: 1.22em; + margin: 0em 0em 0em 0.5em; } -a:focus { - outline: none; +.ui.vertical.menu .item > .label + i.icon { + float: none; + margin: 0em 0.25em 0em 0em; } -input[type=submit]:focus, -input[type=button]:focus { - outline: none; +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.03)), color-stop(1.5em, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.03))); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); } -button::-moz-focus-inner, -input[type=button]::-moz-focus-inner, -input[type=submit]::-moz-focus-inner { - border: 0; +.ui.vertical.menu .item:first-child:before { + background-image: none !important; } -.right { +/*--- Dropdown ---*/ +.ui.vertical.menu .dropdown.item > i { float: right; + content: "\f0da"; } -.box, -.quick-create, -#dialog { - border: 1px solid #cdcdcd; - -webkit-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: 0 3px 3px rgba(51,51,51,0.2); - box-shadow: 0 3px 3px rgba(51,51,51,0.2); +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + margin: 0px 0px 0px 1px; + -webkit-box-shadow: 0 0px 1px 1px #DDDDDD; + box-shadow: 0 0px 1px 1px #DDDDDD; } -.box-top, -.quick-create .top, -#dialog .title { - background: #f2f2f2; - position: relative; - display: block; - padding: 11px 13px; - -webkit-border-top-left-radius: 5px; - border-top-left-radius: 5px; - -webkit-border-top-right-radius: 5px; - border-top-right-radius: 5px; -} -.actions { - background: #351b61; - padding: 10px 25px; - font-size: 12px; - color: #fff; +.ui.vertical.menu .dropdown.item.active { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; } -.actions a { - margin: 0 10px; - color: #fff; - text-decoration: none; - text-transform: uppercase; - font-size: 11px; +.ui.vertical.menu .dropdown.item .menu .item { + font-size: 1rem; } -.actions a:last-child { - margin-right: 0; -} -.actions a.active { - border-bottom: 1px solid rgba(255,255,255,0.3); -} -.tip-inner { - background-color: rgba(0,0,0,0.6); - -webkit-border-radius: 2px; - border-radius: 2px; - color: #eee; - font: normal 400 11px "proxima-nova", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - padding: 7px 10px; -} -.tip-arrow { - border-color: rgba(0,0,0,0.6); -} -.badge { - background-color: #cf004f; - border: solid 2px #fff; - -webkit-box-shadow: 0px 2px 2px #999; - box-shadow: 0px 2px 2px #999; - color: #fff; - font-size: 11px; - font-weight: normal; - line-height: 16px; - position: absolute; - top: 12px; - right: 18px; - width: 20px; - height: 20px; - -webkit-border-radius: 20px; - border-radius: 20px; - text-shadow: none; - z-index: 0; +.ui.vertical.menu .dropdown.item .menu .item i.icon { + margin-right: 0em; } -.badge.hidden { - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); +.ui.vertical.menu .dropdown.item.active { + -webkit-box-shadow: none; + box-shadow: none; } -.dropdown-link { - border: 0; - padding: 0 12px; - text-align: center; - color: #1f7dca; - font-size: 12px; - font-weight: 700; - position: relative; +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: 0.5em -0.95em 0em; } -.dropdown-link:hover { - background-color: inherit; - color: #1964a2; +.ui.vertical.menu .item > .menu > .item { + padding: 0.5rem 1.5rem; + font-size: 0.875em; } -.dropdown-link::after { - font-family: 'icons'; - content: '\e75c'; - position: absolute; - right: -5px; +.ui.vertical.menu .item > .menu > .item:before { + display: none; } -.dropdown-link.opened::after { - content: '\e75f'; +/*-------------- + Tiered +---------------*/ +.ui.tiered.menu > .sub.menu > .item { + color: rgba(0, 0, 0, 0.4); } -ul.dropdown-menu { - -webkit-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2); - box-shadow: 0 1px 1px rgba(0,0,0,0.2); -} -ul.dropdown-menu li a { - font-size: 13px; - border: 0; - color: #535353; - font-weight: 400; - height: 33px; - line-height: 33px; - padding: 0 15px; - text-align: left; +.ui.tiered.menu > .menu > .item:hover { + color: rgba(0, 0, 0, 0.8); } -ul.dropdown-menu li a:hover, -ul.dropdown-menu li a:focus { - background-color: #f2f2f2; - font-weight: 600; -} -ul.dropdown-menu li:first-child, -ul.dropdown-menu li:first-child a { - -webkit-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -ul.dropdown-menu li:last-child, -ul.dropdown-menu li:last-child a { - -webkit-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} -ul.dropdown li.current a, -ul.dropdown-menu li.current a, -li.selected a { - background-color: #fff; - color: #cdcdcd; - font-weight: normal; - cursor: default; +.ui.tiered.menu .item.active { + color: rgba(0, 0, 0, 0.8); } -ul.dropdown li.current a:hover, -ul.dropdown-menu li.current a:hover, -li.selected a:hover { - font-weight: normal; +.ui.tiered.menu > .menu .item.active:after { + position: absolute; + content: ''; + margin-top: -1px; + top: 100%; + left: 0px; + width: 100%; + height: 2px; + background-color: #FBFBFB; } -#bar { - height: 54px; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); - box-shadow: 0 1px 1px rgba(0,0,0,0.1); - text-shadow: 0 1px 0 #fff; - position: relative; - background: rgba(248,249,250,0.8); +.ui.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.01); + border-radius: 0em; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + box-shadow: none; + color: #FFFFFF; } -#bar .inner { - max-width: 980px; - min-width: 320px; - margin: auto; - border-bottom: 1px solid #fff; +.ui.tiered.menu .sub.menu .item { + font-size: 0.875rem; } -#bar .inner > div { - float: left; - height: 54px; +.ui.tiered.menu .sub.menu .item:before { + background-image: none; } -#bar .inner .right { - float: right; +.ui.tiered.menu .sub.menu .active.item { + padding-top: 0.83em; + background-color: transparent; + border-radius: 0 0 0 0; + border-top: medium none; + -webkit-box-shadow: none; + box-shadow: none; + color: rgba(0, 0, 0, 0.7) !important; } -#bar .search { +.ui.tiered.menu .sub.menu .active.item:after { display: none; - padding: 10px 0 50px 0; -} -#bar .search input { - width: 250px; - padding-right: 30px; - margin: 0; - background: #fff url("/bar/search.png") no-repeat right; - -webkit-box-shadow: 0 1px 1px #fff; - box-shadow: 0 1px 1px #fff; -} -#bar .create a { - color: #535353; - text-transform: uppercase; - line-height: 54px; - vertical-align: middle; - display: inline-block; } -#bar .logo { - padding-left: 12px; - padding-right: 40px; +/* Inverted */ +.ui.inverted.tiered.menu > .menu > .item { + color: rgba(255, 255, 255, 0.5); } -#bar .logo a { - background: url("/core/logo.png") no-repeat 0 7px; - -webkit-background-size: 69px 40px; - -moz-background-size: 69px 40px; - background-size: 69px 40px; - display: block; - text-indent: -5000px; - width: 130px; - height: 54px; +.ui.inverted.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.2); } -@media only screen and (-webkit-min-device-pixel-ratio: 2) { - #bar .logo a { - background-image: url("/core/logo@2x.png"); - } +.ui.inverted.tiered.menu .sub.menu .item { + color: rgba(255, 255, 255, 0.6); } -#bar .right { - text-align: right; - vertical-align: middle; - border-right: 1px solid #e3e3e4; - position: relative; +.ui.inverted.tiered.menu > .menu > .item:hover { + color: rgba(255, 255, 255, 0.9); } -#bar .right > div { - border-left: 1px solid #fff; - height: 54px; - display: inline-block; - vertical-align: top; +.ui.inverted.tiered.menu .active.item:after { + display: none; } -#bar .right > div:last-child { - border-right: 1px solid #fff; +.ui.inverted.tiered.menu > .sub.menu > .active.item, +.ui.inverted.tiered.menu > .menu > .active.item { + color: #ffffff !important; + -webkit-box-shadow: none; + box-shadow: none; } -#bar .right > div > a { - border-left: 1px solid #e3e3e4; - height: 54px; - line-height: 54px; - vertical-align: middle; - text-decoration: none; - color: #535353; - text-align: center; - display: inline-block; +/* Tiered pointing */ +.ui.pointing.tiered.menu > .menu > .item:after { + display: none; } -#bar .right > div > a:hover { - background-color: #fdfdfd; +.ui.pointing.tiered.menu > .sub.menu > .item:after { + display: block; +} +/*-------------- + Tabular +---------------*/ +.ui.tabular.menu { + background-color: transparent; + border-bottom: 1px solid #DCDDDE; + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.ui.tabular.menu .item { + background-color: transparent; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 1px solid transparent; + padding-left: 1.4em; + padding-right: 1.4em; + color: rgba(0, 0, 0, 0.6); +} +.ui.tabular.menu .item:before { + display: none; } -#bar .right .count a { - font-size: 28px; - padding: 0 20px; - text-shadow: 0 1px 0 #fff; - font-weight: 600; - color: #535353; +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.8); } -#bar .right .me { +/* Active */ +.ui.tabular.menu .active.item { position: relative; + background-color: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + border-color: #DCDDDE; + font-weight: bold; + margin-bottom: -1px; + border-bottom: 1px solid #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 5px 5px 0 0; } -#bar .right .me .avatar { +/* Coupling with segment for attachment */ +.ui.attached.tabular.menu { position: relative; - top: 2px; + z-index: 2; +} +.ui.tabular.menu ~ .bottom.attached.segment { + margin: 1px 0px 0px 1px; +} +/*-------------- + Pagination +---------------*/ +.ui.pagination.menu { + margin: 0em; display: inline-block; - border: 1px solid #ccc; - -webkit-border-radius: 28px; - border-radius: 28px; - height: 30px; - width: 30px; - margin: 10px; - line-height: 0; - -webkit-box-shadow: 0 1px 1px #fff; - box-shadow: 0 1px 1px #fff; - vertical-align: top; - position: relative; -} -#bar .right .me .avatar img { - width: 28px; - -webkit-border-radius: 28px; - border-radius: 28px; -} -#bar .right .me .avatar a.warning { - position: absolute; - bottom: -5px; - color: #ffa500; - font-size: 15px; - right: -5px; -} -#bar .right .me .username { - font-size: 14px; - font-weight: 600; - margin: 10px 10px 10px 0; - display: inline-block; - text-shadow: 0 1px 0 #fff; - max-width: 75px; - height: 30px; - line-height: 30px; - white-space: nowrap; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + vertical-align: middle; } -#bar .dropdown { - position: absolute; - right: 0; - width: 120px; - display: inline-block; - top: -530px; - -webkit-transform: translateY(-10px); - -moz-transform: translateY(-10px); - -o-transform: translateY(-10px); - -ms-transform: translateY(-10px); - transform: translateY(-10px); - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); - -webkit-transition: opacity 500ms ease-out, -webkit-transform 300ms ease-out; - -moz-transition: opacity 500ms ease-out, -webkit-transform 300ms ease-out; - -o-transition: opacity 500ms ease-out, -webkit-transform 300ms ease-out; - -ms-transition: opacity 500ms ease-out, -webkit-transform 300ms ease-out; - transition: opacity 500ms ease-out, -webkit-transform 300ms ease-out; - -moz-transition: opacity 500ms ease-out, -moz-transform 300ms ease-out; - -ms-transition: opacity 500ms ease-out, -ms-transform 300ms ease-out; -} -#bar .dropdown .arrow { - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid #999; - margin-right: 5px; -} -#bar .dropdown .menu { - margin-top: 0; - -webkit-box-shadow: 0 0 5px rgba(102,102,102,0.3); - box-shadow: 0 0 5px rgba(102,102,102,0.3); - position: relative; - border-color: #999; - border-width: 2px; - top: 5px; -} -#bar .me.active > a { - background: #fff; -} -#bar .me.active .dropdown { - top: 40px; - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -o-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; - -ms-filter: none; - filter: none; +.ui.pagination.menu .item { + min-width: 3em; + text-align: center; } -.account-confirm-tip a { - color: #ccc; - text-decoration: underline; +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; } -.account-confirm-tip .sent, -.account-confirm-tip .sending, -.account-confirm-tip a { +.ui.pagination.menu.floated { display: block; } -.account-confirm-tip .sent { - color: #ff0; +/* active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: 0.83em; + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-shadow: none; + box-shadow: none; } -.account-confirm-tip .sending { - font-style: oblique; - color: #ccc; +/*-------------- + Secondary +---------------*/ +.ui.secondary.menu { + background-color: transparent; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; } -@media only screen and (max-width: 767px) { - #bar .search input { - width: 220px; - } - #bar .right .count a { - padding-left: 10px; - padding-right: 10px; - font-size: 14px; - } +.ui.secondary.menu > .menu > .item, +.ui.secondary.menu > .item { + -webkit-box-shadow: none; + box-shadow: none; + border: none; + height: auto !important; + margin: 0em 0.25em; + padding: 0.5em 1em; + border-radius: 0.3125em; } -@media only screen and (max-width: 560px) { - #bar .right .count { - display: none; - } - #bar .right .me .username { - display: none; - } +.ui.secondary.menu > .menu > .item:before, +.ui.secondary.menu > .item:before { + display: none !important; } -@media only screen and (max-width: 479px) { - #bar .logo a { - display: none; - } - #bar .search input { - width: 220px; - } +.ui.secondary.menu .item > .input input { + background-color: transparent; + border: none; } -.input { - position: relative; - text-align: left; +.ui.secondary.menu .link.item, +.ui.secondary.menu a.item { + opacity: 0.8; + -webkit-transition: none; + -moz-transition: none; + transition: none; } -.input-popup { - font-size: 90%; - position: absolute; - background: rgba(255,255,255,0.975); - border: 1px solid #d4d4d4; - border-bottom: none; - -webkit-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; - -webkit-box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.05); - box-shadow: 0 -1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.05); - margin: 0; - padding: 0; - list-style: none; -} -.input-popup li { - margin: 0; - padding: 0 8px; - height: 28px; - line-height: 28px; - color: #444; +.ui.secondary.menu .header.item { + border-right: 0.1em solid rgba(0, 0, 0, 0.1); + background-color: transparent; + border-radius: 0em; } -.input-popup li span.status-icon { - float: right; - position: relative; - top: 8px; +/* hover */ +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + opacity: 1; } -.input-popup li img { - width: 20px; - float: left; - position: relative; - top: 3px; - -webkit-border-radius: 10px; - border-radius: 10px; - margin-right: 10px; +/* active */ +.ui.secondary.menu > .menu > .active.item, +.ui.secondary.menu > .active.item { + background-color: rgba(0, 0, 0, 0.08); + opacity: 1; + -webkit-box-shadow: none; + box-shadow: none; } -.input-popup li:first-child { - -webkit-border-radius: 2px 2px 0 0; - border-radius: 2px 2px 0 0; +.ui.secondary.vertical.menu > .active.item { + border-radius: 0.3125em; } -.input-popup li.selected { - background: #92cdf3; - color: #fff; +/* inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: rgba(255, 255, 255, 0.5); } -.input .mr-paragraph-render-target .token { - display: inline-block; - border: 1px solid rgba(0,0,0,0.08); - background: rgba(0,0,0,0.04); - color: #3f78b0; - font-weight: bold; - text-shadow: 0 1px 0 #fff; - padding: 0 8px; - -webkit-border-radius: 18px; - border-radius: 18px; - cursor: pointer; - font-size: 90%; +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + color: rgba(255, 255, 255, 0.9); } -.conversation .sketch-pad { - display: none; - border-top: 1px solid #eee; - position: relative; +.ui.secondary.inverted.menu .active.item { + background-color: rgba(255, 255, 255, 0.1); } -.conversation .sketch-pad input { - margin: 0; - width: 200px; - border: none; +/* disable variations */ +.ui.secondary.item.menu > .item { + margin: 0em; +} +.ui.secondary.attached.menu { -webkit-box-shadow: none; box-shadow: none; - font-size: 13px; -} -.conversation .sketch-pad .color { - display: block; - float: right; - width: 20px; - height: 20px; - border: 1px solid #eee; - background: #000; - margin-top: 10px; - margin-right: 10px; } -.conversation .sketch-pad .cancel, -.conversation .sketch-pad .save { - display: block; - float: right; - margin: 12px; +/*--------------------- + Secondary Pointing +-----------------------*/ +.ui.secondary.pointing.menu { + border-bottom: 3px solid rgba(0, 0, 0, 0.1); +} +.ui.secondary.pointing.menu > .menu > .item, +.ui.secondary.pointing.menu > .item { + margin: 0em 0em -3px; + padding: 0.6em 0.95em; + border-bottom: 3px solid rgba(0, 0, 0, 0); + border-radius: 0em; + -webkit-transition: color 0.2s + ; + -moz-transition: color 0.2s + ; + transition: color 0.2s + ; +} +/* Item Types */ +.ui.secondary.pointing.menu .header.item { + margin-bottom: -3px; + background-color: transparent !important; + border-right-width: 0px !important; + font-weight: bold !important; + color: rgba(0, 0, 0, 0.8) !important; +} +.ui.secondary.pointing.menu .text.item { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.ui.secondary.pointing.menu > .menu > .item:after, +.ui.secondary.pointing.menu > .item:after { + display: none; } -.conversation .sketch-pad canvas { - border-top: 1px solid #eee; +/* Hover */ +.ui.secondary.pointing.menu > .menu > .link.item:hover, +.ui.secondary.pointing.menu > .link.item:hover, +.ui.secondary.pointing.menu > .menu > a.item:hover, +.ui.secondary.pointing.menu > a.item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); } -.conversation .sketch-pad.show { - display: block; +/* Down */ +.ui.secondary.pointing.menu > .menu > .link.item:active, +.ui.secondary.pointing.menu > .link.item:active, +.ui.secondary.pointing.menu > .menu > a.item:active, +.ui.secondary.pointing.menu > a.item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); } -.conversation .sketch-pad.drag:after { - position: absolute; - top: 50%; - left: 50%; - display: block; - margin-left: -65px; - margin-top: -10px; - content: 'Drop to add image'; - background: rgba(0,0,0,0.1); - padding: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; +/* Active */ +.ui.secondary.pointing.menu > .menu > .item.active, +.ui.secondary.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + box-shadow: none; } -.conversation .sketch-pad .expand { - position: absolute; - top: 50px; - right: 10px; - color: #808080; - opacity: 0.4; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - filter: alpha(opacity=40); +/*--------------------- + Secondary Vertical +-----------------------*/ +.ui.secondary.vertical.pointing.menu { + border: none; + border-right: 3px solid rgba(0, 0, 0, 0.1); } -.conversation .sketch-pad .expand:hover { - opacity: 0.75; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); - filter: alpha(opacity=75); -} -.popover .tip-inner { - max-width: 300px; -} -.conversation .viewers { - padding: 5px 8px 3px; - border-top: 1px solid #ceccd9; - border-left: 1px solid #c8c8c8; - border-right: 1px solid #c8c8c8; - background: #f7f6f9; - height: 38px; +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0em 0em 0.3em; + padding: 0.6em 0.8em; + border-radius: 0.1875em; } -.conversation .viewers .user { - display: inline-block; - height: 38px; - margin-right: 5px; - position: relative; +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; } -.conversation .viewers .user .icon { - position: absolute; - bottom: 0; - right: -10px; - z-index: 10; +.ui.secondary.vertical.pointing.menu > .item { + margin: 0em -3px 0em 0em; + border-bottom: none; + border-right: 3px solid transparent; + border-radius: 0em; } -.conversation .viewers .avatar { - width: 26px; - height: 26px; +/* Hover */ +.ui.secondary.vertical.pointing.menu > .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); } -.conversation .viewers .avatar img { - width: 24px; - height: 24px; +/* Down */ +.ui.secondary.vertical.pointing.menu > .item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); } -.conversation .viewers .suggest { - float: right; - width: 30%; - height: 26px; - line-height: 26px; - text-align: right; - padding-right: 4px; +/* Active */ +.ui.secondary.vertical.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.85); } -.conversation .viewers .suggest a { - color: #351b61; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: 1px; - text-shadow: 0 1px 0 #fff; +/*-------------- + Inverted +---------------*/ +.ui.secondary.inverted.menu { + background-color: transparent; } -.conversation .viewers .suggest a:hover { - color: #2a164e; +.ui.secondary.inverted.pointing.menu { + border-bottom: 3px solid rgba(255, 255, 255, 0.1); } -.conversation .messages .file { - position: relative; +.ui.secondary.inverted.pointing.menu > .item { + color: rgba(255, 255, 255, 0.7); } -.conversation .messages .file .close { - position: absolute; - top: 15px; - right: 15px; -} -.conversation .card { - margin: 15px 5px; - border: 1px solid #d9d9d9; - background: #f6f6f6; - -webkit-border-radius: 2px; - border-radius: 2px; - position: relative; +.ui.secondary.inverted.pointing.menu > .header.item { + color: #FFFFFF !important; } -.conversation .card .bar { - padding: 10px; - font-weight: bold; +/* Hover */ +.ui.secondary.inverted.pointing.menu > .menu > .item:hover, +.ui.secondary.inverted.pointing.menu > .item:hover { + color: rgba(255, 255, 255, 0.85); } -.conversation .card .view { - position: absolute; - bottom: 10px; - right: 15px; +/* Down */ +.ui.secondary.inverted.pointing.menu > .menu > .item:active, +.ui.secondary.inverted.pointing.menu > .item:active { + border-color: rgba(255, 255, 255, 0.4); } -.conversation .card [class*=icon] { - display: none; +/* Active */ +.ui.secondary.inverted.pointing.menu > .menu > .item.active, +.ui.secondary.inverted.pointing.menu > .item.active { + border-color: rgba(255, 255, 255, 0.8); + color: #ffffff; } -.conversation .card.uploading { - padding-top: 50px; +/*--------------------- + Inverted Vertical +----------------------*/ +.ui.secondary.inverted.vertical.pointing.menu { + border-right: 3px solid rgba(255, 255, 255, 0.1); + border-bottom: none; } -.conversation .card canvas { - position: absolute; - top: 50%; - left: 50%; - margin-left: -25px; - margin-top: -25px; +/*-------------- + Text Menu +---------------*/ +.ui.text.menu { + background-color: transparent; + margin: 1rem -1rem; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; } -.conversation .card-content { - text-align: center; +.ui.text.menu > .item { + opacity: 0.8; + margin: 0em 1em; + padding: 0em; + height: auto !important; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: opacity 0.2s ease + ; + -moz-transition: opacity 0.2s ease + ; + transition: opacity 0.2s ease + ; } -.conversation .card-content img { - margin: 0 auto; +.ui.text.menu > .item:before { + display: none !important; } -.conversation { - margin: 0 auto 20px; - width: 438px; - text-align: left; - -webkit-transition: width 300ms; - -moz-transition: width 300ms; - -o-transition: width 300ms; - -ms-transition: width 300ms; - transition: width 300ms; -} -.conversation .tip { - font-size: 13px; - padding: 10px 0; - border-bottom: 1px dotted #eee; - text-indent: 15px; -} -.conversation .messages { - margin: 0; - padding: 0; -} -.conversation .messages li { - font-size: 13px; - list-style: none; - padding: 8px 10px; - zoom: 1; -} -.conversation .messages li:before, -.conversation .messages li:after { - content: ""; - display: table; +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: rgba(50, 50, 50, 0.8); + font-size: 0.875rem; + padding: 0em; + text-transform: uppercase; + font-weight: bold; } -.conversation .messages li:after { - clear: both; +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; } -.conversation .messages li.hint { - padding: 20px 0 14px; - margin-bottom: 1px; - font-size: 11px; - text-align: center; - font-family: Helvetica, Arial; - background: #fff url("/conversations/dots.png") repeat-x bottom; - margin-bottom: 1px; -} -.conversation .messages li.join, -.conversation .messages li.leave { - padding-top: 11px; - padding-bottom: 11px; - background-color: #f7f7f7; - border-bottom: 1px solid #ededed; -} -.conversation .messages a { - color: #1f7dca; - text-decoration: none; +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: 1rem 0em; } -.conversation .messages li.missed { - background: #fffdef; +.ui.vertical.text.menu:first-child { + margin-top: 0rem; } -.conversation .messages li.missed.first { - background: #fffdef url("/conversations/dots.png") repeat-x top; +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; } -.conversation .messages li.missed .unread { - color: #d7cb00; - font-size: 11px; - font-family: arial; - position: absolute; - top: -11px; - left: 50%; - margin-left: -50px; - background: #fff; +.ui.vertical.text.menu .item { + float: left; + clear: left; + margin: 0.5em 0em; } -.conversation .messages li.message, -.conversation .messages li.join, -.conversation .messages li.leave, -.conversation .messages li.file { - position: relative; +.ui.vertical.text.menu .item > i.icon { + float: none; + margin: 0em 0.83em 0em 0em; } -.conversation .messages li.message .text, -.conversation .messages li.join .text, -.conversation .messages li.leave .text, -.conversation .messages li.file .text, -.conversation .messages li.message .file, -.conversation .messages li.join .file, -.conversation .messages li.leave .file, -.conversation .messages li.file .file { - line-height: 22px; - vertical-align: middle; - margin-right: 10px; - margin-left: 32px; - word-wrap: break-word; +.ui.vertical.text.menu .header.item { + margin: 0.8em 0em; } -.conversation .messages li.message .avatar, -.conversation .messages li.join .avatar, -.conversation .messages li.leave .avatar, -.conversation .messages li.file .avatar { - position: absolute; +/*--- hover ---*/ +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; } -.conversation .content { - background: #fff; - margin-top: -10px; - overflow-x: hidden; - overflow-y: auto; - border-left: 1px solid #c8c8c8; - border-right: 1px solid #c8c8c8; +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + padding: 0em; + border: none; + opacity: 1; + font-weight: bold; + -webkit-box-shadow: none; + box-shadow: none; } -.conversation .compose { - position: relative; - -webkit-box-shadow: inset 0 1px 0 #fff; - box-shadow: inset 0 1px 0 #fff; - border-top: 1px solid #c7c7c7; - background: #f2f2f2; - border-left: 1px solid #c8c8c8; - border-right: 1px solid #c8c8c8; - border-bottom: 1px solid #c8c8c8; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - zoom: 1; -} -.conversation .compose:before, -.conversation .compose:after { - content: ""; - display: table; +/* disable variations */ +.ui.text.pointing.menu .active.item:after { + -webkit-box-shadow: none; + box-shadow: none; } -.conversation .compose:after { - clear: both; +.ui.text.attached.menu { + -webkit-box-shadow: none; + box-shadow: none; } -.conversation .input { - float: right; - margin: 5px; -} -.conversation .input .mr-editor { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - width: 376px; - margin: 0; - min-height: 46px; - background: #fff; - max-height: 150px; - overflow-y: auto; - overflow-x: hidden; +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .item.active { + background-color: transparent; } -.conversation .avatar { +/*-------------- + Icon Only +---------------*/ +.ui.icon.menu, +.ui.vertical.icon.menu { + width: auto; display: inline-block; - border: 1px solid #ccc; - width: 22px; - height: 22px; - -webkit-border-radius: 20px; - border-radius: 20px; -} -.conversation .avatar img { - width: 20px; - height: 20px; - -webkit-border-radius: 20px; - border-radius: 20px; + height: auto; } -.conversation .compose-actions { - position: absolute; - background-color: #e6e6e6; - -webkit-box-shadow: inset -1px 0 2px #d2d2d2; - box-shadow: inset -1px 0 2px #d2d2d2; - border-right: 1px solid #cdcdcd; - display: inline-block; - width: 32px; - float: left; - height: 100%; - border-bottom-left-radius: 2px; +.ui.icon.menu > .item { + height: auto; text-align: center; + color: rgba(60, 60, 60, 0.7); } -.conversation .compose-actions a { - display: inline-block; - padding-left: 4px; - padding-top: 5px; - font-size: 18px; - color: #7b7b7b; - text-shadow: 0 1px 1px #fff; -} -.conversation .compose-actions a:hover { - color: #626262; +.ui.icon.menu > .item > .icon { + display: block; + float: none !important; + opacity: 1; + margin: 0em auto !important; } -.conversation .title { - background: transparent; - color: #333; - position: relative; - z-index: 20; - margin-left: -1px; +.ui.icon.menu .icon:before { + opacity: 1; } -.conversation .title:before, -.conversation .title:after { - display: block; - margin-right: -1px; - content: " "; +/* Item Icon Only */ +.ui.menu .icon.item .icon { + margin: 0em; } -.conversation .title:before { - background: #f2f2f2; - border: 1px solid rgba(197,197,197,0.6); - border-top: 1px solid rgba(197,197,197,0.2); - border-top-left-radius: 6px; - border-top-right-radius: 6px; - border-bottom: none; - -webkit-box-shadow: 0 1px 0 #fff inset; - box-shadow: 0 1px 0 #fff inset; - height: 40px; +.ui.vertical.icon.menu { + float: none; } -.conversation .title:after { - background: url("/conversations/wave-gray.svg"); - background-position: -27px top; - border: 1px solid rgba(197,197,197,0.6); - border-width: 0 1px; - height: 9px; +/*--- inverted ---*/ +.ui.inverted.icon.menu .item { + color: rgba(255, 255, 255, 0.8); } -.conversation .title span { - position: absolute; - top: 15px; - left: 15px; - margin-right: -1px; - color: #535353; - font-weight: bold; - font-size: 14px; - text-shadow: 0 1px 0 #fff; +.ui.inverted.icon.menu .icon { + color: #ffffff; } -.conversation .title .right { - float: none; - position: absolute; - top: 15px; - right: 10px; +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.menu { + text-align: center; } -.conversation .title a { +.ui.labeled.icon.menu > .item > .icon { display: block; - float: left; - margin-left: 5px; - color: #6e6e6e; -} -.conversation.focus .title:before { - background-color: #69bef5; - border-color: rgba(89,164,215,0.6); - border-top-color: rgba(255,255,255,0.8); + font-size: 1.5em !important; + margin: 0em auto 0.3em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: #A1CF64 !important; + color: #A1CF64 !important; +} +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: #D95C5C !important; + color: #D95C5C !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: #6ECFF5 !important; + color: #6ECFF5 !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: #564F8A !important; + color: #564F8A !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: #F05940 !important; + color: #F05940 !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: #00B5AD !important; + color: #00B5AD !important; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.menu { + background-color: #333333; -webkit-box-shadow: none; box-shadow: none; } -.conversation.focus .title:after { - background-image: url("/conversations/wave-blue.svg"); - border-color: rgba(89,164,215,0.6); +.ui.inverted.menu .header.item { + margin: 0em; + background-color: rgba(0, 0, 0, 0.3); + -webkit-box-shadow: none; + box-shadow: none; } -.conversation.focus .title a, -.conversation.focus .title span { - text-shadow: none; - color: #fff; +.ui.inverted.menu .item, +.ui.inverted.menu .item > a { + color: #FFFFFF; +} +.ui.inverted.menu .item .item, +.ui.inverted.menu .item .item > a { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.menu .dropdown .menu .item, +.ui.inverted.menu .dropdown .menu .item a { + color: rgba(0, 0, 0, 0.75) !important; +} +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover { + color: rgba(255, 255, 255, 0.2); +} +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + background-image: linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +.ui.vertical.inverted.menu .item:before { + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .dropdown.item:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .item > a:hover, +.ui.inverted.menu .item .menu a.item:hover, +.ui.inverted.menu .item .menu .link.item:hover { + color: #ffffff; +} +/*--- Down ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .dropdown.item:active, +.ui.inverted.menu .link.item:active, +.ui.inverted.menu a.item:active { + background-color: rgba(255, 255, 255, 0.15); +} +/*--- Active ---*/ +.ui.inverted.menu .active.item { + -webkit-box-shadow: none !important; + box-shadow: none !important; + background-color: rgba(255, 255, 255, 0.2); +} +.ui.inverted.menu .active.item, +.ui.inverted.menu .active.item a { + color: #ffffff !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background-color: rgba(255, 255, 255, 0.2); + color: #ffffff; +} +/*--- Pointers ---*/ +.ui.inverted.pointing.menu .active.item:after { + background-color: #5B5B5B; + -webkit-box-shadow: none; + box-shadow: none; } -.conversation.focus .title span { - font-weight: 600; - text-shadow: 0 1px 0 #448fca; +.ui.inverted.pointing.menu .active.item:hover:after { + background-color: #4A4A4A; } -.conversation .time { - border-top: 1px dotted #eee; - height: 1px; - margin: 10px 0; - padding: 0 !important; +/*-------------- + Selection +---------------*/ +.ui.selection.menu > .item { + color: rgba(0, 0, 0, 0.4); } -.conversation .time span { - position: relative; - top: -11px; - left: 50%; - margin-left: -20px; - font-size: 10px; - font-weight: bold; +.ui.selection.menu > .item:hover { + color: rgba(0, 0, 0, 0.6); } -.conversation .message .text a { - color: #12c; - text-decoration: underline; +.ui.selection.menu > .item.active { + color: rgba(0, 0, 0, 0.85); } -.conversation .message .text a:visited { - color: #609; +.ui.inverted.selection.menu > .item { + color: rgba(255, 255, 255, 0.4); } -.conversation input[type='file'] { - position: relative; - top: -15px; - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); +.ui.inverted.selection.menu > .item:hover { + color: rgba(255, 255, 255, 0.9); } -#dialog.sketch-dialog { - max-width: none; +.ui.inverted.selection.menu > .item.active { + color: #FFFFFF; } -.quick-create { - background-color: #fff; - width: 380px; - text-align: center; +/*-------------- + Floated +---------------*/ +.ui.floated.menu { + float: left; + margin: 0rem 0.5rem 0rem 0rem; } -.quick-create .top { - padding: 19px 0; +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem 0.5rem; +} +/*-------------- + Inverted Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.grey.menu { + background-color: #F0F0F0; +} +/*--- Inverted Colors ---*/ +.ui.inverted.green.menu { + background-color: #A1CF64; +} +.ui.inverted.green.pointing.menu .active.item:after { + background-color: #A1CF64; +} +.ui.inverted.red.menu { + background-color: #D95C5C; +} +.ui.inverted.red.pointing.menu .active.item:after { + background-color: #F16883; +} +.ui.inverted.blue.menu { + background-color: #6ECFF5; +} +.ui.inverted.blue.pointing.menu .active.item:after { + background-color: #6ECFF5; +} +.ui.inverted.purple.menu { + background-color: #564F8A; +} +.ui.inverted.purple.pointing.menu .active.item:after { + background-color: #564F8A; +} +.ui.inverted.orange.menu { + background-color: #F05940; +} +.ui.inverted.orange.pointing.menu .active.item:after { + background-color: #F05940; +} +.ui.inverted.teal.menu { + background-color: #00B5AD; +} +.ui.inverted.teal.pointing.menu .active.item:after { + background-color: #00B5AD; +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: 0.83em; + padding-bottom: 0.83em; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: 0.95em; + padding-right: 0.95em; +} +/*-------------- + Borderless +---------------*/ +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background-image: none; } -.quick-create .top .input-wrap { - position: relative; +/*------------------- + Compact +--------------------*/ +.ui.compact.menu { display: inline-block; + margin: 0em; + vertical-align: middle; } -.quick-create .top .input, -.quick-create .top .input-wrap { - width: 344px; +.ui.compact.vertical.menu { + width: auto !important; } -.quick-create .top .input { - background: #fff; - margin: 0; - font-size: 12px; +.ui.compact.vertical.menu .item:last-child::before { + display: block; } -.quick-create .top span.optional.focused { - color: #eee; +/*------------------- + Fluid +--------------------*/ +.ui.menu.fluid, +.ui.vertical.menu.fluid { + display: block; + width: 100% !important; } -.quick-create .top span.optional { - font-size: 11px; - position: absolute; - top: 11px; - right: 10px; - text-align: right; - font-style: oblique; - color: #666; - white-space: nowrap; +/*------------------- + Evenly Sized +--------------------*/ +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0px !important; + padding-right: 0px !important; + text-align: center; } -.quick-create ul.buttons { - margin: 0; - padding: 19px; - list-style-type: none; +.ui.menu.two.item .item { + width: 50%; } -.quick-create ul.buttons a { - color: #538bb4; - display: block; - margin-bottom: 9px; - background-color: #f2f2f2; - -webkit-transition: background-color 100ms ease-in; - -moz-transition: background-color 100ms ease-in; - -o-transition: background-color 100ms ease-in; - -ms-transition: background-color 100ms ease-in; - transition: background-color 100ms ease-in; - font-size: 14px; - -webkit-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0 1px 0 #ddd; - box-shadow: 0 1px 0 #ddd; - padding: 18px 0; +.ui.menu.three.item .item { + width: 33.333%; } -.quick-create ul.buttons a:hover { - background-color: #ededed; +.ui.menu.four.item .item { + width: 25%; } -.ring-container { - position: relative; +.ui.menu.five.item .item { + width: 20%; } -.ring-container .ring-item { - height: 110px; - width: 76px; - position: absolute; - z-index: 0; -} -.ring-container .ring-item.focused { - z-index: 1000 !important; -} -.ring-container .ring-item .ring-item-placeholder { - width: 76px; - height: 76px; - border: 1px solid rgba(0,0,0,0.3); - -webkit-border-radius: 38px; - border-radius: 38px; - -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2); - box-shadow: 0 2px 3px rgba(0,0,0,0.2); - background-color: #fff; - padding: 2px; - position: absolute; - z-index: 100; +.ui.menu.six.item .item { + width: 16.666%; } -.ring-container .ring-item .ring-item-placeholder .ring-bright { - width: 70px; - height: 25px; - position: absolute; - left: 18px; - top: 9px; - overflow: hidden; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); +.ui.menu.seven.item .item { + width: 14.285%; } -.ring-container .ring-item .ring-item-placeholder .ring-bright:before { - height: 70px; - display: block; - -webkit-border-radius: 35px; - border-radius: 35px; - background-color: rgba(255,255,255,0.1); - content: " "; +.ui.menu.eight.item .item { + width: 12.500%; } -.ring-container .ring-item .ring-item-placeholder:hover { - cursor: pointer; +.ui.menu.nine.item .item { + width: 11.11%; } -.ring-container .ring-item .ring-item-placeholder:hover img { - opacity: 0.6; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); - filter: alpha(opacity=60); +.ui.menu.ten.item .item { + width: 10.0%; } -.ring-container .ring-item .ring-item-placeholder:hover.closable .ring-item-cross { - display: block; -} -.ring-container .ring-item .ring-item-placeholder img { - width: 70px; - height: 70px; - -webkit-border-radius: 35px; - border-radius: 35px; -} -.ring-container .ring-item .ring-item-placeholder .ring-item-cross { - display: none; - padding: 2px 5px; - text-align: center; - position: absolute; - right: -4px; - top: -16px; - color: #aaa; - font-weight: bold; - font-size: 14px; +.ui.menu.eleven.item .item { + width: 9.09%; } -.ring-container .ring-item .ring-item-placeholder .ring-item-cross:hover { - cursor: pointer; - color: #535353; +.ui.menu.twelve.item .item { + width: 8.333%; } -.ring-container .ring-item .ring-item-container { - text-align: center; - margin-top: 76px; - height: 35px; - line-height: 35px; +/*-------------- + Fixed +---------------*/ +.ui.menu.fixed { + position: fixed; + z-index: 999; + margin: 0em; + border: none; + width: 100%; } -.ring-container .ring-item .ring-item-shadow { - position: absolute; - left: 5px; - top: 7px; - z-index: 0; - width: 54px; - height: 54px; - -webkit-box-shadow: 14px 15px 6px rgba(0,0,0,0.7); - box-shadow: 14px 15px 6px rgba(0,0,0,0.7); - -webkit-border-radius: 27px; - border-radius: 27px; -} -.create-ring, -.create-quick { - width: 400px; - margin: 0 auto; -} -.create-quick { - height: 320px; -} -.create-quick .quick-create { - margin: 0 auto; -} -.create-ring { - margin-top: 50px; - height: 130px; -} -.create-ring .ring-container .ring-item-placeholder { - text-align: center; +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + border-radius: 0px !important; } -.create-ring .ring-container .ring-item-placeholder i { - height: 70px; - -webkit-border-radius: 35px; - border-radius: 35px; - line-height: 70px; - display: block; - font-size: 32px; - color: #fff; +.ui.menu.fixed.top { + top: 0px; + left: 0px; + right: auto; + bottom: auto; } -.create-ring .ring-container .ring-item-placeholder i:before { +.ui.menu.fixed.right { + top: 0px; + right: 0px; + left: auto; + bottom: auto; width: auto; - margin: 0; + height: 100%; } -.create-ring .ring-container .ring-item-placeholder i.icon-googleplus-rect { - background-color: #d44937; +.ui.menu.fixed.bottom { + bottom: 0px; + left: 0px; + top: auto; + right: auto; } -.create-ring .ring-container .ring-item-placeholder i.icon-facebook { - background-color: #6479ac; +.ui.menu.fixed.left { + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; } -.create-ring .ring-container .ring-item-placeholder i.icon-twitter-bird { - background-color: #3bbdf0; +/* Coupling with Grid */ +.ui.fixed.menu + .ui.grid { + padding-top: 2.75rem; } -.create-ring .ring-container .ring-item-placeholder .share-options-friend, -.create-ring .ring-container .ring-item-placeholder .share-options-net { +/*------------------- + Pointing +--------------------*/ +.ui.pointing.menu .active.item:after { position: absolute; - top: 0; - width: 74px; - height: 74px; - line-height: 16px; - text-transform: uppercase; - padding: 22px 0px; - text-align: center; - font-size: 12px; + bottom: -0.3em; + left: 50%; + content: ""; + margin-left: -0.3em; + width: 0.6em; + height: 0.6em; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.2s ease + ; + -moz-transition: background 0.2s ease + ; + transition: background 0.2s ease + ; +} +/* Don't double up pointers */ +.ui.pointing.menu .active.item .menu .active.item:after { display: none; } -.create-ring .ring-container .ring-item-placeholder .share-options-net { - line-height: 32px; +.ui.vertical.pointing.menu .active.item:after { + position: absolute; + top: 50%; + margin-top: -0.3em; + right: -0.4em; + bottom: auto; + left: auto; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); } -.create-ring .ring-container .ring-item-placeholder:hover i { - opacity: 0.2; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); - filter: alpha(opacity=20); +/* Colors */ +.ui.pointing.menu .active.item:after { + background-color: #FCFCFC; } -.create-ring .ring-container .ring-item-placeholder:hover .share-options-friend, -.create-ring .ring-container .ring-item-placeholder:hover .share-options-net { - display: block; +.ui.pointing.menu .active.item:hover:after { + background-color: #FAFAFA; } -.status-icon { - display: inline-block; - width: 12px; - height: 12px; - -webkit-transition: background 200ms ease-out; - -moz-transition: background 200ms ease-out; - -o-transition: background 200ms ease-out; - -ms-transition: background 200ms ease-out; - transition: background 200ms ease-out; - position: relative; - vertical-align: middle; +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: #F4F4F4; } -.status-icon:after, -.status-icon:before { - content: ' '; - -webkit-transition: background 200ms ease-out; - -moz-transition: background 200ms ease-out; - -o-transition: background 200ms ease-out; - -ms-transition: background 200ms ease-out; - transition: background 200ms ease-out; - display: inline-block; - height: 6px; - width: 6px; - position: absolute; +.ui.pointing.menu a.active.item:active:after { + background-color: #F0F0F0; } -.status-icon:after { - bottom: 0; - right: 0; +/*-------------- + Attached +---------------*/ +.ui.menu.attached { + margin: 0rem; + border-radius: 0px; + /* avoid rgba multiplying */ + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; } -.status-icon:before { - top: 0; - left: 0; +.ui.top.attached.menu { + border-radius: 0.1875em 0.1875em 0px 0px; } -.status-icon.offline { - background: #d5d5d5; +.ui.menu.bottom.attached { + border-radius: 0px 0px 0.1875em 0.1875em; } -.status-icon.offline:after, -.status-icon.offline:before { - background: #9f9f9f; +/*-------------- + Sizes +---------------*/ +.ui.small.menu .item { + font-size: 0.875rem; } -.status-icon.online { - background: #c5db8b; +.ui.small.vertical.menu { + width: 13rem; } -.status-icon.online:after, -.status-icon.online:before { - background: #8aa34a; +.ui.menu .item { + font-size: 1rem; } -.connections-list p.none { - display: none; - padding: 10px; - text-align: center; +.ui.vertical.menu { + width: 15rem; } -.connections-list ul { - margin: 0; - padding: 0; +.ui.large.menu .item { + font-size: 1.125rem; } -.connections-list ul li { - list-style-type: none; - text-align: left; - padding: 10px; - border: 1px solid #cdcdcd; - border-top-width: 0; - border-bottom-color: #eee; - background: #fff; - font-size: 13px; - line-height: 20px; - vertical-align: middle; +.ui.large.menu .item .item { + font-size: 0.875rem; } -.connections-list ul li:first-child { - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - border-top-width: 1px; - border-top-color: #cdcdcd; +.ui.large.menu .dropdown .item { + font-size: 1rem; } -.connections-list ul li:last-child { - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-color: #cdcdcd; +.ui.large.vertical.menu { + width: 18rem; } -.connections-list ul span.status-icon { - float: right; + +/* + * # Semantic - Message + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Message +*******************************/ +.ui.message { position: relative; - top: 4px; + min-height: 18px; + margin: 1em 0em; + height: auto; + background-color: #EFEFEF; + padding: 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.6); + -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease; + -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0.325em 0.325em 0.325em 0.325em; } -.connections-list ul img { - width: 20px; - float: left; - -webkit-border-radius: 10px; - border-radius: 10px; - margin-right: 10px; +.ui.message:first-child { + margin-top: 0em; } -.connections-list[count="0"] p.none { - display: block; +.ui.message:last-child { + margin-bottom: 0em; } -#dashboard { - width: 980px; - margin: auto; - overflow: hidden; +/*-------------- + Content +---------------*/ +/* block with headers */ +.ui.message .header { + margin: 0em; + font-size: 1.33em; + font-weight: bold; } -#connections-list { - width: 240px; - float: left; +/* block with paragraphs */ +.ui.message p { + opacity: 0.85; + margin: 1em 0em; } -#my-items { - width: 701px; - float: right; +.ui.message p:first-child { + margin-top: 0em; } -#dev { - position: fixed; - bottom: 10px; - right: 0; - background: rgba(0,0,0,0.5); - -webkit-border-top-left-radius: 5px; - border-top-left-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - border-bottom-left-radius: 5px; - padding: 8px 10px; - -webkit-transform: translateX(250px); - -moz-transform: translateX(250px); - -o-transform: translateX(250px); - -ms-transform: translateX(250px); - transform: translateX(250px); - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -webkit-transform 300ms; - -o-transition: -webkit-transform 300ms; - -ms-transition: -webkit-transform 300ms; - transition: -webkit-transform 300ms; - color: #fff; - -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4); - box-shadow: inset 0 0 5px rgba(0,0,0,0.4); - font-family: "Helvetica Neue", Helvetica; -} -#dev.show, -#dev:hover { - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -o-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); -} -#open-dev { - display: block; - position: relative; - left: -8px; - top: 8px; - height: 100%; - float: left; - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); +.ui.message p:last-child { + margin-bottom: 0em; } -#dev a { - color: #fff; - text-decoration: none; - font-size: 12px; - font-weight: normal; +.ui.message .header + p { + margin-top: 0.3em; } -#dev ul { - float: right; - margin: 0; - padding: 0; +.ui.message > :first-child { + margin-top: 0em; } -#dev ul li { - margin: 0 8px; - padding: 0; - list-style: none; - display: inline-block; +.ui.message > :last-child { + margin-bottom: 0em; } -#dev ul li input { - margin: 0; - font-size: 12px; - background: rgba(0,0,0,0.2); - border: 1px solid #ddd; - -webkit-box-shadow: inset 0 0 5px #000; - box-shadow: inset 0 0 5px #000; - border: none !important; - -webkit-border-radius: 6px; - border-radius: 6px; - color: #fff; +/* block with child list */ +.ui.message ul.list { + opacity: 0.85; + list-style-position: inside; + margin: 0.2em 0em; + padding: 0em; } -@font-face { - font-family: 'icons'; - src: url("/icons/font/icons.eot"); - src: url("/icons/font/icons.eot?#iefix") format('embedded-opentype'), url("/icons/font/icons.woff") format('woff'), url("/icons/font/icons.ttf") format('truetype'), url("/icons/font/icons.svg#icons") format('svg'); - font-weight: normal; - font-style: normal; +.ui.message ul.list li { + position: relative; + list-style-type: none; + margin: 0em 0em 0.3em 1em; + padding: 0em; } -i.icon, -[class^="icon-"]:before, -[class*=" icon-"]:before { - font-family: 'icons'; - font-style: normal; - font-weight: normal; - speak: none; - display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: 0.2em; - text-align: center; - cursor: default; - line-height: 1em; +.ui.message ul.list li:before { + position: absolute; + content: '\2022'; + top: -0.05em; + left: -0.8em; + height: 100%; + vertical-align: baseline; + opacity: 0.5; } -@charset "UTF-8"; - - -.icon-plus:before { content: '\2b'; } /* '+' */ -.icon-minus:before { content: '\2d'; } /* '-' */ -.icon-keyboard:before { content: '\2328'; } /* '⌨' */ -.icon-hourglass:before { content: '\23f3'; } /* '⏳' */ -.icon-cloud:before { content: '\2601'; } /* '☁' */ -.icon-star:before { content: '\2605'; } /* '★' */ -.icon-star-empty:before { content: '\2606'; } /* '☆' */ -.icon-th-list:before { content: '\2630'; } /* '☰' */ -.icon-moon:before { content: '\263d'; } /* '☽' */ -.icon-heart-empty:before { content: '\2661'; } /* '♡' */ -.icon-heart:before { content: '\2665'; } /* '♥' */ -.icon-music:before { content: '\266a'; } /* '♪' */ -.icon-th-1-1:before { content: '\e802'; } /* '' */ -.icon-cog-1-1-1-1-1:before { content: '\e800'; } /* '' */ -.icon-cog:before { content: '\2699'; } /* '⚙' */ -.icon-attention:before { content: '\26a0'; } /* '⚠' */ -.icon-flash:before { content: '\26a1'; } /* '⚡' */ -.icon-mail:before { content: '\2709'; } /* '✉' */ -.icon-pencil:before { content: '\270e'; } /* '✎' */ -.icon-ok:before { content: '\2713'; } /* '✓' */ -.icon-cancel:before { content: '\2715'; } /* '✕' */ -.icon-help:before { content: '\2753'; } /* '❓' */ -.icon-quote-left-alt:before { content: '\275b'; } /* '❛' */ -.icon-quote-right-alt:before { content: '\275c'; } /* '❜' */ -.icon-plus-circle:before { content: '\2795'; } /* '➕' */ -.icon-minus-circle:before { content: '\2796'; } /* '➖' */ -.icon-direction:before { content: '\27a2'; } /* '➢' */ -.icon-up-thin:before { content: '\2b06'; } /* '⬆' */ -.icon-down-thin:before { content: '\2b07'; } /* '⬇' */ -.icon-resize-vertical:before { content: '\2b0c'; } /* '⬌' */ -.icon-resize-horizontal:before { content: '\2b0d'; } /* '⬍' */ -.icon-user-add:before { content: '\e700'; } /* '' */ -.icon-help-circle:before { content: '\e704'; } /* '' */ -.icon-info-circle:before { content: '\e705'; } /* '' */ -.icon-print:before { content: '\e716'; } /* '' */ -.icon-comment:before { content: '\e718'; } /* '' */ -.icon-chat:before { content: '\e720'; } /* '' */ -.icon-location:before { content: '\e724'; } /* '' */ -.icon-doc:before { content: '\e730'; } /* '' */ -.icon-docs:before { content: '\e736'; } /* '' */ -.icon-resize-full:before { content: '\e744'; } /* '' */ -.icon-resize-small:before { content: '\e746'; } /* '' */ -.icon-down-circle2:before { content: '\e758'; } /* '' */ -.icon-left-circle2:before { content: '\e759'; } /* '' */ -.icon-right-circle2:before { content: '\e75a'; } /* '' */ -.icon-up-circle2:before { content: '\e75b'; } /* '' */ -.icon-down-open:before { content: '\e75c'; } /* '' */ -.icon-left-open:before { content: '\e75d'; } /* '' */ -.icon-right-open:before { content: '\e75e'; } /* '' */ -.icon-up-open:before { content: '\e75f'; } /* '' */ -.icon-back-in-time:before { content: '\e771'; } /* '' */ -.icon-bag:before { content: '\e78a'; } /* '' */ -.icon-dot-3:before { content: '\e78d'; } /* '' */ -.icon-move:before { content: '\f047'; } /* '' */ -.icon-facebook:before { content: '\f300'; } /* '' */ -.icon-twitter-bird:before { content: '\f303'; } /* '' */ -.icon-github:before { content: '\f308'; } /* '' */ -.icon-googleplus-rect:before { content: '\f309'; } /* '' */ -.icon-mic:before { content: '\1f3a4'; } /* '\1f3a4' */ -.icon-user:before { content: '\1f464'; } /* '\1f464' */ -.icon-users:before { content: '\1f465'; } /* '\1f465' */ -.icon-monitor:before { content: '\1f4bb'; } /* '\1f4bb' */ -.icon-folder-open:before { content: '\1f4c2'; } /* '\1f4c2' */ -.icon-attach:before { content: '\1f4ce'; } /* '\1f4ce' */ -.icon-mobile:before { content: '\1f4f1'; } /* '\1f4f1' */ -.icon-camera:before { content: '\1f4f7'; } /* '\1f4f7' */ -.icon-light-up:before { content: '\1f506'; } /* '\1f506' */ -.icon-search:before { content: '\1f50d'; } /* '\1f50d' */ -.icon-lock:before { content: '\1f512'; } /* '\1f512' */ -.icon-lock-open:before { content: '\1f513'; } /* '\1f513' */ -.icon-link:before { content: '\1f517'; } /* '\1f517' */ -.icon-clock:before { content: '\1f554'; } /* '\1f554' */ -.button, -button, -input[type=submit], -input[type=button], -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label { - display: inline-block; - color: #fff; - letter-spacing: 1px; - -webkit-border-radius: 2px; - border-radius: 2px; - background-color: #1f7dca; - border-bottom: 1px solid #1c70b6; - border-right: none; - border-left: none; - border-top: none; - font: normal 12px "proxima-nova", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - outline: none; - height: 36px; - line-height: 36px; - padding: 0 20px; - vertical-align: top; - text-shadow: none; - -webkit-font-smoothing: subpixel-antialiased; -} -.button:hover, -button:hover, -input[type=submit]:hover, -input[type=button]:hover, -.buttonset input[type=radio] ~ label:hover, -.buttonset input[type=checkbox] ~ label:hover, -.button.hover, -button.hover, -input[type=submit].hover, -input[type=button].hover, -.buttonset input[type=radio] ~ label.hover, -.buttonset input[type=checkbox] ~ label.hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #1d73ba), color-stop(1, #1f7dca)); - background: -webkit-linear-gradient(top, #1d73ba 0%, #1f7dca 100%); - background: -moz-linear-gradient(top, #1d73ba 0%, #1f7dca 100%); - background: -o-linear-gradient(top, #1d73ba 0%, #1f7dca 100%); - background: -ms-linear-gradient(top, #1d73ba 0%, #1f7dca 100%); - background: linear-gradient(top, #1d73ba 0%, #1f7dca 100%); -} -.button:active, -button:active, -input[type=submit]:active, -input[type=button]:active, -.buttonset input[type=radio] ~ label:active, -.buttonset input[type=checkbox] ~ label:active, -.button.active, -button.active, -input[type=submit].active, -input[type=button].active, -.buttonset input[type=radio] ~ label.active, -.buttonset input[type=checkbox] ~ label.active { - -webkit-box-shadow: inset 0 0 3px #103e65; - box-shadow: inset 0 0 3px #103e65; -} -.button:focus, -button:focus, -input[type=submit]:focus, -input[type=button]:focus, -.buttonset input[type=radio] ~ label:focus, -.buttonset input[type=checkbox] ~ label:focus { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3f98e2), color-stop(1, #1f7dca)); - background: -webkit-linear-gradient(top, #3f98e2 0%, #1f7dca 100%); - background: -moz-linear-gradient(top, #3f98e2 0%, #1f7dca 100%); - background: -o-linear-gradient(top, #3f98e2 0%, #1f7dca 100%); - background: -ms-linear-gradient(top, #3f98e2 0%, #1f7dca 100%); - background: linear-gradient(top, #3f98e2 0%, #1f7dca 100%); - -webkit-box-shadow: 0 0 5px #c3dff6; - box-shadow: 0 0 5px #c3dff6; -} -.button[disabled], -button[disabled], -input[type=submit][disabled], -input[type=button][disabled], -.buttonset input[type=radio] ~ label[disabled], -.buttonset input[type=checkbox] ~ label[disabled] { - background: #cdcdcd; - color: #f2f2f2; - border-bottom: 1px solid #b8b8b8; - -webkit-box-shadow: none; - box-shadow: none; - text-shadow: 0 1px 0 #999; - cursor: wait; -} -.button[disabled]:hover, -button[disabled]:hover, -input[type=submit][disabled]:hover, -input[type=button][disabled]:hover, -.buttonset input[type=radio] ~ label[disabled]:hover, -.buttonset input[type=checkbox] ~ label[disabled]:hover, -.button[disabled].hover, -button[disabled].hover, -input[type=submit][disabled].hover, -input[type=button][disabled].hover, -.buttonset input[type=radio] ~ label[disabled].hover, -.buttonset input[type=checkbox] ~ label[disabled].hover { - background: #cdcdcd; - color: #f2f2f2; - border-bottom: 1px solid #b8b8b8; - -webkit-box-shadow: none; - box-shadow: none; - text-shadow: 0 1px 0 #999; - cursor: wait; -} -.button.small, -button.small, -input[type=submit].small, -input[type=button].small, -.buttonset input[type=radio] ~ label.small, -.buttonset input[type=checkbox] ~ label.small { - padding: 5px 10px; - font-size: 10px; - height: 26px; - line-height: 18px; - text-transform: uppercase; - font-weight: 600; -} -.button.gray, -button.gray, -input[type=submit].gray, -input[type=button].gray, -.buttonset input[type=radio] ~ label.gray, -.buttonset input[type=checkbox] ~ label.gray, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label { - background-color: #e6e6e6; - border-bottom: 1px solid #cfcfcf; - color: #1f7dca; -} -.button.gray:hover, -button.gray:hover, -input[type=submit].gray:hover, -input[type=button].gray:hover, -.buttonset input[type=radio] ~ label.gray:hover, -.buttonset input[type=checkbox] ~ label.gray:hover, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label, -.button.gray.hover, -button.gray.hover, -input[type=submit].gray.hover, -input[type=button].gray.hover, -.buttonset input[type=radio] ~ label.gray.hover, -.buttonset input[type=checkbox] ~ label.gray.hover, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label, -.buttonset input[type=radio] ~ label:hover, -.buttonset input[type=checkbox] ~ label:hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d4d4d4), color-stop(1, #e6e6e6)); - background: -webkit-linear-gradient(top, #d4d4d4 0%, #e6e6e6 100%); - background: -moz-linear-gradient(top, #d4d4d4 0%, #e6e6e6 100%); - background: -o-linear-gradient(top, #d4d4d4 0%, #e6e6e6 100%); - background: -ms-linear-gradient(top, #d4d4d4 0%, #e6e6e6 100%); - background: linear-gradient(top, #d4d4d4 0%, #e6e6e6 100%); -} -.button.gray:active, -button.gray:active, -input[type=submit].gray:active, -input[type=button].gray:active, -.buttonset input[type=radio] ~ label.gray:active, -.buttonset input[type=checkbox] ~ label.gray:active, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label, -.button.gray.active, -button.gray.active, -input[type=submit].gray.active, -input[type=button].gray.active, -.buttonset input[type=radio] ~ label.gray.active, -.buttonset input[type=checkbox] ~ label.gray.active, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label { - -webkit-box-shadow: inset 0 0 3px #737373; - box-shadow: inset 0 0 3px #737373; -} -.button.gray:focus, -button.gray:focus, -input[type=submit].gray:focus, -input[type=button].gray:focus, -.buttonset input[type=radio] ~ label.gray:focus, -.buttonset input[type=checkbox] ~ label.gray:focus, -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebebeb), color-stop(1, #e6e6e6)); - background: -webkit-linear-gradient(top, #ebebeb 0%, #e6e6e6 100%); - background: -moz-linear-gradient(top, #ebebeb 0%, #e6e6e6 100%); - background: -o-linear-gradient(top, #ebebeb 0%, #e6e6e6 100%); - background: -ms-linear-gradient(top, #ebebeb 0%, #e6e6e6 100%); - background: linear-gradient(top, #ebebeb 0%, #e6e6e6 100%); - -webkit-box-shadow: 0 0 5px #f9f9f9; - box-shadow: 0 0 5px #f9f9f9; -} -.button.green, -button.green, -input[type=submit].green, -input[type=button].green, -.buttonset input[type=radio] ~ label.green, -.buttonset input[type=checkbox] ~ label.green { - background-color: #73ca4b; - border-bottom: 1px solid #64c139; -} -.button.green:hover, -button.green:hover, -input[type=submit].green:hover, -input[type=button].green:hover, -.buttonset input[type=radio] ~ label.green:hover, -.buttonset input[type=checkbox] ~ label.green:hover, -.button.green.hover, -button.green.hover, -input[type=submit].green.hover, -input[type=button].green.hover, -.buttonset input[type=radio] ~ label.green.hover, -.buttonset input[type=checkbox] ~ label.green.hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #66c53a), color-stop(1, #73ca4b)); - background: -webkit-linear-gradient(top, #66c53a 0%, #73ca4b 100%); - background: -moz-linear-gradient(top, #66c53a 0%, #73ca4b 100%); - background: -o-linear-gradient(top, #66c53a 0%, #73ca4b 100%); - background: -ms-linear-gradient(top, #66c53a 0%, #73ca4b 100%); - background: linear-gradient(top, #66c53a 0%, #73ca4b 100%); -} -.button.green:active, -button.green:active, -input[type=submit].green:active, -input[type=button].green:active, -.buttonset input[type=radio] ~ label.green:active, -.buttonset input[type=checkbox] ~ label.green:active, -.button.green.active, -button.green.active, -input[type=submit].green.active, -input[type=button].green.active, -.buttonset input[type=radio] ~ label.green.active, -.buttonset input[type=checkbox] ~ label.green.active { - -webkit-box-shadow: inset 0 0 3px #376b20; - box-shadow: inset 0 0 3px #376b20; -} -.button.green:focus, -button.green:focus, -input[type=submit].green:focus, -input[type=button].green:focus, -.buttonset input[type=radio] ~ label.green:focus, -.buttonset input[type=checkbox] ~ label.green:focus { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8fd56f), color-stop(1, #73ca4b)); - background: -webkit-linear-gradient(top, #8fd56f 0%, #73ca4b 100%); - background: -moz-linear-gradient(top, #8fd56f 0%, #73ca4b 100%); - background: -o-linear-gradient(top, #8fd56f 0%, #73ca4b 100%); - background: -ms-linear-gradient(top, #8fd56f 0%, #73ca4b 100%); - background: linear-gradient(top, #8fd56f 0%, #73ca4b 100%); - -webkit-box-shadow: 0 0 5px #dcf2d2; - box-shadow: 0 0 5px #dcf2d2; -} -.button.twitter, -button.twitter, -input[type=submit].twitter, -input[type=button].twitter, -.buttonset input[type=radio] ~ label.twitter, -.buttonset input[type=checkbox] ~ label.twitter { - background-color: #65d6f2; - border-bottom: 1px solid #45ceef; -} -.button.twitter:hover, -button.twitter:hover, -input[type=submit].twitter:hover, -input[type=button].twitter:hover, -.buttonset input[type=radio] ~ label.twitter:hover, -.buttonset input[type=checkbox] ~ label.twitter:hover, -.button.twitter.hover, -button.twitter.hover, -input[type=submit].twitter.hover, -input[type=button].twitter.hover, -.buttonset input[type=radio] ~ label.twitter.hover, -.buttonset input[type=checkbox] ~ label.twitter.hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4ccff0), color-stop(1, #65d6f2)); - background: -webkit-linear-gradient(top, #4ccff0 0%, #65d6f2 100%); - background: -moz-linear-gradient(top, #4ccff0 0%, #65d6f2 100%); - background: -o-linear-gradient(top, #4ccff0 0%, #65d6f2 100%); - background: -ms-linear-gradient(top, #4ccff0 0%, #65d6f2 100%); - background: linear-gradient(top, #4ccff0 0%, #65d6f2 100%); -} -.button.twitter:active, -button.twitter:active, -input[type=submit].twitter:active, -input[type=button].twitter:active, -.buttonset input[type=radio] ~ label.twitter:active, -.buttonset input[type=checkbox] ~ label.twitter:active, -.button.twitter.active, -button.twitter.active, -input[type=submit].twitter.active, -input[type=button].twitter.active, -.buttonset input[type=radio] ~ label.twitter.active, -.buttonset input[type=checkbox] ~ label.twitter.active { - -webkit-box-shadow: inset 0 0 3px #0d819e; - box-shadow: inset 0 0 3px #0d819e; -} -.button.twitter:focus, -button.twitter:focus, -input[type=submit].twitter:focus, -input[type=button].twitter:focus, -.buttonset input[type=radio] ~ label.twitter:focus, -.buttonset input[type=checkbox] ~ label.twitter:focus { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #84def5), color-stop(1, #65d6f2)); - background: -webkit-linear-gradient(top, #84def5 0%, #65d6f2 100%); - background: -moz-linear-gradient(top, #84def5 0%, #65d6f2 100%); - background: -o-linear-gradient(top, #84def5 0%, #65d6f2 100%); - background: -ms-linear-gradient(top, #84def5 0%, #65d6f2 100%); - background: linear-gradient(top, #84def5 0%, #65d6f2 100%); - -webkit-box-shadow: 0 0 5px #d8f5fc; - box-shadow: 0 0 5px #d8f5fc; -} -.button.facebook, -button.facebook, -input[type=submit].facebook, -input[type=button].facebook, -.buttonset input[type=radio] ~ label.facebook, -.buttonset input[type=checkbox] ~ label.facebook { - background-color: #3c5a98; - border-bottom: 1px solid #365189; -} -.button.facebook:hover, -button.facebook:hover, -input[type=submit].facebook:hover, -input[type=button].facebook:hover, -.buttonset input[type=radio] ~ label.facebook:hover, -.buttonset input[type=checkbox] ~ label.facebook:hover, -.button.facebook.hover, -button.facebook.hover, -input[type=submit].facebook.hover, -input[type=button].facebook.hover, -.buttonset input[type=radio] ~ label.facebook.hover, -.buttonset input[type=checkbox] ~ label.facebook.hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #37538c), color-stop(1, #3c5a98)); - background: -webkit-linear-gradient(top, #37538c 0%, #3c5a98 100%); - background: -moz-linear-gradient(top, #37538c 0%, #3c5a98 100%); - background: -o-linear-gradient(top, #37538c 0%, #3c5a98 100%); - background: -ms-linear-gradient(top, #37538c 0%, #3c5a98 100%); - background: linear-gradient(top, #37538c 0%, #3c5a98 100%); -} -.button.facebook:active, -button.facebook:active, -input[type=submit].facebook:active, -input[type=button].facebook:active, -.buttonset input[type=radio] ~ label.facebook:active, -.buttonset input[type=checkbox] ~ label.facebook:active, -.button.facebook.active, -button.facebook.active, -input[type=submit].facebook.active, -input[type=button].facebook.active, -.buttonset input[type=radio] ~ label.facebook.active, -.buttonset input[type=checkbox] ~ label.facebook.active { - -webkit-box-shadow: inset 0 0 3px #1e2d4c; - box-shadow: inset 0 0 3px #1e2d4c; -} -.button.facebook:focus, -button.facebook:focus, -input[type=submit].facebook:focus, -input[type=button].facebook:focus, -.buttonset input[type=radio] ~ label.facebook:focus, -.buttonset input[type=checkbox] ~ label.facebook:focus { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5476bc), color-stop(1, #3c5a98)); - background: -webkit-linear-gradient(top, #5476bc 0%, #3c5a98 100%); - background: -moz-linear-gradient(top, #5476bc 0%, #3c5a98 100%); - background: -o-linear-gradient(top, #5476bc 0%, #3c5a98 100%); - background: -ms-linear-gradient(top, #5476bc 0%, #3c5a98 100%); - background: linear-gradient(top, #5476bc 0%, #3c5a98 100%); - -webkit-box-shadow: 0 0 5px #cad4ea; - box-shadow: 0 0 5px #cad4ea; -} -.button.google, -button.google, -input[type=submit].google, -input[type=button].google, -.buttonset input[type=radio] ~ label.google, -.buttonset input[type=checkbox] ~ label.google { - background-color: #fe9245; - border-bottom: 1px solid #fe7f25; -} -.button.google:hover, -button.google:hover, -input[type=submit].google:hover, -input[type=button].google:hover, -.buttonset input[type=radio] ~ label.google:hover, -.buttonset input[type=checkbox] ~ label.google:hover, -.button.google.hover, -button.google.hover, -input[type=submit].google.hover, -input[type=button].google.hover, -.buttonset input[type=radio] ~ label.google.hover, -.buttonset input[type=checkbox] ~ label.google.hover { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fe832b), color-stop(1, #fe9245)); - background: -webkit-linear-gradient(top, #fe832b 0%, #fe9245 100%); - background: -moz-linear-gradient(top, #fe832b 0%, #fe9245 100%); - background: -o-linear-gradient(top, #fe832b 0%, #fe9245 100%); - background: -ms-linear-gradient(top, #fe832b 0%, #fe9245 100%); - background: linear-gradient(top, #fe832b 0%, #fe9245 100%); -} -.button.google:active, -button.google:active, -input[type=submit].google:active, -input[type=button].google:active, -.buttonset input[type=radio] ~ label.google:active, -.buttonset input[type=checkbox] ~ label.google:active, -.button.google.active, -button.google.active, -input[type=submit].google.active, -input[type=button].google.active, -.buttonset input[type=radio] ~ label.google.active, -.buttonset input[type=checkbox] ~ label.google.active { - -webkit-box-shadow: inset 0 0 3px #a14301; - box-shadow: inset 0 0 3px #a14301; -} -.button.google:focus, -button.google:focus, -input[type=submit].google:focus, -input[type=button].google:focus, -.buttonset input[type=radio] ~ label.google:focus, -.buttonset input[type=checkbox] ~ label.google:focus { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fea86a), color-stop(1, #fe9245)); - background: -webkit-linear-gradient(top, #fea86a 0%, #fe9245 100%); - background: -moz-linear-gradient(top, #fea86a 0%, #fe9245 100%); - background: -o-linear-gradient(top, #fea86a 0%, #fe9245 100%); - background: -ms-linear-gradient(top, #fea86a 0%, #fe9245 100%); - background: linear-gradient(top, #fea86a 0%, #fe9245 100%); - -webkit-box-shadow: 0 0 5px #ffe4d1; - box-shadow: 0 0 5px #ffe4d1; -} -.buttonset input[type=radio], -.buttonset input[type=checkbox] { - display: none; +.ui.message ul.list li:first-child { + margin-top: 0em; } -.buttonset input[type=radio] ~ label, -.buttonset input[type=checkbox] ~ label { - -webkit-border-radius: 0px; - border-radius: 0px; - -webkit-box-shadow: 1px 0 0px rgba(255,255,255,0.5) inset; - box-shadow: 1px 0 0px rgba(255,255,255,0.5) inset; - border-right: 1px solid rgba(0,0,0,0.08); -} -.buttonset input[type=radio] ~ label:nth-child(2), -.buttonset input[type=checkbox] ~ label:nth-child(2) { - -webkit-border-radius: 2px 0 0 2px; - border-radius: 2px 0 0 2px; -} -.buttonset input[type=radio] ~ label:last-child, -.buttonset input[type=checkbox] ~ label:last-child { - -webkit-border-radius: 0px 2px 2px 0; - border-radius: 0px 2px 2px 0; - border-right-color: rgba(0,0,0,0.05); -} -.buttonset input[type=radio]:checked + label, -.buttonset input[type=checkbox]:checked + label { - -webkit-box-shadow: -1px 0 1px rgba(255,255,255,0.8), 0 0 50px rgba(0,0,0,0.03) inset, 0 0 20px rgba(0,0,0,0.05) inset, 0 2px 3px rgba(0,0,0,0.08) inset; - box-shadow: -1px 0 1px rgba(255,255,255,0.8), 0 0 50px rgba(0,0,0,0.03) inset, 0 0 20px rgba(0,0,0,0.05) inset, 0 2px 3px rgba(0,0,0,0.08) inset; - border-right-color: rgba(0,0,0,0.15); -} -.buttonset input[type=radio]:checked + label + label, -.buttonset input[type=checkbox]:checked + label + label { - padding: 100px; -} -.popover .tip-inner { - -webkit-border-radius: 5px; - border-radius: 5px; - background-color: rgba(0,0,0,0.4); - border: none; - padding: 3px; +/* dismissable block */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + right: 0em; + top: 0em; + width: 2.5em; + height: 2.5em; + opacity: 0.7; + padding: 0.75em 0em 0em 0.75em; + z-index: 2; + -webkit-transition: opacity 0.1s linear + ; + -moz-transition: opacity 0.1s linear + ; + transition: opacity 0.1s linear + ; + z-index: 10; } -.popover .tip-inner .popover-wrapper { - -webkit-border-radius: 3px; - border-radius: 3px; - background-color: #fff; +.ui.message > .close.icon:hover { + opacity: 1; } -.popover .tip-inner .popover-wrapper .popover-title { - font-size: 14px; - padding: 17px 17px 0; - color: #535353; +/******************************* + States +*******************************/ +.ui.message.visible { + display: block !important; +} +.ui.icon.message.animating, +.ui.icon.message.visible { + display: table !important; +} +.ui.message.hidden { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Compact +---------------*/ +.ui.compact.message { + display: inline-block; } -.popover .tip-inner .popover-wrapper .popover-content { - padding: 5px 17px 17px 17px; - text-align: left; - color: #666; -} -.popover .tip-inner .popover-wrapper .popover-content p, -.popover .tip-inner .popover-wrapper .popover-content ul { - font-size: 13px; - line-height: 16px; - margin: 5px 0; -} -.popover .tip-inner .popover-wrapper .popover-content .popover-buttons { - margin: 20px -17px -17px; - padding: 5px 10px; - border-top: 1px solid #c9c9c9; - background-color: #eee; - text-align: right; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; +/*-------------- + Attached +---------------*/ +.ui.attached.message { + margin-left: -1px; + margin-right: -1px; + margin-bottom: -1px; + border-radius: 0.325em 0.325em 0em 0em; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; } -.table-list table { - margin: 0; +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: -1px; + border-radius: 0em; } -.table-list table thead tr:hover { - background-color: inherit; +.ui.bottom.attached.message { + margin-top: -1px; + border-radius: 0em 0em 0.325em 0.325em; } -.table-list table thead tr th, -.table-list table thead tr th div { - -webkit-font-smoothing: antialiased; +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: 1em; } -.table-list table thead tr th, -.table-list table thead tr td { - font-weight: 600; - padding-top: 0; - padding-bottom: 0; - height: 34px; - line-height: 34px; - position: relative; +.ui.attached.icon.message { + display: block; + width: auto; } -.table-list table thead tr th.sorter, -.table-list table thead tr td.sorter { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; +/*-------------- + Icon +---------------*/ +.ui.icon.message { + display: table; + width: 100%; } -.table-list table thead tr th.sorter div:after, -.table-list table thead tr td.sorter div:after { - position: absolute; - margin-left: 6px; - margin-top: 1px; - content: "\2B06"; - font-size: 9px; - color: transparent; +.ui.icon.message > .icon:not(.close) { + display: table-cell; + vertical-align: middle; + font-size: 3.8em; + opacity: 0.5; } -.table-list table thead tr th.sorter.sorted-asc div:after, -.table-list table thead tr td.sorter.sorted-asc div:after { - content: "\2B06"; - font-size: 9px; - color: #fff; +.ui.icon.message > .icon + .content { + padding-left: 1em; } -.table-list table thead tr th.sorter.sorted-desc div:after, -.table-list table thead tr td.sorter.sorted-desc div:after { - content: "\2B07"; - font-size: 9px; - color: #fff; -} -.table-list table tbody tr { - border-bottom: 1px solid #dcdcdc; - border-top: 0; - background-color: #fbfbfb; -} -.table-list table tbody tr td, -.table-list table tbody tr th { - padding: 0; - height: 53px; - line-height: 53px; - font-weight: 600; - color: #333; - -webkit-box-shadow: 0 2px 0 #fff inset; - box-shadow: 0 2px 0 #fff inset; - font-size: 14px; -} -.table-list table tbody tr td a, -.table-list table tbody tr th a { - font-weight: 600; - color: #333; -} -.table-list table tbody tr td a:hover, -.table-list table tbody tr th a:hover { - text-decoration: underline; -} -.table-list table tbody tr td:hover, -.table-list table tbody tr th:hover { - cursor: pointer; +.ui.icon.message > .content { + display: table-cell; + vertical-align: middle; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.message { + background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Floating +---------------*/ +.ui.floating.message { + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Colors +---------------*/ +.ui.black.message { + background-color: #333333; + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Types +---------------*/ +.ui.blue.message, +.ui.info.message { + background-color: #E6F4F9; + color: #4D8796; +} +/* Green Text Block */ +.ui.green.message { + background-color: #DEFCD5; + color: #52A954; +} +/* Yellow Text Block */ +.ui.yellow.message, +.ui.warning.message { + background-color: #F6F3D5; + color: #96904D; +} +/* Red Text Block */ +.ui.red.message { + background-color: #F1D7D7; + color: #A95252; +} +/* Success Text Block */ +.ui.success.message, +.ui.positive.message { + background-color: #DEFCD5; + color: #52A954; +} +/* Error Text Block */ +.ui.error.message, +.ui.negative.message { + background-color: #F1D7D7; + color: #A95252; +} +/*-------------- + Sizes +---------------*/ +.ui.small.message { + font-size: 0.875em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.125em; +} +.ui.huge.message { + font-size: 1.5em; +} +.ui.massive.message { + font-size: 2em; +} + +/* + * # Semantic - Table + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Table +*******************************/ +/* Prototype */ +.ui.table { + width: 100%; + border-collapse: collapse; } -.table-list table tbody tr:hover { - background: #f0f0f0; +/* Table Content */ +.ui.table th, +.ui.table tr, +.ui.table td { + border-collapse: collapse; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all 0.1s ease-out; + -moz-transition: all 0.1s ease-out; + transition: all 0.1s ease-out; } -.table-list table tbody tr:active, -.table-list table tbody tr.current-row { - background: #f0f0f0 !important; +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); } -.table-list table tbody tr:last-child { - border: 0; +.ui.table tfoot th { + background-color: rgba(0, 0, 0, 0.03); } -.gui { +.ui.table th { + cursor: auto; + background-color: rgba(0, 0, 0, 0.05); text-align: left; + color: rgba(0, 0, 0, 0.8); + padding: 0.5em 0.7em; + vertical-align: middle; } -.gui h1 { - text-align: center; +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; } -.gui h2 { - color: $grey; - text-align: center; - text-shadow: 0 1px #fff; -} -.gui .box { - width: 540px; - padding: 20px; - border: 1px solid rgba(0,0,0,0.1); - background-color: #fff; - margin: 10px auto 80px; - -webkit-box-shadow: none; - box-shadow: none; +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; } -.gui .edit-row { - background-color: #f0f0f0; - padding: 5px; +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; } -.gui .edit-row input { - padding: 4px; - margin-right: 10px; - display: inline-block; +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; } -.gui .edit-row label { - display: inline-block; - width: 50px; - margin-left: -50px; - color: #999; - position: relative; - right: -174px; - text-align: right; +.ui.table tfoot th:only-child { + border-radius: 0px 0px 5px 5px; } -.gui .core-colors h2 { - font-weight: normal; - text-shadow: none; +/* Table Cells */ +.ui.table td { + padding: 0.40em 0.7em; + vertical-align: middle; } -.gui .core-colors .color-blue { - color: #1f7dca; +/* Footer */ +.ui.table tfoot { + border-top: 1px solid rgba(0, 0, 0, 0.03); } -.gui .core-colors .color-gray { - color: #535353; +.ui.table tfoot th { + font-weight: normal; + font-style: italic; } -.gui .core-colors .color-red { - color: #c82c3c; +/* Table Striping */ +.ui.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); } -.gui .core-colors .color-purple { - color: #351b61; +/* Icons */ +.ui.table > .icon { + vertical-align: baseline; } -.gui .core-colors .color-pink { - color: #cf004f; +.ui.table > .icon:only-child { + margin: 0em; } -.gui .core-colors .color-green { - color: #43b20d; +/* Table Segment */ +.ui.table.segment:after { + display: none; } -.gui .core-colors .color-light-gray { - color: #f2f2f2; - background-color: #bbb; +.ui.table.segment.stacked:after { + display: block; } -.gui .core-colors .color-mid-gray { - color: #cdcdcd; +/* Responsive */ +@media only screen and (max-width: 768px) { + .ui.table { + display: block; + padding: 0em; + } + .ui.table thead, + .ui.table tfoot { + display: none; + } + .ui.table tbody { + display: block; + } + .ui.table tr { + display: block; + } + .ui.table tr > td { + width: 100% !important; + display: block; + border: none !important; + padding: 0.25em 0.75em; + -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + } + .ui.table td:first-child { + font-weight: bold; + padding-top: 1em; + } + .ui.table td:last-child { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + padding-bottom: 1em; + } + /* Clear BG Colors */ + .ui.table tr > td.warning, + .ui.table tr > td.error, + .ui.table tr > td.active, + .ui.table tr > td.positive, + .ui.table tr > td.negative { + background-color: transparent !important; + } } -.gui .core-colors .color-light-green { - color: #73d044; +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +/* Sortable */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + text-align: left; + font-weight: bold; + color: #333333; + color: rgba(0, 0, 0, 0.8); +} +.ui.sortable.table thead th:hover { + background-color: rgba(0, 0, 0, 0.13); + color: rgba(0, 0, 0, 0.8); +} +/* Inverted Sortable */ +.ui.inverted.sortable.table thead th:hover { + background-color: rgba(255, 255, 255, 0.13); + color: #ffffff; +} +/*-------------- + Positive +---------------*/ +.ui.table tr.positive, +.ui.table td.positive { + -webkit-box-shadow: 2px 0px 0px #119000 inset; + box-shadow: 2px 0px 0px #119000 inset; +} +.ui.table tr.positive td, +.ui.table td.positive { + background-color: #F2F8F0 !important; + color: #119000 !important; +} +.ui.celled.table tr.positive:hover td, +.ui.celled.table tr:hover td.positive, +.ui.table tr.positive:hover td, +.ui.table td:hover.positive, +.ui.table th:hover.positive { + background-color: #ECF5E9 !important; + color: #119000 !important; +} +/*-------------- + Negative +---------------*/ +.ui.table tr.negative, +.ui.table td.negative { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.negative td, +.ui.table td.negative { + background-color: #F9F4F4; + color: #CD2929 !important; +} +.ui.celled.table tr.negative:hover td, +.ui.celled.table tr:hover td.negative, +.ui.table tr.negative:hover td, +.ui.table td:hover.negative, +.ui.table th:hover.negative { + background-color: #F2E8E8; + color: #CD2929; +} +/*-------------- + Error +---------------*/ +.ui.table tr.error, +.ui.table td.error { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.error td, +.ui.table td.error, +.ui.table th.error { + background-color: #F9F4F4; + color: #CD2929; +} +.ui.celled.table tr.error:hover td, +.ui.celled.table tr:hover td.error, +.ui.table tr.error:hover td, +.ui.table td:hover.error, +.ui.table th:hover.error { + background-color: #F2E8E8; + color: #CD2929; +} +/*-------------- + Warning +---------------*/ +.ui.table tr.warning, +.ui.table td.warning { + -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; + box-shadow: 2px 0px 0px #7D6C00 inset; +} +.ui.table tr.warning td, +.ui.table td.warning, +.ui.table th.warning { + background-color: #FBF6E9; + color: #7D6C00; +} +.ui.celled.table tr.warning:hover td, +.ui.celled.table tr:hover td.warning, +.ui.table tr.warning:hover td, +.ui.table td:hover.warning, +.ui.table th:hover.warning { + background-color: #F3EDDC; + color: #7D6C00; +} +/*-------------- + Active +---------------*/ +.ui.table tr.active, +.ui.table td.active { + -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; + box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; +} +.ui.table tr.active td, +.ui.table tr td.active { + background-color: #E0E0E0; + color: rgba(50, 50, 50, 0.9); + /* border-color: rgba(0, 0, 0, 0.15) !important; */ +} +/*-------------- + Disabled +---------------*/ +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover td, +.ui.table tr:hover td.disabled { + color: rgba(150, 150, 150, 0.3); +} +/******************************* + Variations +*******************************/ +/*-------------- + Column Count +---------------*/ +.ui.two.column.table td { + width: 50%; } -.gui .core-colors .color-highlight { - color: #f0f0f0; - background-color: #bbb; +.ui.three.column.table td { + width: 33.3333%; } -.gui .core-form { - padding-bottom: 65px; +.ui.four.column.table td { + width: 25%; } -.gui .core-form label { - margin-left: 15px; +.ui.five.column.table td { + width: 20%; } -.gui .core-form .buttons input, -.gui .core-form .buttons button { - margin-left: 10px; +.ui.six.column.table td { + width: 16.66667%; } -.gui button { - margin-right: 10px; +.ui.seven.column.table td { + width: 14.2857%; } -.gui .button { - margin-right: 10px; +.ui.eight.column.table td { + width: 12.5%; } -.gui .button .icon-twitter-bird { - margin-right: 8px; +.ui.nine.column.table td { + width: 11.1111%; } -.gui .text-stroke-instance { - text-shadow: 1px 1px 1px #f00, -1px 1px 1px #f00, 1px -1px 1px #f00, -1px -1px 1px #f00, 1px 0 1px #f00, -1px 0 1px #f00, 0 1px 1px #f00, 0 -1px 1px #f00; +.ui.ten.column.table td { + width: 10%; } -.gui .text-border-instance { - -webkit-text-stroke: 2px #f00; +.ui.eleven.column.table td { + width: 9.0909%; } -.gui .text-border-instance::before { - position: absolute; - -webkit-text-stroke: 0px; - content: attr(data-text); - color: inherit; +.ui.twelve.column.table td { + width: 8.3333%; } -.gui .buttonset { - padding: 10px 16px; +.ui.thirteen.column.table td { + width: 7.6923%; } -.gui .buttonset.icons-example label { - padding: 0px 5px; - width: 90px; - text-align: center; +.ui.fourteen.column.table td { + width: 7.1428%; } -.gui .buttonset.icons-example label:nth-child(2):before { - font-family: 'icons'; - content: '\2630'; - margin-right: 5px; +.ui.fifteen.column.table td { + width: 6.6666%; } -.gui .buttonset.icons-example label:nth-child(4):before { - font-family: 'icons'; - content: '\e802'; - margin-right: 5px; +.ui.sixteen.column.table td { + width: 6.25%; } -.gui .menu-team { - background-color: #f0f0f0; - padding: 5px; +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; } -.gui #popover span { - background-color: #fff0f0; - color: #a00; - padding: 5px; - border: 1px solid rgba(255,100,100,0.1); +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; } -.gui #list { - background-color: #e9e9e9; +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; } -.gui #status-icon p { - font-size: 12px; +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; } -.gui #status-icon p span { - margin-left: 10px; +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; } -.gui #spinner .spinner-container { - width: 100px; - height: 100px; - padding: 5px; - background-color: #535353; - border: 1px solid #000; - color: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; } -.gui #ring { - text-align: left; - position: relative; +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; } -.gui #ring input { - padding: 4px; - margin-right: 10px; +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; } -.gui #ring input#ring-name { - width: 80px; +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; } -.gui #ring input#ring-img { - width: 250px; +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; } -.gui #ring-add { - background-color: #f0f0f0; - padding: 5px; - overflow: hidden; +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; } -.gui #ring-add button { - float: right; +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; } -.gui #ring-items ul { - list-style: none; - margin: 0; - padding: 0; +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; } -.gui #ring-items ul li { - background: #eee; - overflow: hidden; - padding: 3px; +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; } -.gui #ring-items ul li a { - float: right; - font-size: 11px; - display: inline-block; - padding: 3px 0; +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; } -.gui #ring-items ul li:nth-child(even) { - background: #fff; +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; } -.gui #ring-people { - padding-top: 40px; - width: 520px; - height: 300px; - background-color: #fff; +/*-------------- + Celled +---------------*/ +.ui.celled.table { + color: rgba(0, 0, 0, 0.8); } -#message-input .mr-editor { - height: 150px; - overflow-x: hidden; - overflow-y: auto; +.ui.celled.table tbody tr, +.ui.celled.table tfoot tr { + border: none; } -#message-input .mr-editor #quick-create .quick-create { - margin: auto; +.ui.celled.table th, +.ui.celled.table td { + border: 1px solid rgba(0, 0, 0, 0.1); } -.my-items { - text-align: left; - margin: 0 auto; - font-size: 14px; - -webkit-font-smoothing: antialiased; - color: #535353; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); -} -.my-items .my-items-header { - -webkit-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; - border: 1px solid #cdcdcd; - border-bottom: 0; - -webkit-box-shadow: 0 0 1px #fff; - box-shadow: 0 0 1px #fff; - background-color: #f2f2f2; - height: 56px; -} -.my-items .my-items-header .title { - float: left; - width: 100px; - font-size: 14px; - color: #333; - font-weight: 700; - padding-left: 20px; - height: 55px; - line-height: 55px; - border: 0; -} -.my-items .my-items-header ul.items-menu { - float: right; - margin-top: 10px; - right: 10px; - height: 31px; - line-height: 31px; - list-style: none; - font-weight: 700; - font-size: 12px; +/* Coupling with segment */ +.ui.celled.table.segment th:first-child, +.ui.celled.table.segment td:first-child { + border-left: none; } -.my-items .my-items-header ul.items-menu li { - display: inline; - list-style: none; - float: right; - padding: 0 20px; +.ui.celled.table.segment th:last-child, +.ui.celled.table.segment td:last-child { + border-right: none; } -.my-items .my-items-header ul.items-menu li a { - font-weight: 700; - font-size: 12px; +/*-------------- + Sortable +---------------*/ +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; } -.my-items .my-items-header ul.items-menu li .buttonset label { - padding: 0; - text-align: center; +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.my-items .my-items-header ul.items-menu li .buttonset label a, -.my-items .my-items-header ul.items-menu li .buttonset label span { +.ui.sortable.table thead th:after { display: inline-block; - height: 36px; - padding: 0 18px; + content: ''; + width: 1em; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; + font-style: normal; font-weight: normal; + text-decoration: inherit; } -.my-items .my-items-header ul.items-menu li .buttonset label:nth-child(2) span:before, -.my-items .my-items-header ul.items-menu li .buttonset label:nth-child(2) a:before { - font-family: 'icons'; - content: '\e802'; - margin-right: 5px; +.ui.sortable.table thead th.ascending:after { + content: '\25b4'; } -.my-items .my-items-header ul.items-menu li .buttonset label:nth-child(4) span:before, -.my-items .my-items-header ul.items-menu li .buttonset label:nth-child(4) a:before { - font-family: 'icons'; - content: '\2630'; - margin-right: 5px; +.ui.sortable.table thead th.descending:after { + content: '\25be'; } -.my-items .table-list table thead tr th:nth-child(1) { - width: 275px; +/*-------------- + Inverted +---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); } -.my-items .table-list table thead tr th:nth-child(1) div { - padding-left: 22px; +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + color: rgba(255, 255, 255, 0.9); } -.my-items .table-list table thead tr th:nth-child(2) { - width: 110px; - padding-left: 0; -} -.my-items .table-list table thead tr th:nth-child(3) { - width: 150px; -} -.my-items .table-list table thead tr th:nth-child(3) div { - width: 125px; - padding-left: 22px; -} -.table-list table thead tr th.sorter.sorter-desc div:after { - content: "\2B07"; - color: #fff; -} -.table-list table thead tr th.sorter.sorter-asc div:after { - content: "\2B06"; - color: #fff; -} -.my-items .my-items-body { - -webkit-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-box-shadow: 0 0 1px #fff; - box-shadow: 0 0 1px #fff; - background-color: #f2f2f2; -} -.my-items .dropdown-link { - padding: 0; - border: 0; - color: #fff; - font-weight: 600; - text-align: right; +/* Stripes */ +.ui.inverted.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.06); } -.my-items .dropdown-link:after { - font-size: 11px; - position: initial; - content: attr(has-filter); - text-transform: capitalize; +/*-------------- + Definition +---------------*/ +.ui.definition.table td:first-child { + font-weight: bold; } -.my-items[current-view=grid] .dropdown-link { - text-align: left; +/*-------------- + Collapsing +---------------*/ +.ui.collapsing.table { + width: auto; } -ul.grid-dropdown { - width: 110px; - text-transform: capitalize; +/*-------------- + Basic +---------------*/ +.ui.basic.table th { + background-color: transparent; + padding: 0.5em; } -.my-items .item-box.unread:before, -.my-items table tbody tr.unread td:nth-child(4) div:before { - z-index: 100; - display: block; - width: 30px; - height: 30px; - right: -18px; - top: -18px; - position: absolute; - border: 1px solid #d8c600; - background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(232,209,59,0.92)), color-stop(1, rgba(255,230,64,0.92))); - background: -webkit-linear-gradient(bottom, rgba(232,209,59,0.92) 0%, rgba(255,230,64,0.92) 100%); - background: -moz-linear-gradient(bottom, rgba(232,209,59,0.92) 0%, rgba(255,230,64,0.92) 100%); - background: -o-linear-gradient(bottom, rgba(232,209,59,0.92) 0%, rgba(255,230,64,0.92) 100%); - background: -ms-linear-gradient(bottom, rgba(232,209,59,0.92) 0%, rgba(255,230,64,0.92) 100%); - background: linear-gradient(bottom, rgba(232,209,59,0.92) 0%, rgba(255,230,64,0.92) 100%); - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - content: " "; +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); } -.my-items .item-box.unread:after, -.my-items table tbody tr.unread td:nth-child(4) div:after { - z-index: 200; - position: absolute; - right: 0; - top: 0; - width: 15px; - height: 17px; - border-right: 1px solid #d8c600; - border-top: 1px solid #d8c600; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); - content: " "; +.ui.basic.table td { + padding: 0.8em 0.5em; } -.my-items .item-box .front:before { - top: -19px !important; +.ui.basic.table tbody tr:nth-child(2n) { + background-color: transparent !important; } -.my-items .item-box .front:after { - right: -1px !important; - top: -1px !important; +/*-------------- + Padded +---------------*/ +.ui.padded.table th, +.ui.padded.table td { + padding: 0.8em 1em; } -.my-items-body table tbody tr, -.my-items-body table tbody tr:last-child, -.my-items-body table tbody tr.current-row { - border: 1px solid #dcdcdc; +.ui.compact.table th { + padding: 0.3em 0.5em; } -.my-items-body table tbody tr td span.row-actions { - float: right; +.ui.compact.table td { + padding: 0.2em 0.5em; } -.my-items-body table tbody tr td span.row-actions a { - padding: 0 15px; - color: #1f7dca; +/*-------------- + Sizes +---------------*/ +/* Small */ +.ui.small.table { + font-size: 0.875em; } -.my-items-body table tbody tr td span.row-actions a.delete { - color: #c82c3c; +/* Standard */ +.ui.table { + font-size: 1em; } -.my-items-body table tbody tr td div { - padding-left: 22px; - white-space: nowrap; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; +/* Large */ +.ui.large.table { + font-size: 1.1em; } -.my-items-body table tbody tr td img { - display: block; + +/* + * # Semantic - basic.Icon (Basic) + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Basic Icon +*******************************/ +@font-face { + font-family: 'Basic Icons'; + src: url(../fonts/basic.icons.eot); + src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; } -.my-items-body table tbody tr td:nth-child(1) { - width: 355px; +i.basic.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Basic Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; } -.my-items-body table tbody tr td:nth-child(1) div { - width: 330px; +/* basic.icons available */ +i.basic.icon.circle.attention:before { + content: '\2757'; } -.my-items-body table tbody tr td:nth-child(2) { - width: 40px; - padding: 0; +/* '❗' */ +i.basic.icon.circle.help:before { + content: '\e704'; } -.my-items-body table tbody tr td:nth-child(3) { - width: 180px; - font-size: 12px; +/* '' */ +i.basic.icon.circle.info:before { + content: '\e705'; } -.my-items-body table tbody tr td:nth-child(3) div { - width: 155px; +/* '' */ +i.basic.icon.add:before { + content: '\2795'; } -.my-items-body table tbody tr td:nth-child(4) div { - font-size: 12px; - position: relative; - left: 1px; - top: -1px; - overflow: hidden; +/* '➕' */ +i.basic.icon.chart:before { + content: '📈'; } -.my-items[current-view=grid] .my-items-body { - padding-left: 1px; +/* '\1f4c8' */ +i.basic.icon.chart.bar:before { + content: '📊'; } -.items-grid-container { - zoom: 1; +/* '\1f4ca' */ +i.basic.icon.chart.pie:before { + content: '\e7a2'; } -.items-grid-container:before, -.items-grid-container:after { - content: ""; - display: table; +/* '' */ +i.basic.icon.resize.full:before { + content: '\e744'; } -.items-grid-container:after { - clear: both; +/* '' */ +i.basic.icon.resize.horizontal:before { + content: '\2b0d'; } -.items-grid-container { - -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5) inset; - box-shadow: 0 0 1px rgba(0,0,0,0.5) inset; - padding: 0 0 1px; +/* '⬍' */ +i.basic.icon.resize.small:before { + content: '\e746'; } -.items-grid-container .item-box { - position: relative; - width: 175px; - height: 160px; - float: left; - overflow: hidden; +/* '' */ +i.basic.icon.resize.vertical:before { + content: '\2b0c'; } -.items-grid-container .item-box:hover { - -webkit-transition-delay: 1s; - -moz-transition-delay: 1s; - -o-transition-delay: 1s; - -ms-transition-delay: 1s; - transition-delay: 1s; - z-index: 1000; - width: 174px; - margin-right: 1px; - -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.3), -2px 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2); - box-shadow: 1px 2px 3px rgba(0,0,0,0.3), -2px 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2); - cursor: pointer; +/* '⬌' */ +i.basic.icon.down:before { + content: '\2193'; } -.items-grid-container .item-box:hover .back { - -webkit-transition-delay: 1s; - -moz-transition-delay: 1s; - -o-transition-delay: 1s; - -ms-transition-delay: 1s; - transition-delay: 1s; - left: 0; - top: 1px; +/* '↓' */ +i.basic.icon.down.triangle:before { + content: '\25be'; } -.items-grid-container .item-box .front, -.items-grid-container .item-box .back { - width: 175px; - height: 160px; - padding: 6px; - position: absolute; +/* '▾' */ +i.basic.icon.down.arrow:before { + content: '\e75c'; } -.items-grid-container .item-box .front { - background-color: #fbfbfb; +/* '' */ +i.basic.icon.left:before { + content: '\2190'; } -.items-grid-container .item-box .front .item-preview { - margin-bottom: 5px; - overflow: hidden; - width: 161px; - height: 100px; - border: 1px solid #cdcdcd; -} -.items-grid-container .item-box .front .item-conversation { - border: 0; -} -.items-grid-container .item-box .front .item-preview.item-inset { - border: 1px solid #cdcdcd; - -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.1) inset, 0 -1px 0 #e8e8e8 inset; - box-shadow: 0 0 1px rgba(0,0,0,0.1) inset, 0 -1px 0 #e8e8e8 inset; - background-color: #ddd; -} -.items-grid-container .item-box .front .item-preview.item-inset img { - width: 160px; -} -.items-grid-container .item-box .front .item-title { - margin-left: 5px; - font-size: 13px; - padding: 7px 0 2px 0; - line-height: 13px; - font-weight: 700; - color: #333; - white-space: nowrap; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; +/* '←' */ +i.basic.icon.left.triangle:before { + content: '\25c2'; } -.items-grid-container .item-box .front .item-title a { - color: #333; +/* '◂' */ +i.basic.icon.left.arrow:before { + content: '\e75d'; } -.items-grid-container .item-box .front .item-date { - font-weight: 600; - margin-left: 5px; - font-size: 11px; - color: #7d7d7d; +/* '' */ +i.basic.icon.right:before { + content: '\2192'; } -.items-grid-container .item-box.type-conversation .front { - background-color: #fbfbfb; - background-image: url("/my-items/images/wave-gray-myitems-grid.svg"); - background-repeat: repeat-x; - background-position: 6px 151px; +/* '→' */ +i.basic.icon.right.triangle:before { + content: '\25b8'; } -.items-grid-container .item-box .front .item-preview.item-conversation img { - float: left; - -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2); - box-shadow: 0 2px 2px rgba(0,0,0,0.2); -} -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-1 img, -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-2 img { - width: 76px; - height: 76px; - -webkit-border-radius: 38px; - border-radius: 38px; - margin: 12px 2px; -} -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-1 img { - margin: 12px 42px; -} -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-3 img, -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-4 img { - width: 49px; - height: 49px; - margin: 25px 2px; - -webkit-border-radius: 24px; - border-radius: 24px; -} -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-4 img, -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-5 img, -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-6 img { - width: 46px; - height: 46px; - -webkit-border-radius: 23px; - border-radius: 23px; - margin: 2px 0px 2px 23px; -} -.items-grid-container .item-box .front .item-preview.item-conversation.item-size-6 img { - margin: 2px 3px; -} -.items-grid-container .item-box .back { - border-top: 1px solid #fff; - left: -1000px; - background-color: #f0f0f0; -} -.items-grid-container .item-box { - -webkit-box-shadow: -1px 1px 0 #dcdcdc; - box-shadow: -1px 1px 0 #dcdcdc; -} -.items-grid-container .item-box .front { - -webkit-box-shadow: -1px 1px 0 #dcdcdc inset; - box-shadow: -1px 1px 0 #dcdcdc inset; -} -#login-container { - width: 365px; - text-align: left; - margin: 0 auto; - color: #535353; +/* '▸' */ +i.basic.icon.right.arrow:before { + content: '\e75e'; } -#login-container a { - color: #1f7dca; +/* '' */ +i.basic.icon.up:before { + content: '\2191'; } -#login { - background: #fff; - border: 1px solid #c9c9c9; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 30px; - width: 100%; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - float: left; - position: relative; - z-index: 10; +/* '↑' */ +i.basic.icon.up.triangle:before { + content: '\25b4'; } -#login h1 { - color: #1f7dca; - font-weight: bold; - font-size: 26px; - margin: 0 0 15px 0; +/* '▴' */ +i.basic.icon.up.arrow:before { + content: '\e75f'; } -#login h2 { - color: #222; - font-size: 18px; - background: url("/login/images/login.png") 100% 0 no-repeat; - padding-bottom: 10px; - margin-right: -8px; +/* '' */ +i.basic.icon.folder:before { + content: '\e810'; } -#login p.status { - margin: 0; +/* '' */ +i.basic.icon.open.folder:before { + content: '📂'; } -#login p.status.initial { - color: #808080; +/* '\1f4c2' */ +i.basic.icon.globe:before { + content: '𝌍'; } -#login p.actions { - margin: 20px 0 0 0; +/* '\1d30d' */ +i.basic.icon.desk.globe:before { + content: '🌐'; } -#login p.actions input { - float: right; +/* '\1f310' */ +i.basic.icon.star:before { + content: '\e801'; } -#login + p { - float: left; - clear: both; - font-size: 12px; - margin-left: 80px; +/* '' */ +i.basic.icon.star.empty:before { + content: '\e800'; } -#login ul { - margin: 0; - padding: 0; +/* '' */ +i.basic.icon.star.half:before { + content: '\e701'; } -#login ul li { - margin: 20px 0; - font-size: 12px; - list-style: none; +/* '' */ +i.basic.icon.lock:before { + content: '🔒'; } -#login-container #login a { - color: #424242; +/* '\1f512' */ +i.basic.icon.unlock:before { + content: '🔓'; } -#policy { - font-size: 14px; +/* '\1f513' */ +i.basic.icon.layout.grid:before { + content: '\e80c'; } -#login-text { - text-align: center; - clear: both; - font-size: 12px; - padding-top: 12px; +/* '' */ +i.basic.icon.layout.block:before { + content: '\e708'; } -#onboarding { - background-color: #fff; - margin: 0 auto; - -webkit-border-radius: 3px; - border-radius: 3px; - border: solid 1px #c9c9c9; - width: 525px; +/* '' */ +i.basic.icon.layout.list:before { + content: '\e80b'; } -#onboarding .header { - padding: 15px 15px 15px 25px; +/* '' */ +i.basic.icon.heart.empty:before { + content: '\2661'; } -#onboarding h3 { - color: #333; - float: left; - font-weight: bold; - margin: 0; - line-height: 42px; +/* '♡' */ +i.basic.icon.heart:before { + content: '\2665'; } -#onboarding .steps { - cursor: default; - width: 100%; - height: 40px; - font-size: 1.2em; - font-weight: bold; - text-align: right; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +/* '♥' */ +i.basic.icon.asterisk:before { + content: '\2731'; } -#onboarding .steps > div { - display: inline-block; - color: #fff; - width: 40px; - height: 40px; - position: relative; +/* '✱' */ +i.basic.icon.attachment:before { + content: '📎'; } -#onboarding .circle { - overflow: hidden; - width: 24px; - height: 24px; - -webkit-border-radius: 12px; - border-radius: 12px; - margin: 8px; - text-align: center; - position: relative; +/* '\1f4ce' */ +i.basic.icon.attention:before { + content: '\26a0'; } -#onboarding .active { - margin-right: 4px; +/* '⚠' */ +i.basic.icon.trophy:before { + content: '🏉'; } -#onboarding .active .circle { - background-color: #ffdc2d; +/* '\1f3c9' */ +i.basic.icon.barcode:before { + content: '\e792'; } -#onboarding .inactive .circle { - background-color: #8b8b8b; - z-index: 2; +/* '' */ +i.basic.icon.cart:before { + content: '\e813'; } -#onboarding .completed .circle { - background-color: #7eac41; +/* '' */ +i.basic.icon.block:before { + content: '🚫'; } -#onboarding .completed .circle .num { - padding-left: 2px; +/* '\1f6ab' */ +i.basic.icon.book:before { + content: '📖'; } -#onboarding .inactive .overlay { - background-color: #cecece; - width: 24px; - height: 24px; - -webkit-border-radius: 12px; - border-radius: 12px; - position: absolute; - top: -7px; - left: 12px; - z-index: 1; +i.basic.icon.bookmark:before { + content: '🔖'; } -#onboarding .num { - padding-top: 2px; - position: relative; - z-index: 2; - font-size: 16px; +/* '\1f516' */ +i.basic.icon.calendar:before { + content: '📅'; } -#onboarding .ray { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; +/* '\1f4c5' */ +i.basic.icon.cancel:before { + content: '\2716'; } -#onboarding .ray div { - background-color: #ffdc2d; - width: 4px; - height: 6px; - margin: 0 auto; +/* '✖' */ +i.basic.icon.close:before { + content: '\e80d'; } -#onboarding .ray.ne { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); +/* '' */ +i.basic.icon.color:before { + content: '\e794'; } -#onboarding .ray.e { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); +/* '' */ +i.basic.icon.chat:before { + content: '\e720'; } -#onboarding .ray.se { - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -o-transform: rotate(135deg); - -ms-transform: rotate(135deg); - transform: rotate(135deg); +/* '' */ +i.basic.icon.check:before { + content: '\2611'; } -#onboarding .ray.s { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -o-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -#onboarding .ray.sw { - -webkit-transform: rotate(225deg); - -moz-transform: rotate(225deg); - -o-transform: rotate(225deg); - -ms-transform: rotate(225deg); - transform: rotate(225deg); -} -#onboarding .ray.w { - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -o-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -#onboarding .ray.nw { - -webkit-transform: rotate(315deg); - -moz-transform: rotate(315deg); - -o-transform: rotate(315deg); - -ms-transform: rotate(315deg); - transform: rotate(315deg); -} -#onboarding .dots { - color: #333; - font-weight: normal; - letter-spacing: 1px; - padding: 4px; - position: relative; - top: -4px; +/* '☑' */ +i.basic.icon.time:before { + content: '🕔'; } -#onboarding .dots.completed { - color: #7eac41; +/* '\1f554' */ +i.basic.icon.cloud:before { + content: '\2601'; } -#onboarding .dots.active { - color: #ffdc2d; +/* '☁' */ +i.basic.icon.code:before { + content: '\e714'; } -#onboarding .content { - line-height: 18px; - text-align: left; +/* '' */ +i.basic.icon.email:before { + content: '\40'; } -#onboarding .content.page-welcome { - background-color: #2da4d8; - -webkit-border-bottom-left-radius: 2px; - border-bottom-left-radius: 2px; - -webkit-border-bottom-right-radius: 2px; - border-bottom-right-radius: 2px; - margin: 1px; - color: #fff; -} -#onboarding .content.page-welcome video { - background-color: rgba(0,0,0,0.5); - display: block; - width: 100%; +/* '@' */ +i.basic.icon.settings:before { + content: '\26ef'; } -#onboarding .content.page-welcome > div { - padding: 15px 30px; +/* '⛯' */ +i.basic.icon.setting:before { + content: '\2699'; } -#onboarding .content.page-welcome .start-tour { - text-align: center; - padding-top: 0; +/* '⚙' */ +i.basic.icon.comment:before { + content: '\e802'; } -#onboarding .content.page-welcome .start-tour h4 { - color: #fff; - font-size: 16px; - line-height: 24px; - text-shadow: 0px 1px 0px #444; -} -#onboarding .content.page-welcome .start-tour .button { - margin-left: 15px; -} -#onboarding .content.page-connect { - background-color: #f9f9f9; - padding-bottom: 12px; -} -#onboarding .content.page-connect .map { - background-image: url("/map?zoom=15&width=500"); - -webkit-background-size: 100%; - -moz-background-size: 100%; - background-size: 100%; - height: 190px; - width: 500px; - margin: 0 auto; - border: solid 1px #c9c9c9; - border-top: none; - text-align: center; - position: relative; +/* '' */ +i.basic.icon.clockwise.counter:before { + content: '\27f2'; } -#onboarding .content.page-connect .map > .button { - -webkit-box-shadow: 0px 0px 15px 10px #fff; - box-shadow: 0px 0px 15px 10px #fff; - margin: 70px 15px; - padding: 0 10px; - position: relative; - text-align: left; - width: 120px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +/* '⟲' */ +i.basic.icon.clockwise:before { + content: '\27f3'; } -#onboarding .content.page-connect .map > .button .icon-facebook { - margin-right: 5px; +/* '⟳' */ +i.basic.icon.cube:before { + content: '\e807'; } -#onboarding .content.page-connect .map > .button .icon-twitter-bird { - margin-right: 12px; +/* '' */ +i.basic.icon.direction:before { + content: '\27a2'; } -#onboarding .content.page-connect .map > .button .icon-googleplus-rect { - margin-right: 13px; +/* '➢' */ +i.basic.icon.doc:before { + content: '📄'; } -#onboarding .content.page-connect .map > .matches { - background-color: rgba(44,44,44,0.8); - color: #fff; - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); - width: 100%; - height: 48px; - position: absolute; - padding-top: 12px; - bottom: 0; - left: 0; - -webkit-transition: opacity 300ms ease-in; - -moz-transition: opacity 300ms ease-in; - -o-transition: opacity 300ms ease-in; - -ms-transition: opacity 300ms ease-in; - transition: opacity 300ms ease-in; +/* '\1f4c4' */ +i.basic.icon.docs:before { + content: '\e736'; } -#onboarding .content.page-connect .map > .matches.show { - opacity: 1; - -ms-filter: none; - filter: none; +/* '' */ +i.basic.icon.dollar:before { + content: '💵'; } -#onboarding .content.page-connect .map > .matches .count { - font-weight: bold; +/* '\1f4b5' */ +i.basic.icon.paint:before { + content: '\e7b5'; } -#onboarding .content.page-connect .map .done { - color: #fff; - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); - float: right; +/* '' */ +i.basic.icon.edit:before { + content: '\270d'; +} +/* '✍' */ +i.basic.icon.eject:before { + content: '\2ecf'; +} +/* '⻏' */ +i.basic.icon.export:before { + content: '\e715'; +} +/* '' */ +i.basic.icon.hide:before { + content: '\e70b'; +} +/* '' */ +i.basic.icon.unhide:before { + content: '\e80f'; +} +/* '' */ +i.basic.icon.facebook:before { + content: '\f301'; +} +/* '' */ +i.basic.icon.fast-forward:before { + content: '\e804'; +} +/* '' */ +i.basic.icon.fire:before { + content: '🔥'; +} +/* '\1f525' */ +i.basic.icon.flag:before { + content: '\2691'; +} +/* '⚑' */ +i.basic.icon.lightning:before { + content: '\26a1'; +} +/* '⚡' */ +i.basic.icon.lab:before { + content: '\68'; +} +/* 'h' */ +i.basic.icon.flight:before { + content: '\2708'; +} +/* '✈' */ +i.basic.icon.forward:before { + content: '\27a6'; +} +/* '➦' */ +i.basic.icon.gift:before { + content: '🎁'; +} +/* '\1f381' */ +i.basic.icon.github:before { + content: '\f308'; +} +/* '' */ +i.basic.icon.globe:before { + content: '\e817'; +} +/* '' */ +i.basic.icon.headphones:before { + content: '🎧'; +} +/* '\1f3a7' */ +i.basic.icon.question:before { + content: '\2753'; +} +/* '❓' */ +i.basic.icon.home:before { + content: '\2302'; +} +/* '⌂' */ +i.basic.icon.i:before { + content: '\2139'; +} +/* 'ℹ' */ +i.basic.icon.idea:before { + content: '💡'; +} +/* '\1f4a1' */ +i.basic.icon.open:before { + content: '🔗'; +} +/* '\1f517' */ +i.basic.icon.content:before { + content: '\e782'; +} +/* '' */ +i.basic.icon.location:before { + content: '\e724'; +} +/* '' */ +i.basic.icon.mail:before { + content: '\2709'; +} +/* '✉' */ +i.basic.icon.mic:before { + content: '🎤'; +} +/* '\1f3a4' */ +i.basic.icon.minus:before { + content: '\2d'; +} +/* '-' */ +i.basic.icon.money:before { + content: '💰'; +} +/* '\1f4b0' */ +i.basic.icon.off:before { + content: '\e78e'; +} +/* '' */ +i.basic.icon.pause:before { + content: '\e808'; +} +/* '' */ +i.basic.icon.photos:before { + content: '\e812'; } -#onboarding .content.page-connect .map .auth.google, -#onboarding .content.page-connect .map .auth.google:hover { - -webkit-box-shadow: 0px 0px 25px 15px #fff4ec; - box-shadow: 0px 0px 25px 15px #fff4ec; - background-color: #fead73; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fe9c56), color-stop(1, #fead73)); - background: -webkit-linear-gradient(top, #fe9c56 0%, #fead73 100%); - background: -moz-linear-gradient(top, #fe9c56 0%, #fead73 100%); - background: -o-linear-gradient(top, #fe9c56 0%, #fead73 100%); - background: -ms-linear-gradient(top, #fe9c56 0%, #fead73 100%); - background: linear-gradient(top, #fe9c56 0%, #fead73 100%); -} -#onboarding .content.page-connect .map .auth .done { +/* '' */ +i.basic.icon.photo:before { + content: '🌄'; +} +/* '\1f304' */ +i.basic.icon.pin:before { + content: '📌'; +} +/* '\1f4cc' */ +i.basic.icon.play:before { + content: '\e809'; +} +/* '' */ +i.basic.icon.plus:before { + content: '\2b'; +} +/* '+' */ +i.basic.icon.print:before { + content: '\e716'; +} +/* '' */ +i.basic.icon.rss:before { + content: '\e73a'; +} +/* '' */ +i.basic.icon.search:before { + content: '🔍'; +} +/* '\1f50d' */ +i.basic.icon.shuffle:before { + content: '\e803'; +} +/* '' */ +i.basic.icon.tag:before { + content: '\e80a'; +} +/* '' */ +i.basic.icon.tags:before { + content: '\e70d'; +} +/* '' */ +i.basic.icon.terminal:before { + content: '\e7ac'; +} +/* '' */ +i.basic.icon.thumbs.down:before { + content: '👎'; +} +/* '\1f44e' */ +i.basic.icon.thumbs.up:before { + content: '👍'; +} +/* '\1f44d' */ +i.basic.icon.to-end:before { + content: '\e806'; +} +/* '' */ +i.basic.icon.to-start:before { + content: '\e805'; +} +/* '' */ +i.basic.icon.top.list:before { + content: '🏆'; +} +/* '\1f3c6' */ +i.basic.icon.trash:before { + content: '\e729'; +} +/* '' */ +i.basic.icon.twitter:before { + content: '\f303'; +} +/* '' */ +i.basic.icon.upload:before { + content: '\e711'; +} +/* '' */ +i.basic.icon.user.add:before { + content: '\e700'; +} +/* '' */ +i.basic.icon.user:before { + content: '👤'; +} +/* '\1f464' */ +i.basic.icon.community:before { + content: '\e814'; +} +/* '' */ +i.basic.icon.users:before { + content: '👥'; +} +/* '\1f465' */ +i.basic.icon.id:before { + content: '\e722'; +} +/* '' */ +i.basic.icon.url:before { + content: '🔗'; +} +/* '\1f517' */ +i.basic.icon.zoom.in:before { + content: '\e750'; +} +/* '' */ +i.basic.icon.zoom.out:before { + content: '\e751'; +} +/* '' */ +/*-------------- + Spacing Fix +---------------*/ +/* dropdown arrows are to the right */ +i.dropdown.basic.icon { + margin: 0em 0em 0em 0.5em; +} +/* stars are usually consecutive */ +i.basic.icon.star { + width: auto; + margin: 0em; +} +/* left side basic.icons */ +i.basic.icon.left, +i.basic.icon.left, +i.basic.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side basic.icons */ +i.basic.icon.search, +i.basic.icon.up, +i.basic.icon.down, +i.basic.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/*-------------- + Aliases +---------------*/ +/* aliases for convenience */ +i.basic.icon.delete:before { + content: '\e80d'; +} +/* '' */ +i.basic.icon.dropdown:before { + content: '\25be'; +} +/* '▾' */ +i.basic.icon.help:before { + content: '\e704'; +} +/* '' */ +i.basic.icon.info:before { + content: '\e705'; +} +/* '' */ +i.basic.icon.error:before { + content: '\e80d'; +} +/* '' */ +i.basic.icon.dislike:before { + content: '\2661'; +} +/* '♡' */ +i.basic.icon.like:before { + content: '\2665'; +} +/* '♥' */ +i.basic.icon.eye:before { + content: '\e80f'; +} +/* '' */ +i.basic.icon.eye.hidden:before { + content: '\e70b'; +} +/* '' */ +i.basic.icon.date:before { + content: '📅'; +} +/* '\1f4c5' */ +/******************************* + States +*******************************/ +i.basic.icon.hover { opacity: 1; - -ms-filter: none; - filter: none; } -#onboarding .bottom { - background-color: #f0f0f0; - height: 50px; - border-top: solid 1px #c9c9c9; - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - padding: 10px; -} -#onboarding .bottom a { - text-decoration: none; +i.basic.icon.active { + opacity: 1; } -#onboarding .bottom .back { - background: none; +i.emphasized.basic.icon { + opacity: 1; +} +i.basic.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.basic.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.link.basic.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.basic.icon { + border-radius: 500px !important; + padding: 0.5em 0em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.basic.icon { border: none; -webkit-box-shadow: none; box-shadow: none; - color: #4c4c4c; - float: left; - font-size: 12px; - font-weight: 700; - line-height: 28px; - margin-left: 6px; } -#onboarding .bottom .next { - float: right; +/*------------------- + Flipped +--------------------*/ +i.vertically.flipped.basic.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +i.horizontally.flipped.basic.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +/*------------------- + Rotated +--------------------*/ +i.left.rotated.basic.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +i.right.rotated.basic.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +/*------------------- + Square +--------------------*/ +i.square.basic.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.basic.icon:before { + vertical-align: middle; +} +i.square.inverted.basic.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.basic.icon { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Colors +--------------------*/ +i.blue.basic.icon { + color: #6ECFF5 !important; +} +i.black.basic.icon { + color: #5C6166 !important; +} +i.green.basic.icon { + color: #A1CF64 !important; +} +i.red.basic.icon { + color: #D95C5C !important; +} +i.purple.basic.icon { + color: #564F8A !important; +} +i.teal.basic.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.basic.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.basic.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.basic.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.basic.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.basic.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.teal.basic.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.basic.icon { + font-size: 0.875em; +} +i.basic.icon { + font-size: 1em; +} +i.large.basic.icon { + font-size: 1.5em; + margin-right: 0.2em; + vertical-align: middle; +} +i.big.basic.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} +i.huge.basic.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} +i.massive.basic.icon { + font-size: 8em; + margin-right: 1em; + vertical-align: middle; +} + +/* + * # Semantic - Button + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Button +*******************************/ +/* Prototype */ +.ui.button { + cursor: pointer; + display: inline-block; + vertical-align: middle; + min-height: 1em; + outline: none; + border: none; + background-color: #FAFAFA; + color: #808080; + margin: 0em; + padding: 0.8em 1.5em; + font-size: 1rem; + text-transform: uppercase; + line-height: 1; + font-weight: bold; + font-style: normal; + text-align: center; + text-decoration: none; + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + border-radius: 0.25em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease; + -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; +} +/******************************* + States +*******************************/ +/*-------------- + Active +---------------*/ +.ui.buttons .active.button, +.ui.active.button { + background-color: #EAEAEA; + background-image: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + color: rgba(0, 0, 0, 0.7); +} +/*-------------- + Hover +---------------*/ +.ui.button:hover { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); + color: rgba(0, 0, 0, 0.7); +} +.ui.button.active:hover { + background-image: none; +} +.ui.button:hover .icon, +.ui.button.hover .icon { + opacity: 0.85; +} +/*-------------- + Down +---------------*/ +.ui.button:active, +.ui.active.button:active { + background-color: #F1F1F1; + color: rgba(0, 0, 0, 0.7); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; +} +/*-------------- + Loading +---------------*/ +.ui.loading.button { + position: relative; + cursor: default; + background-color: #FFFFFF !important; + color: transparent !important; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + transition: all 0s linear; +} +.ui.loading.button:after { + position: absolute; + top: 0em; + left: 0em; + width: 100%; + height: 100%; + content: ''; + background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +/*------------------- + Disabled +--------------------*/ +.ui.disabled.button, +.ui.disabled.button:hover, +.ui.disabled.button.active { + background-color: #DDDDDD !important; + cursor: default; + color: rgba(0, 0, 0, 0.5) !important; + opacity: 0.3 !important; + background-image: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +/******************************* + Types +*******************************/ +/*------------------- + Animated +--------------------*/ +.ui.animated.button { + position: relative; + overflow: hidden; +} +.ui.animated.button .visible.content { + position: relative; +} +.ui.animated.button .hidden.content { + position: absolute; + width: 100%; +} +/* Horizontal */ +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + -webkit-transition: right 0.3s ease 0s; + -moz-transition: right 0.3s ease 0s; + transition: right 0.3s ease 0s; +} +.ui.animated.button .visible.content { + left: auto; + right: 0%; +} +.ui.animated.button .hidden.content { + top: 50%; + left: auto; + right: -100%; + margin-top: -0.55em; +} +.ui.animated.button:hover .visible.content { + left: auto; + right: 200%; +} +.ui.animated.button:hover .hidden.content { + left: auto; + right: 0%; +} +/* Vertical */ +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + -webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0s; + -moz-transition: top 0.3s ease 0s, -moz-transform 0.3s ease 0s; + transition: top 0.3s ease 0s, transform 0.3s ease 0s; +} +.ui.vertical.animated.button .visible.content { + -webkit-transform: translateY(0%); + -moz-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + right: auto; +} +.ui.vertical.animated.button .hidden.content { + top: -100%; + left: 0%; + right: auto; +} +.ui.vertical.animated.button:hover .visible.content { + -webkit-transform: translateY(200%); + -moz-transform: translateY(200%); + -ms-transform: translateY(200%); + transform: translateY(200%); + right: auto; +} +.ui.vertical.animated.button:hover .hidden.content { + top: 50%; + right: auto; +} +/* Fade */ +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; + -moz-transition: opacity 0.3s ease 0s, -moz-transform 0.3s ease 0s; + transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; +} +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.ui.fade.animated.button:hover .visible.content { + left: auto; + right: auto; + opacity: 0; + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} +.ui.fade.animated.button:hover .hidden.content { + left: 0%; + right: auto; + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +/*------------------- + Primary +--------------------*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*------------------- + Secondary +--------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*------------------- + Social +--------------------*/ +/* Facebook */ +.ui.facebook.button { + background-color: #3B579D; + color: #FFFFFF; +} +.ui.facebook.button:hover { + background-color: #3A59A9; + color: #FFFFFF; +} +.ui.facebook.button:active { + background-color: #334F95; + color: #FFFFFF; +} +/* Twitter */ +.ui.twitter.button { + background-color: #4092CC; + color: #FFFFFF; +} +.ui.twitter.button:hover { + background-color: #399ADE; + color: #FFFFFF; +} +.ui.twitter.button:active { + background-color: #3283BC; + color: #FFFFFF; +} +/* Google Plus */ +.ui.google.plus.button { + background-color: #D34836; + color: #FFFFFF; +} +.ui.google.plus.button:hover { + background-color: #E3432E; + color: #FFFFFF; +} +.ui.google.plus.button:active { + background-color: #CA3A27; + color: #FFFFFF; +} +/* Linked In */ +.ui.linkedin.button { + background-color: #1F88BE; + color: #FFFFFF; +} +.ui.linkedin.button:hover { + background-color: #1394D6; + color: #FFFFFF; +} +.ui.linkedin.button:active { + background-color: #1179AE; + color: #FFFFFF; +} +/* YouTube */ +.ui.youtube.button { + background-color: #CC181E; + color: #FFFFFF; +} +.ui.youtube.button:hover { + background-color: #DF0209; + color: #FFFFFF; +} +.ui.youtube.button:active { + background-color: #A50006; + color: #FFFFFF; +} +/* Instagram */ +.ui.instagram.button { + background-color: #49769C; + color: #FFFFFF; +} +.ui.instagram.button:hover { + background-color: #4781B1; + color: #FFFFFF; +} +.ui.instagram.button:active { + background-color: #38658A; + color: #FFFFFF; +} +/* Pinterest */ +.ui.pinterest.button { + background-color: #00ACED; + color: #FFFFFF; +} +.ui.pinterest.button:hover { + background-color: #00B9FF; + color: #FFFFFF; +} +.ui.pinterest.button:active { + background-color: #009EDA; + color: #FFFFFF; +} +/* vk.com */ +.ui.vk.button { + background-color: #4D7198; + color: #FFFFFF; +} +.ui.vk.button:hover { + background-color: #537AA5; + color: #FFFFFF; +} +.ui.vk.button:active { + background-color: #405E7E; + color: #FFFFFF; +} +/*-------------- + Icon +---------------*/ +.ui.button > .icon { + margin-right: 0.6em; + line-height: 1; + -webkit-transition: opacity 0.1s ease + ; + -moz-transition: opacity 0.1s ease + ; + transition: opacity 0.1s ease + ; +} +/******************************* + Variations +*******************************/ +/*------------------- + Floated +--------------------*/ +.ui.left.floated.buttons, +.ui.left.floated.button { + float: left; + margin-right: 0.25em; +} +.ui.right.floated.buttons, +.ui.right.floated.button { + float: right; + margin-left: 0.25em; +} +/*------------------- + Sizes +--------------------*/ +.ui.buttons .button, +.ui.button { + font-size: 1rem; +} +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: 0.8rem; +} +.ui.mini.buttons .button, +.ui.mini.button { + padding: 0.6em 0.8em; +} +.ui.mini.icon.buttons .button, +.ui.mini.buttons .icon.button { + padding: 0.6em 0.6em; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: 0.875em; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .button, +.ui.tiny.button { + padding: 0.6em 0.8em; +} +.ui.tiny.icon.buttons .button, +.ui.tiny.buttons .icon.button { + padding: 0.6em 0.6em; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: 0.875rem; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: 1.125rem; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: 1.25rem; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: 1.375rem; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: 1.5rem; + font-weight: bold; +} +/* Or resize */ +.ui.tiny.buttons .or:before, +.ui.mini.buttons .or:before { + width: 1.45em; + height: 1.55em; + line-height: 1.4; + margin-left: -0.725em; + margin-top: -0.25em; +} +.ui.tiny.buttons .or:after, +.ui.mini.buttons .or:after { + height: 1.45em; +} +/* loading */ +.ui.huge.loading.button:after { + background-image: url(../images/loader-small.gif); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after { + background-image: url(../images/loader-medium.gif); +} +.ui.huge.loading.button:after, +.ui.huge.loading.button.active:after { + background-image: url(../images/loader-small.gif); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after, +.ui.massive.buttons .loading.button.active:after, +.ui.gigantic.buttons .loading.button.active:after, +.ui.massive.loading.button.active:after, +.ui.gigantic.loading.button.active:after { + background-image: url(../images/loader-medium.gif); +} +/*-------------- + Icon Only +---------------*/ +.ui.icon.buttons .button, +.ui.icon.button { + padding: 0.8em; +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: 0.9; + margin: 0em; + vertical-align: top; +} +/*------------------- + Basic +--------------------*/ +.ui.basic.buttons .button, +.ui.basic.button { + background-color: transparent !important; + background-image: none; + color: #808080 !important; + font-weight: normal; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0.25em; +} +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background-image: none; + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background-color: rgba(0, 0, 0, 0.02) !important; + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons .button.active, +.ui.basic.button.active { + background-color: rgba(0, 0, 0, 0.05); + color: #7F7F7F; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; +} +.ui.basic.buttons .button.active:hover, +.ui.basic.button.active:hover { + background-color: rgba(0, 0, 0, 0.1); +} +/* Inverted */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + color: #FAFAFA !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; +} +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + background-image: none; + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; +} +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; +} +.ui.basic.inverted.buttons .button.active, +.ui.basic.inverted.button.active { + background-color: rgba(255, 255, 255, 0.5); + color: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.basic.inverted.buttons .button.active:hover, +.ui.basic.inverted.button.active:hover { + background-color: rgba(0, 0, 0, 0.1); +} +/* Basic Group */ +.ui.basic.buttons .button { + border-left: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active, +.ui.basic.buttons .button.active:hover { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; +} +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: 4em !important; + padding-right: 1.4em !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + top: 0em; + left: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + width: 2.75em; + height: 100%; + padding-top: 0.8em; + background-color: rgba(0, 0, 0, 0.05); + text-align: center; + border-radius: 0.25em 0px 0px 0.25em; + line-height: 1; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.25em; + border-bottom-right-radius: 0.25em; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: 0.25em; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: 0.25em; +} +.ui.right.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 4em !important; +} +.ui.left.fluid.labeled.icon.button, +.ui.right.fluid.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 1.4em !important; +} +.ui.right.labeled.icon.button .icon { + left: auto; + right: 0em; + border-radius: 0em 0.25em 0.25em 0em; + -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Toggle +---------------*/ +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: #5BBD72 !important; + color: #FFFFFF !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.ui.button.toggle.active:hover { + background-color: #58CB73 !important; + color: #FFFFFF !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +/*-------------- + Circular +---------------*/ +.ui.circular.button { + border-radius: 10em; +} +/*-------------- + Attached +---------------*/ +.ui.attached.button { + display: block; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; +} +.ui.attached.top.button { + border-radius: 0.25em 0.25em 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em 0.25em 0.25em; +} +.ui.attached.left.button { + display: inline-block; + border-left: none; + padding-right: 0.75em; + text-align: right; + border-radius: 0.25em 0em 0em 0.25em; +} +.ui.attached.right.button { + display: inline-block; + padding-left: 0.75em; + text-align: left; + border-radius: 0em 0.25em 0.25em 0em; +} +/*------------------- + Or Buttons +--------------------*/ +.ui.buttons .or { + position: relative; + float: left; + width: 0.3em; + height: 1.1em; + z-index: 3; +} +.ui.buttons .or:before { + position: absolute; + top: 50%; + left: 50%; + content: 'or'; + background-color: #FFFFFF; + margin-top: -0.1em; + margin-left: -0.9em; + width: 1.8em; + height: 1.8em; + line-height: 1.55; + color: #AAAAAA; + font-style: normal; + font-weight: normal; + text-align: center; + border-radius: 500px; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.buttons .or[data-text]:before { + content: attr(data-text); +} +.ui.buttons .or:after { + position: absolute; + top: 0em; + left: 0em; + content: ' '; + width: 0.3em; + height: 1.7em; + background-color: transparent; + border-top: 0.5em solid #FFFFFF; + border-bottom: 0.5em solid #FFFFFF; +} +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} +/*------------------- + Attached +--------------------*/ +/* Plural Attached */ +.attached.ui.buttons { + margin: 0px; + border-radius: 4px 4px 0px 0px; +} +.attached.ui.buttons .button:first-child { + border-radius: 4px 0px 0px 0px; +} +.attached.ui.buttons .button:last-child { + border-radius: 0px 4px 0px 0px; +} +/* Bottom Side */ +.bottom.attached.ui.buttons { + margin-top: -1px; + border-radius: 0px 0px 4px 4px; +} +.bottom.attached.ui.buttons .button:first-child { + border-radius: 0px 0px 0px 4px; +} +.bottom.attached.ui.buttons .button:last-child { + border-radius: 0px 0px 4px 0px; +} +/* Left Side */ +.left.attached.ui.buttons { + margin-left: -1px; + border-radius: 0px 4px 4px 0px; +} +.left.attached.ui.buttons .button:first-child { + margin-left: -1px; + border-radius: 0px 4px 0px 0px; +} +.left.attached.ui.buttons .button:last-child { + margin-left: -1px; + border-radius: 0px 0px 4px 0px; +} +/* Right Side */ +.right.attached.ui.buttons, +.right.attached.ui.buttons .button { + margin-right: -1px; + border-radius: 4px 0px 0px 4px; +} +.right.attached.ui.buttons .button:first-child { + margin-left: -1px; + border-radius: 4px 0px 0px 0px; +} +.right.attached.ui.buttons .button:last-child { + margin-left: -1px; + border-radius: 0px 0px 0px 4px; +} +/* Fluid */ +.ui.fluid.buttons, +.ui.button.fluid, +.ui.fluid.buttons > .button { + display: block; + width: 100%; +} +.ui.\32.buttons > .button, +.ui.two.buttons > .button { + width: 50%; +} +.ui.\33.buttons > .button, +.ui.three.buttons > .button { + width: 33.333%; +} +.ui.\34.buttons > .button, +.ui.four.buttons > .button { + width: 25%; +} +.ui.\35.buttons > .button, +.ui.five.buttons > .button { + width: 20%; +} +.ui.\36.buttons > .button, +.ui.six.buttons > .button { + width: 16.666%; +} +.ui.\37.buttons > .button, +.ui.seven.buttons > .button { + width: 14.285%; +} +.ui.\38.buttons > .button, +.ui.eight.buttons > .button { + width: 12.500%; +} +.ui.\39.buttons > .button, +.ui.nine.buttons > .button { + width: 11.11%; +} +.ui.\31\30.buttons > .button, +.ui.ten.buttons > .button { + width: 10%; +} +.ui.\31\31.buttons > .button, +.ui.eleven.buttons > .button { + width: 9.09%; +} +.ui.\31\32.buttons > .button, +.ui.twelve.buttons > .button { + width: 8.3333%; +} +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: block; + width: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.\32.vertical.buttons > .button, +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.\33.vertical.buttons > .button, +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.\34.vertical.buttons > .button, +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.\35.vertical.buttons > .button, +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.\36.vertical.buttons > .button, +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.\37.vertical.buttons > .button, +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.\38.vertical.buttons > .button, +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.\39.vertical.buttons > .button, +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.\31\30.vertical.buttons > .button, +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.\31\31.vertical.buttons > .button, +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.\31\32.vertical.buttons > .button, +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #4C4C4C; + color: #FFFFFF; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #333333; + color: #FFFFFF; +} +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: #5BBD72; + color: #FFFFFF; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover, +.ui.green.buttons .active.button, +.ui.green.button.active { + background-color: #58cb73; + color: #FFFFFF; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #4CB164; + color: #FFFFFF; +} +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover, +.ui.red.buttons .active.button, +.ui.red.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #6ECFF5; + color: #FFFFFF; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover, +.ui.blue.buttons .active.button, +.ui.blue.button.active { + background-color: #1AB8F3; + color: #FFFFFF; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #0AA5DF; + color: #FFFFFF; +} +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #564F8A; + color: #FFFFFF; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover, +.ui.purple.buttons .active.button, +.ui.purple.button.active { + background-color: #3E3773; + color: #FFFFFF; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #2E2860; + color: #FFFFFF; +} +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover, +.ui.teal.buttons .active.button, +.ui.teal.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*--------------- + Positive +----------------*/ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #5BBD72 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover, +.ui.positive.buttons .active.button, +.ui.positive.button.active { + background-color: #58CB73 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #4CB164 !important; + color: #FFFFFF; +} +/*--------------- + Negative +----------------*/ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #D95C5C !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover, +.ui.negative.buttons .active.button, +.ui.negative.button.active { + background-color: #E75859 !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #D24B4C !important; + color: #FFFFFF; +} +/******************************* + Groups +*******************************/ +.ui.buttons { + display: inline-block; + vertical-align: middle; +} +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.buttons .button:first-child { + border-left: none; +} +.ui.buttons .button { + float: left; + border-radius: 0em; +} +.ui.buttons .button:first-child { + margin-left: 0em; + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; +} +.ui.buttons .button:last-child { + border-top-right-radius: 0.25em; + border-bottom-right-radius: 0.25em; +} +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-block; +} +.ui.vertical.buttons .button { + display: block; + float: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.vertical.buttons .button:first-child, +.ui.vertical.buttons .mini.button:first-child, +.ui.vertical.buttons .tiny.button:first-child, +.ui.vertical.buttons .small.button:first-child, +.ui.vertical.buttons .massive.button:first-child, +.ui.vertical.buttons .huge.button:first-child { + margin-top: 0px; + border-radius: 0.25em 0.25em 0px 0px; +} +.ui.vertical.buttons .button:last-child, +.ui.vertical.buttons .mini.button:last-child, +.ui.vertical.buttons .tiny.button:last-child, +.ui.vertical.buttons .small.button:last-child, +.ui.vertical.buttons .massive.button:last-child, +.ui.vertical.buttons .huge.button:last-child, +.ui.vertical.buttons .gigantic.button:last-child { + border-radius: 0px 0px 0.25em 0.25em; +} + +/* + * # Semantic - Divider + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Divider +*******************************/ +.ui.divider { + margin: 1rem 0rem; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); + line-height: 1; + height: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.ui.vertical.divider, +.ui.horizontal.divider { + position: absolute; + border: none; + height: 0em; + margin: 0em; + background-color: transparent; + font-size: 0.875rem; + font-weight: bold; + text-align: center; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Vertical +---------------*/ +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + margin: 0% 0% 0% -3%; + width: 6%; + height: 50%; + line-height: 0; + padding: 0em; +} +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: " "; + z-index: 3; + border-left: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(255, 255, 255, 0.8); + width: 0%; + height: 80%; +} +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} +/*-------------- + Horizontal +---------------*/ +.ui.horizontal.divider { + position: relative; + top: 0%; + left: 0%; + margin: 1rem 1.5rem; + height: auto; + padding: 0em; + line-height: 1; +} +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + position: absolute; + content: " "; + z-index: 3; + width: 50%; + top: 50%; + height: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); +} +.ui.horizontal.divider:before { + left: 0%; + margin-left: -1.5rem; +} +.ui.horizontal.divider:after { + left: auto; + right: 0%; + margin-right: -1.5rem; +} +/*-------------- + Icon +---------------*/ +.ui.divider > .icon { + margin: 0em; + font-size: 1rem; + vertical-align: middle; +} +/******************************* + Variations +*******************************/ +/*-------------- + Inverted +---------------*/ +.ui.divider.inverted { + color: #ffffff; +} +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: rgba(255, 255, 255, 0.9); +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: rgba(0, 0, 0, 0.15); + border-bottom-color: rgba(255, 255, 255, 0.15); + border-left-color: rgba(0, 0, 0, 0.15); + border-right-color: rgba(255, 255, 255, 0.15); +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.divider { + margin: 0em; +} +/*-------------- + Clearing +---------------*/ +.ui.clearing.divider { + clear: both; +} +/*-------------- + Section +---------------*/ +.ui.section.divider { + margin-top: 2rem; + margin-bottom: 2rem; +} + +/* + * # Semantic - Header + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Header +*******************************/ +/* Standard */ +.ui.header { + border: none; + margin: 1em 0em 1rem; + padding: 0em; + font-size: 1.33em; + font-weight: bold; + line-height: 1.33; +} +.ui.header .sub.header { + font-size: 1rem; + font-weight: normal; + margin: 0em; + padding: 0em; + line-height: 1.2; + color: rgba(0, 0, 0, 0.5); +} +.ui.header .icon { + display: table-cell; + vertical-align: middle; + padding-right: 0.5em; +} +.ui.header .icon:only-child { + display: inline-block; + vertical-align: baseline; +} +.ui.header .content { + display: inline-block; + vertical-align: top; +} +.ui.header .icon + .content { + padding-left: 0.5em; + display: table-cell; +} +/* Positioning */ +.ui.header:first-child { + margin-top: 0em; +} +.ui.header:last-child { + margin-bottom: 0em; +} +.ui.header + p { + margin-top: 0em; +} +/*-------------- + Page Heading +---------------*/ +h1.ui.header { + min-height: 1rem; + line-height: 1.33; + font-size: 2rem; +} +h2.ui.header { + line-height: 1.33; + font-size: 1.75rem; +} +h3.ui.header { + line-height: 1.33; + font-size: 1.33rem; +} +h4.ui.header { + line-height: 1.33; + font-size: 1.1rem; +} +h5.ui.header { + line-height: 1.2; + font-size: 1rem; +} +/*-------------- + Content Heading +---------------*/ +.ui.huge.header { + min-height: 1em; + font-size: 2em; +} +.ui.large.header { + font-size: 1.75em; +} +.ui.medium.header { + font-size: 1.33em; +} +.ui.small.header { + font-size: 1.1em; +} +.ui.tiny.header { + font-size: 1em; +} +/******************************* + Types +*******************************/ +/*------------------- + Icon +--------------------*/ +.ui.icon.header { + display: inline-block; + text-align: center; +} +.ui.icon.header .icon { + float: none; + display: block; + font-size: 3em; + margin: 0em auto 0.2em; + padding: 0em; +} +.ui.icon.header .content { + display: block; +} +.ui.icon.header .circular.icon, +.ui.icon.header .square.icon { + font-size: 2em; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} +/******************************* + States +*******************************/ +.ui.disabled.header { + opacity: 0.5; +} +/******************************* + Variations +*******************************/ +/*------------------- + Colors +--------------------*/ +.ui.blue.header { + color: #6ECFF5 !important; +} +.ui.black.header { + color: #5C6166 !important; +} +.ui.green.header { + color: #A1CF64 !important; +} +.ui.red.header { + color: #D95C5C !important; +} +.ui.purple.header { + color: #564F8A !important; +} +.ui.teal.header { + color: #00B5AD !important; +} +.ui.blue.dividing.header { + border-bottom: 3px solid #6ECFF5; +} +.ui.black.dividing.header { + border-bottom: 3px solid #5C6166; +} +.ui.green.dividing.header { + border-bottom: 3px solid #A1CF64; +} +.ui.red.dividing.header { + border-bottom: 3px solid #D95C5C; +} +.ui.purple.dividing.header { + border-bottom: 3px solid #564F8A; +} +.ui.teal.dividing.header { + border-bottom: 3px solid #00B5AD; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.header { + color: #FFFFFF; +} +.ui.inverted.header .sub.header { + color: rgba(255, 255, 255, 0.85); +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.header { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.header { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.header { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.header { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.header { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.header { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.inverted.block.header { + border-bottom: none; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.header, +.ui.left.floated.header { + float: left; + margin-top: 0em; + margin-right: 0.5em; +} +.ui.right.floated.header { + float: right; + margin-top: 0em; + margin-left: 0.5em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.header { + padding: 0em; +} +/*------------------- + Dividing +--------------------*/ +.ui.dividing.header { + padding-bottom: 0.2rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} +.ui.dividing.header .icon { + margin-bottom: 0.2em; +} +/*------------------- + Block +--------------------*/ +.ui.block.header { + background-color: rgba(0, 0, 0, 0.05); + padding: 0.5em 1em; +} +/*------------------- + Attached +--------------------*/ +.ui.attached.header { + background-color: #E0E0E0; + padding: 0.5em 1rem; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-radius: 0em 0em 0.3125em 0.3125em; +} + +/* + * # Semantic - Icon + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/*! + * Font Awesome 3.2.1 + * the iconic font designed for Bootstrap + * ------------------------------------------------------------------------------ + * The full suite of pictographic icons, examples, and documentation can be + * found at http://fon.io. Stay up to date on Twitter at + * http://twitter.com/fon. + * + * License + * ------------------------------------------------------------------------------ + * - The Font Awesome font is licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + +/******************************* + Icon +*******************************/ +@font-face { + font-family: 'Icons'; + src: url(../fonts/icons.eot); + src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.svg#icons) format('svg'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +i.icon.left:before { + content: "\f060"; +} +i.icon.right:before { + content: "\f061"; +} +i.icon.add.sign.box:before { + content: "\f0fe"; +} +i.icon.add.sign:before { + content: "\f055"; +} +i.icon.add:before { + content: "\f067"; +} +i.icon.adjust:before { + content: "\f042"; +} +i.icon.adn:before { + content: "\f170"; +} +i.icon.align.center:before { + content: "\f037"; +} +i.icon.align.justify:before { + content: "\f039"; +} +i.icon.align.left:before { + content: "\f036"; +} +i.icon.align.right:before { + content: "\f038"; +} +i.icon.ambulance:before { + content: "\f0f9"; +} +i.icon.anchor:before { + content: "\f13d"; +} +i.icon.android:before { + content: "\f17b"; +} +i.icon.angle.down:before { + content: "\f107"; +} +i.icon.angle.left:before { + content: "\f104"; +} +i.icon.angle.right:before { + content: "\f105"; +} +i.icon.angle.up:before { + content: "\f106"; +} +i.icon.apple:before { + content: "\f179"; +} +i.icon.archive:before { + content: "\f187"; +} +i.icon.arrow.down:before { + content: "\f078"; +} +i.icon.arrow.left:before { + content: "\f053"; +} +i.icon.arrow.right:before { + content: "\f054"; +} +i.icon.arrow.sign.down:before { + content: "\f13a"; +} +i.icon.arrow.sign.left:before { + content: "\f137"; +} +i.icon.arrow.sign.right:before { + content: "\f138"; +} +i.icon.arrow.sign.up:before { + content: "\f139"; +} +i.icon.arrow.up:before { + content: "\f077"; +} +i.icon.asterisk:before { + content: "\f069"; +} +i.icon.attachment:before { + content: "\f0c6"; +} +i.icon.attention:before { + content: "\f06a"; +} +i.icon.backward:before { + content: "\f04a"; +} +i.icon.ban.circle:before { + content: "\f05e"; +} +i.icon.bar.chart:before { + content: "\f080"; +} +i.icon.barcode:before { + content: "\f02a"; +} +i.icon.beer:before { + content: "\f0fc"; +} +i.icon.bell.outline:before { + content: "\f0a2"; +} +i.icon.bell:before { + content: "\f0f3"; +} +i.icon.bitbucket.sign:before { + content: "\f172"; +} +i.icon.bitbucket:before { + content: "\f171"; +} +i.icon.bitcoin:before { + content: "\f15a"; +} +i.icon.bold:before { + content: "\f032"; +} +i.icon.bolt:before { + content: "\f0e7"; +} +i.icon.book:before { + content: "\f02d"; +} +i.icon.bookmark.empty:before { + content: "\f097"; +} +i.icon.bookmark:before { + content: "\f02e"; +} +i.icon.box.arrow.down:before { + content: "\f150"; +} +/*rtl:ignore*/ +i.icon.box.arrow.right:before { + content: "\f152"; +} +i.icon.box.arrow.up:before { + content: "\f151"; +} +i.icon.briefcase:before { + content: "\f0b1"; +} +i.icon.browser:before { + content: "\f022"; +} +i.icon.bug:before { + content: "\f188"; +} +i.icon.building:before { + content: "\f0f7"; +} +i.icon.bullhorn:before { + content: "\f0a1"; +} +i.icon.bullseye:before { + content: "\f140"; +} +i.icon.calendar.empty:before { + content: "\f133"; +} +i.icon.calendar:before { + content: "\f073"; +} +i.icon.camera.retro:before { + content: "\f083"; +} +i.icon.camera:before { + content: "\f030"; +} +i.icon.triangle.down:before { + content: "\f0d7"; +} +i.icon.triangle.left:before { + content: "\f0d9"; +} +i.icon.triangle.right:before { + content: "\f0da"; +} +i.icon.triangle.up:before { + content: "\f0d8"; +} +i.icon.cart:before { + content: "\f07a"; +} +i.icon.certificate:before { + content: "\f0a3"; +} +i.icon.chat.outline:before { + content: "\f0e6"; +} +i.icon.chat:before { + content: "\f086"; +} +i.icon.checkbox.empty:before { + content: "\f096"; +} +i.icon.checkbox.minus:before { + content: "\f147"; +} +i.icon.checked.checkbox:before { + content: "\f046"; +} +i.icon.checkmark.sign:before { + content: "\f14a"; +} +i.icon.checkmark:before { + content: "\f00c"; +} +i.icon.circle.blank:before { + content: "\f10c"; +} +i.icon.circle.down:before { + content: "\f0ab"; +} +i.icon.circle.left:before { + content: "\f0a8"; +} +i.icon.circle.right:before { + content: "\f0a9"; +} +i.icon.circle.up:before { + content: "\f0aa"; +} +i.icon.circle:before { + content: "\f111"; +} +i.icon.cloud.download:before { + content: "\f0ed"; +} +i.icon.cloud.upload:before { + content: "\f0ee"; +} +i.icon.cloud:before { + content: "\f0c2"; +} +i.icon.code.fork:before { + content: "\f126"; +} +i.icon.code:before { + content: "\f121"; +} +i.icon.coffee:before { + content: "\f0f4"; +} +i.icon.collapse:before { + content: "\f117"; +} +i.icon.comment.outline:before { + content: "\f0e5"; +} +i.icon.comment:before { + content: "\f075"; +} +i.icon.copy:before { + content: "\f0c5"; +} +i.icon.crop:before { + content: "\f125"; +} +i.icon.css3:before { + content: "\f13c"; +} +i.icon.cut:before { + content: "\f0c4"; +} +i.icon.dashboard:before { + content: "\f0e4"; +} +i.icon.desktop:before { + content: "\f108"; +} +i.icon.doctor:before { + content: "\f0f0"; +} +i.icon.dollar:before { + content: "\f155"; +} +i.icon.double.angle.down:before { + content: "\f103"; +} +i.icon.double.angle.left:before { + content: "\f100"; +} +i.icon.double.angle.right:before { + content: "\f101"; +} +i.icon.double.angle.up:before { + content: "\f102"; +} +i.icon.down:before { + content: "\f063"; +} +i.icon.download.disk:before { + content: "\f019"; +} +i.icon.download:before { + content: "\f01a"; +} +i.icon.dribbble:before { + content: "\f17d"; +} +i.icon.dropbox:before { + content: "\f16b"; +} +i.icon.edit.sign:before { + content: "\f14b"; +} +i.icon.edit:before { + content: "\f044"; +} +i.icon.eject:before { + content: "\f052"; +} +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} +i.icon.ellipsis.vertical:before { + content: "\f142"; +} +i.icon.eraser:before { + content: "\f12d"; +} +i.icon.euro:before { + content: "\f153"; +} +i.icon.exchange:before { + content: "\f0ec"; +} +i.icon.exclamation:before { + content: "\f12a"; +} +i.icon.expand:before { + content: "\f116"; +} +i.icon.external.url.sign:before { + content: "\f14c"; +} +i.icon.external.url:before { + content: "\f08e"; +} +i.icon.facebook.sign:before { + content: "\f082"; +} +i.icon.facebook:before { + content: "\f09a"; +} +i.icon.facetime.video:before { + content: "\f03d"; +} +i.icon.fast.backward:before { + content: "\f049"; +} +i.icon.fast.forward:before { + content: "\f050"; +} +i.icon.female:before { + content: "\f182"; +} +i.icon.fighter.jet:before { + content: "\f0fb"; +} +i.icon.file.outline:before { + content: "\f016"; +} +i.icon.file.text.outline:before { + content: "\f0f6"; +} +i.icon.file.text:before { + content: "\f15c"; +} +i.icon.file:before { + content: "\f15b"; +} +i.icon.filter:before { + content: "\f0b0"; +} +i.icon.fire.extinguisher:before { + content: "\f134"; +} +i.icon.fire:before { + content: "\f06d"; +} +i.icon.flag.checkered:before { + content: "\f11e"; +} +i.icon.flag.empty:before { + content: "\f11d"; +} +i.icon.flag:before { + content: "\f024"; +} +i.icon.flickr:before { + content: "\f16e"; +} +i.icon.folder.open.outline:before { + content: "\f115"; +} +i.icon.folder.open:before { + content: "\f07c"; +} +i.icon.folder.outline:before { + content: "\f114"; +} +i.icon.folder:before { + content: "\f07b"; +} +i.icon.font:before { + content: "\f031"; +} +i.icon.food:before { + content: "\f0f5"; +} +i.icon.forward.mail:before { + content: "\f064"; +} +i.icon.forward:before { + content: "\f04e"; +} +i.icon.foursquare:before { + content: "\f180"; +} +i.icon.frown:before { + content: "\f119"; +} +i.icon.fullscreen:before { + content: "\f0b2"; +} +i.icon.gamepad:before { + content: "\f11b"; +} +i.icon.gift:before { + content: "\f06b"; +} +i.icon.github.alternate:before { + content: "\f09b"; +} +i.icon.github.sign:before { + content: "\f092"; +} +i.icon.github:before { + content: "\f113"; +} +i.icon.gittip:before { + content: "\f184"; +} +i.icon.glass:before { + content: "\f000"; +} +i.icon.globe:before { + content: "\f0ac"; +} +i.icon.google.plus.sign:before { + content: "\f0d4"; +} +i.icon.google.plus:before { + content: "\f0d5"; +} +i.icon.h.sign:before { + content: "\f0fd"; +} +i.icon.hand.down:before { + content: "\f0a7"; +} +i.icon.hand.left:before { + content: "\f0a5"; +} +i.icon.hand.right:before { + content: "\f0a4"; +} +i.icon.hand.up:before { + content: "\f0a6"; +} +i.icon.hdd:before { + content: "\f0a0"; +} +i.icon.headphones:before { + content: "\f025"; +} +i.icon.heart.empty:before { + content: "\f08a"; +} +i.icon.heart:before { + content: "\f004"; +} +i.icon.help:before { + content: "\f059"; +} +i.icon.hide:before { + content: "\f070"; +} +i.icon.home:before { + content: "\f015"; +} +i.icon.hospital:before { + content: "\f0f8"; +} +i.icon.html5:before { + content: "\f13b"; +} +i.icon.inbox:before { + content: "\f01c"; +} +i.icon.indent.left:before { + content: "\f03b"; +} +i.icon.indent.right:before { + content: "\f03c"; +} +i.icon.info.letter:before { + content: "\f129"; +} +i.icon.info:before { + content: "\f05a"; +} +i.icon.instagram:before { + content: "\f16d"; +} +i.icon.italic:before { + content: "\f033"; +} +i.icon.key:before { + content: "\f084"; +} +i.icon.keyboard:before { + content: "\f11c"; +} +i.icon.lab:before { + content: "\f0c3"; +} +i.icon.laptop:before { + content: "\f109"; +} +i.icon.layout.block:before { + content: "\f009"; +} +i.icon.layout.column:before { + content: "\f0db"; +} +i.icon.layout.grid:before { + content: "\f00a"; +} +i.icon.layout.list:before { + content: "\f00b"; +} +i.icon.leaf:before { + content: "\f06c"; +} +i.icon.legal:before { + content: "\f0e3"; +} +i.icon.lemon:before { + content: "\f094"; +} +i.icon.level.down:before { + content: "\f149"; +} +i.icon.level.up:before { + content: "\f148"; +} +i.icon.lightbulb:before { + content: "\f0eb"; +} +i.icon.linkedin.sign:before { + content: "\f08c"; +} +i.icon.linkedin:before { + content: "\f0e1"; +} +i.icon.linux:before { + content: "\f17c"; +} +i.icon.list.ordered:before { + content: "\f0cb"; +} +i.icon.list.unordered:before { + content: "\f0ca"; +} +i.icon.list:before { + content: "\f03a"; +} +i.icon.loading:before { + content: "\f110"; +} +i.icon.location:before { + content: "\f124"; +} +i.icon.lock:before { + content: "\f023"; +} +i.icon.long.arrow.down:before { + content: "\f175"; +} +i.icon.long.arrow.left:before { + content: "\f177"; +} +i.icon.long.arrow.right:before { + content: "\f178"; +} +i.icon.long.arrow.up:before { + content: "\f176"; +} +i.icon.magic:before { + content: "\f0d0"; +} +i.icon.magnet:before { + content: "\f076"; +} +i.icon.mail.outline:before { + content: "\f003"; +} +i.icon.mail.reply:before { + content: "\f112"; +} +i.icon.mail:before { + content: "\f0e0"; +} +i.icon.male:before { + content: "\f183"; +} +i.icon.map.marker:before { + content: "\f041"; +} +i.icon.map:before { + content: "\f14e"; +} +i.icon.maxcdn:before { + content: "\f136"; +} +i.icon.medkit:before { + content: "\f0fa"; +} +i.icon.meh:before { + content: "\f11a"; +} +i.icon.minus.sign.alternate:before { + content: "\f146"; +} +i.icon.minus.sign:before { + content: "\f056"; +} +i.icon.minus:before { + content: "\f068"; +} +i.icon.mobile:before { + content: "\f10b"; +} +i.icon.money:before { + content: "\f0d6"; +} +i.icon.moon:before { + content: "\f186"; +} +i.icon.move:before { + content: "\f047"; +} +i.icon.music:before { + content: "\f001"; +} +i.icon.mute:before { + content: "\f131"; +} +i.icon.off:before { + content: "\f011"; +} +i.icon.ok.circle:before { + content: "\f05d"; +} +i.icon.ok.sign:before { + content: "\f058"; +} +i.icon.paste:before { + content: "\f0ea"; +} +i.icon.pause:before { + content: "\f04c"; +} +i.icon.payment:before { + content: "\f09d"; +} +i.icon.pencil:before { + content: "\f040"; +} +i.icon.phone.sign:before { + content: "\f098"; +} +i.icon.phone:before { + content: "\f095"; +} +i.icon.photo:before { + content: "\f03e"; +} +i.icon.pin:before { + content: "\f08d"; +} +i.icon.pinterest.sign:before { + content: "\f0d3"; +} +i.icon.pinterest:before { + content: "\f0d2"; +} +i.icon.plane:before { + content: "\f072"; +} +i.icon.play.circle:before { + content: "\f01d"; +} +i.icon.play.sign:before { + content: "\f144"; +} +i.icon.play:before { + content: "\f04b"; +} +i.icon.pound:before { + content: "\f154"; +} +i.icon.print:before { + content: "\f02f"; +} +i.icon.puzzle.piece:before { + content: "\f12e"; +} +i.icon.qr.code:before { + content: "\f029"; +} +i.icon.question:before { + content: "\f128"; +} +i.icon.quote.left:before { + content: "\f10d"; +} +i.icon.quote.right:before { + content: "\f10e"; +} +i.icon.refresh:before { + content: "\f021"; +} +i.icon.remove.circle:before { + content: "\f05c"; +} +i.icon.remove.sign:before { + content: "\f057"; +} +i.icon.remove:before { + content: "\f00d"; +} +i.icon.renren:before { + content: "\f18b"; +} +i.icon.reorder:before { + content: "\f0c9"; +} +i.icon.repeat:before { + content: "\f01e"; +} +i.icon.reply.all.mail:before { + content: "\f122"; +} +i.icon.resize.full:before { + content: "\f065"; +} +i.icon.resize.horizontal:before { + content: "\f07e"; +} +i.icon.resize.small:before { + content: "\f066"; +} +i.icon.resize.vertical:before { + content: "\f07d"; +} +i.icon.retweet:before { + content: "\f079"; +} +i.icon.road:before { + content: "\f018"; +} +i.icon.rocket:before { + content: "\f135"; +} +i.icon.rss.sign:before { + content: "\f143"; +} +i.icon.rss:before { + content: "\f09e"; +} +i.icon.rupee:before { + content: "\f156"; +} +i.icon.save:before { + content: "\f0c7"; +} +i.icon.screenshot:before { + content: "\f05b"; +} +i.icon.search:before { + content: "\f002"; +} +i.icon.setting:before { + content: "\f013"; +} +i.icon.settings:before { + content: "\f085"; +} +i.icon.share.sign:before { + content: "\f14d"; +} +i.icon.share:before { + content: "\f045"; +} +i.icon.shield:before { + content: "\f132"; +} +i.icon.shuffle:before { + content: "\f074"; +} +i.icon.sign.in:before { + content: "\f090"; +} +i.icon.sign.out:before { + content: "\f08b"; +} +i.icon.sign:before { + content: "\f0c8"; +} +i.icon.signal:before { + content: "\f012"; +} +i.icon.sitemap:before { + content: "\f0e8"; +} +i.icon.skype:before { + content: "\f17e"; +} +i.icon.smile:before { + content: "\f118"; +} +i.icon.sort.ascending:before { + content: "\f0de"; +} +i.icon.sort.descending:before { + content: "\f0dd"; +} +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} +i.icon.sort.alphabet:before { + content: "\f15d"; +} +i.icon.sort.attributes.descending:before { + content: "\f161"; +} +i.icon.sort.attributes:before { + content: "\f160"; +} +i.icon.sort.order.descending:before { + content: "\f163"; +} +i.icon.sort.order:before { + content: "\f162"; +} +i.icon.sort:before { + content: "\f0dc"; +} +i.icon.stackexchange:before { + content: "\f16c"; +} +i.icon.star.empty:before { + content: "\f006"; +} +i.icon.star.half.empty:before { + content: "\f123"; +} +i.icon.star.half.full:before, +i.icon.star.half:before { + content: "\f089"; +} +i.icon.star:before { + content: "\f005"; +} +i.icon.step.backward:before { + content: "\f048"; +} +i.icon.step.forward:before { + content: "\f051"; +} +i.icon.stethoscope:before { + content: "\f0f1"; +} +i.icon.stop:before { + content: "\f04d"; +} +i.icon.strikethrough:before { + content: "\f0cc"; +} +i.icon.subscript:before { + content: "\f12c"; +} +i.icon.suitcase:before { + content: "\f0f2"; +} +i.icon.sun:before { + content: "\f185"; +} +i.icon.superscript:before { + content: "\f12b"; +} +i.icon.table:before { + content: "\f0ce"; +} +i.icon.tablet:before { + content: "\f10a"; +} +i.icon.tag:before { + content: "\f02b"; +} +i.icon.tags:before { + content: "\f02c"; +} +i.icon.tasks:before { + content: "\f0ae"; +} +i.icon.terminal:before { + content: "\f120"; +} +i.icon.text.height:before { + content: "\f034"; +} +i.icon.text.width:before { + content: "\f035"; +} +i.icon.thumbs.down.outline:before { + content: "\f088"; +} +i.icon.thumbs.down:before { + content: "\f165"; +} +i.icon.thumbs.up.outline:before { + content: "\f087"; +} +i.icon.thumbs.up:before { + content: "\f164"; +} +i.icon.ticket:before { + content: "\f145"; +} +i.icon.time:before { + content: "\f017"; +} +i.icon.tint:before { + content: "\f043"; +} +i.icon.trash:before { + content: "\f014"; +} +i.icon.trello:before { + content: "\f181"; +} +i.icon.trophy:before { + content: "\f091"; +} +i.icon.truck:before { + content: "\f0d1"; +} +i.icon.tumblr.sign:before { + content: "\f174"; +} +i.icon.tumblr:before { + content: "\f173"; +} +i.icon.twitter.sign:before { + content: "\f081"; +} +i.icon.twitter:before { + content: "\f099"; +} +i.icon.umbrella:before { + content: "\f0e9"; +} +i.icon.underline:before { + content: "\f0cd"; +} +i.icon.undo:before { + content: "\f0e2"; +} +i.icon.unhide:before { + content: "\f06e"; +} +i.icon.unlink:before { + content: "\f127"; +} +i.icon.unlock.alternate:before { + content: "\f13e"; +} +i.icon.unlock:before { + content: "\f09c"; +} +i.icon.unmute:before { + content: "\f130"; +} +i.icon.up:before { + content: "\f062"; +} +i.icon.upload.disk:before { + content: "\f093"; +} +i.icon.upload:before { + content: "\f01b"; +} +i.icon.url:before { + content: "\f0c1"; +} +i.icon.user:before { + content: "\f007"; +} +i.icon.users:before { + content: "\f0c0"; +} +i.icon.video:before { + content: "\f008"; +} +i.icon.vk:before { + content: "\f189"; +} +i.icon.volume.down:before { + content: "\f027"; +} +i.icon.volume.off:before { + content: "\f026"; +} +i.icon.volume.up:before { + content: "\f028"; +} +i.icon.warning:before { + content: "\f071"; +} +i.icon.weibo:before { + content: "\f18a"; +} +i.icon.windows:before { + content: "\f17a"; +} +i.icon.won:before { + content: "\f159"; +} +i.icon.wrench:before { + content: "\f0ad"; +} +i.icon.xing.sign:before { + content: "\f169"; +} +i.icon.xing:before { + content: "\f168"; +} +i.icon.yen:before { + content: "\f157"; +} +i.icon.youtube.play:before { + content: "\f16a"; +} +i.icon.youtube.sign:before { + content: "\f166"; +} +i.icon.youtube:before { + content: "\f167"; +} +i.icon.yuan:before { + content: "\f158"; +} +i.icon.zoom.in:before { + content: "\f00e"; +} +i.icon.zoom.out:before { + content: "\f010"; +} +/*-------------- + Aliases +---------------*/ +i.icon.check:before { + content: "\f00c"; +} +i.icon.close:before { + content: "\f00d"; +} +i.icon.delete:before { + content: "\f00d"; +} +i.icon.like:before { + content: "\f004"; +} +i.icon.plus:before { + content: "\f067"; +} +i.icon.signup:before { + content: "\f044"; +} +/*-------------- + Spacing Fix +---------------*/ +/* stars are usually consecutive */ +i.icon.star { + width: auto; + margin: 0em; +} +/* left side icons */ +i.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side icons */ +i.icon.search, +i.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/******************************* + Types +*******************************/ +/*-------------- + Loading +---------------*/ +i.icon.loading { + -webkit-animation: icon-loading 2s linear infinite; + -moz-animation: icon-loading 2s linear infinite; + -ms-animation: icon-loading 2s linear infinite; + animation: icon-loading 2s linear infinite; +} +@keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes icon-loading { + from { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-ms-keyframes icon-loading { + from { + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/******************************* + States +*******************************/ +i.icon.hover { + opacity: 1; +} +i.icon.active { + opacity: 1; +} +i.emphasized.icon { + opacity: 1; +} +i.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +i.link.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.icon { + border-radius: 500em !important; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +/*------------------- + Flipped +--------------------*/ +i.flipped.icon, +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +/*------------------- + Rotated +--------------------*/ +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +/*------------------- + Square +--------------------*/ +i.square.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.inverted.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.icon { + background-color: #222222; + color: #FFFFFF; + -moz-osx-font-smoothing: grayscale; +} +/*------------------- + Colors +--------------------*/ +i.blue.icon { + color: #6ECFF5 !important; +} +i.black.icon { + color: #5C6166 !important; +} +i.green.icon { + color: #A1CF64 !important; +} +i.red.icon { + color: #D95C5C !important; +} +i.purple.icon { + color: #564F8A !important; +} +i.orange.icon { + color: #F05940 !important; +} +i.teal.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.orange.icon { + background-color: #F05940 !important; + color: #FFFFFF !important; +} +i.inverted.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.icon { + font-size: 0.875em; +} +i.icon { + font-size: 1em; +} +i.large.icon { + font-size: 1.5em; + vertical-align: middle; +} +i.big.icon { + font-size: 2em; + vertical-align: middle; +} +i.huge.icon { + font-size: 4em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + vertical-align: middle; +} + +/* + * # Semantic - Image + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Image +*******************************/ +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: rgba(0, 0, 0, 0.05); +} +img.ui.image { + display: block; + background: none; +} +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} +/******************************* + States +*******************************/ +.ui.disabled.image { + cursor: default; + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*-------------- + Rounded +---------------*/ +.ui.rounded.images .image, +.ui.rounded.images img, +.ui.rounded.image img, +.ui.rounded.image { + border-radius: 0.3125em; +} +/*-------------- + Circular +---------------*/ +.ui.circular.images .image, +.ui.circular.images img, +.ui.circular.image img, +.ui.circular.image { + border-radius: 500rem; +} +/*-------------- + Fluid +---------------*/ +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.image img { + display: block; + width: 100%; +} +/*-------------- + Avatar +---------------*/ +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.image img, +.ui.avatar.image { + margin-right: 0.5em; + display: inline-block; + width: 2em; + height: 2em; + border-radius: 500rem; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: 1em; + margin-bottom: 1em; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-bottom: 1em; + margin-left: 1em; +} +/*-------------- + Sizes +---------------*/ +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.image { + width: 20px; + font-size: 0.7rem; +} +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.image { + width: 35px; + font-size: 0.8rem; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.image { + width: 80px; + font-size: 0.9rem; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.image { + width: 300px; + font-size: 1rem; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.image { + width: 450px; + font-size: 1.1rem; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.image { + width: 600px; + font-size: 1.2rem; +} +/******************************* + Groups +*******************************/ +.ui.images { + font-size: 0em; + margin: 0em -0.25rem 0rem; +} +.ui.images .image, +.ui.images img { + display: inline-block; + margin: 0em 0.25em 0.5em; +} + +/* + * # Semantic - Input + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Inputs +---------------------*/ +.ui.input { + display: inline-block; + position: relative; + color: rgba(0, 0, 0, 0.7); +} +.ui.input input { + width: 100%; + font-family: "Helvetica Neue", "Helvetica", Arial; + margin: 0em; + padding: 0.65em 1em; + font-size: 1em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------------- + Placeholder +---------------------*/ +/* browsers require these rules separate */ +.ui.input::-webkit-input-placeholder { + color: #BBBBBB; +} +.ui.input::-moz-placeholder { + color: #BBBBBB; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.input input:active, +.ui.input.down input { + border-color: rgba(0, 0, 0, 0.3); + background-color: #FAFAFA; +} +/*-------------------- + Loading +---------------------*/ +.ui.loading.input > .icon { + background: url(../images/loader-mini.gif) no-repeat 50% 50%; +} +.ui.loading.input > .icon:before, +.ui.loading.input > .icon:after { + display: none; +} +/*-------------------- + Focus +---------------------*/ +.ui.input.focus input, +.ui.input input:focus { + border-color: rgba(0, 0, 0, 0.2); + color: rgba(0, 0, 0, 0.85); +} +.ui.input.focus input input::-webkit-input-placeholder, +.ui.input input:focus input::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.input.focus input input::-moz-placeholder, +.ui.input input:focus input::-moz-placeholder { + color: #AAAAAA; +} +/*-------------------- + Error +---------------------*/ +.ui.input.error input { + background-color: #FFFAFA; + border-color: #E7BEBE; + color: #D95C5C; +} +/* Error Placeholder */ +.ui.input.error input ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.input.error input :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/******************************* + Variations +*******************************/ +/*-------------------- + Transparent +---------------------*/ +.ui.transparent.input input { + border: none; + background-color: transparent; +} +/*-------------------- + Icon +---------------------*/ +.ui.icon.input > .icon { + cursor: default; + position: absolute; + opacity: 0.5; + top: 0px; + right: 0px; + margin: 0em; + width: 2.6em; + height: 100%; + padding-top: 0.82em; + text-align: center; + border-radius: 0em 0.3125em 0.3125em 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.ui.icon.input > .link.icon { + cursor: pointer; +} +.ui.icon.input input { + padding-right: 3em !important; +} +.ui.icon.input > .circular.icon { + top: 0.35em; + right: 0.5em; +} +/* Left Side */ +.ui.left.icon.input > .icon { + right: auto; + left: 1px; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.left.icon.input > .circular.icon { + right: auto; + left: 0.5em; +} +.ui.left.icon.input > input { + padding-left: 3em !important; + padding-right: 1.2em !important; +} +/* Focus */ +.ui.icon.input > input:focus ~ .icon { + opacity: 1; +} +/*-------------------- + Labeled +---------------------*/ +.ui.labeled.input .corner.label { + font-size: 0.7em; + border-radius: 0 0.3125em; +} +.ui.labeled.input .left.corner.label { + border-radius: 0.3125em 0; +} +.ui.labeled.input input { + padding-right: 2.5em !important; +} +/* Spacing with corner label */ +.ui.labeled.icon.input:not(.left) > input { + padding-right: 3.25em !important; +} +.ui.labeled.icon.input:not(.left) > .icon { + margin-right: 1.25em; +} +/*-------------------- + Action +---------------------*/ +.ui.action.input { + display: table; +} +.ui.action.input > input { + display: table-cell; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right: none; +} +.ui.action.input > .button, +.ui.action.input > .buttons { + display: table-cell; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + white-space: nowrap; +} +.ui.action.input > .button > .icon, +.ui.action.input > .buttons > .button > .icon { + display: inline; + vertical-align: top; +} +.ui.fluid.action.input { + display: table; + width: 100%; +} +.ui.fluid.action.input > .button { + width: 0.01%; +} +/*-------------------- + Fluid +---------------------*/ +.ui.fluid.input { + display: block; +} +/*-------------------- + Size +---------------------*/ +.ui.mini.input { + font-size: 0.8125em; +} +.ui.small.input { + font-size: 0.875em; +} +.ui.input { + font-size: 1em; +} +.ui.large.input { + font-size: 1.125em; +} +.ui.big.input { + font-size: 1.25em; +} +.ui.huge.input { + font-size: 1.375em; +} +.ui.massive.input { + font-size: 1.5em; +} + +/* + * # Semantic - Label + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Label +*******************************/ +.ui.label { + display: inline-block; + vertical-align: middle; + margin: -0.25em 0.25em 0em; + background-color: #E8E8E8; + border-color: #E8E8E8; + padding: 0.5em 0.8em; + color: rgba(0, 0, 0, 0.65); + text-transform: uppercase; + font-weight: normal; + border-radius: 0.325em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} +/* Link */ +a.ui.label { + cursor: pointer; +} +/* Inside Link */ +.ui.label a { + cursor: pointer; + color: inherit; + opacity: 0.8; + -webkit-transition: 0.2s opacity ease; + -moz-transition: 0.2s opacity ease; + transition: 0.2s opacity ease; +} +.ui.label a:hover { + opacity: 1; +} +/* Detail */ +.ui.label .detail { + display: inline-block; + margin-left: 0.5em; + font-weight: bold; + opacity: 0.8; +} +/* Icon */ +.ui.label .icon { + width: auto; +} +/* Removable label */ +.ui.label .delete.icon { + cursor: pointer; + margin: 0em 0em 0em 0.5em; + opacity: 0.7; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label .delete.icon:hover { + opacity: 0.99; +} +/*------------------- + Coupling +--------------------*/ +/* Padding on next content after a label */ +.ui.segment > .attached.label:first-child + * { + margin-top: 2.5em; +} +.ui.segment > .bottom.attached.label:first-child ~ :last-child { + margin-top: 0em; + margin-bottom: 2.5em; +} +/******************************* + Types +*******************************/ +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + padding-top: 0.4em; + padding-bottom: 0.4em; + line-height: 1.5em; + vertical-align: baseline; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.image.label img { + display: inline-block; + height: 2.25em; + margin: -0.4em 0.8em -0.4em -0.8em; + vertical-align: top; + border-radius: 0.325em 0em 0em 0.325em; +} +/******************************* + States +*******************************/ +/*------------------- + Disabled +--------------------*/ +.ui.label.disabled { + opacity: 0.5; +} +/*------------------- + Hover +--------------------*/ +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: #E0E0E0; + border-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + background-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Visible +--------------------*/ +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} +/*------------------- + Hidden +--------------------*/ +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Tag +--------------------*/ +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding: 0.33em 1.3em 0.33em 1.4em; + border-radius: 0px 3px 3px 0px; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + top: 0.3em; + left: 0.3em; + content: ''; + margin-left: -1em; + background-image: none; + width: 1.5em; + height: 1.5em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -0.25em; + margin-top: -0.3em; + background-color: #FFFFFF; + width: 0.55em; + height: 0.55em; + -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + border-radius: 100px 100px 100px 100px; +} +/*------------------- + Ribbon +--------------------*/ +.ui.ribbon.label { + position: relative; + margin: 0em 0.2em; + left: -2rem; + padding-left: 2rem; + border-radius: 0px 4px 4px 0px; + border-color: rgba(0, 0, 0, 0.15); +} +.ui.ribbon.label:after { + position: absolute; + content: ""; + top: 100%; + left: 0%; + border-top: 0em solid transparent; + border-right-width: 1em; + border-right-color: inherit; + border-right-style: solid; + border-bottom: 1em solid transparent; + border-left: 0em solid transparent; + width: 0em; + height: 0em; +} +/*------------------- + Attached +--------------------*/ +.ui.top.attached.label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + padding: 0.75em 1em; + border-radius: 4px 4px 0em 0em; +} +.ui.bottom.attached.label { + top: auto; + bottom: 0em; + border-radius: 0em 0em 4px 4px; +} +.ui.top.left.attached.label { + width: auto; + margin-top: 0em !important; + border-radius: 4px 0em 4px 0em; +} +.ui.top.right.attached.label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em 4px 0em 4px; +} +.ui.bottom.left.attached.label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 4px 0em 0em 4px; +} +.ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: 4px 0em 4px 0em; +} +/*------------------- + Corner Label +--------------------*/ +.ui.corner.label { + background-color: transparent; + position: absolute; + top: 0em; + right: 0em; + z-index: 10; + margin: 0em; + width: 3em; + height: 3em; + padding: 0em; + text-align: center; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + width: 0em; + height: 0em; + border-top: 0em solid transparent; + border-right: 3em solid transparent; + border-bottom: 3em solid transparent; + border-left: 0em solid transparent; + border-right-color: inherit; + -webkit-transition: border-color 0.2s ease; + -moz-transition: border-color 0.2s ease; + transition: border-color 0.2s ease; +} +.ui.corner.label .icon { + font-size: 0.875em; + margin: 0.5em 0em 0em 1.25em; +} +.ui.corner.label .text { + display: inline-block; + font-weight: bold; + margin: 0.5em 0em 0em 1em; + width: 2.5em; + font-size: 0.875em; + text-align: center; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +/* Coupling */ +.ui.rounded.image > .ui.corner.label, +.ui.input > .ui.corner.label, +.ui.segment > .ui.corner.label { + overflow: hidden; +} +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} +.ui.input > .ui.corner.label { + top: 1px; + right: 1px; +} +.ui.input > .ui.right.corner.label { + right: auto; + left: 1px; +} +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: 3em solid transparent; + border-right: 3em solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + border-top-color: inherit; +} +.ui.left.corner.label .icon { + margin: 0.5em 0em 0em -1em; +} +.ui.left.corner.label .text { + margin: 0.5em 0em 0em -1em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +/* Hover */ +.ui.corner.label:hover { + background-color: transparent; +} +/*------------------- + Fluid +--------------------*/ +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.labels .label, +.ui.inverted.label { + color: #FFFFFF !important; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: #5C6166 !important; + border-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.labels .black.label:before, +.ui.black.labels .label:before, +.ui.black.label:before { + background-color: #5C6166 !important; +} +/* Hover */ +a.ui.black.labels .label:hover, +a.ui.black.label:hover { + background-color: #333333 !important; + border-color: #333333 !important; +} +.ui.labels a.black.label:hover:before, +.ui.black.labels a.label:hover:before, +a.ui.black.label:hover:before { + background-color: #333333 !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.black.ribbon.label { + border-color: #333333 !important; +} +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: #A1CF64 !important; + border-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.labels .green.label:before, +.ui.green.labels .label:before, +.ui.green.label:before { + background-color: #A1CF64 !important; +} +/* Hover */ +a.ui.green.labels .label:hover, +a.ui.green.label:hover { + background-color: #89B84C !important; + border-color: #89B84C !important; +} +.ui.labels a.green.label:hover:before, +.ui.green.labels a.label:hover:before, +a.ui.green.label:hover:before { + background-color: #89B84C !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.green.ribbon.label { + border-color: #89B84C !important; +} +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: #D95C5C !important; + border-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.labels .red.label:before, +.ui.red.labels .label:before, +.ui.red.label:before { + background-color: #D95C5C !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Hover */ +a.ui.red.labels .label:hover, +a.ui.red.label:hover { + background-color: #DE3859 !important; + border-color: #DE3859 !important; + color: #FFFFFF !important; +} +.ui.labels a.red.label:hover:before, +.ui.red.labels a.label:hover:before, +a.ui.red.label:hover:before { + background-color: #DE3859 !important; +} +/* Ribbon */ +.ui.red.ribbon.label { + border-color: #DE3859 !important; +} +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: #6ECFF5 !important; + border-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.labels .blue.label:before, +.ui.blue.labels .label:before, +.ui.blue.label:before { + background-color: #6ECFF5 !important; +} +/* Hover */ +a.ui.blue.labels .label:hover, +.ui.blue.labels a.label:hover, +a.ui.blue.label:hover { + background-color: #1AB8F3 !important; + border-color: #1AB8F3 !important; + color: #FFFFFF !important; +} +.ui.labels a.blue.label:hover:before, +.ui.blue.labels a.label:hover:before, +a.ui.blue.label:hover:before { + background-color: #1AB8F3 !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: #1AB8F3 !important; +} +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: #564F8A !important; + border-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.labels .purple.label:before, +.ui.purple.labels .label:before, +.ui.purple.label:before { + background-color: #564F8A !important; +} +/* Hover */ +a.ui.purple.labels .label:hover, +.ui.purple.labels a.label:hover, +a.ui.purple.label:hover { + background-color: #3E3773 !important; + border-color: #3E3773 !important; + color: #FFFFFF !important; +} +.ui.labels a.purple.label:hover:before, +.ui.purple.labels a.label:hover:before, +a.ui.purple.label:hover:before { + background-color: #3E3773 !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: #3E3773 !important; +} +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: #F05940 !important; + border-color: #F05940 !important; + color: #FFFFFF !important; +} +.ui.labels .orange.label:before, +.ui.orange.labels .label:before, +.ui.orange.label:before { + background-color: #F05940 !important; +} +/* Hover */ +a.ui.orange.labels .label:hover, +.ui.orange.labels a.label:hover, +a.ui.orange.label:hover { + background-color: #FF4121 !important; + border-color: #FF4121 !important; + color: #FFFFFF !important; +} +.ui.labels a.orange.label:hover:before, +.ui.orange.labels a.label:hover:before, +a.ui.orange.label:hover:before { + background-color: #FF4121 !important; +} +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: #FF4121 !important; +} +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: #00B5AD !important; + border-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.labels .teal.label:before, +.ui.teal.labels .label:before, +.ui.teal.label:before { + background-color: #00B5AD !important; +} +/* Hover */ +a.ui.teal.labels .label:hover, +.ui.teal.labels a.label:hover, +a.ui.teal.label:hover { + background-color: #009A93 !important; + border-color: #009A93 !important; + color: #FFFFFF !important; +} +.ui.labels a.teal.label:hover:before, +.ui.teal.labels a.label:hover:before, +a.ui.teal.label:hover:before { + background-color: #009A93 !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: #009A93 !important; +} +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: -0.125em 0.5em -0.125em 0em; + padding: 0.35em 1em; + min-width: 6em; + text-align: center; +} +/*------------------- + Circular +--------------------*/ +.ui.circular.labels .label, +.ui.circular.label { + min-height: 1em; + max-height: 2em; + padding: 0.5em !important; + line-height: 1em; + text-align: center; + border-radius: 500rem; +} +/*------------------- + Pointing +--------------------*/ +.ui.pointing.label { + position: relative; +} +.ui.attached.pointing.label { + position: absolute; +} +.ui.pointing.label:before { + position: absolute; + content: ""; + width: 0.6em; + height: 0.6em; + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +/*--- Above ---*/ +.ui.pointing.label:before { + background-color: #E8E8E8; +} +.ui.pointing.label, +.ui.pointing.above.label { + margin-top: 1em; +} +.ui.pointing.label:before, +.ui.pointing.above.label:before { + margin-left: -0.3em; + top: -0.3em; + left: 50%; +} +/*--- Below ---*/ +.ui.pointing.below.label { + margin-top: 0em; + margin-bottom: 1em; +} +.ui.pointing.below.label:before { + margin-left: -0.3em; + top: auto; + right: auto; + bottom: -0.3em; + left: 50%; +} +/*--- Left ---*/ +.ui.pointing.left.label { + margin-top: 0em; + margin-left: 1em; +} +.ui.pointing.left.label:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui.pointing.right.label { + margin-top: 0em; + margin-right: 1em; +} +.ui.pointing.right.label:before { + margin-top: -0.3em; + right: -0.3em; + top: 50%; + bottom: auto; + left: auto; +} +/*------------------ + Floating Label +-------------------*/ +.ui.floating.label { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin: 0em 0em 0em -1.5em !important; +} +/*------------------- + Sizes +--------------------*/ +.ui.small.labels .label, +.ui.small.label { + font-size: 0.75rem; +} +.ui.label { + font-size: 0.8125rem; +} +.ui.large.labels .label, +.ui.large.label { + font-size: 0.875rem; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: 1rem; +} + +/* + * # Semantic - Loader + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Loader +*******************************/ +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: 50%; + left: 50%; + margin: 0px; + z-index: 1000; + -webkit-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} +.ui.dimmer .loader { + display: block; +} +/******************************* + Types +*******************************/ +/*------------------- + Text +--------------------*/ +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} +.ui.mini.text.loader { + min-width: 16px; + padding-top: 2em; + font-size: 0.875em; +} +.ui.small.text.loader { + min-width: 24px; + padding-top: 2.5em; + font-size: 0.875em; +} +.ui.text.loader { + min-width: 32px; + font-size: 1em; + padding-top: 3em; +} +.ui.large.text.loader { + min-width: 64px; + padding-top: 5em; + font-size: 1.2em; +} +/******************************* + States +*******************************/ +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.dimmer .ui.text.loader, +.ui.inverted.text.loader { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.dimmer .ui.text.loader { + color: rgba(0, 0, 0, 0.8); +} +/* Tiny Size */ +.ui.dimmer .mini.ui.loader, +.ui.inverted .mini.ui.loader { + background-image: url(../images/loader-mini-inverted.gif); +} +/* Small Size */ +.ui.dimmer .small.ui.loader, +.ui.inverted .small.ui.loader { + background-image: url(../images/loader-small-inverted.gif); +} +/* Standard Size */ +.ui.dimmer .ui.loader, +.ui.inverted.loader { + background-image: url(../images/loader-medium-inverted.gif); +} +/* Large Size */ +.ui.dimmer .large.ui.loader, +.ui.inverted .large.ui.loader { + background-image: url(../images/loader-large-inverted.gif); +} +/*------------------- + Sizes +--------------------*/ +/* Tiny Size */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: 16px; + height: 16px; + background-image: url(../images/loader-mini.gif); +} +/* Small Size */ +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 24px; + height: 24px; + background-image: url(../images/loader-small.gif); +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 32px; + height: 32px; + background: url(../images/loader-medium.gif) no-repeat; + background-position: 48% 0px; +} +/* Large Size */ +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: 64px; + height: 64px; + background-image: url(../images/loader-large.gif); +} +/*------------------- + Inline +--------------------*/ +.ui.inline.loader { + position: static; + vertical-align: middle; + margin: 0em; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* + * # Semantic - Progress Bar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Progress Bar +*******************************/ +.ui.progress { + border: 1px solid rgba(0, 0, 0, 0.1); + width: 100%; + height: 35px; + background-color: #FAFAFA; + padding: 5px; + border-radius: 0.3125em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.progress .bar { + display: inline-block; + height: 100%; + background-color: #CCCCCC; + border-radius: 3px; + -webkit-transition: width 1s ease-in-out, background-color 1s ease-out; + -moz-transition: width 1s ease-in-out, background-color 1s ease-out; + transition: width 1s ease-in-out, background-color 1s ease-out; +} +/******************************* + States +*******************************/ +/*-------------- + Successful +---------------*/ +.ui.successful.progress .bar { + background-color: #73E064 !important; +} +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +.ui.warning.progress .bar { + background-color: #E96633 !important; +} +.ui.warning.progress .bar, +.ui.warning.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Failed +---------------*/ +.ui.failed.progress .bar { + background-color: #DF9BA4 !important; +} +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Active +---------------*/ +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + border-radius: 3px; + -webkit-animation: progress-active 2s ease-out infinite; + -moz-animation: progress-active 2s ease-out infinite; + animation: progress-active 2s ease-out infinite; +} +@-webkit-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 95%; + } +} +@-moz-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +/*-------------- + Disabled +---------------*/ +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Attached +---------------*/ +/* bottom attached */ +.ui.progress.attached { + position: relative; + border: none; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: 3px; + padding: 0px; + overflow: hidden; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.ui.progress.attached .bar { + border-radius: 0em; +} +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: -2px; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.progress.top.attached .bar { + border-radius: 0em; +} +/*-------------- + Colors +---------------*/ +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.black.progress .bar { + background-color: #5C6166; +} +.ui.green.progress .bar { + background-color: #A1CF64; +} +.ui.red.progress .bar { + background-color: #EF4D6D; +} +.ui.purple.progress .bar { + background-color: #564F8A; +} +.ui.teal.progress .bar { + background-color: #00B5AD; +} +/*-------------- + Striped +---------------*/ +.ui.progress.striped .bar { + -webkit-background-size: 30px 30px; + background-size: 30px 30px; + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.ui.progress.active.striped .bar:after { + -webkit-animation: none; + -moz-animation: none; + -ms-animation: none; + animation: none; +} +.ui.progress.active.striped .bar { + -webkit-animation: progress-striped 3s linear infinite; + -moz-animation: progress-striped 3s linear infinite; + animation: progress-striped 3s linear infinite; +} +@-webkit-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@-moz-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +/*-------------- + Sizes +---------------*/ +.ui.small.progress .bar { + height: 14px; +} + +/* + * # Semantic - Reveal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Reveal +*******************************/ +.ui.reveal { + display: inline-block; + position: relative !important; + z-index: 2 !important; + font-size: 0em !important; +} +.ui.reveal > .content { + font-size: 1rem !important; +} +.ui.reveal > .visible.content { + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: 4 !important; + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: 3 !important; +} +/*------------------ + Loose Coupling +-------------------*/ +.ui.reveal.button { + overflow: hidden; +} +/******************************* + Types +*******************************/ +/*-------------- + Slide +---------------*/ +.ui.slide.reveal { + position: relative !important; + display: block; + overflow: hidden !important; + white-space: nowrap; +} +.ui.slide.reveal > .content { + display: block; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 100% !important; + width: 100% !important; +} +.ui.slide.reveal:hover > .visible.content, +.ui.slide.reveal:focus > .visible.content { + left: -100% !important; +} +.ui.slide.reveal:hover > .hidden.content, +.ui.slide.reveal:focus > .hidden.content { + left: 0% !important; +} +.ui.right.slide.reveal > .visible.content { + left: 0%; +} +.ui.right.slide.reveal > .hidden.content { + left: auto !important; + right: 100% !important; +} +.ui.right.slide.reveal:hover > .visible.content, +.ui.right.slide.reveal:focus > .visible.content { + left: 100% !important; + right: auto !important; +} +.ui.right.slide.reveal:hover > .hidden.content, +.ui.right.slide.reveal:focus > .hidden.content { + left: auto !important; + right: 0% !important; +} +.ui.up.slide.reveal > .visible.content { + top: 0% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.up.slide.reveal > .hidden.content { + top: 100% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.slide.up.reveal:hover > .visible.content, +.ui.slide.up.reveal:focus > .visible.content { + top: -100% !important; + left: 0% !important; +} +.ui.slide.up.reveal:hover > .hidden.content, +.ui.slide.up.reveal:focus > .hidden.content { + top: 0% !important; + left: 0% !important; +} +.ui.down.slide.reveal > .visible.content { + top: auto !important; + right: auto !important; + bottom: auto !important; + bottom: 0% !important; +} +.ui.down.slide.reveal > .hidden.content { + top: auto !important; + right: auto !important; + bottom: 100% !important; + left: 0% !important; +} +.ui.slide.down.reveal:hover > .visible.content, +.ui.slide.down.reveal:focus > .visible.content { + left: 0% !important; + bottom: -100% !important; +} +.ui.slide.down.reveal:hover > .hidden.content, +.ui.slide.down.reveal:focus > .hidden.content { + left: 0% !important; + bottom: 0% !important; +} +/*-------------- + Fade +---------------*/ +.ui.fade.reveal > .hidden.content { + -webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.fade.reveal > .hidden.content { + z-index: 5 !important; + opacity: 0; +} +.ui.fade.reveal:hover > .hidden.content { + opacity: 1; +} +/*-------------- + Move +---------------*/ +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { + left: auto !important; + top: auto !important; + bottom: auto !important; + right: 0% !important; +} +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content, +.ui.move.reveal:focus > .visible.content, +.ui.move.left.reveal:focus > .visible.content { + right: 100% !important; +} +.ui.move.right.reveal > .visible.content { + right: auto !important; + top: auto !important; + bottom: auto !important; + left: 0% !important; +} +.ui.move.right.reveal:hover > .visible.content, +.ui.move.right.reveal:focus > .visible.content { + left: 100% !important; +} +.ui.move.up.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: auto !important; + bottom: 0% !important; +} +.ui.move.up.reveal:hover > .visible.content, +.ui.move.up.reveal:focus > .visible.content { + bottom: 100% !important; +} +.ui.move.down.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: 0% !important; + bottom: auto !important; +} +.ui.move.down.reveal:hover > .visible.content, +.ui.move.down.reveal:focus > .visible.content { + top: 100% !important; +} +/*-------------- + Rotate +---------------*/ +.ui.rotate.reveal > .visible.content { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + transition-duration: 0.8s; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + -moz-transform-origin: bottom right; + -ms-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content, +.ui.rotate.reveal:focus > .visible.content, +.ui.rotate.right.reveal:focus > .visible.content { + -webkit-transform: rotate(110deg); + -moz-transform: rotate(110deg); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -moz-transform-origin: bottom left; + -ms-transform-origin: bottom left; + transform-origin: bottom left; +} +.ui.rotate.left.reveal:hover > .visible.content, +.ui.rotate.left.reveal:focus > .visible.content { + -webkit-transform: rotate(-110deg); + -moz-transform: rotate(-110deg); + -ms-transform: rotate(-110deg); + transform: rotate(-110deg); +} +/******************************* + States +*******************************/ +.ui.disabled.reveal { + opacity: 1 !important; +} +.ui.disabled.reveal > .content { + -webkit-transition: none !important; + -moz-transition: none !important; + transition: none !important; +} +.ui.disabled.reveal:hover > .visible.content, +.ui.disabled.reveal:focus > .visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.content, +.ui.disabled.reveal:focus > .hidden.content { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Masked +---------------*/ +.ui.masked.reveal { + overflow: hidden; +} +/*-------------- + Instant +---------------*/ +.ui.instant.reveal > .content { + -webkit-transition-delay: 0s !important; + -moz-transition-delay: 0s !important; + transition-delay: 0s !important; +} + +/* + * # Semantic - Segment + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Segment +*******************************/ +.ui.segment { + position: relative; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + margin: 1em 0em; + padding: 1em; + border-radius: 5px 5px 5px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} +.ui.segment:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + background-color: transparent; + border-radius: 0px; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.vertical.segment:first-child { + padding-top: 0em; +} +.ui.horizontal.segment { + margin: 0em; + padding-top: 0em; + padding-bottom: 0em; + background-color: transparent; + border-radius: 0px; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.horizontal.segment:first-child { + padding-left: 0em; +} +/*------------------- + Loose Coupling +--------------------*/ +.ui.pointing.menu ~ .ui.attached.segment { + top: 1px; +} +.ui.page.grid.segment .ui.grid .ui.segment.column { + padding-top: 2rem; + padding-bottom: 2rem; +} +.ui.grid.segment, +.ui.grid .ui.segment.row, +.ui.grid .ui.segment.column { + border-radius: 0em; + -webkit-box-shadow: none; + box-shadow: none; + border: none; +} +/* No padding on edge content */ +.ui.segment > :first-child { + margin-top: 0em; +} +.ui.segment > :last-child { + margin-bottom: 0em; +} +/******************************* + Types +*******************************/ +/*------------------- + Piled +--------------------*/ +.ui.piled.segment { + margin: 2em 0em; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: #FFFFFF; + visibility: visible; + content: ""; + display: block; + height: 100%; + left: -1px; + position: absolute; + width: 100%; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); +} +.ui.piled.segment:after { + -webkit-transform: rotate(1.2deg); + -moz-transform: rotate(1.2deg); + -ms-transform: rotate(1.2deg); + transform: rotate(1.2deg); + top: 0; + z-index: -1; +} +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -moz-transform: rotate(-1.2deg); + -ms-transform: rotate(-1.2deg); + transform: rotate(-1.2deg); + top: 0; + z-index: -2; +} +/*------------------- + Stacked +--------------------*/ +.ui.stacked.segment { + padding-bottom: 1.7em; +} +.ui.stacked.segment:after, +.ui.stacked.segment:before { + content: ''; + position: absolute; + bottom: -3px; + left: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.02); + width: 100%; + height: 5px; + visibility: visible; +} +.ui.stacked.segment:before { + bottom: 0px; +} +/* Inverted */ +.ui.stacked.inverted.segment:after, +.ui.stacked.inverted.segment:before { + background-color: rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.35); +} +/*------------------- + Circular +--------------------*/ +.ui.circular.segment { + display: table-cell; + padding: 2em; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} +/*------------------- + Raised +--------------------*/ +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} +/******************************* + States +*******************************/ +.ui.disabled.segment { + opacity: 0.8; + color: #DDDDDD; +} +/******************************* + Variations +*******************************/ +/*------------------- + Basic +--------------------*/ +.ui.basic.segment { + position: relative; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0px; +} +.ui.basic.segment:first-child { + padding-top: 0em; +} +.ui.basic.segment:last-child { + padding-bottom: 0em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.segment { + padding: 0em; +} +/*------------------- + Colors +--------------------*/ +.ui.blue.segment { + border-top: 0.2em solid #6ECFF5; +} +.ui.green.segment { + border-top: 0.2em solid #A1CF64; +} +.ui.red.segment { + border-top: 0.2em solid #D95C5C; +} +.ui.orange.segment { + border-top: 0.2em solid #F05940; +} +.ui.purple.segment { + border-top: 0.2em solid #564F8A; +} +.ui.teal.segment { + border-top: 0.2em solid #00B5AD; +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.segment { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.segment { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.segment { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.segment { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.orange.segment { + background-color: #F05940 !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.segment { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.segment { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} +.ui.justified.segment { + text-align: justify; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.segment .segment { + color: rgba(0, 0, 0, 0.7); +} +.ui.inverted.segment .inverted.segment { + color: #FFFFFF; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Ordinality +--------------------*/ +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} +.ui.secondary.segment { + background-color: #FAF9FA; + color: #777777; +} +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} +.ui.secondary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + color: #FAFAFA; +} +.ui.tertiary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + color: #EEEEEE; +} +/*------------------- + Attached +--------------------*/ +.ui.segment.attached { + top: -1px; + bottom: -1px; + border-radius: 0px; + margin: 0em; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} +.ui.top.attached.segment { + top: 0px; + bottom: -1px; + margin-top: 1em; + margin-bottom: 0em; + border-radius: 5px 5px 0px 0px; +} +.ui.segment.top.attached:first-child { + margin-top: 0em; +} +.ui.segment.bottom.attached { + top: -1px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 1em; + border-radius: 0px 0px 5px 5px; +} +.ui.segment.bottom.attached:last-child { + margin-bottom: 0em; +} + +/* + * # Semantic - Steps + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Step +*******************************/ +.ui.step, +.ui.steps .step { + display: inline-block; + position: relative; + padding: 1em 2em 1em 3em; + vertical-align: top; + background-color: #FFFFFF; + color: #888888; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.step:after, +.ui.steps .step:after { + position: absolute; + z-index: 2; + content: ''; + top: 0.42em; + right: -1em; + border: medium none; + background-color: #FFFFFF; + width: 2.2em; + height: 2.2em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset; + box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset; +} +.ui.step, +.ui.steps .step, +.ui.steps .step:after { + -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + -moz-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; +} +/******************************* + Types +*******************************/ +/* Vertical */ +.ui.vertical.steps { + overflow: visible; +} +.ui.vertical.steps .step { + display: block; + border-radius: 0em; + padding: 1em 2em; +} +.ui.vertical.steps .step:first-child { + padding: 1em 2em; + border-radius: 0em; + border-top-left-radius: 0.3125rem; + border-top-right-radius: 0.3125rem; +} +.ui.vertical.steps .active.step:first-child { + border-top-right-radius: 0rem; +} +.ui.vertical.steps .step:last-child { + border-radius: 0em; + border-bottom-left-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; +} +.ui.vertical.steps .active.step:last-child { + border-bottom-right-radius: 0rem; +} +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +/* Active Arrow */ +.ui.vertical.steps .active.step:after { + display: block; +} +/* Two Line */ +.ui.vertical.steps .two.line.step { + line-height: 1.3; +} +.ui.vertical.steps .two.line.active.step:after { + position: absolute; + z-index: 2; + content: ''; + top: 0em; + right: -1.45em; + background-color: transparent; + border-bottom: 2.35em solid transparent; + border-left: 1.55em solid #555555; + border-top: 2.35em solid transparent; + width: 0em; + height: 0em; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} +/******************************* + Group +*******************************/ +.ui.steps { + cursor: pointer; + display: inline-block; + font-size: 0em; + overflow: hidden; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + line-height: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0.3125rem; +} +.ui.steps .step:first-child { + padding-left: 1.35em; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.steps .step:last-child { + border-radius: 0em 0.3125em 0.3125em 0em; +} +.ui.steps .step:only-child { + border-radius: 0.3125em; +} +.ui.steps .step:last-child { + margin-right: 0em; +} +.ui.steps .step:last-child:after { + display: none; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.step:hover, +.ui.step.hover { + background-color: #F7F7F7; + color: rgba(0, 0, 0, 0.8); +} +.ui.steps .step.hover:after, +.ui.steps .step:hover:after, +.ui.step:hover, +.ui.step.hover::after { + background-color: #F7F7F7; +} +/* Hover */ +.ui.steps .step.down, +.ui.steps .step:active, +.ui.step.down, +.ui.step:active { + background-color: #F0F0F0; +} +.ui.steps .step.down:after, +.ui.steps .step:active:after, +.ui.steps.down::after, +.ui.steps:active::after { + background-color: #F0F0F0; +} +/* Active */ +.ui.steps .step.active, +.ui.active.step { + cursor: auto; + background-color: #555555; + color: #FFFFFF; + font-weight: bold; +} +.ui.steps .step.active:after, +.ui.active.steps:after { + background-color: #555555; + -webkit-box-shadow: none; + box-shadow: none; +} +/* Disabled */ +.ui.steps .disabled.step, +.ui.disabled.step { + cursor: auto; + background-color: #FFFFFF; + color: #CBCBCB; +} +.ui.steps .disabled.step:after, +.ui.disabled.step:after { + background-color: #FFFFFF; +} +/******************************* + Variations +*******************************/ +/* Attached */ +.attached.ui.steps { + margin: 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.attached.ui.steps .step:first-child { + border-radius: 0.3125em 0em 0em 0em; +} +.attached.ui.steps .step:last-child { + border-radius: 0em 0.3125em 0em 0em; +} +/* Bottom Side */ +.bottom.attached.ui.steps { + margin-top: -1px; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.bottom.attached.ui.steps .step:first-child { + border-radius: 0em 0em 0em 0.3125em; +} +.bottom.attached.ui.steps .step:last-child { + border-radius: 0em 0em 0.3125em 0em; +} +/* Evenly divided */ +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + display: block; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} +/******************************* + Sizes +*******************************/ +.ui.small.step, +.ui.small.steps .step { + font-size: 0.8rem; +} +.ui.step, +.ui.steps .step { + font-size: 1rem; +} +.ui.large.step, +.ui.large.steps .step { + font-size: 1.25rem; +} + +/* + * # Semantic - Accordion + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Accordion +*******************************/ +.ui.accordion, +.ui.accordion .accordion { + width: 600px; + max-width: 100%; + font-size: 1rem; + border-radius: 0.3125em; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; + margin: 0em; + padding: 0.75em 1em; + color: rgba(0, 0, 0, 0.6); + border-top: 1px solid rgba(0, 0, 0, 0.05); + -webkit-transition: background-color 0.2s ease-out; + -moz-transition: background-color 0.2s ease-out; + transition: background-color 0.2s ease-out; +} +.ui.accordion .title:first-child, +.ui.accordion .accordion .title:first-child { + border-top: none; +} +/* Content */ +.ui.accordion .content, +.ui.accordion .accordion .content { + display: none; + margin: 0em; + padding: 1.3em 1em; +} +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: inline-block; + float: none; + margin: 0em 0.5em 0em 0em; + -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; + -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease; + transition: transform 0.2s ease, + opacity 0.2s ease + ; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.accordion .title .dropdown.icon:before, +.ui.accordion .accordion .title .dropdown.icon:before { + content: '\f0da' /*rtl:'\f0d9'*/; +} +/*-------------- + Loose Coupling +---------------*/ +.ui.basic.accordion.menu { + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.basic.accordion.menu .title, +.ui.basic.accordion.menu .content { + padding: 0em; +} +/******************************* + Types +*******************************/ +/*-------------- + Basic +---------------*/ +.ui.basic.accordion { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.basic.accordion .title, +.ui.basic.accordion .accordion .title { + background-color: transparent; + border-top: none; + padding-left: 0em; + padding-right: 0em; +} +.ui.basic.accordion .content, +.ui.basic.accordion .accordion .content { + padding: 0.5em 0em; +} +.ui.basic.accordion .active.title, +.ui.basic.accordion .accordion .active.title { + background-color: transparent; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.accordion .title:hover, +.ui.accordion .active.title, +.ui.accordion .accordion .title:hover, +.ui.accordion .accordion .active.title { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Active +---------------*/ +.ui.accordion .active.title, +.ui.accordion .accordion .active.title { + background-color: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.8); +} +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} +/******************************* + Variations +*******************************/ +/*-------------- + Fluid +---------------*/ +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/* + * # Semantic - Chat Room + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Chat Room +*******************************/ +.ui.chatroom { + background-color: #F8F8F8; + width: 330px; + height: 370px; + padding: 0px; +} +.ui.chatroom .room { + position: relative; + background-color: #FFFFFF; + overflow: hidden; + height: 286px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-top: none; + border-bottom: none; +} +.ui.chatroom .room .loader { + display: none; + margin: -25px 0px 0px -25px; +} +/* Chat Room Actions */ +.ui.chatroom .actions { + overflow: hidden; + background-color: #EEEEEE; + padding: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 5px 5px 0px 0px; +} +.ui.chatroom .actions .button { + float: right; + margin-left: 3px; +} +/* Online User Count */ +.ui.chatroom .actions .message { + float: left; + margin-left: 6px; + font-size: 11px; + color: #AAAAAA; + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); + line-height: 28px; +} +.ui.chatroom .actions .message .loader { + display: inline-block; + margin-right: 8px; +} +/* Chat Room Text Log */ +.ui.chatroom .log { + float: left; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; +} +.ui.chatroom .log .message { + padding: 3px 0px; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .message:first-child { + border-top: none; +} +/* status event */ +.ui.chatroom .status { + padding: 5px 0px; + color: #AAAAAA; + font-size: 12px; + font-style: italic; + line-height: 1.33; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .status:first-child { + border-top: none; +} +.ui.chatroom .log .flag { + float: left; +} +.ui.chatroom .log p { + margin-left: 0px; +} +.ui.chatroom .log .author { + font-weight: bold; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} +.ui.chatroom .log a.author:hover { + opacity: 0.8; +} +.ui.chatroom .log .message.admin p { + font-weight: bold; + margin: 1px 0px 0px 23px; +} +.ui.chatroom .log .divider { + margin: -1px 0px; + font-size: 11px; + padding: 10px 0px; + border-top: 1px solid #F8F8F8; + border-bottom: 1px solid #F8F8F8; +} +.ui.chatroom .log .divider .rule { + top: 50%; + width: 15%; +} +.ui.chatroom .log .divider .label { + color: #777777; + margin: 0px; +} +/* Chat Room User List */ +.ui.chatroom .room .list { + position: relative; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + float: left; + background-color: #EEEEEE; + border-left: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user { + display: table; + padding: 3px 7px; + border-bottom: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user:hover { + background-color: #F8F8F8; +} +.ui.chatroom .room .list .image { + display: table-cell; + vertical-align: middle; + width: 20px; +} +.ui.chatroom .room .list .image img { + width: 20px; + height: 20px; + vertical-align: middle; +} +.ui.chatroom .room .list p { + display: table-cell; + vertical-align: middle; + padding-left: 7px; + padding-right: 14px; + font-size: 11px; + line-height: 1.2; + font-weight: bold; +} +.ui.chatroom .room .list a:hover { + opacity: 0.8; +} +/* User List Loading */ +.ui.chatroom.loading .loader { + display: block; +} +/* Chat Room Talk Input */ +.ui.chatroom .talk { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 0px 0px; + background-color: #EEEEEE; + border-radius: 0px 0px 5px 5px; +} +.ui.chatroom .talk .avatar, +.ui.chatroom .talk input, +.ui.chatroom .talk .button { + float: left; +} +.ui.chatroom .talk .avatar img { + display: block; + width: 30px; + height: 30px; + margin-right: 4px; + border-radius: 500rem; +} +.ui.chatroom .talk input { + border: 1px solid #CCCCCC; + margin: 0px; + width: 196px; + height: 14px; + padding: 8px 5px; + font-size: 12px; + color: #555555; +} +.ui.chatroom .talk input.focus { + border: 1px solid #AAAAAA; +} +.ui.chatroom .send { + width: 80px; + height: 32px; + margin-left: -1px; + padding: 4px 12px; + font-size: 12px; + line-height: 23px; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0 5px 5px 0; +} +.ui.chatroom .talk .log-in.button { + display: block; + float: none; + margin-top: -6px; + height: 22px; + border-radius: 0px 0px 4px 4px; +} +.ui.chatroom .talk .log-in.button i { + vertical-align: text-top; +} +/* Quirky Flags */ +.ui.chatroom .log .team.flag { + width: 18px; +} +/* Chat room Loaded */ +.ui.chatroom.loading .loader { + display: block; +} +/* Standard Size */ +.ui.chatroom { + width: 330px; + height: 370px; +} +.ui.chatroom .room .container { + width: 3000px; +} +.ui.chatroom .log { + width: 314px; + height: 278px; + padding: 4px 7px; +} +.ui.chatroom .room .list { + width: 124px; + height: 278px; + padding: 4px 0px; +} +.ui.chatroom .room .list .user { + width: 110px; +} +.ui.chatroom .talk { + height: 40px; +} + +/* + * # Semantic - Checkbox + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Checkbox +*******************************/ +/*-------------- + Standard +---------------*/ +/*--- Content ---*/ +.ui.checkbox { + position: relative; + display: inline-block; + min-width: 1em; + min-height: 1.25em; + line-height: 1em; + outline: none; + vertical-align: middle; +} +.ui.checkbox input { + position: absolute; + top: 0px; + left: 0px; + opacity: 0; + outline: none; +} +/*--- Box ---*/ +.ui.checkbox .box, +.ui.checkbox label { + cursor: pointer; + padding-left: 2em; + outline: none; +} +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0em; + line-height: 1; + width: 1em; + height: 1em; + left: 0em; + content: ''; + border-radius: 4px; + background: #FFFFFF; + -webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease; + -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); +} +/*--- Checkbox ---*/ +.ui.checkbox .box:after, +.ui.checkbox label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + content: ''; + position: absolute; + background: transparent; + border: 0.2em solid #333333; + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.checkbox .box:after, +.ui.checkbox label:after { + top: 0.275em; + left: 0.2em; + width: 0.45em; + height: 0.15em; +} +/*--- Inside Label ---*/ +.ui.checkbox label { + display: block; + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.checkbox input:focus ~ label { + color: rgba(0, 0, 0, 0.8); +} +/*--- Outside Label ---*/ +.ui.checkbox ~ label { + cursor: pointer; + opacity: 0.85; + vertical-align: middle; +} +.ui.checkbox ~ label:hover { + opacity: 1; +} +/******************************* + States +*******************************/ +/*--- Hover ---*/ +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} +/*--- Down ---*/ +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { + background-color: #F5F5F5; +} +/*--- Focus ---*/ +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} +/*--- Active ---*/ +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} +/*--- Disabled ---*/ +.ui.disabled.checkbox ~ .box:after, +.ui.checkbox input[disabled] ~ .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ label { + opacity: 0.4; + color: rgba(0, 0, 0, 0.3); +} +/******************************* + Variations +*******************************/ +/*-------------- + Radio +---------------*/ +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + min-width: 1em; + height: 1em; + border-radius: 500px; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + top: 0.2em; + left: 0.2em; + width: 0.6em; + height: 0.6em; + background-color: #555555; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; + border-radius: 500px; +} +/*-------------- + Slider +---------------*/ +.ui.slider.checkbox { + cursor: pointer; + min-width: 3em; +} +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 0.5em; + left: 0em; + content: ''; + width: 3em; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: 4em; +} +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + cursor: pointer; + display: block; + position: absolute; + top: -0.25em; + left: 0em; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; +} +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; + position: absolute; + content: ''; + top: 0.15em; + left: 0em; + z-index: 2; + margin-left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + border-radius: 50rem; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; +} +/* Selected Slider Toggle */ +.ui.slider.checkbox input:checked ~ .box:before, +.ui.slider.checkbox input:checked ~ label:before, +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + left: 1.75em; +} +/* Off Color */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} +/* On Color */ +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + background-color: #89B84C; +} +/*-------------- + Toggle +---------------*/ +.ui.toggle.checkbox { + cursor: pointer; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-left: 4em; +} +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: -0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 3em; + height: 1.5em; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; +} +/* Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + content: ''; + position: absolute; + top: 0.15em; + left: 0.5em; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; +} +/* Active */ +.ui.toggle.checkbox:active .box:before, +.ui.toggle.checkbox:active label:before { + background-color: #F5F5F5; +} +/* Active */ +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: 1.75em; + background-color: #89B84C; +} +/*-------------- + Sizes +---------------*/ +.ui.checkbox { + font-size: 1em; +} +.ui.large.checkbox { + font-size: 1.25em; +} +.ui.huge.checkbox { + font-size: 1.5em; +} + +/* + * # Semantic - Dimmer + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dimmer +*******************************/ +.ui.dimmable { + position: relative; +} +.ui.dimmer { + display: none; + position: absolute; + top: 0em !important; + left: 0em !important; + width: 0%; + height: 0%; + text-align: center; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.85); + opacity: 0; + line-height: 1; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-transition: background-color 0.5s linear; + -moz-transition: background-color 0.5s linear; + transition: background-color 0.5s linear; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + z-index: 1000; +} +/* Dimmer Content */ +.ui.dimmer > .content { + width: 100%; + height: 100%; + display: table; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.ui.dimmer > .content > div { + display: table-cell; + vertical-align: middle; + color: #FFFFFF; +} +/* Loose Coupling */ +.ui.segment > .ui.dimmer { + border-radius: 5px; +} +.ui.horizontal.segment > .ui.dimmer, +.ui.vertical.segment > .ui.dimmer { + border-radius: 5px; +} +/******************************* + States +*******************************/ +.ui.dimmed.dimmable:not(body) { + overflow: hidden; +} +.ui.dimmed.dimmable > .ui.animating.dimmer, +.ui.dimmed.dimmable > .ui.visible.dimmer, +.ui.active.dimmer { + display: block; + width: 100%; + height: 100%; + opacity: 1; +} +.ui.disabled.dimmer { + width: 0em !important; + height: 0em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Page +---------------*/ +.ui.page.dimmer { + position: fixed; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: center center; + -moz-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; +} +.ui.scrolling.dimmable > .dimmer, +.ui.scrolling.page.dimmer { + position: absolute; +} +/* Blurred Background +body.ui.dimmed.dimmable > :not(.dimmer){ + filter: ~"blur(15px) grayscale(0.7)"; +} +*/ +/*-------------- + Aligned +---------------*/ +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} +.ui.inverted.dimmer > .content > * { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dimmer { + display: block; + overflow: hidden; + opacity: 1; + z-index: -100; + background-color: rgba(0, 0, 0, 0); +} +.ui.dimmed.dimmable > .ui.simple.dimmer { + overflow: visible; + opacity: 1; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + z-index: 1; +} +.ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0); +} +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} + +/* + * # Semantic - Dropdown + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dropdown +*******************************/ +.ui.dropdown { + cursor: pointer; + position: relative; + display: inline-block; + line-height: 1; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + -moz-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} +/******************************* + Content +*******************************/ +/*-------------- + Menu +---------------*/ +.ui.dropdown .menu { + cursor: auto; + position: absolute; + display: none; + top: 100%; + margin: 0em; + background-color: #FFFFFF; + min-width: 100%; + white-space: nowrap; + font-size: 0.875em; + text-shadow: none; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + border-radius: 0px 0px 0.325em 0.325em; + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 11; +} +/*-------------- + Icon +---------------*/ +.ui.dropdown > .dropdown.icon { + width: auto; + margin: 0em 0em 0em 1em; +} +.ui.dropdown > .dropdown.icon:before { + content: "\f0d7"; +} +.ui.dropdown .menu .item .dropdown.icon { + width: auto; + float: right; + margin: 0em 0em 0em 0.5em; +} +.ui.dropdown .menu .item .dropdown.icon:before { + content: "\f0da" /*rtl:"\f0d9"*/; +} +/*-------------- + Text +---------------*/ +.ui.dropdown > .text { + display: inline-block; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} +/*-------------- + Sub Menu +---------------*/ +.ui.dropdown .menu .menu { + top: 0% !important; + left: 100% !important; + margin: 0em !important; + border-radius: 0 0.325em 0.325em 0em !important; +} +.ui.dropdown .menu .menu:after { + display: none; +} +.ui.dropdown .menu .item { + cursor: pointer; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.05); + height: auto; + font-size: 0.875em; + display: block; + color: rgba(0, 0, 0, 0.75); + padding: 0.85em 1em !important; + font-size: 0.875rem; + text-transform: none; + font-weight: normal; + text-align: left; + -webkit-touch-callout: none; +} +.ui.dropdown .menu .item:before { + display: none; +} +.ui.dropdown .menu .item .icon { + margin-right: 0.75em; +} +.ui.dropdown .menu .item:first-child { + border-top: none; +} +/******************************* + Coupling +*******************************/ +/* Opposite on last menu on right */ +.ui.menu .right.menu .dropdown:last-child .menu, +.ui.buttons > .ui.dropdown:last-child .menu { + left: auto; + right: 0px; +} +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da" /*rtl:"\f0d9"*/; +} +.ui.dropdown.icon.button > .dropdown.icon { + margin: 0em; +} +/******************************* + States +*******************************/ +/* Dropdown Visible */ +.ui.visible.dropdown > .menu { + display: block; +} +/*-------------------- + Hover +----------------------*/ +/* Menu Item Hover */ +.ui.dropdown .menu .item:hover { + background-color: rgba(0, 0, 0, 0.02); + z-index: 12; +} +/*-------------------- + Active +----------------------*/ +/* Menu Item Active */ +.ui.dropdown .menu .active.item { + background-color: rgba(0, 0, 0, 0.06) !important; + border-left: none; + border-color: transparent !important; + -webkit-box-shadow: none; + -moz-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + z-index: 12; +} +/*-------------------- + Default Text +----------------------*/ +.ui.dropdown > .default.text, +.ui.default.dropdown > .text { + color: rgba(0, 0, 0, 0.5); +} +.ui.dropdown:hover > .default.text, +.ui.default.dropdown:hover > .text { + color: rgba(0, 0, 0, 0.8); +} +/*-------------------- + Error +----------------------*/ +.ui.dropdown.error, +.ui.dropdown.error > .text, +.ui.dropdown.error > .default.text { + color: #D95C5C !important; +} +.ui.selection.dropdown.error { + background-color: #FFFAFA; + -webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important; + box-shadow: 0px 0px 0px 1px #e7bebe !important; +} +.ui.selection.dropdown.error:hover { + -webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important; + box-shadow: 0px 0px 0px 1px #e7bebe !important; +} +.ui.dropdown.error > .menu, +.ui.dropdown.error > .menu .menu { + -webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important; + box-shadow: 0px 0px 1px 1px #E7BEBE !important; +} +.ui.dropdown.error > .menu .item { + color: #D95C5C !important; +} +/* Item Hover */ +.ui.dropdown.error > .menu .item:hover { + background-color: #FFF2F2 !important; +} +/* Item Active */ +.ui.dropdown.error > .menu .active.item { + background-color: #FDCFCF !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dropdown .menu:before, +.ui.simple.dropdown .menu:after { + display: none; +} +.ui.simple.dropdown .menu { + display: block; + overflow: hidden; + top: -9999px !important; + position: absolute; + opacity: 0; + width: 0; + height: 0; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.simple.active.dropdown, +.ui.simple.dropdown:hover { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.simple.active.dropdown > .menu, +.ui.simple.dropdown:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 100% !important; + opacity: 1; +} +.ui.simple.dropdown > .menu .item:active > .menu, +.ui.simple.dropdown:hover > .menu .item:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 0% !important; + left: 100% !important; + opacity: 1; +} +.ui.simple.disabled.dropdown:hover .menu { + display: none; + height: 0px; + width: 0px; + overflow: hidden; +} +/*-------------- + Selection +---------------*/ +/* Displays like a select box */ +.ui.selection.dropdown { + cursor: pointer; + display: inline-block; + word-wrap: break-word; + white-space: normal; + background-color: #FFFFFF; + padding: 0.65em 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.8); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + border-radius: 0.3125em !important; +} +.ui.selection.dropdown select { + display: none; +} +.ui.selection.dropdown > .dropdown.icon { + opacity: 0.7; + margin: 0.2em 0em 0.2em 1.25em; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.selection.dropdown, +.ui.selection.dropdown .menu { + -webkit-transition: -webkit-box-shadow 0.2s ease-out; + -moz-transition: box-shadow 0.2s ease-out; + transition: box-shadow 0.2s ease-out; +} +.ui.selection.dropdown .menu { + top: 100%; + max-height: 312px; + overflow-x: hidden; + overflow-y: auto; + -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0; + box-shadow: 0px 1px 0px 1px #E0E0E0; + border-radius: 0px 0px 0.325em 0.325em; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} +.ui.selection.dropdown .menu img { + height: 2.5em; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; +} +/* Visible */ +.ui.visible.selection.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +/* Active */ +.ui.active.selection.dropdown { + border-radius: 0.3125em 0.3125em 0em 0em !important; +} +.ui.active.selection.dropdown > .dropdown.icon { + opacity: 1; +} +/*-------------- + Fluid +---------------*/ +.ui.fluid.dropdown { + display: block; +} +.ui.fluid.dropdown > .dropdown.icon { + float: right; +} +/*-------------- + Inline +---------------*/ +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: inherit; +} +.ui.inline.dropdown .dropdown.icon { + margin: 0em 0.5em 0em 0.25em; +} +.ui.inline.dropdown .text { + font-weight: bold; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: 0.25em; + border-radius: 0.325em; +} +/*-------------- + Floating +---------------*/ +.ui.floating.dropdown .menu { + left: 0; + right: auto; + margin-top: 0.5em !important; + border-radius: 0.325em; +} +/*-------------- + Pointing +---------------*/ +.ui.pointing.dropdown .menu { + top: 100%; + margin-top: 0.75em; + border-radius: 0.325em; +} +.ui.pointing.dropdown .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: " "; + visibility: visible; + width: 0.5em; + height: 0.5em; + -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; +} +.ui.pointing.dropdown .menu .active.item:first-child { + background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); +} +/* Directions */ +.ui.pointing.dropdown .menu:after { + top: -0.25em; + left: 50%; + margin: 0em 0em 0em -0.25em; +} +.ui.top.left.pointing.dropdown .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: 0.75em 0em 0em; +} +.ui.top.left.pointing.dropdown .menu:after { + top: -0.25em; + left: 1.25em; + right: auto; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.top.right.pointing.dropdown .menu { + top: 100%; + bottom: auto; + right: 0%; + left: auto; + margin: 0.75em 0em 0em; +} +.ui.top.right.pointing.dropdown .menu:after { + top: -0.25em; + left: auto; + right: 1.25em; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.left.pointing.dropdown .menu { + top: 0%; + left: 100%; + right: auto; + margin: 0em 0em 0em 0.75em; +} +.ui.left.pointing.dropdown .menu:after { + top: 1em; + left: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.right.pointing.dropdown .menu { + top: 0%; + left: auto; + right: 100%; + margin: 0em 0.75em 0em 0em; +} +.ui.right.pointing.dropdown .menu:after { + top: 1em; + left: auto; + right: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -ms-transform: rotate(135deg); + transform: rotate(135deg); +} + +/* + * # Semantic - Modal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Modal +*******************************/ +.ui.modal { + display: none; + position: fixed; + z-index: 1001; + top: 50%; + left: 50%; + text-align: left; + width: 90%; + margin-left: -45%; + background-color: #FFFFFF; + border: 1px solid #DDDDDD; + border-radius: 5px; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +/******************************* + Content +*******************************/ +/*-------------- + Close +---------------*/ +.ui.modal > .close { + cursor: pointer; + position: absolute; + z-index: 1; + opacity: 0.8; + font-size: 1.25em; + top: -1.75em; + right: -1.75em; + color: #FFFFFF; +} +.ui.modal > .close:hover { + opacity: 1; +} +/*-------------- + Header +---------------*/ +.ui.modal > .header { + margin: 0em; + padding: 1.5rem 2rem; + font-size: 1.6em; + font-weight: bold; + border-radius: 0.325em 0.325em 0px 0px; +} +/*-------------- + Content +---------------*/ +.ui.modal > .content { + display: table; + width: 100%; + position: relative; + padding: 2em; + background-color: #F4F4F4; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.modal > .content > .left:not(.ui) { + display: table-cell; + padding-right: 1.5%; + min-width: 25%; +} +.ui.modal > .content > .right:not(.ui) { + display: table-cell; + padding-left: 1.5%; + vertical-align: top; +} +/*rtl:ignore*/ +.ui.modal > .content > .left:not(.ui) > i.icon { + font-size: 8em; + margin: 0em; +} +.ui.modal > .content p { + line-height: 1.6; +} +/*-------------- + Actions +---------------*/ +.ui.modal .actions { + padding: 1rem 2rem; + text-align: right; +} +.ui.modal .actions > .button { + margin-left: 0.75em; +} +/*------------------- + Sizing +--------------------*/ +/* Mobile Only */ +@media only screen and (max-width: 768px) { + /*rtl:ignore*/ + .ui.modal .content > .left:not(.ui) { + display: block; + padding: 0em 0em 1em; + } + /*rtl:ignore*/ + .ui.modal .content > .right:not(.ui) { + display: block; + padding: 1em 0em 0em; + -webkit-box-shadow: none; + box-shadow: none; + } + .ui.modal .content .image { + width: auto !important; + max-width: 100%; + } + .ui.modal .actions { + padding-bottom: 0em; + } + .ui.modal .actions > .buttons, + .ui.modal .actions > .button { + margin-bottom: 1em; + } +} +/* Tablet and Mobile */ +@media only screen and (max-width: 998px) { + .ui.modal { + width: 92%; + margin-left: -46%; + } + .ui.modal > .close { + color: rgba(0, 0, 0, 0.8); + top: 1.5rem; + right: 1rem; + } +} +/* Computer / Responsive */ +@media only screen and (min-width: 998px) { + .ui.modal { + width: 74%; + margin-left: -37%; + } +} +@media only screen and (min-width: 1500px) { + .ui.modal { + width: 56%; + margin-left: -28%; + } +} +@media only screen and (min-width: 1750px) { + .ui.modal { + width: 42%; + margin-left: -21%; + } +} +@media only screen and (min-width: 2000px) { + .ui.modal { + width: 36%; + margin-left: -18%; + } +} +/******************************* + Types +*******************************/ +.ui.basic.modal { + background-color: transparent; + border: none; + color: #FFFFFF; +} +.ui.basic.modal > .close { + top: 1.5rem; + right: 1rem; +} +.ui.basic.modal .content { + background-color: transparent; +} +/******************************* + Variations +*******************************/ +/* A modal that cannot fit on the page */ +.ui.modal.scrolling { + position: absolute; + margin-top: 10px; +} +/******************************* + States +*******************************/ +.ui.active.modal { + display: block; +} +/*-------------- + Size +---------------*/ +/* Small */ +.ui.small.modal > .header { + font-size: 1.3em; +} +@media only screen and (min-width: 998px) { + .ui.small.modal { + width: 58%; + margin-left: -29%; + } +} +@media only screen and (min-width: 1500px) { + .ui.small.modal { + width: 40%; + margin-left: -20%; + } +} +@media only screen and (min-width: 1750px) { + .ui.small.modal { + width: 26%; + margin-left: -13%; + } +} +@media only screen and (min-width: 2000px) { + .ui.small.modal { + width: 20%; + margin-left: -10%; + } +} +/* Large */ +@media only screen and (min-width: 998px) { + .ui.large.modal { + width: 74%; + margin-left: -37%; + } +} +@media only screen and (min-width: 1500px) { + .ui.large.modal { + width: 64%; + margin-left: -32%; + } +} +@media only screen and (min-width: 1750px) { + .ui.large.modal { + width: 54%; + margin-left: -27%; + } +} +@media only screen and (min-width: 2000px) { + .ui.large.modal { + width: 44%; + margin-left: -22%; + } +} + +/* + * # Semantic - Nag + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Nag +*******************************/ +.ui.nag { + display: none; + opacity: 0.95; + position: relative; + top: 0px; + left: 0%; + z-index: 101; + min-height: 0; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + line-height: 3em; + padding: 0em 1em; + background-color: #555555; + -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + font-size: 1em; + text-align: center; + color: rgba(255, 255, 255, 0.8); + border-radius: 0px 0px 5px 5px; + -webkit-transition: 0.2s background; + -moz-transition: 0.2s background; + transition: 0.2s background; +} +a.ui.nag { + cursor: pointer; +} +.ui.nag > .title { + display: inline-block; + margin: 0em 0.5em; + color: #FFFFFF; +} +.ui.nag > .close.icon { + cursor: pointer; + opacity: 0.4; + position: absolute; + top: 50%; + right: 1em; + margin-top: -0.5em; + color: #FFFFFF; + -webkit-transition: 0.1s opacity; + -moz-transition: 0.1s opacity; + transition: 0.1s opacity; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.nag:hover { + opacity: 1; +} +.ui.nag .close:hover { + opacity: 1; +} +/******************************* + Variations +*******************************/ +/*-------------- + Static +---------------*/ +.ui.overlay.nag { + position: absolute; + display: block; +} +/*-------------- + Fixed +---------------*/ +.ui.fixed.nag { + position: fixed; +} +/*-------------- + Bottom +---------------*/ +.ui.bottom.nag { + border-radius: 5px 5px 0px 0px; +} +.ui.fixed.bottom.nags, +.ui.fixed.bottom.nag { + top: auto; + bottom: 0px; +} +/*-------------- + White +---------------*/ +.ui.white.nags .nag, +.ui.white.nag { + background-color: #F1F1F1; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); + color: #ACACAC; +} +.ui.white.nags .nag .close, +.ui.white.nags .nag .title, +.ui.white.nag .close, +.ui.white.nag .title { + color: #333333; +} +/******************************* + Groups +*******************************/ +.ui.nags .nag { + border-radius: 0px; +} + +/* + * # Semantic - Popup + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Popup +*******************************/ +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + z-index: 900; + border: 1px solid rgba(0, 0, 0, 0.1); + max-width: 250px; + background-color: #FFFFFF; + padding: 0.8em 1.2em; + font-size: 0.875rem; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.7); + border-radius: 0.2em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); +} +.ui.popup .header { + padding: 0em 0em 0.5em; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup:before { + position: absolute; + content: ""; + width: 0.75em; + height: 0.75rem; + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); +} +.ui.popup .ui.button { + width: 100%; +} +/******************************* + Types +*******************************/ +/*-------------- + Spacing +---------------*/ +.ui.popup { + margin: 0em; +} +.ui.popup.bottom { + margin: 0.75em 0em 0em; +} +.ui.popup.top { + margin: 0em 0em 0.75em; +} +.ui.popup.left.center { + margin: 0em 0.75em 0em 0em; +} +.ui.popup.right.center { + margin: 0em 0em 0em 0.75em; +} +.ui.popup.center { + margin-left: -1.25em; +} +/*-------------- + Pointer +---------------*/ +/*--- Below ---*/ +.ui.bottom.center.popup:before { + margin-left: -0.4em; + top: -0.4em; + left: 50%; + right: auto; + bottom: auto; + -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} +.ui.bottom.left.popup { + margin-right: -2em; +} +.ui.bottom.left.popup:before { + top: -0.4em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} +.ui.bottom.right.popup { + margin-left: -2em; +} +.ui.bottom.right.popup:before { + top: -0.4em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} +/*--- Above ---*/ +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.4em; + left: 50%; + margin-left: -0.4em; +} +.ui.top.left.popup { + margin-right: -2em; +} +.ui.top.left.popup:before { + bottom: -0.4em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} +.ui.top.right.popup { + margin-left: -2em; +} +.ui.top.right.popup:before { + bottom: -0.4em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} +/*--- Left Center ---*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.35em; + bottom: auto; + left: auto; + margin-top: -0.4em; + -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); +} +/*--- Right Center ---*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.35em; + bottom: auto; + right: auto; + margin-top: -0.4em; + -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); +} +/******************************* + States +*******************************/ +.ui.loading.popup { + display: block; + visibility: hidden; +} +.ui.animating.popup, +.ui.visible.popup { + display: block; +} +/******************************* + Variations +*******************************/ +/*-------------- + Size +---------------*/ +.ui.small.popup { + font-size: 0.75rem; +} +.ui.large.popup { + font-size: 1rem; +} +/*-------------- + Colors +---------------*/ +/* Inverted colors */ +.ui.inverted.popup { + background-color: #333333; + border: none; + color: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: rgba(0, 0, 0, 0.2); + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #333333; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* + * # Semantic - Rating + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Rating +*******************************/ +.ui.rating { + display: inline-block; + font-size: 0em; + vertical-align: middle; + margin: 0em 0.5rem 0em 0em; +} +.ui.rating:last-child { + margin-right: 0em; +} +.ui.rating:before { + display: block; + content: ''; + visibility: hidden; + clear: both; + height: 0; +} +/* Icon */ +.ui.rating .icon { + cursor: pointer; + margin: 0em; + width: 1em; + height: auto; + padding: 0em; + color: rgba(0, 0, 0, 0.15); + font-weight: normal; + font-style: normal; +} +.ui.rating .icon:before { + content: "\2605"; +} +/******************************* + Types +*******************************/ +/*------------------- + Star +--------------------*/ +.ui.star.rating .icon { + width: 1.2em; +} +/* Star */ +.ui.star.rating .icon:before { + content: '\f006'; + font-family: 'Icons'; +} +/* Active Star */ +.ui.star.rating .active.icon:before { + content: '\f005'; + font-family: 'Icons'; +} +/*------------------- + Heart +--------------------*/ +.ui.heart.rating .icon { + width: 1.2em; +} +.ui.heart.rating .icon:before { + content: '\f08a'; + font-family: 'Icons'; +} +/* Active */ +.ui.heart.rating .active.icon:before { + content: '\f004'; + font-family: 'Icons'; +} +.ui.heart.rating .active.icon { + color: #EF404A !important; +} +/* Hovered */ +.ui.heart.rating .hover.icon, +.ui.heart.rating .active.hover.icon { + color: #FF2733 !important; +} +/******************************* + States +*******************************/ +/*------------------- + Active +--------------------*/ +/* disabled rating */ +.ui.disabled.rating .icon { + cursor: default; +} +/* active icons */ +.ui.rating .active.icon { + color: #FFCB08 !important; +} +/*------------------- + Hover +--------------------*/ +/* rating */ +.ui.rating.hover .active.icon { + opacity: 0.5; +} +/* icon */ +.ui.rating .icon.hover, +.ui.rating .icon.hover.active { + opacity: 1; + color: #FFB70A !important; +} +/******************************* + Variations +*******************************/ +.ui.small.rating .icon { + font-size: 0.75rem; +} +.ui.rating .icon { + font-size: 1rem; +} +.ui.large.rating .icon { + font-size: 1.5rem; + vertical-align: middle; +} +.ui.huge.rating .icon { + font-size: 2rem; + vertical-align: middle; +} + +/* + * # Semantic - Search + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Search +*******************************/ +.ui.search { + position: relative; + text-shadow: none; + font-style: normal; + font-weight: normal; +} +.ui.search input { + border-radius: 500rem; +} +/*-------------- + Button +---------------*/ +.ui.search > .button { + position: relative; + z-index: 2; + float: right; + margin: 0px 0px 0px -15px; + padding: 6px 15px 7px; + border-radius: 0px 15px 15px 0px; + -webkit-box-shadow: none; + box-shadow: none; +} +/*-------------- + Results +---------------*/ +.ui.search .results { + display: none; + position: absolute; + z-index: 999; + top: 100%; + left: 0px; + overflow: hidden; + background-color: #FFFFFF; + margin-top: 0.5em; + width: 380px; + font-size: 0.875em; + line-height: 1.2; + color: #555555; + border-radius: 3px; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; +} +.ui.search .result { + cursor: pointer; + overflow: hidden; + padding: 0.5em 1em; +} +.ui.search .result:first-child { + border-top: none; +} +.ui.search .result .image { + background: #F0F0F0; + margin-right: 10px; + float: left; + overflow: hidden; + border-radius: 3px; + width: 38px; + height: 38px; +} +.ui.search .result .image img { + display: block; + width: 38px; + height: 38px; +} +.ui.search .result .image ~ .info { + float: none; + margin-left: 50px; +} +.ui.search .result .info { + float: left; +} +.ui.search .result .title { + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .result .description { + color: rgba(0, 0, 0, 0.6); +} +.ui.search .result .price { + float: right; + color: #5BBD72; + font-weight: bold; +} +/*-------------- + Message +---------------*/ +.ui.search .message { + padding: 1em; +} +.ui.search .message .text .title { + margin: 0em 0em 0.5rem; + font-size: 1.25rem; + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .message .text .description { + margin: 0em; + font-size: 1rem; + color: rgba(0, 0, 0, 0.5); +} +/*-------------- + Categories +---------------*/ +.ui.search .results .category { + background-color: #FAFAFA; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-transition: background 0.2s ease-in; + -moz-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; +} +.ui.search .results .category:first-child { + border-top: none; +} +.ui.search .results .category > .name { + float: left; + padding: 12px 0px 0px 8px; + font-weight: bold; + color: #777777; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); +} +.ui.search .results .category .result { + background-color: #FFFFFF; + margin-left: 80px; + border-left: 1px solid rgba(0, 0, 0, 0.1); +} +/* View All Results */ +.ui.search .all { + display: block; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: #FAFAFA; + height: 2em; + line-height: 2em; + color: rgba(0, 0, 0, 0.6); + font-weight: bold; + text-align: center; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.search .result:hover, +.ui.search .category .result:hover { + background-color: #F8F8F8; +} +.ui.search .all:hover { + background-color: #F0F0F0; +} +/*-------------- + Loading +---------------*/ +.ui.search.loading .input .icon { + background: url(../images/loader-mini.gif) no-repeat 50% 50%; +} +.ui.search.loading .input .icon:before, +.ui.search.loading .input .icon:after { + display: none; +} +/*-------------- + Active +---------------*/ +.ui.search .results .category.active { + background-color: #F1F1F1; +} +.ui.search .results .category.active > .name { + color: #333333; +} +.ui.search .result.active, +.ui.search .category .result.active { + background-color: #FBFBFB; +} +.ui.search .result.active .title { + color: #000000; +} +.ui.search .result.active .description { + color: #555555; +} +/******************************* + Variations +*******************************/ +/* Large */ +.ui.search .large.result .image, +.ui.search .large.result .image img { + width: 50px; + height: 50px; +} +.ui.search .large.results .indented.info { + margin-left: 65px; +} +.ui.search .large.results .info .title { + font-size: 16px; +} +.ui.search .large.results .info .description { + font-size: 11px; +} + +/* + * # Semantic - Shape + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Shape +*******************************/ +.ui.shape { + display: inline-block; + position: relative; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.shape .sides { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.ui.shape .side { + opacity: 1; + width: 100%; + margin: 0em !important; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.shape .side { + display: none; +} +/******************************* + Types +*******************************/ +.ui.cube.shape .side { + min-width: 15em; + height: 15em; + padding: 2em; + background-color: #E6E6E6; + color: rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} +.ui.cube.shape .side > .content { + width: 100%; + height: 100%; + display: table; + text-align: center; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.ui.cube.shape .side > .content > div { + display: table-cell; + vertical-align: middle; + font-size: 2em; +} +/******************************* + Variations +*******************************/ +.ui.text.shape.animating .sides { + position: static; +} +.ui.text.shape .side { + white-space: nowrap; +} +.ui.text.shape .side > * { + white-space: normal; +} +/******************************* + States +*******************************/ +/*-------------- + Loading +---------------*/ +.ui.loading.shape { + position: absolute; + top: -9999px; + left: -9999px; +} +/*-------------- + Animating +---------------*/ +.ui.shape .animating.side { + position: absolute; + top: 0px; + left: 0px; + z-index: 100; +} +.ui.shape .hidden.side { + opacity: 0.4; +} +/*-------------- + CSS +---------------*/ +.ui.shape.animating { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.animating .sides { + position: absolute; +} +.ui.shape.animating .sides { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.animating .side { + -webkit-transition: opacity 0.6s ease-in-out; + -moz-transition: opacity 0.6s ease-in-out; + transition: opacity 0.6s ease-in-out; +} +/*-------------- + Active +---------------*/ +.ui.shape .active.side { + display: block; +} + +/* + * # Semantic - Sidebar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Sidebar +*******************************/ +body { + -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease /*rtl:append:, + padding 0.3s ease*/; + -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease /*rtl:append:, + padding 0.3s ease*/; + transition: margin 0.3s ease, transform 0.3s ease /*rtl:append:, + padding 0.3s ease*/; +} +.ui.sidebar { + position: fixed; + margin: 0 !important; + height: 100% !important; + border-radius: 0px !important; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -ms-overflow-y: auto; + overflow-y: auto; + top: 0px; + left: 0px; + z-index: 999; + -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; + transition: margin-left 0.3s ease, margin-top 0.3s ease; +} +/*------------------- + Coupling +--------------------*/ +body.pushed.scrolling.ui.dimmable { + position: static; +} +/******************************* + Types +*******************************/ +/*------------------- + Direction +--------------------*/ +.ui.right.very.thin.sidebar, +.ui.right.thin.sidebar, +.ui.right.sidebar, +.ui.right.wide.sidebar, +.ui.right.very.wide.sidebar { + left: 100%; + margin: 0px !important; +} +.ui.top.sidebar { + width: 100% !important; +} +.ui.bottom.sidebar { + width: 100% !important; + top: 100%; + margin: 0px !important; +} +/******************************* + States +*******************************/ +.ui.active.sidebar { + margin-left: 0px !important; +} +.ui.active.top.sidebar, +.ui.active.bottom.sidebar { + margin-top: 0px !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Formatted +--------------------*/ +.ui.styled.sidebar { + padding: 1em 1.5em; + background-color: #FFFFFF; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.styled.very.thin.sidebar { + padding: 0.5em; +} +.ui.styled.thin.sidebar { + padding: 1em; +} +/*------------------- + Floating +--------------------*/ +.ui.floating.sidebar { + -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); +} +.ui.right.floating.sidebar { + -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); +} +.ui.top.floating.sidebar { + -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); +} +.ui.bottom.floating.sidebar { + -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); +} +/*------------------- + Width +--------------------*/ +/* Very Thin */ +.ui.very.thin.sidebar { + width: 60px !important; + margin-left: -60px !important; +} +.ui.active.very.thin.sidebar { + margin-left: 0px !important; +} +.ui.active.right.very.thin.sidebar { + margin-left: -60px !important; +} +/* Thin */ +.ui.thin.sidebar { + width: 200px !important; + margin-left: -200px !important; +} +.ui.active.thin.sidebar { + margin-left: 0px !important; +} +.ui.active.right.thin.sidebar { + margin-left: -200px !important; +} +/* Standard */ +.ui.sidebar { + width: 275px !important; + margin-left: -275px !important; +} +.ui.active.sidebar { + margin-left: 0px !important; +} +.ui.active.right.sidebar { + margin-left: -275px !important; +} +/* Wide */ +.ui.wide.sidebar { + width: 350px !important; + margin-left: -350px !important; +} +.ui.active.wide.sidebar { + margin-left: 0px !important; +} +.ui.active.right.wide.sidebar { + margin-left: -350px !important; +} +/* Very Wide */ +.ui.very.wide.sidebar { + width: 475px !important; + margin-left: -475px !important; +} +.ui.active.very.wide.sidebar { + margin-left: 0px !important; +} +.ui.active.right.very.wide.sidebar { + margin-left: -475px !important; +} +/*------------------- + Height +--------------------*/ +/* Standard */ +.ui.top.sidebar { + margin: -40px 0px 0px 0px !important; +} +.ui.top.sidebar, +.ui.bottom.sidebar { + height: 40px !important; +} +.ui.active.bottom.sidebar { + margin-top: -40px !important; +} + +/* + * # Semantic - Tab + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + UI Tabs +*******************************/ +.ui.tab { + display: none; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.tab.active, +.ui.tab.open { + display: block; +} +/*-------------------- + Loading +---------------------*/ +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: 250px; + text-indent: -10000px; +} +.ui.tab.loading * { + position: relative !important; + left: -10000px !important; +} +.ui.tab.loading:after { + position: absolute; + top: 50px; + left: 50%; + content: 'Loading...'; + margin-left: -32px; + text-indent: 5px; + color: rgba(0, 0, 0, 0.4); + width: 100%; + height: 100%; + padding-top: 75px; + background: url(../images/loader-large.gif) no-repeat 0px 0px; + visibility: visible; +} + +/******************************* + Semantic - Transition + Author: Jack Lukic + + CSS animation definitions for + transition module + +*******************************/ +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css +*/ +.ui.transition { + -webkit-animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease; + -moz-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; +} +/******************************* + States +*******************************/ +.ui.animating.transition { + display: block; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +/* Loading */ +.ui.loading.transition { + position: absolute; + top: -999999px; + left: -99999px; +} +/* Hidden */ +.ui.hidden.transition { + display: none !important; +} +/* Visible */ +.ui.visible.transition { + display: block; + visibility: visible; +} +/* Disabled */ +.ui.disabled.transition { + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; + animation-play-state: paused; +} +/******************************* + Variations +*******************************/ +.ui.looping.transition { + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +/******************************* + Types +*******************************/ +/*-------------- + Emphasis +---------------*/ +.ui.flash.transition { + -webkit-animation-name: flash; + -moz-animation-name: flash; + animation-name: flash; +} +.ui.shake.transition { + -webkit-animation-name: shake; + -moz-animation-name: shake; + animation-name: shake; +} +.ui.bounce.transition { + -webkit-animation-name: bounce; + -moz-animation-name: bounce; + animation-name: bounce; +} +.ui.tada.transition { + -webkit-animation-name: tada; + -moz-animation-name: tada; + animation-name: tada; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +.ui.pulse.transition { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + animation-name: pulse; +} +/*-------------- + Flips +---------------*/ +.ui.flip.transition.in, +.ui.flip.transition.out { + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; +} +.ui.horizontal.flip.transition.in, +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlip; + -moz-animation-name: horizontalFlip; + animation-name: horizontalFlip; +} +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + -moz-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} +.ui.vertical.flip.transition.in, +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlip; + -moz-animation-name: verticalFlip; + animation-name: verticalFlip; +} +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + -moz-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} +/*-------------- + Fades +---------------*/ +.ui.fade.transition.in { + -webkit-animation-name: fade; + -moz-animation-name: fade; + animation-name: fade; +} +.ui.fade.transition.out { + -webkit-animation-name: fadeOut; + -moz-animation-name: fadeOut; + animation-name: fadeOut; +} +.ui.fade.up.transition.in { + -webkit-animation-name: fadeUp; + -moz-animation-name: fadeUp; + animation-name: fadeUp; +} +.ui.fade.up.transition.out { + -webkit-animation-name: fadeUpOut; + -moz-animation-name: fadeUpOut; + animation-name: fadeUpOut; +} +.ui.fade.down.transition.in { + -webkit-animation-name: fadeDown; + -moz-animation-name: fadeDown; + animation-name: fadeDown; +} +.ui.fade.down.transition.out { + -webkit-animation-name: fadeDownOut; + -moz-animation-name: fadeDownOut; + animation-name: fadeDownOut; +} +/*-------------- + Scale +---------------*/ +.ui.scale.transition.in { + -webkit-animation-name: scale; + -moz-animation-name: scale; + animation-name: scale; +} +.ui.scale.transition.out { + -webkit-animation-name: scaleOut; + -moz-animation-name: scaleOut; + animation-name: scaleOut; +} +/*-------------- + Slide +---------------*/ +.ui.slide.down.transition.in { + -webkit-animation-name: slide; + -moz-animation-name: slide; + animation-name: slide; + -moz-transform-origin: 50% 0%; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} +.ui.slide.down.transition.out { + -webkit-animation-name: slideOut; + -moz-animation-name: slideOut; + animation-name: slideOut; + -webkit-transform-origin: 50% 0%; + -moz-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +.ui.slide.up.transition.in { + -webkit-animation-name: slide; + -moz-animation-name: slide; + animation-name: slide; + -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +.ui.slide.up.transition.out { + -webkit-animation-name: slideOut; + -moz-animation-name: slideOut; + animation-name: slideOut; + -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@-webkit-keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@-moz-keyframes slide { + 0% { + opacity: 0; + -moz-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -moz-transform: scaleY(1); + transform: scaleY(1); + } +} +@keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + -moz-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -moz-transform: scaleY(1); + transform: scaleY(1); + } +} +@-webkit-keyframes slideOut { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@-moz-keyframes slideOut { + 0% { + opacity: 1; + -moz-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -moz-transform: scaleY(0); + transform: scaleY(0); + } +} +@keyframes slideOut { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -moz-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + -moz-transform: scaleY(0); + transform: scaleY(0); + } +} +/******************************* + Animations +*******************************/ +/*-------------- + Emphasis +---------------*/ +/* Flash */ +@-webkit-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@-moz-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +/* Shake */ +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} +@-moz-keyframes shake { + 0%, + 100% { + -moz-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -moz-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -moz-transform: translateX(10px); + transform: translateX(10px); + } +} +@keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + -moz-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + -moz-transform: translateX(10px); + transform: translateX(10px); + } +} +/* Bounce */ +@-webkit-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} +@-moz-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -moz-transform: translateY(0); + transform: translateY(0); + } + 40% { + -moz-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -moz-transform: translateY(-15px); + transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + -moz-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + -moz-transform: translateY(-15px); + transform: translateY(-15px); + } +} +/* Tada */ +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +@-moz-keyframes tada { + 0% { + -moz-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -moz-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -moz-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -moz-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -moz-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + -moz-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + -moz-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + -moz-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + -moz-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +/* Pulse */ +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes pulse { + 0% { + -moz-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -moz-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -moz-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + -moz-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +/*-------------- + Flips +---------------*/ +/* Horizontal */ +@-webkit-keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlip { + 0% { + -moz-transform: rotateY(-90deg); + transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } +} +@keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + -moz-transform: rotateY(-90deg); + transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(0deg); + -moz-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } +} +/* Horizontal */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + opacity: 0; + } +} +@-moz-keyframes horizontalFlipOut { + 0% { + -moz-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } + 100% { + -moz-transform: rotateY(90deg); + transform: rotateY(90deg); + opacity: 0; + } +} +@keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + -moz-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + transform: rotateY(90deg); + opacity: 0; + } +} +/* Vertical */ +@-webkit-keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } +} +@-moz-keyframes verticalFlip { + 0% { + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } +} +@keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } +} +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } +} +@-moz-keyframes verticalFlipOut { + 0% { + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } + 100% { + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } +} +@keyframes verticalFlipOut { + 0% { + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: rotateX(-90deg); + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } +} +/*-------------- + Fades +---------------*/ +/* Fade */ +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-moz-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-moz-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +/* Fade Up */ +@-webkit-keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes fadeUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes fadeUpOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} +@-moz-keyframes fadeUpOut { + 0% { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -moz-transform: translateY(20px); + transform: translateY(20px); + } +} +@keyframes fadeUpOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + transform: translateY(20px); + } +} +/* Fade Down */ +@-webkit-keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes fadeDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes fadeDownOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } } -#onboarding .bottom.page-welcome, -#onboarding .bottom.page-tour { - display: none; +@-moz-keyframes fadeDownOut { + 0% { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -moz-transform: translateY(-20px); + transform: translateY(-20px); + } } -#onboarding .content.page-friends { - background-color: #f9f9f9; - border-top: solid 1px #dcdcdc; - height: 300px; - overflow-y: auto; +@keyframes fadeDownOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + transform: translateY(-20px); + } } -#onboarding .content.page-friends table.matches { - margin-top: 0; - text-align: left; +/*-------------- + Scale +---------------*/ +/* Scale */ +@-webkit-keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } -#onboarding .content.page-friends table.matches tr:last-child { - border-bottom: 1px solid #eee; +@-moz-keyframes scale { + 0% { + opacity: 0; + -moz-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -moz-transform: scale(1); + transform: scale(1); + } } -#onboarding .content.page-friends table.matches td { - padding: 10px 0; +@keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); + } } -#onboarding .content.page-friends table.matches td:nth-child(1) { - width: 10%; - text-align: center; +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } } -#onboarding .content.page-friends table.matches td:nth-child(2) { - width: 10%; - text-align: center; +@-moz-keyframes scaleOut { + 0% { + opacity: 1; + -moz-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -moz-transform: scale(0.7); + transform: scale(0.7); + } +} +@keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + transform: scale(0.7); + } } -#onboarding .content.page-friends table.matches td:nth-child(3) { - width: 30%; + +/* + * # Semantic - Video + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Video +*******************************/ +.ui.video { + position: relative; + max-width: 100%; } -#onboarding .content.page-friends table.matches td:nth-child(4) { - width: 50%; +/*-------------- + Content +---------------*/ +/* Placeholder Image */ +.ui.video .placeholder { + background-color: #333333; } -#onboarding .content.page-friends table.matches .avatar img { - -webkit-border-radius: 10px; - border-radius: 10px; - width: 20px; - height: 20px; +/* Play Icon Overlay */ +.ui.video .play { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + z-index: 10; + width: 100%; + height: 100%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; + -webkit-transition: opacity 0.3s; + -moz-transition: opacity 0.3s; + transition: opacity 0.3s; } -#onboarding .content.page-invite { - background-color: #f9f9f9; - border-top: solid 1px #dcdcdc; - padding: 40px; +.ui.video .play.icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + font-size: 6rem; + margin: -3rem 0em 0em -3rem; + color: #FFFFFF; + text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); } -#onboarding .content.page-invite h3, -#onboarding .content.page-invite h4 { +.ui.video .placeholder { display: block; width: 100%; + height: 100%; } -#onboarding .content.page-invite h4 { - color: #868686; - margin: 0; +/* IFrame Embed */ +.ui.video .embed { + display: none; } -#onboarding .content.page-invite form div { - display: inline-block; - vertical-align: baseline; +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.video .play:hover { + opacity: 1; } -#onboarding .content.page-invite input { - width: 40%; - margin-right: 8px; - vertical-align: baseline; +/*-------------- + Active +---------------*/ +.ui.video.active .play, +.ui.video.active .placeholder { + display: none; } -#onboarding .content.page-invite button { - margin: 8px; - vertical-align: baseline; +.ui.video.active .embed { + display: block; } -#onboarding .content.page-invite button span { - padding-right: 2px; + +/* + * # Semantic Comment View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Comments +---------------*/ +.ui.comments a { + cursor: pointer; } -#onboarding .content.page-invite .tweet span { - padding-right: 6px; +/*-------------- + Comment +---------------*/ +.ui.comments .comment { + position: relative; + margin-top: 0.5em; + padding-top: 0.5em; } -.popover.tour .popover-title span { - padding-top: 2px; - float: right; - font-size: 0.75em; +.ui.comments .comment:first-child { + margin-top: 0em; + padding-top: 0em; } -.popover.tour ul { - list-style: none; - padding-left: 0; +/*-------------------- + Avatar (Optional) +---------------------*/ +.ui.comments .comment .avatar { + display: block; + float: left; + width: 4em; } -.popover.tour li { - padding-bottom: 8px; +.ui.comments .comment .avatar img { + display: block; + margin: 0em auto; + width: 3em; + height: 3em; + border-radius: 500px; +} +/*-------------- + Content +---------------*/ +.ui.comments .comment > .content, +.ui.comments .comment > .avatar { + display: block; } -.popover.tour-1 .tip-inner { - width: 250px; - max-width: 250px; +.ui.comments .comment .avatar ~ .content { + padding: 0em 1em; } -.popover.tour-2 .tip-inner { - width: 225px; - max-width: 225px; +/* If there is an avatar move content over */ +.ui.comments .comment > .avatar ~ .content { + padding-top: 0.25em; + margin-left: 3.5em; } -.popover.tour-3 .tip-inner { - width: 300px; - max-width: 300px; -} -.popover.tour-4 .tip-inner { - width: 235px; - max-width: 235px; -} -#next-page, -#prev-page { - font-size: 25px; - background: #79c5f6; - padding: 10px 0; - color: #fff; - text-decoration: none; - -webkit-box-shadow: inset 0 0 3px #09578a; - box-shadow: inset 0 0 3px #09578a; - text-align: center; - margin-top: -25px; - opacity: 1; - -ms-filter: none; - filter: none; - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; - -o-transition: opacity 300ms; - -ms-transition: opacity 300ms; - transition: opacity 300ms; -} -#next-page:hover, -#prev-page:hover { - background: #86cbf7; -} -#next-page:active, -#prev-page:active { - background: #57b6f4; -} -#next-page.hide, -#prev-page.hide { - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.3em; + color: rgba(0, 0, 0, 0.4); } -#next-page { - position: fixed; - top: 50%; - right: -5px; - -webkit-border-top-left-radius: 5px; - border-top-left-radius: 5px; - -webkit-border-bottom-left-radius: 5px; - border-bottom-left-radius: 5px; - padding-left: 5px; +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0em 0.3em 0em 0em; } -#next-page:hover { - right: -3px; +/*-------------------- + Comment Text +---------------------*/ +.ui.comments .comment .text { + margin: 0.25em 0em 0.5em; + word-wrap: break-word; } -#next-page:active { - right: -5px; +/*-------------------- + User Actions +---------------------*/ +.ui.comments .comment .actions { + font-size: 0.9em; } -#prev-page { - position: fixed; - top: 50%; - left: -5px; - -webkit-border-top-right-radius: 5px; - border-top-right-radius: 5px; - -webkit-border-bottom-right-radius: 5px; - border-bottom-right-radius: 5px; - padding-left: 5px; +.ui.comments .comment .actions a { + display: inline-block; + margin: 0em 0.3em 0em 0em; + color: rgba(0, 0, 0, 0.3); +} +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: rgba(0, 0, 0, 0.6); +} +/*-------------------- + Reply Form +---------------------*/ +.ui.comments .reply.form { + margin-top: 0.75em; + width: 100%; + max-width: 30em; } -#prev-page:hover { - left: -3px; +.ui.comments .comment .reply.form { + margin-left: 2em; } -#prev-page:active { - left: -5px; +.ui.comments > .reply.form { + margin-top: 1.5em; + max-width: 40em; } -#pages-content { - overflow-x: hidden; - width: 1000%; - -webkit-transition: margin-left 300ms ease-out; - -moz-transition: margin-left 300ms ease-out; - -o-transition: margin-left 300ms ease-out; - -ms-transition: margin-left 300ms ease-out; - transition: margin-left 300ms ease-out; -} -.page { - float: left; - margin: 0 2px; +.ui.comments .reply.form textarea { + height: 12em; } -.center { - margin: 50px auto; - width: 180px; +/*-------------------- + Nested Comments +---------------------*/ +.ui.comments .comment .comments { + margin-top: 0.5em; + padding-top: 0.5em; + padding-bottom: 1em; } -#policy-container { - width: 550px; - text-align: left; - margin: 0 auto; - color: #808080; +.ui.comments .comment .comments:before { + position: absolute; + top: 0px; + left: 0px; +} +/* One Deep */ +.ui.comments > .comment .comments { + margin-left: 2em; +} +/* Two Deep */ +.ui.comments > .comment > .comments > .comment > .comments { + margin-left: 1.75em; +} +/* Three Deep */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { + margin-left: 1.5em; +} +/* Four Deep or more */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { + margin-left: 0.5em; +} +/******************************* + Variations +*******************************/ +/*-------------------- + Threaded +---------------------*/ +.ui.threaded.comments .comment .comments { + margin-left: 2em !important; + padding-left: 2em !important; + -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); +} +/*-------------------- + Minimal +---------------------*/ +.ui.minimal.comments .comment .actions { + opacity: 0; + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + -webkit-transition-delay: 0.1s; + -moz-transition-delay: 0.1s; + transition-delay: 0.1s; +} +.ui.minimal.comments .comment > .content:hover > .actions { + opacity: 1; } -#policy { - background: #fff; - border: 1px solid #c9c9c9; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 30px; - width: 100%; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - float: left; - position: relative; - z-index: 10; - margin-bottom: 100px; +/*-------------------- + Sizes +---------------------*/ +.ui.small.comments { + font-size: 0.875em; } -.progress-bar { - position: relative; - background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #f2f2f2), color-stop(1, #f2f2f2)); - background: -webkit-linear-gradient(bottom, #f2f2f2 40%, #f2f2f2 100%); - background: -moz-linear-gradient(bottom, #f2f2f2 40%, #f2f2f2 100%); - background: -o-linear-gradient(bottom, #f2f2f2 40%, #f2f2f2 100%); - background: -ms-linear-gradient(bottom, #f2f2f2 40%, #f2f2f2 100%); - background: linear-gradient(bottom, #f2f2f2 40%, #f2f2f2 100%); - height: 40px; - line-height: 34px; - -webkit-border-radius: 40px; - border-radius: 40px; - padding: 2px; - border: 1px solid #cdcdcd; - -webkit-box-shadow: inset 0 0 3px #cdcdcd; - box-shadow: inset 0 0 3px #cdcdcd; -} -.progress-current { - background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00a0cb), color-stop(0.9, #40d9fa), color-stop(0.3, #40d9fa)); - background: -webkit-linear-gradient(bottom, #00a0cb 0%, #40d9fa 90%, #40d9fa 30%); - background: -moz-linear-gradient(bottom, #00a0cb 0%, #40d9fa 90%, #40d9fa 30%); - background: -o-linear-gradient(bottom, #00a0cb 0%, #40d9fa 90%, #40d9fa 30%); - background: -ms-linear-gradient(bottom, #00a0cb 0%, #40d9fa 90%, #40d9fa 30%); - background: linear-gradient(bottom, #00a0cb 0%, #40d9fa 90%, #40d9fa 30%); - position: absolute; - -webkit-border-radius: 50px; - border-radius: 50px; - top: 2px; - left: 2px; - text-align: right; - color: #fff; - padding-right: 20px; - line-height: 34px; - -webkit-transition: width 500ms ease-out; - -moz-transition: width 500ms ease-out; - -o-transition: width 500ms ease-out; - -ms-transition: width 500ms ease-out; - transition: width 500ms ease-out; + +/* + * # Activity Feed View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 22, 2013 + */ +/******************************* + Activity Feed +*******************************/ +.ui.feed a { + cursor: pointer; +} +.ui.feed, +.ui.feed .event, +.ui.feed .label, +.ui.feed .content, +.ui.feed .extra { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; + -ms-box-sizing: border-box; box-sizing: border-box; - -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); - box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -} -.progress-current em { - text-shadow: -1px -1px 0 rgba(0,0,0,0.2); - font-style: normal; -} -.progress-total { - color: #cdcdcd; - text-align: right; - padding-right: 20px; -} -.progress-total em { - font-style: normal; - text-shadow: 1px 1px 0 #fff; -} -.progress-bar.small { - font-size: 12px; - line-height: 20px; - -webkit-border-radius: 20px; - border-radius: 20px; -} -.progress-bar.small .progress-current { - padding-right: 10px; - height: 20px; -} -.progress-bar.small .progress-total { - padding-right: 10px; } -.progress-bar.tiny { - height: 16px; - font-size: 10px; - line-height: 5px; - -webkit-border-radius: 15px; - border-radius: 15px; -} -.progress-bar.tiny em { - display: none; +/******************************* + Content +*******************************/ +/* Event */ +.ui.feed .event { + width: 100%; + display: table; + padding: 1em; } -.progress-bar.tiny .progress-current { - padding-right: 5px; - height: 10px; - line-height: 0; +.ui.feed .event:first-child { + border-top: 0px; } -.progress-bar.tiny .progress-total { - padding-right: 5px; +.ui.feed .event:last-child { + margin-bottom: 1em; } -#settings-container { - width: 700px; +/* Event Label */ +.ui.feed .label { + width: 3em; + display: table-cell; + vertical-align: top; text-align: left; - margin: 0 auto; - font-size: 14px; - -webkit-font-smoothing: antialiased; - color: #535353; -} -#settings { - background: #fff; - border: 1px solid #cdcdcd; - -webkit-border-radius: 3px; - border-radius: 3px; - width: 100%; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - float: left; - position: relative; - z-index: 10; - margin-bottom: 50px; -} -#settings h2 { - margin: 0; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - background: #f2f2f2; - font-size: 14px; - color: #333; - padding: 20px; - border-bottom: 1px solid #cdcdcd; -} -#settings .tabs { - text-transform: uppercase; - margin: 0; - padding: 0; - background: #e6e6e6; - border-bottom: 1px solid #cdcdcd; - -webkit-box-shadow: inset 0 1px 2px #dcdcdc; - box-shadow: inset 0 1px 2px #dcdcdc; -} -#settings .tabs li { - display: inline-block; - list-style: none; -} -#settings .tabs li.active a { - background: #f2f2f2; - border-left: 1px solid #cdcdcd; - border-right: 1px solid #cdcdcd; - padding-top: 11px; - -webkit-box-shadow: inset 0 1px 0 #fff; - box-shadow: inset 0 1px 0 #fff; - border-top: none; - color: #333; -} -#settings .tabs a { - display: inline-block; - border: 1px solid transparent; - border-bottom: none; - text-decoration: none; - color: #1f7dca; - font-size: 12px; - font-weight: 700; - padding: 10px 20px; - text-shadow: 0 1px 0 #fff; -} -#settings .tabs a:hover { - color: #1964a2; } -#settings .tabs li:first-child a { - border-left: 0; +.ui.feed .label .icon { + font-size: 1.5em; + padding: 0.5em; + margin: 0em; } -#settings .content { - padding: 20px 40px; +.ui.feed .label img { + width: 3em; + margin: 0em; + border-radius: 50em; } -#notification-wrapper { - text-align: center; +.ui.feed .label + .content { + padding: 0.75em 1em 0em; } -#notification-settings { - margin: 0 auto; +/* Content */ +.ui.feed .content { + display: table-cell; + vertical-align: top; text-align: left; - width: 60%; -} -#notification-settings p a.update-account { - padding: 0px; + word-wrap: break-word; } -#notification-settings table td, -#notification-settings table th { - padding: 8px 0; +/* Date */ +.ui.feed .content .date { + float: right; + padding-left: 1em; + color: rgba(0, 0, 0, 0.4); } -#notification-settings table th.email, -#notification-settings table th.phone { - text-indent: -9999999em; +/* Summary */ +.ui.feed .content .summary { + color: rgba(0, 0, 0, 0.75); } -#notification-settings table td:nth-child(2), -#notification-settings table td:nth-child(3) { - width: 30px; - text-align: center; +.ui.feed .content .summary img { + display: inline-block; + margin-right: 0.25em; + width: 4em; + border-radius: 500px; } -#account-type { - text-align: center; +/* Additional Information */ +.ui.feed .content .extra { + margin: 1em 0em 0em; + padding: 0.5em 0em 0em; + color: rgba(0, 0, 0, 0.5); } -#account-type h3 { - font-size: 28px; - margin: 20px 0 0 0; +.ui.feed .content .extra.images img { + display: inline-block; + margin-right: 0.25em; + width: 6em; } -#account-type h5 { - font-size: 14px; - margin: 2px 0 20px 0; +.ui.feed .content .extra.text { + padding: 0.5em 1em; + border-left: 0.2em solid rgba(0, 0, 0, 0.1); } -#account-type .links { - margin-top: 20px; +/******************************* + Variations +*******************************/ +.ui.small.feed { + font-size: 0.875em; } -#account-type .links a { - text-decoration: none; - text-transform: uppercase; - color: #1f7dca; - font-size: 11px; - margin: 0 5px; +.ui.small.feed .label img { + width: 2.5em; } -#account-type .links span.or { - font-style: italic; +.ui.small.feed .label .icon { + font-size: 1.25em; } -table.bonus thead tr td { - font-size: 12px; - font-weight: normal; - text-align: left; +.ui.feed .event { + padding: 0.75em 0em; } -table.bonus thead tr td.earned { - padding-left: 40px; +.ui.small.feed .label + .content { + padding: 0.5em 0.5em 0; } -table.bonus tbody { - border: 1px solid #eee; +.ui.small.feed .content .extra.images img { + width: 5em; } -table.bonus tbody tr { - height: 45px; - line-height: 45px; +.ui.small.feed .content .extra { + margin: 0.5em 0em 0em; } -table.bonus tbody tr td { - padding: 0; - text-align: left; +.ui.small.feed .content .extra.text { + padding: 0.25em 0.5em; } -table.bonus tbody tr td.image { - width: 10%; - text-align: center; + +/* + * # Semantic Item View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Items +---------------*/ +.ui.items { + margin: 1em 0em 0em; +} +.ui.items:first-child { + margin-top: 0em; +} +.ui.items:last-child { + margin-bottom: -1em; +} +/* Force Clearing */ +.ui.items:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; } -table.bonus tbody tr td.image img { +/*-------------- + Item +---------------*/ +.ui.items > .row > .item, +.ui.items > .item { + display: block; + float: left; position: relative; - top: 6px; -} -table.bonus tbody tr td.type { - width: 40%; - font-weight: bold; + top: 0px; + width: 316px; + min-height: 375px; + margin: 0em 0.5em 2.5em; + padding: 0em; + background-color: #FFFFFF; + line-height: 1.2; + font-size: 1em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); + border-radius: 0.33em; + -webkit-transition: -webkit-box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + padding: 0.5em; +} +.ui.items a.item, +.ui.items .item a { + cursor: pointer; } -table.bonus tbody tr td.desc { - width: 30%; +.ui.items .item, +.ui.items .item > .image, +.ui.items .item > .image .overlay, +.ui.items .item > .content, +.ui.items .item > .content > .meta, +.ui.items .item > .content > .extra { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } -table.bonus tbody tr td.pts { - width: 20%; - font-weight: bold; +/*-------------- + Images +---------------*/ +.ui.items .item > .image { + display: block; + position: relative; + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0.2em; } -table.bonus tbody tr.even { - background-color: #f5fbff; +.ui.items .item > .image > img { + display: block; + width: 100%; } -#information-wrapper { - text-align: center; +/*-------------- + Content +---------------*/ +.ui.items .item > .content { + padding: 0.75em 0.5em; } -#information-wrapper input { - display: inline-block; +.ui.items .item > .content > .name { + display: block; + font-size: 1.25em; + font-weight: bold; + margin-bottom: 0.2em; + color: rgba(0, 0, 0, 0.7); } -#information-settings { - text-align: left; +.ui.items .item > .content > .description { + clear: both; + margin: 0em 0em; + color: rgba(0, 0, 0, 0.45); } -#information-settings .two p { - display: inline-block; - width: 48%; +.ui.items .item > .content > .description p { + margin: 0em 0em 0.2em; } -#information-settings .two p:first-child { - margin-right: 4%; +.ui.items .item > .content > .description p:last-child { + margin-bottom: 0em; } -#information-settings .two a { - font-size: 14px; +/*-------------- + Meta +---------------*/ +.ui.items .item .meta { + float: right; + color: rgba(0, 0, 0, 0.35); } -#information-settings .information { - margin: 0 15px 0 150px; +.ui.items .item > .content > .meta + .name { + float: left; } -#information-settings .msg-placeholder { - margin-left: 150px; +/*-------------- + Labels +---------------*/ +/*-----star----- */ +/* hover */ +.ui.items .item .star.label:hover::after { + border-right-color: #F6EFC3; } -#information-settings #avatar-wrapper { - cursor: pointer; - position: relative; - float: left; - margin-right: 20px; - width: 130px; - text-align: center; +.ui.items .item .star.label:hover::after { + border-top-color: #F6EFC3; } -#information-settings #avatar-wrapper p.upload { - display: none; - position: absolute; - top: 40px; - left: 40px; -} -#information-settings #avatar-wrapper .img-placeholder { - width: 100px; - height: 100px; - margin: 12px auto 0; - border: 1px solid #cdcdcd; - -webkit-border-radius: 50px; - border-radius: 50px; - display: inline-block; - -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2); - box-shadow: 0 2px 3px rgba(0,0,0,0.2); +.ui.items .item .star.label:hover .icon { + color: #ac9400; } -#information-settings #avatar-wrapper .img-placeholder img { - width: 96px; - height: 97px; - -webkit-border-radius: 50px; - border-radius: 50px; +/* active */ +.ui.items .item .star.label.active::after { + border-right-color: #F6EFC3; } -#information-settings .email .confirm span { - font-weight: bold; +.ui.items .item .star.label.active::after { + border-top-color: #F6EFC3; } -#change-avatar a { - font-size: 12px; +.ui.items .item .star.label.active .icon { + color: #ac9400; } -#change-avatar input { - position: absolute; - top: 0; - left: 0; - border: solid transparent; - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); - width: 125px; +/*-----like----- */ +/* hover */ +.ui.items .item .like.label:hover::after { + border-right-color: #F5E1E2; } -#avatar-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; } -#avatar { - border: 1px solid #fff; +.ui.items .item .like.label:hover .icon { + color: #ef404a; } -#avatar.over { - border: 1px dotted #ddd; +/* active */ +.ui.items .item .like.label.active::after { + border-right-color: #F5E1E2; } -#avatar.over p.upload { - display: block; +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; } -#password-wrapper { - text-align: center; +.ui.items .item .like.label.active .icon { + color: #ef404a; } -#password-settings { - margin: 0 auto; - text-align: left; - width: 60%; +/*-------------- + Extra +---------------*/ +.ui.items .item .extra { + position: absolute; + width: 100%; + padding: 0em 0.5em; + bottom: -2em; + left: 0em; + height: 1.5em; + color: rgba(0, 0, 0, 0.25); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.items .item .extra > img { + display: inline-block; + border-radius: 500px 500px 500px 500px; + margin-right: 0.25em; + vertical-align: middle; + width: 2em; } -#upgrade-wrapper { - text-align: center; +.ui.items .item .extra .left { + float: left; } -#upgrade-wrapper h3, -#upgrade-wrapper h5 { - font-size: 28px; - margin: 20px 0 0 0; +.ui.items .item .extra .right { + float: right; } -#upgrade-wrapper h5 { - font-size: 14px; - margin: 2px 0 0; +/******************************* + States +*******************************/ +.ui.items .item:hover { + cursor: pointer; + z-index: 5; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); } -#upgrade-wrapper #upgrade-accounts { - background-color: #e6e6e6; - margin: 33px -40px 0; - height: 370px; - overflow: hidden; +.ui.items .item:hover .extra { + color: rgba(0, 0, 0, 0.5); } -#upgrade-wrapper #upgrade-accounts hr { - background: url("/settings/wave-top.svg") repeat-x left top; - margin: 0px; - padding: 0px; - border: 0px; - height: 20px; - position: absolute; - width: 100%; - z-index: 100; +.ui.items .item:nth-of-type(6n+1):hover { + border-bottom-color: #6ECFF5 !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types { - -webkit-transition: all 500ms ease-in; - -moz-transition: all 500ms ease-in; - -o-transition: all 500ms ease-in; - -ms-transition: all 500ms ease-in; - transition: all 500ms ease-in; - background-color: #6e63a0; - padding: 25px 0; - position: relative; +.ui.items .item:nth-of-type(6n+2):hover { + border-bottom-color: #5C6166 !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul { - height: 257px; - overflow: hidden; - margin: 0; - padding: 0 0 0 16px; +.ui.items .item:nth-of-type(6n+3):hover { + border-bottom-color: #A1CF64 !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li { - float: left; - list-style: none; - margin: 27px 17px 0px; - padding: 0; - overflow: hidden; +.ui.items .item:nth-of-type(6n+4):hover { + border-bottom-color: #D95C5C !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card { - margin: 0 1px 5px; - width: 186px; - height: 223px; - -webkit-border-radius: 8px; - border-radius: 8px; - color: #fff; - position: relative; - border: 1px solid rgba(0,0,0,0.2); - -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 3px rgba(0,0,0,0.8); - box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 3px rgba(0,0,0,0.8); - background-color: #463b86; -} -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card:hover { - background-color: #51459c; -} -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card .favorite { - -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.3); - box-shadow: -1px 1px 2px rgba(0,0,0,0.3); - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d9d105), color-stop(1, #f9f10c)); - background-image: -webkit-linear-gradient(bottom, #d9d105 0%, #f9f10c 100%); - background-image: -moz-linear-gradient(bottom, #d9d105 0%, #f9f10c 100%); - background-image: -o-linear-gradient(bottom, #d9d105 0%, #f9f10c 100%); - background-image: -ms-linear-gradient(bottom, #d9d105 0%, #f9f10c 100%); - background-image: linear-gradient(bottom, #d9d105 0%, #f9f10c 100%); - background-color: #fdff35; - color: #000; - text-shadow: 1px 0 1px rgba(255,255,255,0.6); - width: 100px; - height: 30px; - line-height: 37px; - font-size: 12px; - font-weight: 700; - position: absolute; - right: -34px; - top: 3px; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); +.ui.items .item:nth-of-type(6n+5):hover { + border-bottom-color: #00B5AD !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card span { - color: #2e2260; - font-size: 22px; +.ui.items .item:nth-of-type(6n+6):hover { + border-bottom-color: #564F8A !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card span.lt { - position: absolute; - top: 0; - left: 10px; +/******************************* + Variations +*******************************/ +/*-------------- + Connected +---------------*/ +.ui.connected.items { + display: table; + width: 100%; + margin-left: 0em !important; + margin-right: 0em !important; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card span.br { - position: absolute; - bottom: 0; - right: 10px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -o-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card h3 { - font-size: 20px; -} -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card .items { - margin-top: 27px; - font-size: 52px; - line-height: 56px; -} -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card .cost { - text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0 1px #fff, -2px 0 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff; - color: #2a78c4; - font-size: 24px; - margin-top: 10px; - font-weight: bold; +.ui.connected.items > .row > .item, +.ui.connected.items > .item { + float: none; + display: table-cell; + vertical-align: top; + height: auto; + border-radius: 0px; + margin: 0em; + width: 33.33%; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card .current-plan { - position: absolute; - width: 184px; - bottom: 8px; +.ui.connected.items > .row { + display: table; + margin: 0.5em 0em; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card.pair { - -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 1px 0 rgba(0,0,0,0.2) inset; - box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 1px 0 rgba(0,0,0,0.2) inset; - background-color: #535353; +.ui.connected.items > .row:first-child { + margin-top: 0em; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li .card.pair span { - color: #fff; +/* Borders */ +.ui.connected.items > .item, +.ui.connected.items > .row:last-child > .item { + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li.non-free { - cursor: pointer; +.ui.connected.items > .row:last-child > .item:first-child, +.ui.connected.items > .item:first-child { + border-radius: 0em 0em 0em 0.33em; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li.non-free:active { - position: relative; - top: 1px; +.ui.connected.items > .row:last-child > .item:last-child, +.ui.connected.items > .item:last-child { + border-radius: 0em 0em 0.33em 0em; +} +/* Hover */ +.ui.connected.items .item:hover { + border-bottom-width: 0.2em; } -#upgrade-wrapper #upgrade-accounts .upgrades-types ul li.non-free:active .card { - -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 rgba(0,0,0,0.2) inset !important; - box-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 rgba(0,0,0,0.2) inset !important; +/* Item Count */ +.ui.one.connected.items > .row > .item, +.ui.one.connected.items > .item { + width: 50%; + padding-left: 2%; + padding-right: 2%; } -#upgrade-wrapper #upgrade-accounts .upgrades-types.hide { - margin-top: -329px; +.ui.two.connected.items > .row > .item, +.ui.two.connected.items > .item { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.three.connected.items > .row > .item, +.ui.three.connected.items > .item { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.four.connected.items > .row > .item, +.ui.four.connected.items > .item { + width: 25%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.five.connected.items > .row > .item, +.ui.five.connected.items > .item { + width: 20%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.six.connected.items > .row > .item, +.ui.six.connected.items > .item { + width: 16.66%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.seven.connected.items > .row > .item, +.ui.seven.connected.items > .item { + width: 14.28%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.eight.connected.items > .row > .item, +.ui.eight.connected.items > .item { + width: 12.5%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.nine.connected.items > .row > .item, +.ui.nine.connected.items > .item { + width: 11.11%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.ten.connected.items > .row > .item, +.ui.ten.connected.items > .item { + width: 10%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.eleven.connected.items > .row > .item, +.ui.eleven.connected.items > .item { + width: 9.09%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.twelve.connected.items > .row > .item, +.ui.twelve.connected.items > .item { + width: 8.3333%; + padding-left: 0.1%; + padding-right: 0.1%; +} +/*------------------- + Responsive +--------------------*/ +@media only screen and (max-width: 768px) { + .ui.stackable.items { + display: block !important; + } + .ui.stackable.items > .item, + .ui.stackable.items > .row > .item { + display: block !important; + height: auto !important; + width: 100% !important; + padding: 0% !important; + } } -#upgrade-wrapper #upgrade-accounts .upgrades-types p.change-plan { - color: #fff; - bottom: 37px; - font-weight: 600; - font-size: 12px; +/*-------------------- + Horizontal +---------------------*/ +.ui.horizontal.items > .item, +.ui.items > .horizontal.item { + display: table; } -#upgrade-wrapper #upgrade-accounts .upgrades-types p.change-plan span.right-arrow { - padding-left: 20px; +.ui.horizontal.items > .item > .image, +.ui.items > .horizontal.item > .image { + display: table-cell; + width: 50%; +} +.ui.horizontal.items > .item > .image + .content, +.ui.items > .horizontal.item > .image + .content { + width: 50%; + display: table-cell; } -#upgrade-wrapper #upgrade-accounts .upgrades-types p.change-plan span.left-arrow { - padding-right: 20px; +.ui.horizontal.items > .item > .content, +.ui.items > .horizontal.item > .content { + padding: 1% 1.7% 11% 3%; + vertical-align: top; } -#upgrade-wrapper #upgrade-accounts .upgrades-description { +.ui.horizontal.items > .item > .meta, +.ui.items > .horizontal.item > .meta { + position: absolute; + padding: 0%; + bottom: 7%; + left: 3%; + width: 94%; +} +.ui.horizontal.items > .item > .image + .content + .meta, +.ui.items > .horizontal.item > .image + .content + .meta { + bottom: 7%; + left: 53%; + width: 44%; +} +.ui.horizontal.items > .item .avatar, +.ui.items > .horizontal.item .avatar { + width: 11.5%; +} +.ui.items > .item .avatar { + max-width: 25px; +} +/*-------------- + Item Count +---------------*/ +.ui.one.items { + margin-left: -2%; + margin-right: -2%; +} +.ui.one.items > .item { width: 100%; - height: 200px; - background-color: #e6e6e6; + margin-left: 2%; + margin-right: 2%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description h4 { - font-weight: 400; - font-size: 1.4em; - text-align: left; - margin: 3px 0 5px; +.ui.two.items { + margin-left: -1%; + margin-right: -1%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description h4 span { - color: #4085c9; +.ui.two.items > .item { + width: 48%; + margin-left: 1%; + margin-right: 1%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description hr { - background: url("/settings/wave-bottom.svg") repeat-x 40px top; - background-color: transparent; - border: 0; - height: 20px; - position: relative; - top: -20px; +.ui.two.items > .item:nth-child(2n+1) { + clear: left; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content { - padding: 0px 54px; +.ui.three.items { + margin-left: -1%; + margin-right: -1%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content p { - text-align: justify; - color: #757575; - margin: 0px 0px; +.ui.three.items > .item { + width: 31.333%; + margin-left: 1%; + margin-right: 1%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content strong { - color: #222; +.ui.three.items > .item:nth-child(3n+1) { + clear: left; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content form fieldset { - background-color: #fff; - border: 1px solid #ccc; - -webkit-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); - box-shadow: 0 1px 2px rgba(0,0,0,0.1); - margin: 10px 0; - padding: 3px 15px; - float: left; - width: 100%; +.ui.four.items { + margin-left: -0.5%; + margin-right: -0.5%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content form fieldset input { - width: 350px; +.ui.four.items > .item { + width: 24%; + margin-left: 0.5%; + margin-right: 0.5%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content form fieldset input.card-name { - width: 195px; +.ui.four.items > .item:nth-child(4n+1) { + clear: left; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content form fieldset input.card-expiration { - margin-left: 24px; - width: 150px; +.ui.five.items { + margin-left: -0.5%; + margin-right: -0.5%; } -#upgrade-wrapper #upgrade-accounts .upgrades-description .content form fieldset input.card-code { - margin-left: 24px; - width: 150px; +.ui.five.items > .item { + width: 19%; + margin-left: 0.5%; + margin-right: 0.5%; } -#upgrade-wrapper p.all-price { - margin: 0 -40px -20px; - background-color: #e6e6e6; - height: 54px; - text-align: left; - line-height: 70px; - padding-left: 20px; - font-weight: bold; - font-size: 12px; - color: #a1a1a1; - text-shadow: 0 1px 0 #fff; +.ui.five.items > .item:nth-child(5n+1) { + clear: left; } -#signup-container { - width: 550px; - text-align: left; - margin: 0 auto; - color: #535353; +.ui.six.items { + margin-left: -0.5%; + margin-right: -0.5%; } -#signup-container a { - color: #1f7dca; +.ui.six.items > .item { + width: 15.66%; + margin-left: 0.5%; + margin-right: 0.5%; } -#create-account { - background: #fff; - border: 1px solid #c9c9c9; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 30px; - width: 66%; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - float: left; - position: relative; - z-index: 10; +.ui.six.items > .item:nth-child(6n+1) { + clear: left; } -#create-account p.note span { - float: right; +.ui.seven.items { + margin-left: -0.5%; + margin-right: -0.5%; } -#signup-container #create-account a { - color: #424242; +.ui.seven.items > .item { + width: 13.28%; + margin-left: 0.5%; + margin-right: 0.5%; + font-size: 11px; } -#create-account h1 { - color: #1f7dca; - font-weight: bold; - font-size: 26px; - margin: 0 0 15px 0; +.ui.seven.items > .item:nth-child(7n+1) { + clear: left; } -#policy-text { - font-size: 12px; +.ui.eight.items { + margin-left: -0.25%; + margin-right: -0.25%; } -#signup-box { - margin-top: 20px; - width: 33%; - float: left; - background: #f5f5f5; - -webkit-box-shadow: 0 0 1px 1px #d4d4d4, inset 0 0 1px 1px #fff; - box-shadow: 0 0 1px 1px #d4d4d4, inset 0 0 1px 1px #fff; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; - padding: 10px 20px; - position: relative; - left: -200px; - -webkit-transition: left 800ms cubic-bezier(0.47, 0, 0, 1.1); - -moz-transition: left 800ms cubic-bezier(0.47, 0, 0, 1.1); - -o-transition: left 800ms cubic-bezier(0.47, 0, 0, 1.1); - -ms-transition: left 800ms cubic-bezier(0.47, 0, 0, 1.1); - transition: left 800ms cubic-bezier(0.47, 0, 0, 1.1); -} -#signup-box.show { - left: -2px; -} -#signup-box h2 { - color: #222; - font-size: 18px; - background: url("/signup/signup.png") 100% 0 no-repeat; - padding-bottom: 10px; - margin-right: -8px; -} -#signup-box ul { - margin: 0; - padding: 0; -} -#signup-box ul li { - margin: 20px 0; - font-size: 12px; - list-style: none; +.ui.eight.items > .item { + width: 12.0%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 11px; } -#signup-text { - width: 66%; - text-align: center; - clear: both; - font-size: 12px; - padding-top: 12px; +.ui.eight.items > .item:nth-child(8n+1) { + clear: left; } -#create-account input[name=email] { - -webkit-transition: width 300ms ease-out; - -moz-transition: width 300ms ease-out; - -o-transition: width 300ms ease-out; - -ms-transition: width 300ms ease-out; - transition: width 300ms ease-out; +.ui.nine.items { + margin-left: -0.25%; + margin-right: -0.25%; } -#create-account input[name=email].has-gravatar { - width: 85%; +.ui.nine.items > .item { + width: 10.61%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 10px; } -#create-account input[name=email] ~ .error { - -webkit-transition: right 300ms ease-out; - -moz-transition: right 300ms ease-out; - -o-transition: right 300ms ease-out; - -ms-transition: right 300ms ease-out; - transition: right 300ms ease-out; +.ui.nine.items > .item:nth-child(9n+1) { + clear: left; } -#create-account input[name=email].has-gravatar ~ .error { - right: 55px; +.ui.ten.items { + margin-left: -0.2%; + margin-right: -0.2%; } -#create-account .gravatar { - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; - -o-transition: opacity 300ms; - -ms-transition: opacity 300ms; - transition: opacity 300ms; - position: absolute; - top: 11px; - right: 0; - -webkit-border-radius: 20px; - border-radius: 20px; +.ui.ten.items > .item { + width: 9.6%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 10px; } -#create-account .gravatar.show { - opacity: 1; - -ms-filter: none; - filter: none; +.ui.ten.items > .item:nth-child(10n+1) { + clear: left; } -#terms-container { - width: 550px; - text-align: left; - margin: 0 auto; - color: #535353; +.ui.eleven.items { + margin-left: -0.2%; + margin-right: -0.2%; } -#terms { - background: #fff; - border: 1px solid #c9c9c9; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 30px; - width: 100%; - -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - box-shadow: 0 0 0 1px rgba(255,255,255,0.3); - float: left; - position: relative; - z-index: 10; - margin-bottom: 100px; +.ui.eleven.items > .item { + width: 8.69%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 9px; } -table { - margin-top: 20px; - width: 100%; +.ui.eleven.items > .item:nth-child(11n+1) { + clear: left; } -thead { - font-weight: bold; - color: #2a2a2a; +.ui.twelve.items { + margin-left: -0.1%; + margin-right: -0.1%; } -tr { - border-bottom: 1px solid #eee; +.ui.twelve.items > .item { + width: 8.1333%; + margin-left: 0.1%; + margin-right: 0.1%; + font-size: 9px; } -tr:last-child { - border-bottom: none; +.ui.twelve.items > .item:nth-child(12n+1) { + clear: left; +} + +/* + * # Semantic List - Flat + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ +/******************************* + List +*******************************/ +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: none; + margin: 1em 0em; + padding: 0em; +} +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + margin: 0em; + padding: 0.5em 0em 0.5em 1em; +} +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; +} +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; +} +/******************************* + Content +*******************************/ +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + padding: 0.3em 0em; + line-height: 1.2em; } -td, -th { - padding: 14px 0; +.ui.list .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; } -table.highlight tr:hover { - background: #f0f0f0; +/* Sub-List */ +.ui.list .list { + clear: both; } -.pager { - margin: 0; - padding: 0; +/* Icon */ +.ui.list .item > .icon { + display: block; + float: left; + margin: 0em 1em 0em 0em; + padding: 0.1em 0em 0em 0em; } -.pager li { +.ui.list .item > .icon:only-child { display: inline-block; - margin: 0 5px; } -.pager li.page a { - text-indent: 101%; - white-space: nowrap; - overflow: hidden; - background: #cecece; - -webkit-border-radius: 18px; - border-radius: 18px; - border-top: 1px solid #aaa; - border-bottom: 1px solid #fff; - -webkit-transition: background 200ms; - -moz-transition: background 200ms; - -o-transition: background 200ms; - -ms-transition: background 200ms; - transition: background 200ms; -} -.pager li.page a:hover { - background: #abed7f; -} -.pager li.active a { - background: #abed7f; - border-top: 1px solid transparent; - border-bottom: 1px solid #aaa; +.ui.horizontal.list .item > .icon { + margin: 0em; + padding: 0em 0.25em 0em 0em; } -.pager li a { +.ui.horizontal.list .item > .icon, +.ui.horizontal.list .item > .icon + .content { + float: none; display: inline-block; - text-decoration: none; - font-size: 18px; - width: 18px; - height: 18px; - line-height: 12px; - color: #8f8f8f !important; -} -.pager li a:hover { - color: #565656 !important; -} -textarea, -.input-field, -input[type=text], -input[type=password], -.mr-editor { - margin: 12px 0; - width: 100%; - padding: 8px; - font-weight: 100; - font-size: 14px; - -webkit-font-smoothing: antialiased; - border: 1px solid #d4d4d4; - -webkit-box-shadow: inset 0 1px 5px 0 #f4f4f4; - box-shadow: inset 0 1px 5px 0 #f4f4f4; - outline: none; - background-color: transparent; - color: #888; -} -textarea:focus, -.input-field:focus, -input[type=text]:focus, -input[type=password]:focus, -.mr-editor:focus, -textarea.focused, -.input-field.focused, -input[type=text].focused, -input[type=password].focused, -.mr-editor.focused { - border-color: #91c0e5; - color: #363636; -} -textarea:focus::-webkit-input-placeholder, -.input-field:focus::-webkit-input-placeholder, -input[type=text]:focus::-webkit-input-placeholder, -input[type=password]:focus::-webkit-input-placeholder, -.mr-editor:focus::-webkit-input-placeholder, -textarea.focused::-webkit-input-placeholder, -.input-field.focused::-webkit-input-placeholder, -input[type=text].focused::-webkit-input-placeholder, -input[type=password].focused::-webkit-input-placeholder, -.mr-editor.focused::-webkit-input-placeholder { - color: #cdcdcd; -} -textarea:focus:-ms-input-placeholder, -.input-field:focus:-ms-input-placeholder, -input[type=text]:focus:-ms-input-placeholder, -input[type=password]:focus:-ms-input-placeholder, -.mr-editor:focus:-ms-input-placeholder, -textarea.focused:-ms-input-placeholder, -.input-field.focused:-ms-input-placeholder, -input[type=text].focused:-ms-input-placeholder, -input[type=password].focused:-ms-input-placeholder, -.mr-editor.focused:-ms-input-placeholder { - color: #cdcdcd; -} -textarea.error, -.input-field.error, -input[type=text].error, -input[type=password].error, -.mr-editor.error { - border-color: #f4999d; - -webkit-box-shadow: inset 0 1px 5px 0 #fbd6d8; - box-shadow: inset 0 1px 5px 0 #fbd6d8; -} -textarea.suggestion, -.input-field.suggestion, -input[type=text].suggestion, -input[type=password].suggestion, -.mr-editor.suggestion { - -webkit-box-shadow: none; - box-shadow: none; - border: 1px solid transparent; - color: #d4d4d4; - z-index: -20; -} -textarea.mr-input-trap, -.input-field.mr-input-trap, -input[type=text].mr-input-trap, -input[type=password].mr-input-trap, -.mr-editor.mr-input-trap { - -webkit-box-shadow: none; - box-shadow: none; } -.input { - margin: 12px 0; +/* Image */ +.ui.list .item > img { + display: block; + float: left; + margin-right: 1em; + vertical-align: middle; } -.input .mr-editor { - margin: 0; +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2em; } -.input-field, -input[type=text], -input[type=password] { - height: 36px; - line-height: 17px; +.ui.list .item > .icon + .content { + display: table-cell; vertical-align: top; } -.email-field, -input[name=email], -input[name=email-suggestion] { - position: relative; +/* Link */ +.ui.list a { + cursor: pointer; } -.email-field, -input[name=email] { - z-index: 100; +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + transition: color 0.2s ease; } -input[name=email-suggestion] { - margin-top: -48px; - display: block; - border-color: transparent; +/* Header */ +.ui.list .header { + font-weight: bold; } -form p { - margin: 0; - position: relative; +.ui.list .description { + color: rgba(0, 0, 0, 0.5); } -form span.error { - position: absolute; - top: 23px; - right: 10px; - color: #c82c3c; - font-size: 12px; - text-align: right; - height: 14px; - line-height: 14px; +/* Floated Content */ +.ui.list .item > .left.floated { + margin-right: 1em; + float: left; } -form .msg-placeholder { - height: 21px; +.ui.list .item > .right.floated { + margin-left: 1em; + float: right; } -form .msg-placeholder .fade { - -webkit-transition: all 300ms ease-in; - -moz-transition: all 300ms ease-in; - -o-transition: all 300ms ease-in; - -ms-transition: all 300ms ease-in; - transition: all 300ms ease-in; - opacity: 1; - -ms-filter: none; - filter: none; +/******************************* + Types +*******************************/ +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.list { + display: inline-block; + font-size: 0em; } -form .msg-placeholder .fade-out { - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); +.ui.horizontal.list > .item { + display: inline-block; + margin-left: 1em; + font-size: 1rem; +} +.ui.horizontal.list > .item:first-child { + margin-left: 0em; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} +/******************************* + States +*******************************/ +/*------------------- + Hover +--------------------*/ +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.inverted.list a .icon { + color: rgba(255, 255, 255, 0.6); +} +.ui.inverted.list .description { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.link.list .item { + color: rgba(255, 255, 255, 0.4); +} +/*------------------- + Link +--------------------*/ +.ui.link.list .item { + color: rgba(0, 0, 0, 0.3); +} +.ui.link.list a.item, +.ui.link.list .item a { + color: rgba(0, 0, 0, 0.5); +} +.ui.link.list a.item:hover, +.ui.link.list .item a:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.link.list a.item:active, +.ui.link.list .item a:active { + color: rgba(0, 0, 0, 0.8); +} +.ui.link.list a.active.item, +.ui.link.list .active.item a { + color: rgba(0, 0, 0, 0.8); +} +/* Inverted */ +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a { + color: rgba(255, 255, 255, 0.6); +} +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:hover { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:active { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a { + color: rgba(255, 255, 255, 0.8); +} +/*------------------- + Selection +--------------------*/ +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.selection.list .item:hover { + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} +.ui.animated.list .item { + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.animated.list:not(.horizontal) .item:hover { + padding-left: 1em; +} +.ui.animated.list:not(.horizontal) .item:hover .item:hover { + padding-left: 0.5em; +} +/* Inverted */ +.ui.inverted.selection.list .item { + color: rgba(255, 255, 255, 0.6); +} +.ui.inverted.selection.list .item:hover { + background-color: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.selection.list .item:active { + background-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); +} +.ui.inverted.selection.list .item.active { + background-color: rgba(255, 255, 255, 0.08); + color: #FFFFFF; +} +/*------------------- + Bulleted +--------------------*/ +ul.ui.list, +.ui.bulleted.list { + margin-left: 1.5em; +} +ul.ui.list li, +.ui.bulleted.list .item { + position: relative; } -form .msg-placeholder p.msg { - color: #535353; +ul.ui.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + left: -1.5em; + content: '•'; } -form .msg-placeholder p.error { - color: #c82c3c; +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: 1.5em; } -form .msg-placeholder p.success { - color: #43b20d; +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; } -form .msg-placeholder p.sending { - color: #cdcdcd; +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list .item { + margin-left: 1.5em; } -input ~ .error { - z-index: -1; +ul.ui.horizontal.bulleted.list li:before, +.ui.horizontal.bulleted.list .item:before { + left: -0.9em; } -input:-webkit-autofill ~ .error { - pointer-events: none; - z-index: inherit; +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list .item:first-child { + margin-left: 0em; } -.buttons { - margin-top: 20px; - margin-bottom: 20px; +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list .item:first-child::before { + display: none; } -.buttons.right { - text-align: right; +/*------------------- + Ordered +--------------------*/ +ol.ui.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; + list-style-type: none; } -.buttons .submit { - display: inline-block; - float: right; +ol.ui.list li, +.ui.ordered.list .item { + list-style-type: none; + position: relative; } -input[type=checkbox] { - -webkit-appearance: none; - width: 20px; - height: 20px; - line-height: 1em; - vertical-align: middle; - margin: 0px 1px 3px; - background-image: url("/core/ui-form-elements.svg"); +ol.ui.list li:before, +.ui.ordered.list .item:before { + position: absolute; + left: -2em; + counter-increment: ordered; + content: counters(ordered, "."); + text-align: right; + vertical-align: top; + opacity: 0.75; } -input[type=radio] { - background-position: -20px 0; +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 2.5em; +} +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { + left: -2.5em; +} +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .item:before { + position: static; + left: 0em; + margin: 0em 0.5em 0em 0em; +} +/*------------------- + Divided +--------------------*/ +.ui.divided.list > .item, +.ui.divided.list:not(.horizontal) > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.divided.list .item .menu .item { + border-width: 0px; +} +.ui.divided.list .item:first-child { + border-top-width: 0px; +} +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.divided.list:not(.horizontal) .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list:not(.horizontal) .list .item:first-child { + border-top-width: 1px; } -input[type=radio]:checked { - background-position: 0 0; +/* Divided bulleted */ +.ui.divided.bulleted.list { + margin-left: 0em; } -input[type=checkbox] { - background-position: -60px 0; +.ui.divided.bulleted.list .item { + padding-left: 1.5em; } -input[type=checkbox]:checked { - background-position: -40px 0; +.ui.divided.bulleted.list .item:before { + left: 0.5em; } -form a.cancel { - color: #cdcdcd; - text-transform: uppercase; - height: 36px; - line-height: 36px; - font-size: 12px; - display: inline-block; - padding: 0 10px; - margin: 0 10px; +/* Divided ordered */ +.ui.divided.ordered.list { + margin-left: 0em; } -form a.cancel:active { - margin-top: 1px; +.ui.divided.ordered.list > .item { + padding-left: 2em; + padding-right: 2em; } -form a.cancel:hover { - color: #a4a4a4; +.ui.divided.ordered.list > .item:before { + left: 0.5em; } -form .inputs-inline input { - width: auto; - margin-left: 10px; +.ui.divided.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; } -form .inputs-inline input:first-child { - margin-left: 0; +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; } -#overlay { - background: rgba(255,255,255,0.95); +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6em; } -#dialog .title { - width: 100%; - font-weight: bold; - text-shadow: 0 1px 0 #fff; +.ui.horizontal.divided.list > .item:first-child { + border-left: none; + padding-left: 0em; } -#dialog .content { - position: relative; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - text-align: left; - padding: 0; +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list { + border-color: rgba(255, 255, 255, 0.2); } -#dialog .content p { - padding: 15px; +.ui.divided.inverted.horizontal.list .item { + border-color: rgba(255, 255, 255, 0.2); } -#dialog.modal { - -webkit-box-shadow: none; - box-shadow: none; +/*------------------- + Celled +--------------------*/ +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; } -#dialog.file { - -webkit-border-radius: 0; - border-radius: 0; - min-width: 0; - max-width: none; +.ui.celled.list > .item:last-child { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } -#dialog.file .title { - position: absolute; - top: -30px; - left: 0; - background: transparent; - padding: 0; +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -0.5em; + margin-right: -0.5em; } -#dialog.file .content { - -webkit-border-radius: 0; - border-radius: 0; - line-height: 0; +.ui.celled.list .item .list .item { + border-width: 0px; } -#dialog.file img { - max-height: 500px; +.ui.celled.list .list .item:first-child { + border-top-width: 0px; } -#dialog .close { - width: 25px; - height: 25px; - line-height: 27px; - -webkit-border-radius: 25px; - border-radius: 25px; - top: auto; - position: absolute; - bottom: -60px; - left: 50%; - display: block; - color: #fff; - background: #cbcbcb; - font-weight: bold; - font-size: 18px; - text-align: center; - opacity: 0.9; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); - filter: alpha(opacity=90); - margin-left: -40px; +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; } -#dialog .close:hover { - color: #fff; - opacity: 0.75; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); - filter: alpha(opacity=75); +.ui.celled.bulleted.list > .item { + padding-left: 1.5em; } -#dialog .close:active { - opacity: 1; - -ms-filter: none; - filter: none; +.ui.celled.bulleted.list > .item:before { + left: 0.5em; } -#dialog .close em { - display: block; - color: #cbcbcb; - position: absolute; - top: 0; - right: -45px; - font-style: normal; - font-weight: normal; +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; } -#notifications { - z-index: 1000; +.ui.celled.ordered.list .item { + padding-left: 2em; + padding-right: 2em; } -#notifications li.notification { - padding-left: 50px; - border-top: 1px solid #fff; - -webkit-box-shadow: 0 0 0 1px #d2d2d2; - box-shadow: 0 0 0 1px #d2d2d2; - -webkit-border-radius: 5px; - border-radius: 5px; - font-size: 13px; - background: rgba(255,255,255,0.35) url("/core/icons/Location_Marker_32.png") 10px 50% no-repeat; -} -#notifications li.notification:hover { - -webkit-box-shadow: 0 0 0 1px #bdbdbd; - box-shadow: 0 0 0 1px #bdbdbd; - background: rgba(255,255,255,0.5) url("/core/icons/Location_Marker_32.png") 10px 50% no-repeat; -} -#notifications li.notification .content { - border-left: 1px solid #dbdbdb; - -webkit-box-shadow: -1px 0 0 #fff; - box-shadow: -1px 0 0 #fff; - text-align: left; - padding: 10px 20px; - color: #535353; +.ui.celled.ordered.list .item:before { + left: 0.5em; } -#notifications li.notification .title { - font-size: 13px; - color: #1f7dca; +.ui.celled.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; } -#notifications li.notification .close { - opacity: 0.5; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - filter: alpha(opacity=50); +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; } -#notifications li.notification .close:hover { - opacity: 0.75; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); - filter: alpha(opacity=75); +.ui.horizontal.celled.list .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6em; } -#notifications li.progress-notification { - padding-left: 0; - background-image: none; +.ui.horizontal.celled.list .item:last-child { + border-bottom: none; + border-right: 1px solid rgba(0, 0, 0, 0.1); } -#notifications li.progress-notification .content { - border-left: 0; - padding-top: 20px; - padding-bottom: 20px; - padding-left: 60px; +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: rgba(255, 255, 255, 0.2); } -#notifications li.progress-notification .progress-notification-canvas { - position: absolute; - top: 50%; - left: 10px; - margin-top: -20px; +.ui.celled.inverted.horizontal.list .item { + border-color: rgba(255, 255, 255, 0.2); } -#notifications li.progress-notification ul { - margin: 0; - padding: 0; +/*------------------- + Relaxed +--------------------*/ +.ui.relaxed.list:not(.horizontal) .item { + padding-top: 0.5em; + padding-bottom: 0.5em; } -.pie { - border-width: 1px; +.ui.relaxed.list .header { + margin-bottom: 0.25em; } -#bogo { - background-color: #a1cdc6; - margin-top: -94px; - height: 100%; +.ui.horizontal.relaxed.list .item { + padding-left: 1.25em; + padding-right: 1.25em; } -#bogo .top { - background-color: #a1cdc6; - margin-bottom: 240px; -} -#bogo .top h1 { - padding: 160px 0 80px 0; - font-size: 36px; - color: #7bb9b1; - text-shadow: 0 1px 0 rgba(255,255,255,0.5); -} -#bogo .top .logo { - background: url("/bogo/logo.png"); - -webkit-background-size: 272px 90px; - -moz-background-size: 272px 90px; - background-size: 272px 90px; - margin: 50px auto; - display: block; - height: 90px; - width: 272px; +.ui.very.relaxed.list:not(.horizontal) .item { + padding-top: 1em; + padding-bottom: 1em; } -#bogo .mid { - background-color: #956c8c; - padding: 60px 200px 200px 200px; - display: block; +.ui.very.relaxed.list .header { + margin-bottom: 0.5em; } -#bogo .mid ul>li { - margin: auto; - width: 60%; - color: #edf1dd; - font-size: 14px; - text-align: left; - font-weight: 400; - text-transform: uppercase; - letter-spacing: 2px; - list-style-type: none; - padding-top: 20px; +.ui.horizontal.very.relaxed.list .item { + padding-left: 2em; + padding-right: 2em; } -#bogo .mid ul>li p { - text-transform: none; - letter-spacing: 1px; - margin-bottom: 80px; - padding: 0 30px; - font-family: georgia; - font-style: oblique; -} -#bogo .mid ul>li .alts { - background: url("/bogo/alternates.png"); - -webkit-background-size: 228px 315px; - -moz-background-size: 228px 315px; - background-size: 228px 315px; - height: 315px; - width: 228px; - margin: 30px 0; -} -#bogo .mid ul>li .marker { - background: url("/bogo/marker.png"); - -webkit-background-size: 169px 81px; - -moz-background-size: 169px 81px; - background-size: 169px 81px; - height: 81px; - width: 169px; - margin: 30px 0; -} -#bogo .mid ul>li .colors { - clear: left; - margin-top: 30px; - display: block; +/*------------------- + Sizes +--------------------*/ +.ui.mini.list .item { + font-size: 0.7rem; } -#bogo .mid ul>li .colors .sample { - height: 40px; - width: 40px; - margin-right: 10px; - float: left; - background-color: #ff0; +.ui.tiny.list .item { + font-size: 0.8125rem; } -#bogo .mid ul>li #one { - background-color: #f2a973; +.ui.small.list .item { + font-size: 0.875rem; } -#bogo .mid ul>li #two { - background-color: #f0594c; +.ui.list .item { + font-size: 1em; } -#bogo .mid ul>li #three { - background-color: #910335; +.ui.large.list .item { + font-size: 1.125rem; } -#bogo .mid ul>li #four { - background-color: #109d9d; +.ui.big.list .item { + font-size: 1.25rem; } -#bogo .mid ul>li #five { - background-color: #2a233d; +.ui.huge.list .item { + font-size: 1.375rem; } -#bogo .mid ul>li #six { - background-color: #edf1dc; +.ui.massive.list .item { + font-size: 1.5rem; } -@media only screen and (-webkit-min-device-pixel-ratio: 2) { - .hentai .top .logo { - background-image: url("/bogo/logo@2x.png"); - } - .hentai .mid ul>li .alts { - background-image: url("/bogo/alternates@2x.png"); - } - .hentai .mid ul>li .marker { - background-image: url("/bogo/marker@2x.png"); - } + +/* + * # Statistic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: Aug 20, 2013 + */ +/******************************* + Statistic +*******************************/ +.ui.statistic { + text-align: center; } -#top { - height: 45px; - position: fixed; - width: 100%; - z-index: 1000; +/******************************* + Content +*******************************/ +.ui.statistic > .number { + font-size: 4em; + font-weight: bold; + color: rgba(0, 0, 0, 0.7); } -#content { - padding-top: 70px; - z-index: 5; - position: relative; - -webkit-transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; - -moz-transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; - -o-transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; - -ms-transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; - transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; -} -.transition { - -webkit-transform: translateY(50px); - -moz-transform: translateY(50px); - -o-transform: translateY(50px); - -ms-transform: translateY(50px); - transform: translateY(50px); - opacity: 0; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - filter: alpha(opacity=0); +.ui.statistic > .description { + opacity: 0.8; } diff --git a/benchmark/small.css b/benchmark/small.css index acce09f..08f8950 100644 --- a/benchmark/small.css +++ b/benchmark/small.css @@ -1,229 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ -#dialog { - position: fixed; - left: 50%; - top: 150px; - max-width: 600px; - min-width: 250px; - border: 1px solid #eee; - background: white; - z-index: 1000; +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ } -#dialog .content { - padding: 15px 20px; +/** + * Remove default margin. + */ + +body { + margin: 0; } -#dialog h1 { - margin: 0 0 5px 0; - font-size: 16px; - font-weight: normal; +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; } -#dialog p { - margin: 0; - padding: 0; - font-size: .9em; +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } -/* close */ +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ -#dialog .close { - position: absolute; - top: 3px; - right: 10px; - text-decoration: none; - color: #888; - font-size: 16px; - font-weight: bold; +audio:not([controls]) { display: none; + height: 0; } -#dialog .close em { +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { display: none; } -#dialog.closable .close { - display: block; +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; } -#dialog .close:hover { - color: black; +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; } -#dialog .close:active { - margin-top: 1px; +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; } -/* slide */ +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ -#dialog.slide { - -webkit-transition: opacity 300ms, top 300ms; - -moz-transition: opacity 300ms, top 300ms; +b, +strong { + font-weight: bold; } -#dialog.slide.hide { - opacity: 0; - top: -500px; +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; } -/* fade */ +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ -#dialog.fade { - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; +h1 { + font-size: 2em; + margin: 0.67em 0; } -#dialog.fade.hide { - opacity: 0; +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; } -/* scale */ +/** + * Address inconsistent and variable font size in all browsers. + */ -#dialog.scale { - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -moz-transform 300ms; - -webkit-transform: scale(1); - -moz-transform: scale(1); +small { + font-size: 80%; } -#dialog.scale.hide { - -webkit-transform: scale(0); - -moz-transform: scale(0); +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -#overlay { - position: fixed; - top: 0; - left: 0; - opacity: 1; - width: 100%; - height: 100%; - background: rgba(0,0,0,.75); - transition: opacity 300ms; - z-index: 500; + +sup { + top: -0.5em; } -#overlay.hide { - pointer-events: none; - opacity: 0; +sub { + bottom: -0.25em; } -#notifications { - position: fixed; - top: 10px; - right: 15px; +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; } -#notifications li { - margin-bottom: 5px; - list-style: none; +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; } -.notification { - position: relative; - max-width: 600px; - min-width: 250px; - border: 1px solid #eee; - background: white; - z-index: 100; +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } -.notification .content { - padding: 15px 20px; +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; } -.notification .title { - margin: 0 0 5px 0; - font-size: 16px; - font-weight: normal; +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } -.notification p { - margin: 0; +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; padding: 0; - font-size: .9em; } -.notification .close { - position: absolute; - top: 5px; - right: 10px; - text-decoration: none; - color: #888; - display: none; +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; } -.notification.closable .close { - display: block; +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } -.notification .close:hover { - color: black; +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } -.notification .close:active { - margin-top: 1px; +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } -/* close */ +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ -.notification .close { - position: absolute; - top: 3px; - right: 10px; - text-decoration: none; - color: #888; - font-size: 16px; - font-weight: bold; - display: none; +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } -/* slide */ +/** + * Define consistent border, margin, and padding. + */ -.notification.slide { - -webkit-transition: opacity 300ms, top 300ms; - -moz-transition: opacity 300ms, top 300ms; +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } -.notification.slide.hide { - opacity: 0; - top: -500px; +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ } -/* fade */ +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ -.notification.fade { - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; +textarea { + overflow: auto; } -.notification.fade.hide { - opacity: 0; +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; } -/* scale */ +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ -.notification.scale { - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -moz-transform 300ms; - -webkit-transform: scale(1); - -moz-transform: scale(1); +table { + border-collapse: collapse; + border-spacing: 0; } -.notification.scale.hide { - -webkit-transform: scale(0); - -moz-transform: scale(0); +td, +th { + padding: 0; } -.touch { - position: absolute; - z-index: 1000000; - display: block; - width: 50px; - height: 50px; - margin-top: -25px; - margin-left: -25px; - background: #a0a0a0; - border: 1px solid #d9d9d9; - opacity: .45; - -webkit-border-radius: 50px; -} \ No newline at end of file From a2639eafac59bd1dfce3ca5364b29a25540e1f6b Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Mon, 19 May 2014 10:18:53 +0200 Subject: [PATCH 11/23] Add `@custom-media` support --- index.js | 23 +++++++++++++++++++++++ test/cases/custom-media.css | 1 + test/cases/custom-media.json | 24 ++++++++++++++++++++++++ 3 files changed, 48 insertions(+) create mode 100644 test/cases/custom-media.css create mode 100644 test/cases/custom-media.json diff --git a/index.js b/index.js index 4a52f42..e60974a 100644 --- a/index.js +++ b/index.js @@ -382,6 +382,28 @@ module.exports = function(css, options){ }); } + + /** + * Parse custom-media. + */ + + function atcustommedia() { + var pos = position(); + var m = match(/^@([-\w]+)?custom-media (--[^\s]+) *([^{]+);/); + if (!m) return; + + var vendor = trim(m[1]); + var name = trim(m[2]); + var list = trim(m[3]); + + return pos({ + type: 'custom-media', + vendor: vendor, + name: name, + media: list + }); + } + /** * Parse paged media. */ @@ -509,6 +531,7 @@ module.exports = function(css, options){ return atkeyframes() || atmedia() + || atcustommedia() || atsupports() || atimport() || atcharset() diff --git a/test/cases/custom-media.css b/test/cases/custom-media.css new file mode 100644 index 0000000..1be3279 --- /dev/null +++ b/test/cases/custom-media.css @@ -0,0 +1 @@ +@custom-media --narrow-window (max-width: 30em); diff --git a/test/cases/custom-media.json b/test/cases/custom-media.json new file mode 100644 index 0000000..009810e --- /dev/null +++ b/test/cases/custom-media.json @@ -0,0 +1,24 @@ +{ + "type": "stylesheet", + "stylesheet": { + "rules": [ + { + "type": "custom-media", + "vendor": "", + "name": "--narrow-window", + "media": "(max-width: 30em)", + "position": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 1, + "column": 49 + }, + "source": "custom-media.css" + } + } + ] + } +} \ No newline at end of file From a1d900ab1d7e0ddcb1efdbda44b77ce85bed3f1f Mon Sep 17 00:00:00 2001 From: henriklundgren Date: Mon, 19 May 2014 11:46:43 -0700 Subject: [PATCH 12/23] Allow empty property values --- index.js | 3 +-- test/css-parse.js | 16 +++++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index 4a52f42..eb507f0 100644 --- a/index.js +++ b/index.js @@ -219,12 +219,11 @@ module.exports = function(css, options){ // val var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/); - if (!val) return error('property missing value'); var ret = pos({ type: 'declaration', property: prop.replace(commentre, ''), - value: trim(val[0]).replace(commentre, '') + value: val ? trim(val[0]).replace(commentre, '') : '' }); // ; diff --git a/test/css-parse.js b/test/css-parse.js index 81312b1..d166c53 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -20,7 +20,7 @@ describe('parse(str)', function(){ var ret = parse(css, { source: file + '.css' }); ret = JSON.stringify(ret, null, 2); ret.should.equal(json); - }) + }); }); it('should save the filename and source', function(){ @@ -29,7 +29,7 @@ describe('parse(str)', function(){ source: 'booty.css' }); - var position = ast.stylesheet.rules[0].position + var position = ast.stylesheet.rules[0].position; position.start.should.be.ok; position.end.should.be.ok; position.source.should.equal('booty.css'); @@ -44,7 +44,7 @@ describe('parse(str)', function(){ assert.throws(function(){ parse('b { color: red; }\n{ color: green; }\na {color: blue; }'); }); - }) + }); it('should throw when a broken comment is found', function () { assert.throws(function(){ @@ -59,5 +59,11 @@ describe('parse(str)', function(){ assert.doesNotThrow(function(){ parse('/* /* */'); }); - }) -}) + }); + + it('should allow empty property value', function() { + assert.doesNotThrow(function() { + parse('p { color:; }'); + }); + }); +}); From 251b5967ab722583b0038770e0a3ef584fab76ce Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 19 May 2014 11:49:35 -0700 Subject: [PATCH 13/23] Fix package.json version Close #86 --- History.md | 3 ++- package.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/History.md b/History.md index 23a654e..af6c4f2 100644 --- a/History.md +++ b/History.md @@ -1,6 +1,7 @@ -2.0.0 / 2014-01-24 +HEAD ================== + * allow empty property values * changed default `options.position` value to `true` * remove comments from properties and values * asserts when selectors are missing diff --git a/package.json b/package.json index 11f535d..f66cb5b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-parse", - "version": "2.0.0", + "version": "1.7.0", "description": "CSS parser", "keywords": [ "css", From 677dd07cbf203c0ea2ac8a00305e833a40657a0e Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Mon, 19 May 2014 21:46:53 +0200 Subject: [PATCH 14/23] Adjust `@custom-media` code according to @necolas recommandations --- index.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index e60974a..ddea473 100644 --- a/index.js +++ b/index.js @@ -384,23 +384,19 @@ module.exports = function(css, options){ /** - * Parse custom-media. - */ + * Parse custom-media. + */ function atcustommedia() { var pos = position(); var m = match(/^@([-\w]+)?custom-media (--[^\s]+) *([^{]+);/); if (!m) return; - var vendor = trim(m[1]); - var name = trim(m[2]); - var list = trim(m[3]); - return pos({ type: 'custom-media', - vendor: vendor, - name: name, - media: list + vendor: trim(m[1]), + name: trim(m[2]), + media: trim(m[3]) }); } From 02b448dd91bf350c9c814918c62bb1db15c4e339 Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Tue, 20 May 2014 05:47:34 +0200 Subject: [PATCH 15/23] Drop vendor prefix for `@custom-media` --- index.js | 7 +++---- test/cases/custom-media.json | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index ddea473..0400f99 100644 --- a/index.js +++ b/index.js @@ -389,14 +389,13 @@ module.exports = function(css, options){ function atcustommedia() { var pos = position(); - var m = match(/^@([-\w]+)?custom-media (--[^\s]+) *([^{]+);/); + var m = match(/^@custom-media (--[^\s]+) *([^{]+);/); if (!m) return; return pos({ type: 'custom-media', - vendor: trim(m[1]), - name: trim(m[2]), - media: trim(m[3]) + name: trim(m[1]), + media: trim(m[2]) }); } diff --git a/test/cases/custom-media.json b/test/cases/custom-media.json index 009810e..a57b4ff 100644 --- a/test/cases/custom-media.json +++ b/test/cases/custom-media.json @@ -4,7 +4,6 @@ "rules": [ { "type": "custom-media", - "vendor": "", "name": "--narrow-window", "media": "(max-width: 30em)", "position": { From 72f4293401ade3011c46b6a23007fb451e1cad04 Mon Sep 17 00:00:00 2001 From: Mike Date: Thu, 22 May 2014 12:20:27 +1000 Subject: [PATCH 16/23] Add a 'silent' option Do not throw on errors. --- Readme.md | 7 ++++--- index.js | 22 +++++++++++++++++----- test/css-parse.js | 7 +++++++ 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/Readme.md b/Readme.md index 07c1068..2885cfc 100644 --- a/Readme.md +++ b/Readme.md @@ -30,6 +30,7 @@ console.log(JSON.stringify(output_obj, null, 2)); `options`: +- `silent` - silently fail on parse errrors. - `source` - recommended for debugging. - `position` - `true` by default. @@ -153,9 +154,9 @@ also pass in `source: 'path/to/original.css'`, that will be set on Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air. ## Related - - [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") - [css-value](https://github.com/visionmedia/css-value "CSS-Value") + + [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") + [css-value](https://github.com/visionmedia/css-value "CSS-Value") ## License diff --git a/index.js b/index.js index 0896452..faddb5a 100644 --- a/index.js +++ b/index.js @@ -69,6 +69,10 @@ module.exports = function(css, options){ */ function error(msg) { + if (options.silent === true) { + return false; + } + var err = new Error(msg + ' near line ' + lineno + ':' + column); err.filename = options.source; err.line = lineno; @@ -116,8 +120,10 @@ module.exports = function(css, options){ whitespace(); comments(rules); while (css.length && css.charAt(0) != '}' && (node = atrule() || rule())) { - rules.push(node); - comments(rules); + if (node !== false) { + rules.push(node); + comments(rules); + } } return rules; } @@ -150,7 +156,11 @@ module.exports = function(css, options){ function comments(rules) { var c; rules = rules || []; - while (c = comment()) rules.push(c); + while (c = comment()) { + if (c !== false) { + rules.push(c); + } + } return rules; } @@ -245,8 +255,10 @@ module.exports = function(css, options){ // declarations var decl; while (decl = declaration()) { - decls.push(decl); - comments(decls); + if (decl !== false) { + decls.push(decl); + comments(decls); + } } if (!close()) return error("missing '}'"); diff --git a/test/css-parse.js b/test/css-parse.js index d166c53..e77c942 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -66,4 +66,11 @@ describe('parse(str)', function(){ parse('p { color:; }'); }); }); + + it('should not throw with silent option', function () { + assert.doesNotThrow(function(){ + parse('thing { color: red; } /* b { color: blue; }',{ silent: true }); + }); + }); + }); From 6de72c0e8eda4eb117970bf5a22d1b0a124998ad Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 21 May 2014 16:38:31 -0700 Subject: [PATCH 17/23] Fix parsing of selectors with commas in functions For example: .foo:matches(.bar, .baz) Thanks to @phosphoer --- History.md | 1 + index.js | 2 +- test/cases/comma-selector-function.css | 12 ++++ test/cases/comma-selector-function.json | 83 +++++++++++++++++++++++++ test/css-parse.js | 3 + 5 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 test/cases/comma-selector-function.css create mode 100644 test/cases/comma-selector-function.json diff --git a/History.md b/History.md index af6c4f2..4dcb78c 100644 --- a/History.md +++ b/History.md @@ -1,6 +1,7 @@ HEAD ================== + * allow commas inside selector functions * allow empty property values * changed default `options.position` value to `true` * remove comments from properties and values diff --git a/index.js b/index.js index faddb5a..845954c 100644 --- a/index.js +++ b/index.js @@ -206,7 +206,7 @@ module.exports = function(css, options){ .replace(/(?:"[^"]*"|'[^']*')/g, function(m) { return m.replace(/,/g, '\u200C'); }) - .split(/\s*,\s*/) + .split(/\s*(?![^(]*\)),\s*/) .map(function(s) { return s.replace(/\u200C/g, ','); }); diff --git a/test/cases/comma-selector-function.css b/test/cases/comma-selector-function.css new file mode 100644 index 0000000..196f8dc --- /dev/null +++ b/test/cases/comma-selector-function.css @@ -0,0 +1,12 @@ +.foo:matches(.bar,.baz), +.foo:matches(.bar, .baz), +.foo:matches(.bar , .baz), +.foo:matches(.bar ,.baz) { + prop: value; +} + +.foo:matches(.bar,.baz,.foobar), +.foo:matches(.bar, .baz,), +.foo:matches(,.bar , .baz) { + anotherprop: anothervalue; +} diff --git a/test/cases/comma-selector-function.json b/test/cases/comma-selector-function.json new file mode 100644 index 0000000..1c347a0 --- /dev/null +++ b/test/cases/comma-selector-function.json @@ -0,0 +1,83 @@ +{ + "type": "stylesheet", + "stylesheet": { + "rules": [ + { + "type": "rule", + "selectors": [ + ".foo:matches(.bar,.baz)", + ".foo:matches(.bar, .baz)", + ".foo:matches(.bar , .baz)", + ".foo:matches(.bar ,.baz)" + ], + "declarations": [ + { + "type": "declaration", + "property": "prop", + "value": "value", + "position": { + "start": { + "line": 5, + "column": 3 + }, + "end": { + "line": 5, + "column": 14 + }, + "source": "comma-selector-function.css" + } + } + ], + "position": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 6, + "column": 2 + }, + "source": "comma-selector-function.css" + } + }, + { + "type": "rule", + "selectors": [ + ".foo:matches(.bar,.baz,.foobar)", + ".foo:matches(.bar, .baz,)", + ".foo:matches(,.bar , .baz)" + ], + "declarations": [ + { + "type": "declaration", + "property": "anotherprop", + "value": "anothervalue", + "position": { + "start": { + "line": 11, + "column": 3 + }, + "end": { + "line": 11, + "column": 28 + }, + "source": "comma-selector-function.css" + } + } + ], + "position": { + "start": { + "line": 8, + "column": 1 + }, + "end": { + "line": 12, + "column": 2 + }, + "source": "comma-selector-function.css" + } + } + ] + } +} + diff --git a/test/css-parse.js b/test/css-parse.js index e77c942..f1bed64 100644 --- a/test/css-parse.js +++ b/test/css-parse.js @@ -18,6 +18,9 @@ describe('parse(str)', function(){ var css = read(path.join('test', 'cases', file + '.css'), 'utf8'); var json = read(path.join('test', 'cases', file + '.json'), 'utf8'); var ret = parse(css, { source: file + '.css' }); + // normalize line endings from input file + json = JSON.parse(json); + json = JSON.stringify(json, null, 2); ret = JSON.stringify(ret, null, 2); ret.should.equal(json); }); From 7cef3658d0bba872cde05a85339034b187cb3397 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 23 May 2014 15:03:50 -0700 Subject: [PATCH 18/23] Fix `@custom-media` parsing Previous test didn't check that the rule value was correctly terminated. --- History.md | 1 + index.js | 6 +++--- test/cases/custom-media.css | 1 + test/cases/custom-media.json | 18 +++++++++++++++++- 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/History.md b/History.md index 4dcb78c..d4fc374 100644 --- a/History.md +++ b/History.md @@ -1,6 +1,7 @@ HEAD ================== + * add support for `@custom-media` * allow commas inside selector functions * allow empty property values * changed default `options.position` value to `true` diff --git a/index.js b/index.js index 845954c..ea23b5d 100644 --- a/index.js +++ b/index.js @@ -72,7 +72,7 @@ module.exports = function(css, options){ if (options.silent === true) { return false; } - + var err = new Error(msg + ' near line ' + lineno + ':' + column); err.filename = options.source; err.line = lineno; @@ -160,7 +160,7 @@ module.exports = function(css, options){ if (c !== false) { rules.push(c); } - } + } return rules; } @@ -400,7 +400,7 @@ module.exports = function(css, options){ function atcustommedia() { var pos = position(); - var m = match(/^@custom-media (--[^\s]+) *([^{]+);/); + var m = match(/^@custom-media (--[^\s]+) *([^{;]+);/); if (!m) return; return pos({ diff --git a/test/cases/custom-media.css b/test/cases/custom-media.css index 1be3279..3fee784 100644 --- a/test/cases/custom-media.css +++ b/test/cases/custom-media.css @@ -1 +1,2 @@ @custom-media --narrow-window (max-width: 30em); +@custom-media --wide-window screen and (min-width: 40em); diff --git a/test/cases/custom-media.json b/test/cases/custom-media.json index a57b4ff..d4b1d7e 100644 --- a/test/cases/custom-media.json +++ b/test/cases/custom-media.json @@ -17,7 +17,23 @@ }, "source": "custom-media.css" } + }, + { + "type": "custom-media", + "name": "--wide-window", + "media": "screen and (min-width: 40em)", + "position": { + "start": { + "line": 2, + "column": 1 + }, + "end": { + "line": 2, + "column": 58 + }, + "source": "custom-media.css" + } } ] } -} \ No newline at end of file +} From 8c399a4780c973560df12c2f0b29bf7d9f29b4dd Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 28 May 2014 15:23:14 -0700 Subject: [PATCH 19/23] Remove Component(1) support Fix #94 --- component.json | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 component.json diff --git a/component.json b/component.json deleted file mode 100644 index c8728f3..0000000 --- a/component.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "css-parse", - "repo": "reworkcss/css-parse", - "version": "1.7.0", - "description": "CSS parser", - "keywords": ["css", "parser", "stylesheet"], - "scripts": ["index.js"] -} From 582578dc643ac7e4e4eee5b72a3c20d18f4d269d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 28 May 2014 15:22:23 -0700 Subject: [PATCH 20/23] Remove examples Fix #95 --- examples/dialog.css | 92 --------------------------------------------- examples/dialog.js | 11 ------ 2 files changed, 103 deletions(-) delete mode 100644 examples/dialog.css delete mode 100644 examples/dialog.js diff --git a/examples/dialog.css b/examples/dialog.css deleted file mode 100644 index df74183..0000000 --- a/examples/dialog.css +++ /dev/null @@ -1,92 +0,0 @@ -#dialog { - position: fixed; - left: 50%; - top: 150px; - max-width: 600px; - min-width: 250px; - border: 1px solid #eee; - background: white; - z-index: 1000; -} - -#dialog .content { - padding: 15px 20px; -} - -#dialog h1 { - margin: 0 0 5px 0; - font-size: 16px; - font-weight: normal; -} - -#dialog p { - margin: 0; - padding: 0; - font-size: .9em; -} - -#dialog.modal { - box-shadow: 0 1px 8px 0 black; -} - -/* close */ - -#dialog .close { - position: absolute; - top: 3px; - right: 10px; - text-decoration: none; - color: #888; - font-size: 16px; - font-weight: bold; - display: none; -} - -#dialog.closable .close { - display: block; -} - -#dialog .close:hover { - color: black; -} - -#dialog .close:active { - margin-top: 1px; -} - -/* slide */ - -#dialog.slide { - -webkit-transition: opacity 300ms, top 300ms; - -moz-transition: opacity 300ms, top 300ms; -} - -#dialog.slide.hide { - opacity: 0; - top: -500px; -} - -/* fade */ - -#dialog.fade { - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; -} - -#dialog.fade.hide { - opacity: 0; -} - -/* scale */ - -#dialog.scale { - -webkit-transition: -webkit-transform 300ms; - -moz-transition: -moz-transform 300ms; - -webkit-transform: scale(1); - -moz-transform: scale(1); -} - -#dialog.scale.hide { - -webkit-transform: scale(0); - -moz-transform: scale(0); -} \ No newline at end of file diff --git a/examples/dialog.js b/examples/dialog.js deleted file mode 100644 index f115a16..0000000 --- a/examples/dialog.js +++ /dev/null @@ -1,11 +0,0 @@ - -/** - * Module dependencies. - */ - -var parse = require('..') - , fs = require('fs') - , read = fs.readFileSync - , css = read('examples/dialog.css', 'utf8'); - -console.log(JSON.stringify(parse(css), null, 2)); \ No newline at end of file From 5fa3fc4a24eb9855523741efe8fd46e68eaefcb4 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 4 Jun 2014 14:36:01 -0700 Subject: [PATCH 21/23] Depend on 'css' and remove migrated code All the parser code and tests are now part of the 'css' package. From now on, 'css-parse' will merely export the `parse` method of 'css'. Recommended that you depend on 'css' directly. --- .gitignore | 2 - .npmignore | 6 - .travis.yml | 4 - History.md | 8 +- Makefile | 11 - Readme.md | 154 +- benchmark/LICENSES | 30 - benchmark/index.js | 31 - benchmark/large.css | 15135 ---------------------- benchmark/small.css | 425 - index.js | 579 +- package.json | 25 +- test/cases/charset.css | 2 - test/cases/charset.json | 67 - test/cases/colon-space.css | 4 - test/cases/colon-space.json | 58 - test/cases/comma-attribute.css | 39 - test/cases/comma-attribute.json | 202 - test/cases/comma-selector-function.css | 12 - test/cases/comma-selector-function.json | 83 - test/cases/comment.css | 10 - test/cases/comment.in.css | 5 - test/cases/comment.in.json | 90 - test/cases/comment.json | 148 - test/cases/comment.url.css | 7 - test/cases/comment.url.json | 117 - test/cases/custom-media.css | 2 - test/cases/custom-media.json | 39 - test/cases/document.css | 7 - test/cases/document.json | 90 - test/cases/empty.css | 0 test/cases/empty.json | 6 - test/cases/escapes.css | 54 - test/cases/escapes.json | 1556 --- test/cases/font-face.css | 8 - test/cases/font-face.json | 90 - test/cases/host.css | 5 - test/cases/host.json | 58 - test/cases/import.css | 6 - test/cases/import.json | 82 - test/cases/import.messed.css | 7 - test/cases/import.messed.json | 82 - test/cases/keyframes.advanced.css | 13 - test/cases/keyframes.advanced.json | 129 - test/cases/keyframes.complex.css | 8 - test/cases/keyframes.complex.json | 198 - test/cases/keyframes.css | 13 - test/cases/keyframes.json | 154 - test/cases/keyframes.messed.css | 6 - test/cases/keyframes.messed.json | 94 - test/cases/keyframes.vendor.css | 4 - test/cases/keyframes.vendor.json | 95 - test/cases/media.css | 26 - test/cases/media.json | 305 - test/cases/media.messed.css | 27 - test/cases/media.messed.json | 245 - test/cases/messed-up.css | 15 - test/cases/messed-up.json | 144 - test/cases/namespace.css | 2 - test/cases/namespace.json | 37 - test/cases/no-semi.css | 5 - test/cases/no-semi.json | 58 - test/cases/paged-media.css | 9 - test/cases/paged-media.json | 106 - test/cases/props.css | 6 - test/cases/props.json | 74 - test/cases/quoted.css | 3 - test/cases/quoted.json | 42 - test/cases/rule.css | 3 - test/cases/rule.json | 42 - test/cases/rules.css | 6 - test/cases/rules.json | 77 - test/cases/supports.css | 8 - test/cases/supports.json | 105 - test/cases/wtf.css | 5 - test/cases/wtf.json | 74 - test/css-parse.js | 79 - 77 files changed, 15 insertions(+), 21548 deletions(-) delete mode 100644 .npmignore delete mode 100644 .travis.yml delete mode 100644 Makefile delete mode 100644 benchmark/LICENSES delete mode 100644 benchmark/index.js delete mode 100644 benchmark/large.css delete mode 100644 benchmark/small.css delete mode 100644 test/cases/charset.css delete mode 100644 test/cases/charset.json delete mode 100644 test/cases/colon-space.css delete mode 100644 test/cases/colon-space.json delete mode 100644 test/cases/comma-attribute.css delete mode 100644 test/cases/comma-attribute.json delete mode 100644 test/cases/comma-selector-function.css delete mode 100644 test/cases/comma-selector-function.json delete mode 100644 test/cases/comment.css delete mode 100644 test/cases/comment.in.css delete mode 100644 test/cases/comment.in.json delete mode 100644 test/cases/comment.json delete mode 100644 test/cases/comment.url.css delete mode 100644 test/cases/comment.url.json delete mode 100644 test/cases/custom-media.css delete mode 100644 test/cases/custom-media.json delete mode 100644 test/cases/document.css delete mode 100644 test/cases/document.json delete mode 100644 test/cases/empty.css delete mode 100644 test/cases/empty.json delete mode 100644 test/cases/escapes.css delete mode 100644 test/cases/escapes.json delete mode 100644 test/cases/font-face.css delete mode 100644 test/cases/font-face.json delete mode 100644 test/cases/host.css delete mode 100644 test/cases/host.json delete mode 100644 test/cases/import.css delete mode 100644 test/cases/import.json delete mode 100644 test/cases/import.messed.css delete mode 100644 test/cases/import.messed.json delete mode 100644 test/cases/keyframes.advanced.css delete mode 100644 test/cases/keyframes.advanced.json delete mode 100644 test/cases/keyframes.complex.css delete mode 100644 test/cases/keyframes.complex.json delete mode 100644 test/cases/keyframes.css delete mode 100644 test/cases/keyframes.json delete mode 100644 test/cases/keyframes.messed.css delete mode 100644 test/cases/keyframes.messed.json delete mode 100644 test/cases/keyframes.vendor.css delete mode 100644 test/cases/keyframes.vendor.json delete mode 100644 test/cases/media.css delete mode 100644 test/cases/media.json delete mode 100644 test/cases/media.messed.css delete mode 100644 test/cases/media.messed.json delete mode 100644 test/cases/messed-up.css delete mode 100644 test/cases/messed-up.json delete mode 100644 test/cases/namespace.css delete mode 100644 test/cases/namespace.json delete mode 100644 test/cases/no-semi.css delete mode 100644 test/cases/no-semi.json delete mode 100644 test/cases/paged-media.css delete mode 100644 test/cases/paged-media.json delete mode 100644 test/cases/props.css delete mode 100644 test/cases/props.json delete mode 100644 test/cases/quoted.css delete mode 100644 test/cases/quoted.json delete mode 100644 test/cases/rule.css delete mode 100644 test/cases/rule.json delete mode 100644 test/cases/rules.css delete mode 100644 test/cases/rules.json delete mode 100644 test/cases/supports.css delete mode 100644 test/cases/supports.json delete mode 100644 test/cases/wtf.css delete mode 100644 test/cases/wtf.json delete mode 100644 test/css-parse.js diff --git a/.gitignore b/.gitignore index abad1f9..3c3629e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1 @@ node_modules -test.js -test.css diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 4a3c398..0000000 --- a/.npmignore +++ /dev/null @@ -1,6 +0,0 @@ -support -test -examples -*.sock -test.css -test.js diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 09d3ef3..0000000 --- a/.travis.yml +++ /dev/null @@ -1,4 +0,0 @@ -language: node_js -node_js: - - 0.8 - - 0.10 diff --git a/History.md b/History.md index d4fc374..bfd6377 100644 --- a/History.md +++ b/History.md @@ -1,13 +1,7 @@ HEAD ================== - * add support for `@custom-media` - * allow commas inside selector functions - * allow empty property values - * changed default `options.position` value to `true` - * remove comments from properties and values - * asserts when selectors are missing - * added `node.position.content` property + * depend on the 'css' package, which now contains the parser 1.7.0 / 2013-12-21 ================== diff --git a/Makefile b/Makefile deleted file mode 100644 index 0600a50..0000000 --- a/Makefile +++ /dev/null @@ -1,11 +0,0 @@ - -test: - @./node_modules/.bin/mocha \ - --require should \ - --reporter spec \ - --bail - -bench: - @./node_modules/.bin/matcha - -.PHONY: test bench diff --git a/Readme.md b/Readme.md index 2885cfc..99a4743 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ -# css-parse [![Build Status](https://travis-ci.org/reworkcss/css-parse.png)](https://travis-ci.org/reworkcss/css-parse) +# css-parse - JavaScript CSS parser for nodejs and the browser. + JavaScript CSS parser for Node.js (exports the `parse` method of [css](https://github.com/reworkcss/css)) ## Installation @@ -8,155 +8,7 @@ ## Usage -````javascript -var parse = require('css-parse'); - -// CSS input string -var css = "body { \n background-color: #fff;\n }"; - -var output_obj = parse(css); - -// Source parameter to specify source file name for source maps -var output_obj_pos = parse(css, { source: 'file.css' }); - -// Print parsed object as CSS string -console.log(JSON.stringify(output_obj, null, 2)); - -```` - -## API - -### var ast = parse(css, [options]) - -`options`: - -- `silent` - silently fail on parse errrors. -- `source` - recommended for debugging. -- `position` - `true` by default. - -### Errors - -Errors will have `err.position` where `position` is: - -- `start` - start line and column numbers -- `end` - end line and column numbers -- `source` - `options.source` if passed to options - -If you create any errors in plugins such as in [rework](https://github.com/reworkcss/rework), you __must__ set the `position` as well for consistency. - -## Example - -css: - -```css -body { - background: #eee; - color: #888; -} -``` - -parse tree: - -```json -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "#eee" - }, - { - "type": "declaration", - "property": "color", - "value": "#888" - } - ] - } - ] - } -} -``` - -parse tree with `.position` enabled: - -```json -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "#eee", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 19 - } - } - }, - { - "type": "declaration", - "property": "color", - "value": "#888", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 4, - "column": 14 - } - } - } - ], - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - } - } - } - ] - } -} -``` - -`node.position.content` is set on each node to the full source string. If you -also pass in `source: 'path/to/original.css'`, that will be set on -`node.position.source`. - -## Performance - - Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air. - -## Related - - [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") - [css-value](https://github.com/visionmedia/css-value "CSS-Value") + Please see the [css](https://github.com/reworkcss/css) module documentation. ## License diff --git a/benchmark/LICENSES b/benchmark/LICENSES deleted file mode 100644 index a81e97d..0000000 --- a/benchmark/LICENSES +++ /dev/null @@ -1,30 +0,0 @@ -File: large.css -Copyright: 2013 Contributors -License: MIT -Origin: https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/0.16.1/build/packaged/css/semantic.css - -File: small.css -Copyright: Nicolas Gallagher and Jonathan Neal -License: MIT -Origin: https://raw.githubusercontent.com/necolas/normalize.css/3.0.1/normalize.css - - -License: MIT - Permission is hereby granted, free of charge, to any person obtaining a - copy of this software and associated documentation files (the - 'Software'), to deal in the Software without restriction, including - without limitation the rights to use, copy, modify, merge, publish, - distribute, sublicense, and/or sell copies of the Software, and to - permit persons to whom the Software is furnished to do so, subject to - the following conditions: - - The above copyright notice and this permission notice shall be included - in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS - OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. - IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY - CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, - TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE - SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/benchmark/index.js b/benchmark/index.js deleted file mode 100644 index 2972c10..0000000 --- a/benchmark/index.js +++ /dev/null @@ -1,31 +0,0 @@ - -var bytes = require('bytes'); -var parse = require('..'); -var fs = require('fs'); - -var small = fs.readFileSync('benchmark/small.css', 'utf8'); -var large = fs.readFileSync('benchmark/large.css', 'utf8'); -var huge = Array(8).join(large); - -function lines(str) { - return str.split(/\n/g).length; -} - -console.log(); -console.log(' small : %s : %s lines', bytes(Buffer.byteLength(small)), lines(small)); -console.log(' large : %s : %s lines', bytes(Buffer.byteLength(large)), lines(large)); -console.log(' huge : %s : %s lines', bytes(Buffer.byteLength(huge)), lines(huge)); - -suite('css parse', function(){ - bench('small', function(){ - parse(small) - }) - - bench('large', function(){ - parse(large) - }) - - bench('huge', function(){ - parse(huge) - }) -}) \ No newline at end of file diff --git a/benchmark/large.css b/benchmark/large.css deleted file mode 100644 index d84725f..0000000 --- a/benchmark/large.css +++ /dev/null @@ -1,15135 +0,0 @@ -/* - * # Semantic - Breadcrumb - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Breadcrumb -*******************************/ -.ui.breadcrumb { - margin: 1em 0em; - display: inline-block; - vertical-align: middle; -} -.ui.breadcrumb:first-child { - margin-top: 0em; -} -.ui.breadcrumb:last-child { - margin-bottom: 0em; -} -/******************************* - Content -*******************************/ -.ui.breadcrumb .divider { - display: inline-block; - opacity: 0.5; - margin: 0em 0.15em 0em; - font-size: 1em; - color: rgba(0, 0, 0, 0.3); -} -.ui.breadcrumb a.section { - cursor: pointer; -} -.ui.breadcrumb .section { - display: inline-block; - margin: 0em; - padding: 0em; -} -/* Loose Coupling */ -.ui.breadcrumb.segment { - display: inline-block; - padding: 0.5em 1em; -} -/******************************* - States -*******************************/ -.ui.breadcrumb .active.section { - font-weight: bold; -} -/******************************* - Variations -*******************************/ -.ui.small.breadcrumb { - font-size: 0.75em; -} -.ui.large.breadcrumb { - font-size: 1.1em; -} -.ui.huge.breadcrumb { - font-size: 1.3em; -} - -/* - * # Semantic - Form - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Standard -*******************************/ -/*-------------------- - Form ----------------------*/ -.ui.form { - position: relative; - max-width: 100%; -} -.ui.form :first-child { - margin-top: 0em; -} -.ui.form :last-child { - margin-bottom: 0em; -} -/*-------------------- - Content ----------------------*/ -.ui.form > p { - margin: 1em 0; -} -/*-------------------- - Field ----------------------*/ -.ui.form .field { - clear: both; - margin: 0em 0em 1em; -} -/*-------------------- - Labels ----------------------*/ -.ui.form .field > label { - margin: 0em 0em 0.3em; - display: block; - color: #555555; - font-size: 0.875em; -} -/*-------------------- - Standard Inputs ----------------------*/ -.ui.form textarea, -.ui.form input[type="text"], -.ui.form input[type="email"], -.ui.form input[type="date"], -.ui.form input[type="password"], -.ui.form input[type="number"], -.ui.form input[type="url"], -.ui.form input[type="tel"], -.ui.form .ui.input { - width: 100%; -} -.ui.form textarea, -.ui.form input[type="text"], -.ui.form input[type="email"], -.ui.form input[type="date"], -.ui.form input[type="password"], -.ui.form input[type="number"], -.ui.form input[type="url"], -.ui.form input[type="tel"] { - margin: 0em; - padding: 0.65em 1em; - font-size: 1em; - background-color: #FFFFFF; - border: 1px solid rgba(0, 0, 0, 0.15); - outline: none; - color: rgba(0, 0, 0, 0.7); - border-radius: 0.3125em; - -webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease; - -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; - transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; - -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; - box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.textarea, -.ui.form textarea { - line-height: 1.33; - min-height: 8em; - height: 12em; - max-height: 24em; - resize: vertical; -} -.ui.form textarea, -.ui.form input[type="checkbox"] { - vertical-align: top; -} -/*-------------------- - Dividers ----------------------*/ -.ui.form .divider { - clear: both; - margin: 1em 0em; -} -/*-------------------- - Types of Messages ----------------------*/ -.ui.form .info.message, -.ui.form .warning.message, -.ui.form .error.message { - display: none; -} -/* Assumptions */ -.ui.form .message:first-child { - margin-top: 0px; -} -/*-------------------- - Validation Prompt ----------------------*/ -.ui.form .field .prompt.label { - white-space: nowrap; -} -.ui.form .inline.field .prompt { - margin-top: 0em; - margin-left: 1em; -} -.ui.form .inline.field .prompt:before { - margin-top: -0.3em; - bottom: auto; - right: auto; - top: 50%; - left: 0em; -} -/******************************* - States -*******************************/ -/*-------------------- - Focus ----------------------*/ -.ui.form input[type="text"]:focus, -.ui.form input[type="email"]:focus, -.ui.form input[type="date"]:focus, -.ui.form input[type="password"]:focus, -.ui.form input[type="number"]:focus, -.ui.form input[type="url"]:focus, -.ui.form input[type="tel"]:focus, -.ui.form textarea:focus { - color: rgba(0, 0, 0, 0.85); - border-color: rgba(0, 0, 0, 0.2); - border-bottom-left-radius: 0; - border-top-left-radius: 0; - -webkit-appearance: none; - -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; - box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; -} -/*-------------------- - Error ----------------------*/ -/* On Form */ -.ui.form.warning .warning.message { - display: block; -} -/*-------------------- - Warning ----------------------*/ -/* On Form */ -.ui.form.error .error.message { - display: block; -} -/* On Field(s) */ -.ui.form .fields.error .field label, -.ui.form .field.error label, -.ui.form .fields.error .field .input, -.ui.form .field.error .input { - color: #D95C5C; -} -.ui.form .fields.error .field .corner.label, -.ui.form .field.error .corner.label { - border-color: #D95C5C; - color: #FFFFFF; -} -.ui.form .fields.error .field textarea, -.ui.form .fields.error .field input[type="text"], -.ui.form .fields.error .field input[type="email"], -.ui.form .fields.error .field input[type="date"], -.ui.form .fields.error .field input[type="password"], -.ui.form .fields.error .field input[type="number"], -.ui.form .fields.error .field input[type="url"], -.ui.form .fields.error .field input[type="tel"], -.ui.form .field.error textarea, -.ui.form .field.error input[type="text"], -.ui.form .field.error input[type="email"], -.ui.form .field.error input[type="date"], -.ui.form .field.error input[type="password"], -.ui.form .field.error input[type="number"], -.ui.form .field.error input[type="url"], -.ui.form .field.error input[type="tel"] { - background-color: #FFFAFA; - border-color: #E7BEBE; - border-left: none; - color: #D95C5C; - padding-left: 1.2em; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; - box-shadow: 0.3em 0em 0em 0em #D95C5C inset; -} -.ui.form .field.error textarea:focus, -.ui.form .field.error input[type="text"]:focus, -.ui.form .field.error input[type="email"]:focus, -.ui.form .field.error input[type="date"]:focus, -.ui.form .field.error input[type="password"]:focus, -.ui.form .field.error input[type="number"]:focus, -.ui.form .field.error input[type="url"]:focus, -.ui.form .field.error input[type="tel"]:focus { - border-color: #ff5050; - color: #ff5050; - -webkit-appearance: none; - -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; - box-shadow: 0.3em 0em 0em 0em #FF5050 inset; -} -/*---------------------------- - Dropdown Selection Warning ------------------------------*/ -.ui.form .fields.error .field .ui.dropdown, -.ui.form .fields.error .field .ui.dropdown .item, -.ui.form .field.error .ui.dropdown, -.ui.form .field.error .ui.dropdown .item { - background-color: #FFFAFA; - color: #D95C5C; -} -.ui.form .fields.error .field .ui.dropdown, -.ui.form .field.error .ui.dropdown { - -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; - box-shadow: 0px 0px 0px 1px #E7BEBE !important; -} -.ui.form .fields.error .field .ui.dropdown:hover, -.ui.form .field.error .ui.dropdown:hover { - -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; - box-shadow: 0px 0px 0px 1px #E7BEBE !important; -} -.ui.form .fields.error .field .ui.dropdown:hover .menu, -.ui.form .field.error .ui.dropdown:hover .menu { - -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE; - box-shadow: 0px 1px 0px 1px #E7BEBE; -} -.ui.form .fields.error .field .ui.dropdown .menu .item:hover, -.ui.form .field.error .ui.dropdown .menu .item:hover { - background-color: #FFF2F2; -} -.ui.form .fields.error .field .ui.dropdown .menu .active.item, -.ui.form .field.error .ui.dropdown .menu .active.item { - background-color: #FDCFCF !important; -} -/*-------------------- - Empty (Placeholder) ----------------------*/ -/* browsers require these rules separate */ -.ui.form ::-webkit-input-placeholder { - color: #AAAAAA; -} -.ui.form ::-moz-placeholder { - color: #AAAAAA; -} -.ui.form :focus::-webkit-input-placeholder { - color: #999999; -} -.ui.form :focus::-moz-placeholder { - color: #999999; -} -/* Error Placeholder */ -.ui.form .error ::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.4); -} -.ui.form .error ::-moz-placeholder { - color: rgba(255, 80, 80, 0.4); -} -.ui.form .error :focus::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.7); -} -.ui.form .error :focus::-moz-placeholder { - color: rgba(255, 80, 80, 0.7); -} -/*-------------------- - Disabled ----------------------*/ -.ui.form .field :disabled, -.ui.form .field.disabled { - opacity: 0.5; -} -.ui.form .field.disabled label { - opacity: 0.5; -} -.ui.form .field.disabled :disabled { - opacity: 1; -} -/*-------------------- - Loading State ----------------------*/ -/* On Form */ -.ui.form.loading { - position: relative; -} -.ui.form.loading:after { - position: absolute; - top: 0%; - left: 0%; - content: ''; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; - visibility: visible; -} -/******************************* - Variations -*******************************/ -/*-------------------- - Fluid Width ----------------------*/ -.ui.form.fluid { - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -/*-------------------------- - Input w/ attached Button ----------------------------*/ -.ui.form input.attached { - width: auto; -} -/*-------------------- - Date Input ----------------------*/ -.ui.form .date.field > label { - position: relative; -} -.ui.form .date.field > label:after { - position: absolute; - top: 2em; - right: 0.5em; - font-family: 'Icons'; - content: '\f133'; - font-size: 1.2em; - font-weight: normal; - color: #CCCCCC; -} -/*-------------------- - Inverted Colors ----------------------*/ -.ui.inverted.form label { - color: #FFFFFF; -} -.ui.inverted.form .field.error textarea, -.ui.inverted.form .field.error input[type="text"], -.ui.inverted.form .field.error input[type="email"], -.ui.inverted.form .field.error input[type="date"], -.ui.inverted.form .field.error input[type="password"], -.ui.inverted.form .field.error input[type="number"], -.ui.inverted.form .field.error input[type="url"], -.ui.inverted.form .field.error input[type="tel"] { - background-color: #FFCCCC; -} -.ui.inverted.form .ui.checkbox label { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.form .ui.checkbox label:hover, -.ui.inverted.form .ui.checkbox .box:hover { - color: #FFFFFF; -} -/*-------------------- - Field Groups ----------------------*/ -/* Grouped Vertically */ -.ui.form .grouped.fields { - margin: 0em 0em 1em; -} -.ui.form .grouped.fields .field { - display: block; - float: none; - margin: 0.5em 0em; - padding: 0em; -} -/*-------------------- - Fields ----------------------*/ -/* Split fields */ -.ui.form .fields { - clear: both; -} -.ui.form .fields:after { - content: ' '; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} -.ui.form .fields > .field { - clear: none; - float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.form .fields > .field:first-child { - border-left: none; - -webkit-box-shadow: none; - box-shadow: none; -} -/* Other Combinations */ -.ui.form .two.fields > .fields, -.ui.form .two.fields > .field { - width: 50%; - padding-left: 1%; - padding-right: 1%; -} -.ui.form .three.fields > .fields, -.ui.form .three.fields > .field { - width: 33.333%; - padding-left: 1%; - padding-right: 1%; -} -.ui.form .four.fields > .fields, -.ui.form .four.fields > .field { - width: 25%; - padding-left: 1%; - padding-right: 1%; -} -.ui.form .five.fields > .fields, -.ui.form .five.fields > .field { - width: 20%; - padding-left: 1%; - padding-right: 1%; -} -.ui.form .fields .field:first-child { - padding-left: 0%; -} -.ui.form .fields .field:last-child { - padding-right: 0%; -} -/* Fields grid support */ -.ui.form .fields .wide.field { - width: 6.25%; - padding-left: 1%; - padding-right: 1%; -} -.ui.form .fields .wide.field:first-child { - padding-left: 0%; -} -.ui.form .fields .wide.field:last-child { - padding-right: 0%; -} -.ui.form .fields > .one.wide.field { - width: 6.25%; -} -.ui.form .fields > .two.wide.field { - width: 12.5%; -} -.ui.form .fields > .three.wide.field { - width: 18.75%; -} -.ui.form .fields > .four.wide.field { - width: 25%; -} -.ui.form .fields > .five.wide.field { - width: 31.25%; -} -.ui.form .fields > .six.wide.field { - width: 37.5%; -} -.ui.form .fields > .seven.wide.field { - width: 43.75%; -} -.ui.form .fields > .eight.wide.field { - width: 50%; -} -.ui.form .fields > .nine.wide.field { - width: 56.25%; -} -.ui.form .fields > .ten.wide.field { - width: 62.5%; -} -.ui.form .fields > .eleven.wide.field { - width: 68.75%; -} -.ui.form .fields > .twelve.wide.field { - width: 75%; -} -.ui.form .fields > .thirteen.wide.field { - width: 81.25%; -} -.ui.form .fields > .fourteen.wide.field { - width: 87.5%; -} -.ui.form .fields > .fifteen.wide.field { - width: 93.75%; -} -.ui.form .fields > .sixteen.wide.field { - width: 100%; -} -/* Swap to full width on mobile */ -@media only screen and (max-width: 767px) { - .ui.form .two.fields > .fields, - .ui.form .two.fields > .field, - .ui.form .three.fields > .fields, - .ui.form .three.fields > .field, - .ui.form .four.fields > .fields, - .ui.form .four.fields > .field, - .ui.form .five.fields > .fields, - .ui.form .five.fields > .field, - .ui.form .fields > .two.wide.field, - .ui.form .fields > .three.wide.field, - .ui.form .fields > .four.wide.field, - .ui.form .fields > .five.wide.field, - .ui.form .fields > .six.wide.field, - .ui.form .fields > .seven.wide.field, - .ui.form .fields > .eight.wide.field, - .ui.form .fields > .nine.wide.field, - .ui.form .fields > .ten.wide.field, - .ui.form .fields > .eleven.wide.field, - .ui.form .fields > .twelve.wide.field, - .ui.form .fields > .thirteen.wide.field, - .ui.form .fields > .fourteen.wide.field, - .ui.form .fields > .fifteen.wide.field, - .ui.form .fields > .sixteen.wide.field { - width: 100%; - padding-left: 0%; - padding-right: 0%; - } -} -/*-------------------- - Inline Fields ----------------------*/ -.ui.form .inline.fields .field { - min-height: 1.3em; - margin-right: 0.5em; -} -.ui.form .inline.fields .field > label, -.ui.form .inline.fields .field > p, -.ui.form .inline.fields .field > input, -.ui.form .inline.field > label, -.ui.form .inline.field > p, -.ui.form .inline.field > input { - display: inline-block; - width: auto; - margin-top: 0em; - margin-bottom: 0em; - vertical-align: middle; - font-size: 1em; -} -.ui.form .inline.fields .field > input, -.ui.form .inline.field > input { - font-size: 0.875em; -} -.ui.form .inline.fields .field > :first-child, -.ui.form .inline.field > :first-child { - margin: 0em 0.5em 0em 0em; -} -.ui.form .inline.fields .field > :only-child, -.ui.form .inline.field > :only-child { - margin: 0em; -} -/*-------------------- - Sizes ----------------------*/ -/* Standard */ -.ui.small.form { - font-size: 0.875em; -} -.ui.small.form textarea, -.ui.small.form input[type="text"], -.ui.small.form input[type="email"], -.ui.small.form input[type="date"], -.ui.small.form input[type="password"], -.ui.small.form input[type="number"], -.ui.small.form input[type="url"], -.ui.small.form input[type="tel"], -.ui.small.form label { - font-size: 1em; -} -/* Large */ -.ui.large.form { - font-size: 1.125em; -} - -/* - * # Semantic - Grid - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Grid -*******************************/ -.ui.grid { - display: block; - text-align: left; - font-size: 0em; - margin: 0% -1.5%; - padding: 0%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -body > .ui.grid { - margin-left: 0% !important; - margin-right: 0% !important; -} -.ui.grid:after, -.ui.row:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -/*------------------- - Columns ---------------------*/ -/* Standard 16 column */ -.ui.grid > .column, -.ui.grid > .row > .column { - display: inline-block; - text-align: left; - font-size: 1rem; - width: 6.25%; - padding-left: 1.5%; - padding-right: 1.5%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - vertical-align: top; -} -/* Vertical padding when no rows */ -.ui.grid > .column { - margin-top: 1rem; - margin-bottom: 1rem; -} -/*------------------- - Rows ---------------------*/ -.ui.grid > .row { - display: block; - width: 100% !important; - margin-top: 1.5%; - padding: 1rem 0% 0%; - font-size: 0rem; -} -.ui.grid > .row:first-child { - padding-top: 0rem; - margin-top: 0rem; -} -/*------------------- - Content ---------------------*/ -.ui.grid > .row > img, -.ui.grid > .row > .column > img { - max-width: 100%; -} -.ui.grid .column > .ui.segment:only-child { - margin: 0em; -} -/******************************* - Variations -*******************************/ -/*----------------------- - Page Grid (Responsive) --------------------------*/ -.ui.page.grid { - min-width: 320px; - margin-left: 0%; - margin-right: 0%; -} -@media only screen and (max-width: 991px) { - .ui.page.grid { - padding: 0% 4%; - } -} -@media only screen and (min-width: 992px) { - .ui.page.grid { - padding: 0% 8%; - } -} -@media only screen and (min-width: 1500px) { - .ui.page.grid { - padding: 0% 13%; - } -} -@media only screen and (min-width: 1750px) { - .ui.page.grid { - padding: 0% 18%; - } -} -@media only screen and (min-width: 2000px) { - .ui.page.grid { - padding: 0% 23%; - } -} -/*------------------- - Column Width ---------------------*/ -/* Sizing Combinations */ -.ui.grid > .row > .one.wide.column, -.ui.grid > .column.row > .one.wide.column, -.ui.grid > .one.wide.column, -.ui.column.grid > .one.wide.column { - width: 6.25%; -} -.ui.grid > .row > .two.wide.column, -.ui.grid > .column.row > .two.wide.column, -.ui.grid > .two.wide.column, -.ui.column.grid > .two.wide.column { - width: 12.5%; -} -.ui.grid > .row > .three.wide.column, -.ui.grid > .column.row > .three.wide.column, -.ui.grid > .three.wide.column, -.ui.column.grid > .three.wide.column { - width: 18.75%; -} -.ui.grid > .row > .four.wide.column, -.ui.grid > .column.row > .four.wide.column, -.ui.grid > .four.wide.column, -.ui.column.grid > .four.wide.column { - width: 25%; -} -.ui.grid > .row > .five.wide.column, -.ui.grid > .column.row > .five.wide.column, -.ui.grid > .five.wide.column, -.ui.column.grid > .five.wide.column { - width: 31.25%; -} -.ui.grid > .row > .six.wide.column, -.ui.grid > .column.row > .six.wide.column, -.ui.grid > .six.wide.column, -.ui.column.grid > .six.wide.column { - width: 37.5%; -} -.ui.grid > .row > .seven.wide.column, -.ui.grid > .column.row > .seven.wide.column, -.ui.grid > .seven.wide.column, -.ui.column.grid > .seven.wide.column { - width: 43.75%; -} -.ui.grid > .row > .eight.wide.column, -.ui.grid > .column.row > .eight.wide.column, -.ui.grid > .eight.wide.column, -.ui.column.grid > .eight.wide.column { - width: 50%; -} -.ui.grid > .row > .nine.wide.column, -.ui.grid > .column.row > .nine.wide.column, -.ui.grid > .nine.wide.column, -.ui.column.grid > .nine.wide.column { - width: 56.25%; -} -.ui.grid > .row > .ten.wide.column, -.ui.grid > .column.row > .ten.wide.column, -.ui.grid > .ten.wide.column, -.ui.column.grid > .ten.wide.column { - width: 62.5%; -} -.ui.grid > .row > .eleven.wide.column, -.ui.grid > .column.row > .eleven.wide.column, -.ui.grid > .eleven.wide.column, -.ui.column.grid > .eleven.wide.column { - width: 68.75%; -} -.ui.grid > .row > .twelve.wide.column, -.ui.grid > .column.row > .twelve.wide.column, -.ui.grid > .twelve.wide.column, -.ui.column.grid > .twelve.wide.column { - width: 75%; -} -.ui.grid > .row > .thirteen.wide.column, -.ui.grid > .column.row > .thirteen.wide.column, -.ui.grid > .thirteen.wide.column, -.ui.column.grid > .thirteen.wide.column { - width: 81.25%; -} -.ui.grid > .row > .fourteen.wide.column, -.ui.grid > .column.row > .fourteen.wide.column, -.ui.grid > .fourteen.wide.column, -.ui.column.grid > .fourteen.wide.column { - width: 87.5%; -} -.ui.grid > .row > .fifteen.wide.column, -.ui.grid > .column.row > .fifteen.wide.column, -.ui.grid > .fifteen.wide.column, -.ui.column.grid > .fifteen.wide.column { - width: 93.75%; -} -.ui.grid > .row > .sixteen.wide.column, -.ui.grid > .column.row > .sixteen.wide.column, -.ui.grid > .sixteen.wide.column, -.ui.column.grid > .sixteen.wide.column { - width: 100%; -} -/*------------------- - Column Count ---------------------*/ -/* Assume full width with one column */ -.ui.one.column.grid > .row > .column, -.ui.one.column.grid > .column, -.ui.grid > .one.column.row > .column { - width: 100%; -} -.ui.two.column.grid > .row > .column, -.ui.two.column.grid > .column, -.ui.grid > .two.column.row > .column { - width: 50%; -} -.ui.three.column.grid > .row > .column, -.ui.three.column.grid > .column, -.ui.grid > .three.column.row > .column { - width: 33.3333%; -} -.ui.four.column.grid > .row > .column, -.ui.four.column.grid > .column, -.ui.grid > .four.column.row > .column { - width: 25%; -} -.ui.five.column.grid > .row > .column, -.ui.five.column.grid > .column, -.ui.grid > .five.column.row > .column { - width: 20%; -} -.ui.six.column.grid > .row > .column, -.ui.six.column.grid > .column, -.ui.grid > .six.column.row > .column { - width: 16.66667%; -} -.ui.seven.column.grid > .row > .column, -.ui.seven.column.grid > .column, -.ui.grid > .seven.column.row > .column { - width: 14.2857%; -} -.ui.eight.column.grid > .row > .column, -.ui.eight.column.grid > .column, -.ui.grid > .eight.column.row > .column { - width: 12.5%; -} -.ui.nine.column.grid > .row > .column, -.ui.nine.column.grid > .column, -.ui.grid > .nine.column.row > .column { - width: 11.1111%; -} -.ui.ten.column.grid > .row > .column, -.ui.ten.column.grid > .column, -.ui.grid > .ten.column.row > .column { - width: 10%; -} -.ui.eleven.column.grid > .row > .column, -.ui.eleven.column.grid > .column, -.ui.grid > .eleven.column.row > .column { - width: 9.0909%; -} -.ui.twelve.column.grid > .row > .column, -.ui.twelve.column.grid > .column, -.ui.grid > .twelve.column.row > .column { - width: 8.3333%; -} -.ui.thirteen.column.grid > .row > .column, -.ui.thirteen.column.grid > .column, -.ui.grid > .thirteen.column.row > .column { - width: 7.6923%; -} -.ui.fourteen.column.grid > .row > .column, -.ui.fourteen.column.grid > .column, -.ui.grid > .fourteen.column.row > .column { - width: 7.1428%; -} -.ui.fifteen.column.grid > .row > .column, -.ui.fifteen.column.grid > .column, -.ui.grid > .fifteen.column.row > .column { - width: 6.6666%; -} -.ui.sixteen.column.grid > .row > .column, -.ui.sixteen.column.grid > .column, -.ui.grid > .sixteen.column.row > .column { - width: 6.25%; -} -/* Assume full width with one column */ -.ui.grid > .column:only-child, -.ui.grid > .row > .column:only-child { - width: 100%; -} -/*---------------------- - Relaxed ------------------------*/ -.ui.relaxed.grid { - margin: 0% -2.5%; -} -.ui.relaxed.grid > .column, -.ui.relaxed.grid > .row > .column { - padding-left: 2.5%; - padding-right: 2.5%; -} -/*---------------------- - "Floated" ------------------------*/ -.ui.grid .left.floated.column { - float: left; -} -.ui.grid .right.floated.column { - float: right; -} -/*---------------------- - Divided ------------------------*/ -.ui.divided.grid, -.ui.divided.grid > .row { - display: table; - width: 100%; - margin-left: 0% !important; - margin-right: 0% !important; -} -.ui.divided.grid > .column:not(.row), -.ui.divided.grid > .row > .column { - display: table-cell; - -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); - box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); -} -.ui.divided.grid > .column.row { - display: table; -} -.ui.divided.grid > .column:first-child, -.ui.divided.grid > .row > .column:first-child { - -webkit-box-shadow: none; - box-shadow: none; -} -/* Vertically Divided */ -.ui.vertically.divided.grid > .row { - -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; - box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; -} -.ui.vertically.divided.grid > .row > .column, -.ui.vertically.divided.grid > .column:not(.row), -.ui.vertically.divided.grid > .row:first-child { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -/*---------------------- - Celled ------------------------*/ -.ui.celled.grid { - display: table; - width: 100%; - margin-left: 0% !important; - margin-right: 0% !important; - -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; - box-shadow: 0px 0px 0px 1px #DFDFDF; -} -.ui.celled.grid > .row, -.ui.celled.grid > .column.row, -.ui.celled.grid > .column.row:first-child { - display: table; - width: 100%; - margin-top: 0em; - padding-top: 0em; - -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; - box-shadow: 0px -1px 0px 0px #dfdfdf; -} -.ui.celled.grid > .column:not(.row), -.ui.celled.grid > .row > .column { - display: table-cell; - padding: 0.75em; - -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; - box-shadow: -1px 0px 0px 0px #dfdfdf; -} -.ui.celled.grid > .column:first-child, -.ui.celled.grid > .row > .column:first-child { - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.celled.page.grid { - -webkit-box-shadow: none; - box-shadow: none; -} -/*---------------------- - Horizontally Centered ------------------------*/ -/* Vertical Centered */ -.ui.left.aligned.grid, -.ui.left.aligned.grid > .row > .column, -.ui.left.aligned.grid > .column, -.ui.grid .left.aligned.column, -.ui.grid > .left.aligned.row > .column { - text-align: left; -} -.ui.center.aligned.grid, -.ui.center.aligned.grid > .row > .column, -.ui.center.aligned.grid > .column, -.ui.grid .center.aligned.column, -.ui.grid > .center.aligned.row > .column { - text-align: center; -} -.ui.right.aligned.grid, -.ui.right.aligned.grid > .row > .column, -.ui.right.aligned.grid > .column, -.ui.grid .right.aligned.column, -.ui.grid > .right.aligned.row > .column { - text-align: right; -} -.ui.justified.grid, -.ui.justified.grid > .row > .column, -.ui.justified.grid > .column, -.ui.grid .justified.column, -.ui.grid > .justified.row > .column { - text-align: justify; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} -/*---------------------- - Vertically Centered ------------------------*/ -/* Vertical Centered */ -.ui.top.aligned.grid, -.ui.top.aligned.grid > .row > .column, -.ui.top.aligned.grid > .column, -.ui.grid .top.aligned.column, -.ui.grid > .top.aligned.row > .column { - vertical-align: top; -} -.ui.middle.aligned.grid, -.ui.middle.aligned.grid > .row > .column, -.ui.middle.aligned.grid > .column, -.ui.grid .middle.aligned.column, -.ui.grid > .middle.aligned.row > .column { - vertical-align: middle; -} -.ui.bottom.aligned.grid, -.ui.bottom.aligned.grid > .row > .column, -.ui.bottom.aligned.grid > .column, -.ui.grid .bottom.aligned.column, -.ui.grid > .bottom.aligned.row > .column { - vertical-align: bottom; -} -/*---------------------- - Equal Height Columns ------------------------*/ -.ui.grid > .equal.height.row { - display: table; - width: 100%; -} -.ui.grid > .equal.height.row > .column { - display: table-cell; -} -/*---------------------- - Only (Device) ------------------------*/ -/* Mobile Only */ -@media only screen and (max-width: 767px) { - .ui.mobile.only.grid, - .ui.grid > .mobile.only.row { - display: block !important; - } - .ui.grid > .row > .mobile.only.column { - display: inline-block !important; - } - .ui.divided.mobile.only.grid, - .ui.celled.mobile.only.grid, - .ui.divided.mobile.only.grid .row, - .ui.celled.mobile.only.grid .row, - .ui.divided.grid .mobile.only.row, - .ui.celled.grid .mobile.only.row, - .ui.grid .mobile.only.equal.height.row, - .ui.mobile.only.grid .equal.height.row { - display: table !important; - } - .ui.divided.grid > .row > .mobile.only.column, - .ui.celled.grid > .row > .mobile.only.column, - .ui.divided.mobile.only.grid > .row > .column, - .ui.celled.mobile.only.grid > .row > .column, - .ui.divided.mobile.only.grid > .column, - .ui.celled.mobile.only.grid > .column { - display: table-cell !important; - } -} -@media only screen and (min-width: 768px) { - .ui.mobile.only.grid, - .ui.grid > .mobile.only.row, - .ui.grid > .mobile.only.column, - .ui.grid > .row > .mobile.only.column { - display: none; - } -} -/* Tablet Only */ -@media only screen and (min-width: 768px) and (max-width: 991px) { - .ui.tablet.only.grid, - .ui.grid > .tablet.only.row { - display: block !important; - } - .ui.grid > .row > .tablet.only.column { - display: inline-block !important; - } - .ui.divided.tablet.only.grid, - .ui.celled.tablet.only.grid, - .ui.divided.tablet.only.grid .row, - .ui.celled.tablet.only.grid .row, - .ui.divided.grid .tablet.only.row, - .ui.celled.grid .tablet.only.row, - .ui.grid .tablet.only.equal.height.row, - .ui.tablet.only.grid .equal.height.row { - display: table !important; - } - .ui.divided.grid > .row > .tablet.only.column, - .ui.celled.grid > .row > .tablet.only.column, - .ui.divided.tablet.only.grid > .row > .column, - .ui.celled.tablet.only.grid > .row > .column, - .ui.divided.tablet.only.grid > .column, - .ui.celled.tablet.only.grid > .column { - display: table-cell !important; - } -} -@media only screen and (max-width: 767px), (min-width: 992px) { - .ui.tablet.only.grid, - .ui.grid > .tablet.only.row, - .ui.grid > .tablet.only.column, - .ui.grid > .row > .tablet.only.column { - display: none; - } -} -/* Computer Only */ -@media only screen and (min-width: 992px) { - .ui.computer.only.grid, - .ui.grid > .computer.only.row { - display: block !important; - } - .ui.grid > .row > .computer.only.column { - display: inline-block !important; - } - .ui.divided.computer.only.grid, - .ui.celled.computer.only.grid, - .ui.divided.computer.only.grid .row, - .ui.celled.computer.only.grid .row, - .ui.divided.grid .computer.only.row, - .ui.celled.grid .computer.only.row, - .ui.grid .computer.only.equal.height.row, - .ui.computer.only.grid .equal.height.row { - display: table !important; - } - .ui.divided.grid > .row > .computer.only.column, - .ui.celled.grid > .row > .computer.only.column, - .ui.divided.computer.only.grid > .row > .column, - .ui.celled.computer.only.grid > .row > .column, - .ui.divided.computer.only.grid > .column, - .ui.celled.computer.only.grid > .column { - display: table-cell !important; - } -} -@media only screen and (max-width: 991px) { - .ui.computer.only.grid, - .ui.grid > .computer.only.row, - .ui.grid > .computer.only.column, - .ui.grid > .row > .computer.only.column { - display: none; - } -} -/*------------------- - Doubling ---------------------*/ -/* Mobily Only */ -@media only screen and (max-width: 767px) { - .ui.two.column.doubling.grid > .row > .column, - .ui.two.column.doubling.grid > .column, - .ui.grid > .two.column.doubling.row > .column { - width: 100%; - } - .ui.three.column.doubling.grid > .row > .column, - .ui.three.column.doubling.grid > .column, - .ui.grid > .three.column.doubling.row > .column { - width: 100%; - } - .ui.four.column.doubling.grid > .row > .column, - .ui.four.column.doubling.grid > .column, - .ui.grid > .four.column.doubling.row > .column { - width: 100%; - } - .ui.five.column.doubling.grid > .row > .column, - .ui.five.column.doubling.grid > .column, - .ui.grid > .five.column.doubling.row > .column { - width: 100%; - } - .ui.six.column.doubling.grid > .row > .column, - .ui.six.column.doubling.grid > .column, - .ui.grid > .six.column.doubling.row > .column { - width: 50%; - } - .ui.seven.column.doubling.grid > .row > .column, - .ui.seven.column.doubling.grid > .column, - .ui.grid > .seven.column.doubling.row > .column { - width: 50%; - } - .ui.eight.column.doubling.grid > .row > .column, - .ui.eight.column.doubling.grid > .column, - .ui.grid > .eight.column.doubling.row > .column { - width: 50%; - } - .ui.nine.column.doubling.grid > .row > .column, - .ui.nine.column.doubling.grid > .column, - .ui.grid > .nine.column.doubling.row > .column { - width: 50%; - } - .ui.ten.column.doubling.grid > .row > .column, - .ui.ten.column.doubling.grid > .column, - .ui.grid > .ten.column.doubling.row > .column { - width: 50%; - } - .ui.twelve.column.doubling.grid > .row > .column, - .ui.twelve.column.doubling.grid > .column, - .ui.grid > .twelve.column.doubling.row > .column { - width: 33.3333333333333%; - } - .ui.fourteen.column.doubling.grid > .row > .column, - .ui.fourteen.column.doubling.grid > .column, - .ui.grid > .fourteen.column.doubling.row > .column { - width: 33.3333333333333%; - } - .ui.sixteen.column.doubling.grid > .row > .column, - .ui.sixteen.column.doubling.grid > .column, - .ui.grid > .sixteen.column.doubling.row > .column { - width: 25%; - } -} -/* Tablet Only */ -@media only screen and (min-width: 768px) and (max-width: 991px) { - .ui.two.column.doubling.grid > .row > .column, - .ui.two.column.doubling.grid > .column, - .ui.grid > .two.column.doubling.row > .column { - width: 100%; - } - .ui.three.column.doubling.grid > .row > .column, - .ui.three.column.doubling.grid > .column, - .ui.grid > .three.column.doubling.row > .column { - width: 50%; - } - .ui.four.column.doubling.grid > .row > .column, - .ui.four.column.doubling.grid > .column, - .ui.grid > .four.column.doubling.row > .column { - width: 50%; - } - .ui.five.column.doubling.grid > .row > .column, - .ui.five.column.doubling.grid > .column, - .ui.grid > .five.column.doubling.row > .column { - width: 33.3333333%; - } - .ui.six.column.doubling.grid > .row > .column, - .ui.six.column.doubling.grid > .column, - .ui.grid > .six.column.doubling.row > .column { - width: 33.3333333%; - } - .ui.eight.column.doubling.grid > .row > .column, - .ui.eight.column.doubling.grid > .column, - .ui.grid > .eight.column.doubling.row > .column { - width: 33.3333333%; - } - .ui.eight.column.doubling.grid > .row > .column, - .ui.eight.column.doubling.grid > .column, - .ui.grid > .eight.column.doubling.row > .column { - width: 25%; - } - .ui.nine.column.doubling.grid > .row > .column, - .ui.nine.column.doubling.grid > .column, - .ui.grid > .nine.column.doubling.row > .column { - width: 25%; - } - .ui.ten.column.doubling.grid > .row > .column, - .ui.ten.column.doubling.grid > .column, - .ui.grid > .ten.column.doubling.row > .column { - width: 20%; - } - .ui.twelve.column.doubling.grid > .row > .column, - .ui.twelve.column.doubling.grid > .column, - .ui.grid > .twelve.column.doubling.row > .column { - width: 16.6666666%; - } - .ui.fourteen.column.doubling.grid > .row > .column, - .ui.fourteen.column.doubling.grid > .column, - .ui.grid > .fourteen.column.doubling.row > .column { - width: 14.28571428571429%; - } - .ui.sixteen.column.doubling.grid > .row > .column, - .ui.sixteen.column.doubling.grid > .column, - .ui.grid > .sixteen.column.doubling.row > .column { - width: 12.5%; - } -} -/*------------------- - Stackable ---------------------*/ -@media only screen and (max-width: 767px) { - .ui.stackable.grid { - display: block !important; - padding: 0em; - margin: 0em; - } - .ui.stackable.grid > .row > .column, - .ui.stackable.grid > .column { - display: block !important; - width: auto !important; - margin: 1em 0em 0em !important; - padding: 1em 0em 0em !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - .ui.stackable.divided.grid .column, - .ui.stackable.celled.grid .column { - border-top: 1px dotted rgba(0, 0, 0, 0.1); - } - .ui.stackable.grid > .row:first-child > .column:first-child, - .ui.stackable.grid > .column:first-child { - margin-top: 0em !important; - padding-top: 0em !important; - } - .ui.stackable.divided.grid > .row:first-child > .column:first-child, - .ui.stackable.celled.grid > .row:first-child > .column:first-child, - .ui.stackable.divided.grid > .column:first-child, - .ui.stackable.celled.grid > .column:first-child { - border-top: none !important; - } - .ui.stackable.page.grid > .row > .column, - .ui.stackable.page.grid > .column { - padding-left: 1em !important; - padding-right: 1em !important; - } - /* Remove pointers from vertical menus */ - .ui.stackable.grid .vertical.pointing.menu .item:after { - display: none; - } -} - -/* - * # Semantic - Menu - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Standard -*******************************/ -/*-------------- - Menu ----------------*/ -.ui.menu { - margin: 1rem 0rem; - background-color: #FFFFFF; - font-size: 0px; - font-weight: normal; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - border-radius: 0.1875rem; -} -.ui.menu:first-child { - margin-top: 0rem; -} -.ui.menu:last-child { - margin-bottom: 0rem; -} -.ui.menu:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -.ui.menu > .item:first-child { - border-radius: 0.1875em 0px 0px 0.1875em; -} -.ui.menu > .item:last-child { - border-radius: 0px 0.1875em 0.1875em 0px; -} -.ui.menu .item { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - vertical-align: middle; - line-height: 1; - text-decoration: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: opacity 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease; - -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; - transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; -} -/*-------------- - Colors ----------------*/ -/* Text Color */ -.ui.menu .item, -.ui.menu .item > a:not(.button) { - color: rgba(0, 0, 0, 0.75); -} -.ui.menu .item .item, -.ui.menu .item .item > a:not(.button) { - color: rgba(30, 30, 30, 0.7); -} -.ui.menu .item .item .item, -.ui.menu .item .item .item > a:not(.button) { - color: rgba(30, 30, 30, 0.6); -} -.ui.menu .dropdown .menu .item, -.ui.menu .dropdown .menu .item a:not(.button) { - color: rgba(0, 0, 0, 0.75); -} -/* Hover */ -.ui.menu .item .menu a.item:hover, -.ui.menu .item .menu .link.item:hover { - color: rgba(0, 0, 0, 0.85); -} -.ui.menu .dropdown .menu .item a:not(.button):hover { - color: rgba(0, 0, 0, 0.85); -} -/* Active */ -.ui.menu .active.item, -.ui.menu .active.item a:not(.button) { - color: rgba(0, 0, 0, 0.85); - border-radius: 0px; -} -/*-------------- - Items ----------------*/ -.ui.menu .item { - position: relative; - display: inline-block; - padding: 0.83em 0.95em; - border-top: 0em solid rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} -.ui.menu .menu { - margin: 0em; -} -.ui.menu .item.left, -.ui.menu .menu.left { - float: left; -} -.ui.menu .item.right, -.ui.menu .menu.right { - float: right; -} -/*-------------- - Borders ----------------*/ -.ui.menu .item:before { - position: absolute; - content: ''; - top: 0%; - left: 0px; - width: 1px; - height: 100%; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.05)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); -} -.ui.menu > .menu:not(.right):first-child > .item:first-child:before, -.ui.menu .item:first-child:before { - display: none; -} -.ui.menu .menu.right .item:before, -.ui.menu .item.right:before { - right: auto; - left: 0px; -} -/*-------------- - Text Content ----------------*/ -.ui.menu .text.item > *, -.ui.menu .item > p:only-child { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - line-height: 1.3; - color: rgba(0, 0, 0, 0.6); -} -.ui.menu .item > p:first-child { - margin-top: 0px; -} -.ui.menu .item > p:last-child { - margin-bottom: 0px; -} -/*-------------- - Button ----------------*/ -.ui.menu:not(.vertical) .item > .button { - position: relative; - top: -0.05em; - margin: -0.55em 0; - padding-bottom: 0.55em; - padding-top: 0.55em; - font-size: 0.875em; -} -/*-------------- - Inputs ----------------*/ -.ui.menu:not(.vertical) .item > .input { - margin-top: -0.85em; - margin-bottom: -0.85em; - padding-top: 0.3em; - padding-bottom: 0.3em; - width: 100%; - vertical-align: top; -} -.ui.menu .item > .input input { - padding-top: 0.35em; - padding-bottom: 0.35em; -} -.ui.vertical.menu .item > .input input { - margin: 0em; - padding-top: 0.63em; - padding-bottom: 0.63em; -} -/* Action Input */ -.ui.menu:not(.vertical) .item > .button.labeled > .icon { - padding-top: 0.6em; -} -.ui.menu:not(.vertical) .item .action.input > .button { - font-size: 0.8em; - padding: 0.55em 0.8em; -} -/* Resizes */ -.ui.small.menu:not(.vertical) .item > .input input { - padding-top: 0.4em; - padding-bottom: 0.4em; -} -.ui.large.menu:not(.vertical) .item > .input input { - top: -0.125em; - padding-bottom: 0.6em; - padding-top: 0.6em; -} -.ui.large.menu:not(.vertical) .item .action.input > .button { - font-size: 0.8em; - padding: 0.9em; -} -.ui.large.menu:not(.vertical) .item .action.input > .button > .icon { - padding-top: 0.8em; -} -/*-------------- - Header ----------------*/ -.ui.menu .header.item { - background-color: rgba(0, 0, 0, 0.04); - margin: 0em; -} -.ui.vertical.menu .header.item { - font-weight: bold; -} -/*-------------- - Dropdowns ----------------*/ -.ui.menu .dropdown .menu .item .icon { - float: none; - margin: 0em 0.75em 0em 0em; -} -.ui.menu .dropdown.item .menu { - left: 1px; - margin: 0px; - min-width: -webkit-calc(99%); - min-width: -moz-calc(99%); - min-width: calc(99%); - -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); -} -.ui.secondary.menu .dropdown.item .menu { - left: 0px; - min-width: 100%; -} -.ui.menu .pointing.dropdown.item .menu { - margin-top: 0.75em; -} -.ui.menu .simple.dropdown.item .menu { - margin: 0px !important; -} -.ui.menu .dropdown.item .menu .item { - width: 100%; - color: rgba(0, 0, 0, 0.75); -} -.ui.menu .dropdown.item .menu .active.item { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.ui.menu .ui.dropdown .menu .item:before { - display: none; -} -/*-------------- - Labels ----------------*/ -.ui.menu .item > .label { - background-color: rgba(0, 0, 0, 0.35); - color: #FFFFFF; - margin: -0.15em 0em -0.15em 0.5em; - padding: 0.3em 0.8em; - vertical-align: baseline; -} -.ui.menu .item > .floating.label { - padding: 0.3em 0.8em; -} -/*-------------- - Images ----------------*/ -.ui.menu .item > img:only-child { - display: block; - max-width: 100%; - margin: 0em auto; -} -/******************************* - States -*******************************/ -/*-------------- - Hover ----------------*/ -.ui.link.menu .item:hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover, -.ui.menu .ui.dropdown .menu .item:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.02); -} -.ui.menu .ui.dropdown.item.active { - background-color: rgba(0, 0, 0, 0.02); - -webkit-box-shadow: none; - box-shadow: none; - -moz-border-bottom-right-radius: 0em; - border-bottom-right-radius: 0em; - -moz-border-bottom-left-radius: 0em; - border-bottom-left-radius: 0em; -} -/*-------------- - Down ----------------*/ -.ui.link.menu .item:active, -.ui.menu .link.item:active, -.ui.menu a.item:active, -.ui.menu .ui.dropdown .menu .item:active { - background-color: rgba(0, 0, 0, 0.05); -} -/*-------------- - Active ----------------*/ -.ui.menu .active.item { - background-color: rgba(0, 0, 0, 0.01); - color: rgba(0, 0, 0, 0.95); - -webkit-box-shadow: 0em 0.2em 0em inset; - box-shadow: 0em 0.2em 0em inset; -} -.ui.vertical.menu .active.item { - border-radius: 0em; - -webkit-box-shadow: 0.2em 0em 0em inset; - box-shadow: 0.2em 0em 0em inset; -} -.ui.vertical.menu > .active.item:first-child { - border-radius: 0em 0.1875em 0em 0em; -} -.ui.vertical.menu > .active.item:last-child { - border-radius: 0em 0em 0.1875em 0em; -} -.ui.vertical.menu > .active.item:only-child { - border-radius: 0em 0.1875em 0.1875em 0em; -} -.ui.vertical.menu .active.item .menu .active.item { - border-left: none; -} -.ui.vertical.menu .active.item .menu .active.item { - padding-left: 1.5rem; -} -.ui.vertical.menu .item .menu .active.item { - background-color: rgba(0, 0, 0, 0.03); - -webkit-box-shadow: none; - box-shadow: none; -} -/*-------------- - Disabled ----------------*/ -.ui.menu .item.disabled, -.ui.menu .item.disabled:hover { - cursor: default; - color: rgba(0, 0, 0, 0.2); - background-color: transparent !important; -} -/*-------------------- - Loading ----------------------*/ -/* On Form */ -.ui.menu.loading { - position: relative; -} -.ui.menu.loading:after { - position: absolute; - top: 0%; - left: 0%; - content: ''; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; - visibility: visible; -} -/******************************* - Types -*******************************/ -/*-------------- - Vertical ----------------*/ -.ui.vertical.menu .item { - display: block; - height: auto !important; - border-top: none; - border-left: 0em solid rgba(0, 0, 0, 0); - border-right: none; -} -.ui.vertical.menu > .item:first-child { - border-radius: 0.1875em 0.1875em 0px 0px; -} -.ui.vertical.menu > .item:last-child { - border-radius: 0px 0px 0.1875em 0.1875em; -} -.ui.vertical.menu .item > .label { - float: right; - text-align: center; -} -.ui.vertical.menu .item > i.icon { - float: right; - width: 1.22em; - margin: 0em 0em 0em 0.5em; -} -.ui.vertical.menu .item > .label + i.icon { - float: none; - margin: 0em 0.25em 0em 0em; -} -/*--- Border ---*/ -.ui.vertical.menu .item:before { - position: absolute; - content: ''; - top: 0%; - left: 0px; - width: 100%; - height: 1px; - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); - background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.03)), color-stop(1.5em, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.03))); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); -} -.ui.vertical.menu .item:first-child:before { - background-image: none !important; -} -/*--- Dropdown ---*/ -.ui.vertical.menu .dropdown.item > i { - float: right; - content: "\f0da"; -} -.ui.vertical.menu .dropdown.item .menu { - top: 0% !important; - left: 100%; - margin: 0px 0px 0px 1px; - -webkit-box-shadow: 0 0px 1px 1px #DDDDDD; - box-shadow: 0 0px 1px 1px #DDDDDD; -} -.ui.vertical.menu .dropdown.item.active { - border-top-right-radius: 0em; - border-bottom-right-radius: 0em; -} -.ui.vertical.menu .dropdown.item .menu .item { - font-size: 1rem; -} -.ui.vertical.menu .dropdown.item .menu .item i.icon { - margin-right: 0em; -} -.ui.vertical.menu .dropdown.item.active { - -webkit-box-shadow: none; - box-shadow: none; -} -/*--- Sub Menu ---*/ -.ui.vertical.menu .item > .menu { - margin: 0.5em -0.95em 0em; -} -.ui.vertical.menu .item > .menu > .item { - padding: 0.5rem 1.5rem; - font-size: 0.875em; -} -.ui.vertical.menu .item > .menu > .item:before { - display: none; -} -/*-------------- - Tiered ----------------*/ -.ui.tiered.menu > .sub.menu > .item { - color: rgba(0, 0, 0, 0.4); -} -.ui.tiered.menu > .menu > .item:hover { - color: rgba(0, 0, 0, 0.8); -} -.ui.tiered.menu .item.active { - color: rgba(0, 0, 0, 0.8); -} -.ui.tiered.menu > .menu .item.active:after { - position: absolute; - content: ''; - margin-top: -1px; - top: 100%; - left: 0px; - width: 100%; - height: 2px; - background-color: #FBFBFB; -} -.ui.tiered.menu .sub.menu { - background-color: rgba(0, 0, 0, 0.01); - border-radius: 0em; - border-top: 1px solid rgba(0, 0, 0, 0.1); - -webkit-box-shadow: none; - box-shadow: none; - color: #FFFFFF; -} -.ui.tiered.menu .sub.menu .item { - font-size: 0.875rem; -} -.ui.tiered.menu .sub.menu .item:before { - background-image: none; -} -.ui.tiered.menu .sub.menu .active.item { - padding-top: 0.83em; - background-color: transparent; - border-radius: 0 0 0 0; - border-top: medium none; - -webkit-box-shadow: none; - box-shadow: none; - color: rgba(0, 0, 0, 0.7) !important; -} -.ui.tiered.menu .sub.menu .active.item:after { - display: none; -} -/* Inverted */ -.ui.inverted.tiered.menu > .menu > .item { - color: rgba(255, 255, 255, 0.5); -} -.ui.inverted.tiered.menu .sub.menu { - background-color: rgba(0, 0, 0, 0.2); -} -.ui.inverted.tiered.menu .sub.menu .item { - color: rgba(255, 255, 255, 0.6); -} -.ui.inverted.tiered.menu > .menu > .item:hover { - color: rgba(255, 255, 255, 0.9); -} -.ui.inverted.tiered.menu .active.item:after { - display: none; -} -.ui.inverted.tiered.menu > .sub.menu > .active.item, -.ui.inverted.tiered.menu > .menu > .active.item { - color: #ffffff !important; - -webkit-box-shadow: none; - box-shadow: none; -} -/* Tiered pointing */ -.ui.pointing.tiered.menu > .menu > .item:after { - display: none; -} -.ui.pointing.tiered.menu > .sub.menu > .item:after { - display: block; -} -/*-------------- - Tabular ----------------*/ -.ui.tabular.menu { - background-color: transparent; - border-bottom: 1px solid #DCDDDE; - border-radius: 0em; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.ui.tabular.menu .item { - background-color: transparent; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-top: 1px solid transparent; - padding-left: 1.4em; - padding-right: 1.4em; - color: rgba(0, 0, 0, 0.6); -} -.ui.tabular.menu .item:before { - display: none; -} -/* Hover */ -.ui.tabular.menu .item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.8); -} -/* Active */ -.ui.tabular.menu .active.item { - position: relative; - background-color: #FFFFFF; - color: rgba(0, 0, 0, 0.8); - border-color: #DCDDDE; - font-weight: bold; - margin-bottom: -1px; - border-bottom: 1px solid #FFFFFF; - -webkit-box-shadow: none; - box-shadow: none; - border-radius: 5px 5px 0 0; -} -/* Coupling with segment for attachment */ -.ui.attached.tabular.menu { - position: relative; - z-index: 2; -} -.ui.tabular.menu ~ .bottom.attached.segment { - margin: 1px 0px 0px 1px; -} -/*-------------- - Pagination ----------------*/ -.ui.pagination.menu { - margin: 0em; - display: inline-block; - vertical-align: middle; -} -.ui.pagination.menu .item { - min-width: 3em; - text-align: center; -} -.ui.pagination.menu .icon.item i.icon { - vertical-align: top; -} -.ui.pagination.menu.floated { - display: block; -} -/* active */ -.ui.pagination.menu .active.item { - border-top: none; - padding-top: 0.83em; - background-color: rgba(0, 0, 0, 0.05); - -webkit-box-shadow: none; - box-shadow: none; -} -/*-------------- - Secondary ----------------*/ -.ui.secondary.menu { - background-color: transparent; - border-radius: 0px; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.secondary.menu > .menu > .item, -.ui.secondary.menu > .item { - -webkit-box-shadow: none; - box-shadow: none; - border: none; - height: auto !important; - margin: 0em 0.25em; - padding: 0.5em 1em; - border-radius: 0.3125em; -} -.ui.secondary.menu > .menu > .item:before, -.ui.secondary.menu > .item:before { - display: none !important; -} -.ui.secondary.menu .item > .input input { - background-color: transparent; - border: none; -} -.ui.secondary.menu .link.item, -.ui.secondary.menu a.item { - opacity: 0.8; - -webkit-transition: none; - -moz-transition: none; - transition: none; -} -.ui.secondary.menu .header.item { - border-right: 0.1em solid rgba(0, 0, 0, 0.1); - background-color: transparent; - border-radius: 0em; -} -/* hover */ -.ui.secondary.menu .link.item:hover, -.ui.secondary.menu a.item:hover { - opacity: 1; -} -/* active */ -.ui.secondary.menu > .menu > .active.item, -.ui.secondary.menu > .active.item { - background-color: rgba(0, 0, 0, 0.08); - opacity: 1; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.secondary.vertical.menu > .active.item { - border-radius: 0.3125em; -} -/* inverted */ -.ui.secondary.inverted.menu .link.item, -.ui.secondary.inverted.menu a.item { - color: rgba(255, 255, 255, 0.5); -} -.ui.secondary.inverted.menu .link.item:hover, -.ui.secondary.inverted.menu a.item:hover { - color: rgba(255, 255, 255, 0.9); -} -.ui.secondary.inverted.menu .active.item { - background-color: rgba(255, 255, 255, 0.1); -} -/* disable variations */ -.ui.secondary.item.menu > .item { - margin: 0em; -} -.ui.secondary.attached.menu { - -webkit-box-shadow: none; - box-shadow: none; -} -/*--------------------- - Secondary Pointing ------------------------*/ -.ui.secondary.pointing.menu { - border-bottom: 3px solid rgba(0, 0, 0, 0.1); -} -.ui.secondary.pointing.menu > .menu > .item, -.ui.secondary.pointing.menu > .item { - margin: 0em 0em -3px; - padding: 0.6em 0.95em; - border-bottom: 3px solid rgba(0, 0, 0, 0); - border-radius: 0em; - -webkit-transition: color 0.2s - ; - -moz-transition: color 0.2s - ; - transition: color 0.2s - ; -} -/* Item Types */ -.ui.secondary.pointing.menu .header.item { - margin-bottom: -3px; - background-color: transparent !important; - border-right-width: 0px !important; - font-weight: bold !important; - color: rgba(0, 0, 0, 0.8) !important; -} -.ui.secondary.pointing.menu .text.item { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.ui.secondary.pointing.menu > .menu > .item:after, -.ui.secondary.pointing.menu > .item:after { - display: none; -} -/* Hover */ -.ui.secondary.pointing.menu > .menu > .link.item:hover, -.ui.secondary.pointing.menu > .link.item:hover, -.ui.secondary.pointing.menu > .menu > a.item:hover, -.ui.secondary.pointing.menu > a.item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.7); -} -/* Down */ -.ui.secondary.pointing.menu > .menu > .link.item:active, -.ui.secondary.pointing.menu > .link.item:active, -.ui.secondary.pointing.menu > .menu > a.item:active, -.ui.secondary.pointing.menu > a.item:active { - background-color: transparent; - border-color: rgba(0, 0, 0, 0.2); -} -/* Active */ -.ui.secondary.pointing.menu > .menu > .item.active, -.ui.secondary.pointing.menu > .item.active { - background-color: transparent; - border-color: rgba(0, 0, 0, 0.4); - -webkit-box-shadow: none; - box-shadow: none; -} -/*--------------------- - Secondary Vertical ------------------------*/ -.ui.secondary.vertical.pointing.menu { - border: none; - border-right: 3px solid rgba(0, 0, 0, 0.1); -} -.ui.secondary.vertical.menu > .item { - border: none; - margin: 0em 0em 0.3em; - padding: 0.6em 0.8em; - border-radius: 0.1875em; -} -.ui.secondary.vertical.menu > .header.item { - border-radius: 0em; -} -.ui.secondary.vertical.pointing.menu > .item { - margin: 0em -3px 0em 0em; - border-bottom: none; - border-right: 3px solid transparent; - border-radius: 0em; -} -/* Hover */ -.ui.secondary.vertical.pointing.menu > .item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.7); -} -/* Down */ -.ui.secondary.vertical.pointing.menu > .item:active { - background-color: transparent; - border-color: rgba(0, 0, 0, 0.2); -} -/* Active */ -.ui.secondary.vertical.pointing.menu > .item.active { - background-color: transparent; - border-color: rgba(0, 0, 0, 0.4); - color: rgba(0, 0, 0, 0.85); -} -/*-------------- - Inverted ----------------*/ -.ui.secondary.inverted.menu { - background-color: transparent; -} -.ui.secondary.inverted.pointing.menu { - border-bottom: 3px solid rgba(255, 255, 255, 0.1); -} -.ui.secondary.inverted.pointing.menu > .item { - color: rgba(255, 255, 255, 0.7); -} -.ui.secondary.inverted.pointing.menu > .header.item { - color: #FFFFFF !important; -} -/* Hover */ -.ui.secondary.inverted.pointing.menu > .menu > .item:hover, -.ui.secondary.inverted.pointing.menu > .item:hover { - color: rgba(255, 255, 255, 0.85); -} -/* Down */ -.ui.secondary.inverted.pointing.menu > .menu > .item:active, -.ui.secondary.inverted.pointing.menu > .item:active { - border-color: rgba(255, 255, 255, 0.4); -} -/* Active */ -.ui.secondary.inverted.pointing.menu > .menu > .item.active, -.ui.secondary.inverted.pointing.menu > .item.active { - border-color: rgba(255, 255, 255, 0.8); - color: #ffffff; -} -/*--------------------- - Inverted Vertical -----------------------*/ -.ui.secondary.inverted.vertical.pointing.menu { - border-right: 3px solid rgba(255, 255, 255, 0.1); - border-bottom: none; -} -/*-------------- - Text Menu ----------------*/ -.ui.text.menu { - background-color: transparent; - margin: 1rem -1rem; - border-radius: 0px; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.text.menu > .item { - opacity: 0.8; - margin: 0em 1em; - padding: 0em; - height: auto !important; - border-radius: 0px; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: opacity 0.2s ease - ; - -moz-transition: opacity 0.2s ease - ; - transition: opacity 0.2s ease - ; -} -.ui.text.menu > .item:before { - display: none !important; -} -.ui.text.menu .header.item { - background-color: transparent; - opacity: 1; - color: rgba(50, 50, 50, 0.8); - font-size: 0.875rem; - padding: 0em; - text-transform: uppercase; - font-weight: bold; -} -/*--- fluid text ---*/ -.ui.text.item.menu .item { - margin: 0em; -} -/*--- vertical text ---*/ -.ui.vertical.text.menu { - margin: 1rem 0em; -} -.ui.vertical.text.menu:first-child { - margin-top: 0rem; -} -.ui.vertical.text.menu:last-child { - margin-bottom: 0rem; -} -.ui.vertical.text.menu .item { - float: left; - clear: left; - margin: 0.5em 0em; -} -.ui.vertical.text.menu .item > i.icon { - float: none; - margin: 0em 0.83em 0em 0em; -} -.ui.vertical.text.menu .header.item { - margin: 0.8em 0em; -} -/*--- hover ---*/ -.ui.text.menu .item:hover { - opacity: 1; - background-color: transparent; -} -/*--- active ---*/ -.ui.text.menu .active.item { - background-color: transparent; - padding: 0em; - border: none; - opacity: 1; - font-weight: bold; - -webkit-box-shadow: none; - box-shadow: none; -} -/* disable variations */ -.ui.text.pointing.menu .active.item:after { - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.text.attached.menu { - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.text.menu, -.ui.inverted.text.menu .item, -.ui.inverted.text.menu .item:hover, -.ui.inverted.text.menu .item.active { - background-color: transparent; -} -/*-------------- - Icon Only ----------------*/ -.ui.icon.menu, -.ui.vertical.icon.menu { - width: auto; - display: inline-block; - height: auto; -} -.ui.icon.menu > .item { - height: auto; - text-align: center; - color: rgba(60, 60, 60, 0.7); -} -.ui.icon.menu > .item > .icon { - display: block; - float: none !important; - opacity: 1; - margin: 0em auto !important; -} -.ui.icon.menu .icon:before { - opacity: 1; -} -/* Item Icon Only */ -.ui.menu .icon.item .icon { - margin: 0em; -} -.ui.vertical.icon.menu { - float: none; -} -/*--- inverted ---*/ -.ui.inverted.icon.menu .item { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.icon.menu .icon { - color: #ffffff; -} -/*-------------- - Labeled Icon ----------------*/ -.ui.labeled.icon.menu { - text-align: center; -} -.ui.labeled.icon.menu > .item > .icon { - display: block; - font-size: 1.5em !important; - margin: 0em auto 0.3em !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Colors ----------------*/ -/*--- Light Colors ---*/ -.ui.menu .green.active.item, -.ui.green.menu .active.item { - border-color: #A1CF64 !important; - color: #A1CF64 !important; -} -.ui.menu .red.active.item, -.ui.red.menu .active.item { - border-color: #D95C5C !important; - color: #D95C5C !important; -} -.ui.menu .blue.active.item, -.ui.blue.menu .active.item { - border-color: #6ECFF5 !important; - color: #6ECFF5 !important; -} -.ui.menu .purple.active.item, -.ui.purple.menu .active.item { - border-color: #564F8A !important; - color: #564F8A !important; -} -.ui.menu .orange.active.item, -.ui.orange.menu .active.item { - border-color: #F05940 !important; - color: #F05940 !important; -} -.ui.menu .teal.active.item, -.ui.teal.menu .active.item { - border-color: #00B5AD !important; - color: #00B5AD !important; -} -/*-------------- - Inverted ----------------*/ -.ui.inverted.menu { - background-color: #333333; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.menu .header.item { - margin: 0em; - background-color: rgba(0, 0, 0, 0.3); - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.menu .item, -.ui.inverted.menu .item > a { - color: #FFFFFF; -} -.ui.inverted.menu .item .item, -.ui.inverted.menu .item .item > a { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.menu .dropdown .menu .item, -.ui.inverted.menu .dropdown .menu .item a { - color: rgba(0, 0, 0, 0.75) !important; -} -.ui.inverted.menu .item.disabled, -.ui.inverted.menu .item.disabled:hover { - color: rgba(255, 255, 255, 0.2); -} -/*--- Border ---*/ -.ui.inverted.menu .item:before { - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); - background-image: linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); -} -.ui.vertical.inverted.menu .item:before { - background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); - background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); - background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); - background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); -} -/*--- Hover ---*/ -.ui.link.inverted.menu .item:hover, -.ui.inverted.menu .link.item:hover, -.ui.inverted.menu a.item:hover, -.ui.inverted.menu .dropdown.item:hover { - background-color: rgba(255, 255, 255, 0.1); -} -.ui.inverted.menu a.item:hover, -.ui.inverted.menu .item > a:hover, -.ui.inverted.menu .item .menu a.item:hover, -.ui.inverted.menu .item .menu .link.item:hover { - color: #ffffff; -} -/*--- Down ---*/ -.ui.inverted.menu a.item:active, -.ui.inverted.menu .dropdown.item:active, -.ui.inverted.menu .link.item:active, -.ui.inverted.menu a.item:active { - background-color: rgba(255, 255, 255, 0.15); -} -/*--- Active ---*/ -.ui.inverted.menu .active.item { - -webkit-box-shadow: none !important; - box-shadow: none !important; - background-color: rgba(255, 255, 255, 0.2); -} -.ui.inverted.menu .active.item, -.ui.inverted.menu .active.item a { - color: #ffffff !important; -} -.ui.inverted.vertical.menu .item .menu .active.item { - background-color: rgba(255, 255, 255, 0.2); - color: #ffffff; -} -/*--- Pointers ---*/ -.ui.inverted.pointing.menu .active.item:after { - background-color: #5B5B5B; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.pointing.menu .active.item:hover:after { - background-color: #4A4A4A; -} -/*-------------- - Selection ----------------*/ -.ui.selection.menu > .item { - color: rgba(0, 0, 0, 0.4); -} -.ui.selection.menu > .item:hover { - color: rgba(0, 0, 0, 0.6); -} -.ui.selection.menu > .item.active { - color: rgba(0, 0, 0, 0.85); -} -.ui.inverted.selection.menu > .item { - color: rgba(255, 255, 255, 0.4); -} -.ui.inverted.selection.menu > .item:hover { - color: rgba(255, 255, 255, 0.9); -} -.ui.inverted.selection.menu > .item.active { - color: #FFFFFF; -} -/*-------------- - Floated ----------------*/ -.ui.floated.menu { - float: left; - margin: 0rem 0.5rem 0rem 0rem; -} -.ui.right.floated.menu { - float: right; - margin: 0rem 0rem 0rem 0.5rem; -} -/*-------------- - Inverted Colors ----------------*/ -/*--- Light Colors ---*/ -.ui.grey.menu { - background-color: #F0F0F0; -} -/*--- Inverted Colors ---*/ -.ui.inverted.green.menu { - background-color: #A1CF64; -} -.ui.inverted.green.pointing.menu .active.item:after { - background-color: #A1CF64; -} -.ui.inverted.red.menu { - background-color: #D95C5C; -} -.ui.inverted.red.pointing.menu .active.item:after { - background-color: #F16883; -} -.ui.inverted.blue.menu { - background-color: #6ECFF5; -} -.ui.inverted.blue.pointing.menu .active.item:after { - background-color: #6ECFF5; -} -.ui.inverted.purple.menu { - background-color: #564F8A; -} -.ui.inverted.purple.pointing.menu .active.item:after { - background-color: #564F8A; -} -.ui.inverted.orange.menu { - background-color: #F05940; -} -.ui.inverted.orange.pointing.menu .active.item:after { - background-color: #F05940; -} -.ui.inverted.teal.menu { - background-color: #00B5AD; -} -.ui.inverted.teal.pointing.menu .active.item:after { - background-color: #00B5AD; -} -/*-------------- - Fitted ----------------*/ -.ui.fitted.menu .item, -.ui.fitted.menu .item .menu .item, -.ui.menu .fitted.item { - padding: 0em; -} -.ui.horizontally.fitted.menu .item, -.ui.horizontally.fitted.menu .item .menu .item, -.ui.menu .horizontally.fitted.item { - padding-top: 0.83em; - padding-bottom: 0.83em; -} -.ui.vertically.fitted.menu .item, -.ui.vertically.fitted.menu .item .menu .item, -.ui.menu .vertically.fitted.item { - padding-left: 0.95em; - padding-right: 0.95em; -} -/*-------------- - Borderless ----------------*/ -.ui.borderless.menu .item:before, -.ui.borderless.menu .item .menu .item:before, -.ui.menu .borderless.item:before { - background-image: none; -} -/*------------------- - Compact ---------------------*/ -.ui.compact.menu { - display: inline-block; - margin: 0em; - vertical-align: middle; -} -.ui.compact.vertical.menu { - width: auto !important; -} -.ui.compact.vertical.menu .item:last-child::before { - display: block; -} -/*------------------- - Fluid ---------------------*/ -.ui.menu.fluid, -.ui.vertical.menu.fluid { - display: block; - width: 100% !important; -} -/*------------------- - Evenly Sized ---------------------*/ -.ui.item.menu, -.ui.item.menu .item { - width: 100%; - padding-left: 0px !important; - padding-right: 0px !important; - text-align: center; -} -.ui.menu.two.item .item { - width: 50%; -} -.ui.menu.three.item .item { - width: 33.333%; -} -.ui.menu.four.item .item { - width: 25%; -} -.ui.menu.five.item .item { - width: 20%; -} -.ui.menu.six.item .item { - width: 16.666%; -} -.ui.menu.seven.item .item { - width: 14.285%; -} -.ui.menu.eight.item .item { - width: 12.500%; -} -.ui.menu.nine.item .item { - width: 11.11%; -} -.ui.menu.ten.item .item { - width: 10.0%; -} -.ui.menu.eleven.item .item { - width: 9.09%; -} -.ui.menu.twelve.item .item { - width: 8.333%; -} -/*-------------- - Fixed ----------------*/ -.ui.menu.fixed { - position: fixed; - z-index: 999; - margin: 0em; - border: none; - width: 100%; -} -.ui.menu.fixed, -.ui.menu.fixed .item:first-child, -.ui.menu.fixed .item:last-child { - border-radius: 0px !important; -} -.ui.menu.fixed.top { - top: 0px; - left: 0px; - right: auto; - bottom: auto; -} -.ui.menu.fixed.right { - top: 0px; - right: 0px; - left: auto; - bottom: auto; - width: auto; - height: 100%; -} -.ui.menu.fixed.bottom { - bottom: 0px; - left: 0px; - top: auto; - right: auto; -} -.ui.menu.fixed.left { - top: 0px; - left: 0px; - right: auto; - bottom: auto; - width: auto; - height: 100%; -} -/* Coupling with Grid */ -.ui.fixed.menu + .ui.grid { - padding-top: 2.75rem; -} -/*------------------- - Pointing ---------------------*/ -.ui.pointing.menu .active.item:after { - position: absolute; - bottom: -0.3em; - left: 50%; - content: ""; - margin-left: -0.3em; - width: 0.6em; - height: 0.6em; - border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - border-right: 1px solid rgba(0, 0, 0, 0.1); - background-image: none; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - z-index: 2; - -webkit-transition: background 0.2s ease - ; - -moz-transition: background 0.2s ease - ; - transition: background 0.2s ease - ; -} -/* Don't double up pointers */ -.ui.pointing.menu .active.item .menu .active.item:after { - display: none; -} -.ui.vertical.pointing.menu .active.item:after { - position: absolute; - top: 50%; - margin-top: -0.3em; - right: -0.4em; - bottom: auto; - left: auto; - border: none; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-right: 1px solid rgba(0, 0, 0, 0.1); -} -/* Colors */ -.ui.pointing.menu .active.item:after { - background-color: #FCFCFC; -} -.ui.pointing.menu .active.item:hover:after { - background-color: #FAFAFA; -} -.ui.vertical.pointing.menu .menu .active.item:after { - background-color: #F4F4F4; -} -.ui.pointing.menu a.active.item:active:after { - background-color: #F0F0F0; -} -/*-------------- - Attached ----------------*/ -.ui.menu.attached { - margin: 0rem; - border-radius: 0px; - /* avoid rgba multiplying */ - -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; - box-shadow: 0px 0px 0px 1px #DDDDDD; -} -.ui.top.attached.menu { - border-radius: 0.1875em 0.1875em 0px 0px; -} -.ui.menu.bottom.attached { - border-radius: 0px 0px 0.1875em 0.1875em; -} -/*-------------- - Sizes ----------------*/ -.ui.small.menu .item { - font-size: 0.875rem; -} -.ui.small.vertical.menu { - width: 13rem; -} -.ui.menu .item { - font-size: 1rem; -} -.ui.vertical.menu { - width: 15rem; -} -.ui.large.menu .item { - font-size: 1.125rem; -} -.ui.large.menu .item .item { - font-size: 0.875rem; -} -.ui.large.menu .dropdown .item { - font-size: 1rem; -} -.ui.large.vertical.menu { - width: 18rem; -} - -/* - * # Semantic - Message - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Message -*******************************/ -.ui.message { - position: relative; - min-height: 18px; - margin: 1em 0em; - height: auto; - background-color: #EFEFEF; - padding: 1em; - line-height: 1.33; - color: rgba(0, 0, 0, 0.6); - -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease; - -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; - transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - border-radius: 0.325em 0.325em 0.325em 0.325em; -} -.ui.message:first-child { - margin-top: 0em; -} -.ui.message:last-child { - margin-bottom: 0em; -} -/*-------------- - Content ----------------*/ -/* block with headers */ -.ui.message .header { - margin: 0em; - font-size: 1.33em; - font-weight: bold; -} -/* block with paragraphs */ -.ui.message p { - opacity: 0.85; - margin: 1em 0em; -} -.ui.message p:first-child { - margin-top: 0em; -} -.ui.message p:last-child { - margin-bottom: 0em; -} -.ui.message .header + p { - margin-top: 0.3em; -} -.ui.message > :first-child { - margin-top: 0em; -} -.ui.message > :last-child { - margin-bottom: 0em; -} -/* block with child list */ -.ui.message ul.list { - opacity: 0.85; - list-style-position: inside; - margin: 0.2em 0em; - padding: 0em; -} -.ui.message ul.list li { - position: relative; - list-style-type: none; - margin: 0em 0em 0.3em 1em; - padding: 0em; -} -.ui.message ul.list li:before { - position: absolute; - content: '\2022'; - top: -0.05em; - left: -0.8em; - height: 100%; - vertical-align: baseline; - opacity: 0.5; -} -.ui.message ul.list li:first-child { - margin-top: 0em; -} -/* dismissable block */ -.ui.message > .close.icon { - cursor: pointer; - position: absolute; - right: 0em; - top: 0em; - width: 2.5em; - height: 2.5em; - opacity: 0.7; - padding: 0.75em 0em 0em 0.75em; - z-index: 2; - -webkit-transition: opacity 0.1s linear - ; - -moz-transition: opacity 0.1s linear - ; - transition: opacity 0.1s linear - ; - z-index: 10; -} -.ui.message > .close.icon:hover { - opacity: 1; -} -/******************************* - States -*******************************/ -.ui.message.visible { - display: block !important; -} -.ui.icon.message.animating, -.ui.icon.message.visible { - display: table !important; -} -.ui.message.hidden { - display: none !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Compact ----------------*/ -.ui.compact.message { - display: inline-block; -} -/*-------------- - Attached ----------------*/ -.ui.attached.message { - margin-left: -1px; - margin-right: -1px; - margin-bottom: -1px; - border-radius: 0.325em 0.325em 0em 0em; - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; -} -.ui.attached + .ui.attached.message:not(.top):not(.bottom) { - margin-top: -1px; - border-radius: 0em; -} -.ui.bottom.attached.message { - margin-top: -1px; - border-radius: 0em 0em 0.325em 0.325em; -} -.ui.bottom.attached.message:not(:last-child) { - margin-bottom: 1em; -} -.ui.attached.icon.message { - display: block; - width: auto; -} -/*-------------- - Icon ----------------*/ -.ui.icon.message { - display: table; - width: 100%; -} -.ui.icon.message > .icon:not(.close) { - display: table-cell; - vertical-align: middle; - font-size: 3.8em; - opacity: 0.5; -} -.ui.icon.message > .icon + .content { - padding-left: 1em; -} -.ui.icon.message > .content { - display: table-cell; - vertical-align: middle; -} -/*-------------- - Inverted ----------------*/ -.ui.inverted.message { - background-color: rgba(255, 255, 255, 0.05); - color: rgba(255, 255, 255, 0.95); -} -/*-------------- - Floating ----------------*/ -.ui.floating.message { - -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; -} -/*-------------- - Colors ----------------*/ -.ui.black.message { - background-color: #333333; - color: rgba(255, 255, 255, 0.95); -} -/*-------------- - Types ----------------*/ -.ui.blue.message, -.ui.info.message { - background-color: #E6F4F9; - color: #4D8796; -} -/* Green Text Block */ -.ui.green.message { - background-color: #DEFCD5; - color: #52A954; -} -/* Yellow Text Block */ -.ui.yellow.message, -.ui.warning.message { - background-color: #F6F3D5; - color: #96904D; -} -/* Red Text Block */ -.ui.red.message { - background-color: #F1D7D7; - color: #A95252; -} -/* Success Text Block */ -.ui.success.message, -.ui.positive.message { - background-color: #DEFCD5; - color: #52A954; -} -/* Error Text Block */ -.ui.error.message, -.ui.negative.message { - background-color: #F1D7D7; - color: #A95252; -} -/*-------------- - Sizes ----------------*/ -.ui.small.message { - font-size: 0.875em; -} -.ui.message { - font-size: 1em; -} -.ui.large.message { - font-size: 1.125em; -} -.ui.huge.message { - font-size: 1.5em; -} -.ui.massive.message { - font-size: 2em; -} - -/* - * # Semantic - Table - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Table -*******************************/ -/* Prototype */ -.ui.table { - width: 100%; - border-collapse: collapse; -} -/* Table Content */ -.ui.table th, -.ui.table tr, -.ui.table td { - border-collapse: collapse; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: all 0.1s ease-out; - -moz-transition: all 0.1s ease-out; - transition: all 0.1s ease-out; -} -/* Headers */ -.ui.table thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.03); -} -.ui.table tfoot th { - background-color: rgba(0, 0, 0, 0.03); -} -.ui.table th { - cursor: auto; - background-color: rgba(0, 0, 0, 0.05); - text-align: left; - color: rgba(0, 0, 0, 0.8); - padding: 0.5em 0.7em; - vertical-align: middle; -} -.ui.table thead th:first-child { - border-radius: 5px 0px 0px 0px; -} -.ui.table thead th:last-child { - border-radius: 0px 5px 0px 0px; -} -.ui.table tfoot th:first-child { - border-radius: 0px 0px 0px 5px; -} -.ui.table tfoot th:last-child { - border-radius: 0px 0px 5px 0px; -} -.ui.table tfoot th:only-child { - border-radius: 0px 0px 5px 5px; -} -/* Table Cells */ -.ui.table td { - padding: 0.40em 0.7em; - vertical-align: middle; -} -/* Footer */ -.ui.table tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.03); -} -.ui.table tfoot th { - font-weight: normal; - font-style: italic; -} -/* Table Striping */ -.ui.table tbody tr:nth-child(2n) { - background-color: rgba(0, 0, 50, 0.02); -} -/* Icons */ -.ui.table > .icon { - vertical-align: baseline; -} -.ui.table > .icon:only-child { - margin: 0em; -} -/* Table Segment */ -.ui.table.segment:after { - display: none; -} -.ui.table.segment.stacked:after { - display: block; -} -/* Responsive */ -@media only screen and (max-width: 768px) { - .ui.table { - display: block; - padding: 0em; - } - .ui.table thead, - .ui.table tfoot { - display: none; - } - .ui.table tbody { - display: block; - } - .ui.table tr { - display: block; - } - .ui.table tr > td { - width: 100% !important; - display: block; - border: none !important; - padding: 0.25em 0.75em; - -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; - box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; - } - .ui.table td:first-child { - font-weight: bold; - padding-top: 1em; - } - .ui.table td:last-child { - -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; - box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; - padding-bottom: 1em; - } - /* Clear BG Colors */ - .ui.table tr > td.warning, - .ui.table tr > td.error, - .ui.table tr > td.active, - .ui.table tr > td.positive, - .ui.table tr > td.negative { - background-color: transparent !important; - } -} -/******************************* - States -*******************************/ -/*-------------- - Hover ----------------*/ -/* Sortable */ -.ui.sortable.table th.disabled:hover { - cursor: auto; - text-align: left; - font-weight: bold; - color: #333333; - color: rgba(0, 0, 0, 0.8); -} -.ui.sortable.table thead th:hover { - background-color: rgba(0, 0, 0, 0.13); - color: rgba(0, 0, 0, 0.8); -} -/* Inverted Sortable */ -.ui.inverted.sortable.table thead th:hover { - background-color: rgba(255, 255, 255, 0.13); - color: #ffffff; -} -/*-------------- - Positive ----------------*/ -.ui.table tr.positive, -.ui.table td.positive { - -webkit-box-shadow: 2px 0px 0px #119000 inset; - box-shadow: 2px 0px 0px #119000 inset; -} -.ui.table tr.positive td, -.ui.table td.positive { - background-color: #F2F8F0 !important; - color: #119000 !important; -} -.ui.celled.table tr.positive:hover td, -.ui.celled.table tr:hover td.positive, -.ui.table tr.positive:hover td, -.ui.table td:hover.positive, -.ui.table th:hover.positive { - background-color: #ECF5E9 !important; - color: #119000 !important; -} -/*-------------- - Negative ----------------*/ -.ui.table tr.negative, -.ui.table td.negative { - -webkit-box-shadow: 2px 0px 0px #CD2929 inset; - box-shadow: 2px 0px 0px #CD2929 inset; -} -.ui.table tr.negative td, -.ui.table td.negative { - background-color: #F9F4F4; - color: #CD2929 !important; -} -.ui.celled.table tr.negative:hover td, -.ui.celled.table tr:hover td.negative, -.ui.table tr.negative:hover td, -.ui.table td:hover.negative, -.ui.table th:hover.negative { - background-color: #F2E8E8; - color: #CD2929; -} -/*-------------- - Error ----------------*/ -.ui.table tr.error, -.ui.table td.error { - -webkit-box-shadow: 2px 0px 0px #CD2929 inset; - box-shadow: 2px 0px 0px #CD2929 inset; -} -.ui.table tr.error td, -.ui.table td.error, -.ui.table th.error { - background-color: #F9F4F4; - color: #CD2929; -} -.ui.celled.table tr.error:hover td, -.ui.celled.table tr:hover td.error, -.ui.table tr.error:hover td, -.ui.table td:hover.error, -.ui.table th:hover.error { - background-color: #F2E8E8; - color: #CD2929; -} -/*-------------- - Warning ----------------*/ -.ui.table tr.warning, -.ui.table td.warning { - -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; - box-shadow: 2px 0px 0px #7D6C00 inset; -} -.ui.table tr.warning td, -.ui.table td.warning, -.ui.table th.warning { - background-color: #FBF6E9; - color: #7D6C00; -} -.ui.celled.table tr.warning:hover td, -.ui.celled.table tr:hover td.warning, -.ui.table tr.warning:hover td, -.ui.table td:hover.warning, -.ui.table th:hover.warning { - background-color: #F3EDDC; - color: #7D6C00; -} -/*-------------- - Active ----------------*/ -.ui.table tr.active, -.ui.table td.active { - -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; - box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; -} -.ui.table tr.active td, -.ui.table tr td.active { - background-color: #E0E0E0; - color: rgba(50, 50, 50, 0.9); - /* border-color: rgba(0, 0, 0, 0.15) !important; */ -} -/*-------------- - Disabled ----------------*/ -.ui.table tr.disabled td, -.ui.table tr td.disabled, -.ui.table tr.disabled:hover td, -.ui.table tr:hover td.disabled { - color: rgba(150, 150, 150, 0.3); -} -/******************************* - Variations -*******************************/ -/*-------------- - Column Count ----------------*/ -.ui.two.column.table td { - width: 50%; -} -.ui.three.column.table td { - width: 33.3333%; -} -.ui.four.column.table td { - width: 25%; -} -.ui.five.column.table td { - width: 20%; -} -.ui.six.column.table td { - width: 16.66667%; -} -.ui.seven.column.table td { - width: 14.2857%; -} -.ui.eight.column.table td { - width: 12.5%; -} -.ui.nine.column.table td { - width: 11.1111%; -} -.ui.ten.column.table td { - width: 10%; -} -.ui.eleven.column.table td { - width: 9.0909%; -} -.ui.twelve.column.table td { - width: 8.3333%; -} -.ui.thirteen.column.table td { - width: 7.6923%; -} -.ui.fourteen.column.table td { - width: 7.1428%; -} -.ui.fifteen.column.table td { - width: 6.6666%; -} -.ui.sixteen.column.table td { - width: 6.25%; -} -/* Column Width */ -.ui.table th.one.wide, -.ui.table td.one.wide { - width: 6.25%; -} -.ui.table th.two.wide, -.ui.table td.two.wide { - width: 12.5%; -} -.ui.table th.three.wide, -.ui.table td.three.wide { - width: 18.75%; -} -.ui.table th.four.wide, -.ui.table td.four.wide { - width: 25%; -} -.ui.table th.five.wide, -.ui.table td.five.wide { - width: 31.25%; -} -.ui.table th.six.wide, -.ui.table td.six.wide { - width: 37.5%; -} -.ui.table th.seven.wide, -.ui.table td.seven.wide { - width: 43.75%; -} -.ui.table th.eight.wide, -.ui.table td.eight.wide { - width: 50%; -} -.ui.table th.nine.wide, -.ui.table td.nine.wide { - width: 56.25%; -} -.ui.table th.ten.wide, -.ui.table td.ten.wide { - width: 62.5%; -} -.ui.table th.eleven.wide, -.ui.table td.eleven.wide { - width: 68.75%; -} -.ui.table th.twelve.wide, -.ui.table td.twelve.wide { - width: 75%; -} -.ui.table th.thirteen.wide, -.ui.table td.thirteen.wide { - width: 81.25%; -} -.ui.table th.fourteen.wide, -.ui.table td.fourteen.wide { - width: 87.5%; -} -.ui.table th.fifteen.wide, -.ui.table td.fifteen.wide { - width: 93.75%; -} -.ui.table th.sixteen.wide, -.ui.table td.sixteen.wide { - width: 100%; -} -/*-------------- - Celled ----------------*/ -.ui.celled.table { - color: rgba(0, 0, 0, 0.8); -} -.ui.celled.table tbody tr, -.ui.celled.table tfoot tr { - border: none; -} -.ui.celled.table th, -.ui.celled.table td { - border: 1px solid rgba(0, 0, 0, 0.1); -} -/* Coupling with segment */ -.ui.celled.table.segment th:first-child, -.ui.celled.table.segment td:first-child { - border-left: none; -} -.ui.celled.table.segment th:last-child, -.ui.celled.table.segment td:last-child { - border-right: none; -} -/*-------------- - Sortable ----------------*/ -.ui.sortable.table thead th { - cursor: pointer; - white-space: nowrap; -} -.ui.sortable.table thead th.sorted, -.ui.sortable.table thead th.sorted:hover { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.ui.sortable.table thead th:after { - display: inline-block; - content: ''; - width: 1em; - opacity: 0.8; - margin: 0em 0em 0em 0.5em; - font-family: 'Icons'; - font-style: normal; - font-weight: normal; - text-decoration: inherit; -} -.ui.sortable.table thead th.ascending:after { - content: '\25b4'; -} -.ui.sortable.table thead th.descending:after { - content: '\25be'; -} -/*-------------- - Inverted ----------------*/ -/* Text Color */ -.ui.inverted.table td { - color: rgba(255, 255, 255, 0.9); -} -.ui.inverted.table th { - background-color: rgba(0, 0, 0, 0.15); - color: rgba(255, 255, 255, 0.9); -} -/* Stripes */ -.ui.inverted.table tbody tr:nth-child(2n) { - background-color: rgba(255, 255, 255, 0.06); -} -/*-------------- - Definition ----------------*/ -.ui.definition.table td:first-child { - font-weight: bold; -} -/*-------------- - Collapsing ----------------*/ -.ui.collapsing.table { - width: auto; -} -/*-------------- - Basic ----------------*/ -.ui.basic.table th { - background-color: transparent; - padding: 0.5em; -} -.ui.basic.table tbody tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.03); -} -.ui.basic.table td { - padding: 0.8em 0.5em; -} -.ui.basic.table tbody tr:nth-child(2n) { - background-color: transparent !important; -} -/*-------------- - Padded ----------------*/ -.ui.padded.table th, -.ui.padded.table td { - padding: 0.8em 1em; -} -.ui.compact.table th { - padding: 0.3em 0.5em; -} -.ui.compact.table td { - padding: 0.2em 0.5em; -} -/*-------------- - Sizes ----------------*/ -/* Small */ -.ui.small.table { - font-size: 0.875em; -} -/* Standard */ -.ui.table { - font-size: 1em; -} -/* Large */ -.ui.large.table { - font-size: 1.1em; -} - -/* - * # Semantic - basic.Icon (Basic) - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Basic Icon -*******************************/ -@font-face { - font-family: 'Basic Icons'; - src: url(../fonts/basic.icons.eot); - src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype'); - font-style: normal; - font-weight: normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; -} -i.basic.icon { - display: inline-block; - opacity: 0.75; - margin: 0em 0.25em 0em 0em; - width: 1.23em; - height: 1em; - font-family: 'Basic Icons'; - font-style: normal; - line-height: 1; - font-weight: normal; - text-decoration: inherit; - text-align: center; - speak: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - font-smoothing: antialiased; -} -/* basic.icons available */ -i.basic.icon.circle.attention:before { - content: '\2757'; -} -/* '❗' */ -i.basic.icon.circle.help:before { - content: '\e704'; -} -/* '' */ -i.basic.icon.circle.info:before { - content: '\e705'; -} -/* '' */ -i.basic.icon.add:before { - content: '\2795'; -} -/* '➕' */ -i.basic.icon.chart:before { - content: '📈'; -} -/* '\1f4c8' */ -i.basic.icon.chart.bar:before { - content: '📊'; -} -/* '\1f4ca' */ -i.basic.icon.chart.pie:before { - content: '\e7a2'; -} -/* '' */ -i.basic.icon.resize.full:before { - content: '\e744'; -} -/* '' */ -i.basic.icon.resize.horizontal:before { - content: '\2b0d'; -} -/* '⬍' */ -i.basic.icon.resize.small:before { - content: '\e746'; -} -/* '' */ -i.basic.icon.resize.vertical:before { - content: '\2b0c'; -} -/* '⬌' */ -i.basic.icon.down:before { - content: '\2193'; -} -/* '↓' */ -i.basic.icon.down.triangle:before { - content: '\25be'; -} -/* '▾' */ -i.basic.icon.down.arrow:before { - content: '\e75c'; -} -/* '' */ -i.basic.icon.left:before { - content: '\2190'; -} -/* '←' */ -i.basic.icon.left.triangle:before { - content: '\25c2'; -} -/* '◂' */ -i.basic.icon.left.arrow:before { - content: '\e75d'; -} -/* '' */ -i.basic.icon.right:before { - content: '\2192'; -} -/* '→' */ -i.basic.icon.right.triangle:before { - content: '\25b8'; -} -/* '▸' */ -i.basic.icon.right.arrow:before { - content: '\e75e'; -} -/* '' */ -i.basic.icon.up:before { - content: '\2191'; -} -/* '↑' */ -i.basic.icon.up.triangle:before { - content: '\25b4'; -} -/* '▴' */ -i.basic.icon.up.arrow:before { - content: '\e75f'; -} -/* '' */ -i.basic.icon.folder:before { - content: '\e810'; -} -/* '' */ -i.basic.icon.open.folder:before { - content: '📂'; -} -/* '\1f4c2' */ -i.basic.icon.globe:before { - content: '𝌍'; -} -/* '\1d30d' */ -i.basic.icon.desk.globe:before { - content: '🌐'; -} -/* '\1f310' */ -i.basic.icon.star:before { - content: '\e801'; -} -/* '' */ -i.basic.icon.star.empty:before { - content: '\e800'; -} -/* '' */ -i.basic.icon.star.half:before { - content: '\e701'; -} -/* '' */ -i.basic.icon.lock:before { - content: '🔒'; -} -/* '\1f512' */ -i.basic.icon.unlock:before { - content: '🔓'; -} -/* '\1f513' */ -i.basic.icon.layout.grid:before { - content: '\e80c'; -} -/* '' */ -i.basic.icon.layout.block:before { - content: '\e708'; -} -/* '' */ -i.basic.icon.layout.list:before { - content: '\e80b'; -} -/* '' */ -i.basic.icon.heart.empty:before { - content: '\2661'; -} -/* '♡' */ -i.basic.icon.heart:before { - content: '\2665'; -} -/* '♥' */ -i.basic.icon.asterisk:before { - content: '\2731'; -} -/* '✱' */ -i.basic.icon.attachment:before { - content: '📎'; -} -/* '\1f4ce' */ -i.basic.icon.attention:before { - content: '\26a0'; -} -/* '⚠' */ -i.basic.icon.trophy:before { - content: '🏉'; -} -/* '\1f3c9' */ -i.basic.icon.barcode:before { - content: '\e792'; -} -/* '' */ -i.basic.icon.cart:before { - content: '\e813'; -} -/* '' */ -i.basic.icon.block:before { - content: '🚫'; -} -/* '\1f6ab' */ -i.basic.icon.book:before { - content: '📖'; -} -i.basic.icon.bookmark:before { - content: '🔖'; -} -/* '\1f516' */ -i.basic.icon.calendar:before { - content: '📅'; -} -/* '\1f4c5' */ -i.basic.icon.cancel:before { - content: '\2716'; -} -/* '✖' */ -i.basic.icon.close:before { - content: '\e80d'; -} -/* '' */ -i.basic.icon.color:before { - content: '\e794'; -} -/* '' */ -i.basic.icon.chat:before { - content: '\e720'; -} -/* '' */ -i.basic.icon.check:before { - content: '\2611'; -} -/* '☑' */ -i.basic.icon.time:before { - content: '🕔'; -} -/* '\1f554' */ -i.basic.icon.cloud:before { - content: '\2601'; -} -/* '☁' */ -i.basic.icon.code:before { - content: '\e714'; -} -/* '' */ -i.basic.icon.email:before { - content: '\40'; -} -/* '@' */ -i.basic.icon.settings:before { - content: '\26ef'; -} -/* '⛯' */ -i.basic.icon.setting:before { - content: '\2699'; -} -/* '⚙' */ -i.basic.icon.comment:before { - content: '\e802'; -} -/* '' */ -i.basic.icon.clockwise.counter:before { - content: '\27f2'; -} -/* '⟲' */ -i.basic.icon.clockwise:before { - content: '\27f3'; -} -/* '⟳' */ -i.basic.icon.cube:before { - content: '\e807'; -} -/* '' */ -i.basic.icon.direction:before { - content: '\27a2'; -} -/* '➢' */ -i.basic.icon.doc:before { - content: '📄'; -} -/* '\1f4c4' */ -i.basic.icon.docs:before { - content: '\e736'; -} -/* '' */ -i.basic.icon.dollar:before { - content: '💵'; -} -/* '\1f4b5' */ -i.basic.icon.paint:before { - content: '\e7b5'; -} -/* '' */ -i.basic.icon.edit:before { - content: '\270d'; -} -/* '✍' */ -i.basic.icon.eject:before { - content: '\2ecf'; -} -/* '⻏' */ -i.basic.icon.export:before { - content: '\e715'; -} -/* '' */ -i.basic.icon.hide:before { - content: '\e70b'; -} -/* '' */ -i.basic.icon.unhide:before { - content: '\e80f'; -} -/* '' */ -i.basic.icon.facebook:before { - content: '\f301'; -} -/* '' */ -i.basic.icon.fast-forward:before { - content: '\e804'; -} -/* '' */ -i.basic.icon.fire:before { - content: '🔥'; -} -/* '\1f525' */ -i.basic.icon.flag:before { - content: '\2691'; -} -/* '⚑' */ -i.basic.icon.lightning:before { - content: '\26a1'; -} -/* '⚡' */ -i.basic.icon.lab:before { - content: '\68'; -} -/* 'h' */ -i.basic.icon.flight:before { - content: '\2708'; -} -/* '✈' */ -i.basic.icon.forward:before { - content: '\27a6'; -} -/* '➦' */ -i.basic.icon.gift:before { - content: '🎁'; -} -/* '\1f381' */ -i.basic.icon.github:before { - content: '\f308'; -} -/* '' */ -i.basic.icon.globe:before { - content: '\e817'; -} -/* '' */ -i.basic.icon.headphones:before { - content: '🎧'; -} -/* '\1f3a7' */ -i.basic.icon.question:before { - content: '\2753'; -} -/* '❓' */ -i.basic.icon.home:before { - content: '\2302'; -} -/* '⌂' */ -i.basic.icon.i:before { - content: '\2139'; -} -/* 'ℹ' */ -i.basic.icon.idea:before { - content: '💡'; -} -/* '\1f4a1' */ -i.basic.icon.open:before { - content: '🔗'; -} -/* '\1f517' */ -i.basic.icon.content:before { - content: '\e782'; -} -/* '' */ -i.basic.icon.location:before { - content: '\e724'; -} -/* '' */ -i.basic.icon.mail:before { - content: '\2709'; -} -/* '✉' */ -i.basic.icon.mic:before { - content: '🎤'; -} -/* '\1f3a4' */ -i.basic.icon.minus:before { - content: '\2d'; -} -/* '-' */ -i.basic.icon.money:before { - content: '💰'; -} -/* '\1f4b0' */ -i.basic.icon.off:before { - content: '\e78e'; -} -/* '' */ -i.basic.icon.pause:before { - content: '\e808'; -} -/* '' */ -i.basic.icon.photos:before { - content: '\e812'; -} -/* '' */ -i.basic.icon.photo:before { - content: '🌄'; -} -/* '\1f304' */ -i.basic.icon.pin:before { - content: '📌'; -} -/* '\1f4cc' */ -i.basic.icon.play:before { - content: '\e809'; -} -/* '' */ -i.basic.icon.plus:before { - content: '\2b'; -} -/* '+' */ -i.basic.icon.print:before { - content: '\e716'; -} -/* '' */ -i.basic.icon.rss:before { - content: '\e73a'; -} -/* '' */ -i.basic.icon.search:before { - content: '🔍'; -} -/* '\1f50d' */ -i.basic.icon.shuffle:before { - content: '\e803'; -} -/* '' */ -i.basic.icon.tag:before { - content: '\e80a'; -} -/* '' */ -i.basic.icon.tags:before { - content: '\e70d'; -} -/* '' */ -i.basic.icon.terminal:before { - content: '\e7ac'; -} -/* '' */ -i.basic.icon.thumbs.down:before { - content: '👎'; -} -/* '\1f44e' */ -i.basic.icon.thumbs.up:before { - content: '👍'; -} -/* '\1f44d' */ -i.basic.icon.to-end:before { - content: '\e806'; -} -/* '' */ -i.basic.icon.to-start:before { - content: '\e805'; -} -/* '' */ -i.basic.icon.top.list:before { - content: '🏆'; -} -/* '\1f3c6' */ -i.basic.icon.trash:before { - content: '\e729'; -} -/* '' */ -i.basic.icon.twitter:before { - content: '\f303'; -} -/* '' */ -i.basic.icon.upload:before { - content: '\e711'; -} -/* '' */ -i.basic.icon.user.add:before { - content: '\e700'; -} -/* '' */ -i.basic.icon.user:before { - content: '👤'; -} -/* '\1f464' */ -i.basic.icon.community:before { - content: '\e814'; -} -/* '' */ -i.basic.icon.users:before { - content: '👥'; -} -/* '\1f465' */ -i.basic.icon.id:before { - content: '\e722'; -} -/* '' */ -i.basic.icon.url:before { - content: '🔗'; -} -/* '\1f517' */ -i.basic.icon.zoom.in:before { - content: '\e750'; -} -/* '' */ -i.basic.icon.zoom.out:before { - content: '\e751'; -} -/* '' */ -/*-------------- - Spacing Fix ----------------*/ -/* dropdown arrows are to the right */ -i.dropdown.basic.icon { - margin: 0em 0em 0em 0.5em; -} -/* stars are usually consecutive */ -i.basic.icon.star { - width: auto; - margin: 0em; -} -/* left side basic.icons */ -i.basic.icon.left, -i.basic.icon.left, -i.basic.icon.left { - width: auto; - margin: 0em 0.5em 0em 0em; -} -/* right side basic.icons */ -i.basic.icon.search, -i.basic.icon.up, -i.basic.icon.down, -i.basic.icon.right { - width: auto; - margin: 0em 0em 0em 0.5em; -} -/*-------------- - Aliases ----------------*/ -/* aliases for convenience */ -i.basic.icon.delete:before { - content: '\e80d'; -} -/* '' */ -i.basic.icon.dropdown:before { - content: '\25be'; -} -/* '▾' */ -i.basic.icon.help:before { - content: '\e704'; -} -/* '' */ -i.basic.icon.info:before { - content: '\e705'; -} -/* '' */ -i.basic.icon.error:before { - content: '\e80d'; -} -/* '' */ -i.basic.icon.dislike:before { - content: '\2661'; -} -/* '♡' */ -i.basic.icon.like:before { - content: '\2665'; -} -/* '♥' */ -i.basic.icon.eye:before { - content: '\e80f'; -} -/* '' */ -i.basic.icon.eye.hidden:before { - content: '\e70b'; -} -/* '' */ -i.basic.icon.date:before { - content: '📅'; -} -/* '\1f4c5' */ -/******************************* - States -*******************************/ -i.basic.icon.hover { - opacity: 1; -} -i.basic.icon.active { - opacity: 1; -} -i.emphasized.basic.icon { - opacity: 1; -} -i.basic.icon.disabled { - opacity: 0.3; -} -/******************************* - Variations -*******************************/ -/*------------------- - Link ---------------------*/ -i.link.basic.icon { - cursor: pointer; - opacity: 0.7; - -webkit-transition: opacity 0.3s ease-out; - -moz-transition: opacity 0.3s ease-out; - transition: opacity 0.3s ease-out; -} -.link.basic.icon:hover { - opacity: 1 !important; -} -/*------------------- - Circular ---------------------*/ -i.circular.basic.icon { - border-radius: 500px !important; - padding: 0.5em 0em !important; - -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - line-height: 1 !important; - width: 2em !important; - height: 2em !important; -} -i.circular.inverted.basic.icon { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -/*------------------- - Flipped ---------------------*/ -i.vertically.flipped.basic.icon { - -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -i.horizontally.flipped.basic.icon { - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -/*------------------- - Rotated ---------------------*/ -i.left.rotated.basic.icon { - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); -} -i.right.rotated.basic.icon { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -/*------------------- - Square ---------------------*/ -i.square.basic.icon { - width: 2em; - height: 2em; - padding: 0.5em 0.35em !important; - -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - vertical-align: baseline; -} -i.square.basic.icon:before { - vertical-align: middle; -} -i.square.inverted.basic.icon { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -/*------------------- - Inverted ---------------------*/ -i.inverted.basic.icon { - background-color: #222222; - color: #FFFFFF; -} -/*------------------- - Colors ---------------------*/ -i.blue.basic.icon { - color: #6ECFF5 !important; -} -i.black.basic.icon { - color: #5C6166 !important; -} -i.green.basic.icon { - color: #A1CF64 !important; -} -i.red.basic.icon { - color: #D95C5C !important; -} -i.purple.basic.icon { - color: #564F8A !important; -} -i.teal.basic.icon { - color: #00B5AD !important; -} -/*------------------- - Inverted Colors ---------------------*/ -i.inverted.black.basic.icon { - background-color: #5C6166 !important; - color: #FFFFFF !important; -} -i.inverted.blue.basic.icon { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; -} -i.inverted.green.basic.icon { - background-color: #A1CF64 !important; - color: #FFFFFF !important; -} -i.inverted.red.basic.icon { - background-color: #D95C5C !important; - color: #FFFFFF !important; -} -i.inverted.purple.basic.icon { - background-color: #564F8A !important; - color: #FFFFFF !important; -} -i.inverted.teal.basic.icon { - background-color: #00B5AD !important; - color: #FFFFFF !important; -} -/*------------------- - Sizes ---------------------*/ -i.small.basic.icon { - font-size: 0.875em; -} -i.basic.icon { - font-size: 1em; -} -i.large.basic.icon { - font-size: 1.5em; - margin-right: 0.2em; - vertical-align: middle; -} -i.big.basic.icon { - font-size: 2em; - margin-right: 0.5em; - vertical-align: middle; -} -i.huge.basic.icon { - font-size: 4em; - margin-right: 0.75em; - vertical-align: middle; -} -i.massive.basic.icon { - font-size: 8em; - margin-right: 1em; - vertical-align: middle; -} - -/* - * # Semantic - Button - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Button -*******************************/ -/* Prototype */ -.ui.button { - cursor: pointer; - display: inline-block; - vertical-align: middle; - min-height: 1em; - outline: none; - border: none; - background-color: #FAFAFA; - color: #808080; - margin: 0em; - padding: 0.8em 1.5em; - font-size: 1rem; - text-transform: uppercase; - line-height: 1; - font-weight: bold; - font-style: normal; - text-align: center; - text-decoration: none; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); - background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); - border-radius: 0.25em; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease; - -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; - transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; -} -/******************************* - States -*******************************/ -/*-------------- - Active ----------------*/ -.ui.buttons .active.button, -.ui.active.button { - background-color: #EAEAEA; - background-image: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; - color: rgba(0, 0, 0, 0.7); -} -/*-------------- - Hover ----------------*/ -.ui.button:hover { - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); - background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); - color: rgba(0, 0, 0, 0.7); -} -.ui.button.active:hover { - background-image: none; -} -.ui.button:hover .icon, -.ui.button.hover .icon { - opacity: 0.85; -} -/*-------------- - Down ----------------*/ -.ui.button:active, -.ui.active.button:active { - background-color: #F1F1F1; - color: rgba(0, 0, 0, 0.7); - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; -} -/*-------------- - Loading ----------------*/ -.ui.loading.button { - position: relative; - cursor: default; - background-color: #FFFFFF !important; - color: transparent !important; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - transition: all 0s linear; -} -.ui.loading.button:after { - position: absolute; - top: 0em; - left: 0em; - width: 100%; - height: 100%; - content: ''; - background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; -} -.ui.labeled.icon.loading.button .icon { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} -/*------------------- - Disabled ---------------------*/ -.ui.disabled.button, -.ui.disabled.button:hover, -.ui.disabled.button.active { - background-color: #DDDDDD !important; - cursor: default; - color: rgba(0, 0, 0, 0.5) !important; - opacity: 0.3 !important; - background-image: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -/******************************* - Types -*******************************/ -/*------------------- - Animated ---------------------*/ -.ui.animated.button { - position: relative; - overflow: hidden; -} -.ui.animated.button .visible.content { - position: relative; -} -.ui.animated.button .hidden.content { - position: absolute; - width: 100%; -} -/* Horizontal */ -.ui.animated.button .visible.content, -.ui.animated.button .hidden.content { - -webkit-transition: right 0.3s ease 0s; - -moz-transition: right 0.3s ease 0s; - transition: right 0.3s ease 0s; -} -.ui.animated.button .visible.content { - left: auto; - right: 0%; -} -.ui.animated.button .hidden.content { - top: 50%; - left: auto; - right: -100%; - margin-top: -0.55em; -} -.ui.animated.button:hover .visible.content { - left: auto; - right: 200%; -} -.ui.animated.button:hover .hidden.content { - left: auto; - right: 0%; -} -/* Vertical */ -.ui.vertical.animated.button .visible.content, -.ui.vertical.animated.button .hidden.content { - -webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0s; - -moz-transition: top 0.3s ease 0s, -moz-transform 0.3s ease 0s; - transition: top 0.3s ease 0s, transform 0.3s ease 0s; -} -.ui.vertical.animated.button .visible.content { - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); - right: auto; -} -.ui.vertical.animated.button .hidden.content { - top: -100%; - left: 0%; - right: auto; -} -.ui.vertical.animated.button:hover .visible.content { - -webkit-transform: translateY(200%); - -moz-transform: translateY(200%); - -ms-transform: translateY(200%); - transform: translateY(200%); - right: auto; -} -.ui.vertical.animated.button:hover .hidden.content { - top: 50%; - right: auto; -} -/* Fade */ -.ui.fade.animated.button .visible.content, -.ui.fade.animated.button .hidden.content { - -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; - -moz-transition: opacity 0.3s ease 0s, -moz-transform 0.3s ease 0s; - transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; -} -.ui.fade.animated.button .visible.content { - left: auto; - right: auto; - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.ui.fade.animated.button .hidden.content { - opacity: 0; - left: 0%; - right: auto; - -webkit-transform: scale(1.2); - -moz-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); -} -.ui.fade.animated.button:hover .visible.content { - left: auto; - right: auto; - opacity: 0; - -webkit-transform: scale(0.7); - -moz-transform: scale(0.7); - -ms-transform: scale(0.7); - transform: scale(0.7); -} -.ui.fade.animated.button:hover .hidden.content { - left: 0%; - right: auto; - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -/*------------------- - Primary ---------------------*/ -.ui.primary.buttons .button, -.ui.primary.button { - background-color: #D95C5C; - color: #FFFFFF; -} -.ui.primary.buttons .button:hover, -.ui.primary.button:hover, -.ui.primary.buttons .active.button, -.ui.primary.button.active { - background-color: #E75859; - color: #FFFFFF; -} -.ui.primary.buttons .button:active, -.ui.primary.button:active { - background-color: #D24B4C; - color: #FFFFFF; -} -/*------------------- - Secondary ---------------------*/ -.ui.secondary.buttons .button, -.ui.secondary.button { - background-color: #00B5AD; - color: #FFFFFF; -} -.ui.secondary.buttons .button:hover, -.ui.secondary.button:hover, -.ui.secondary.buttons .active.button, -.ui.secondary.button.active { - background-color: #009A93; - color: #FFFFFF; -} -.ui.secondary.buttons .button:active, -.ui.secondary.button:active { - background-color: #00847E; - color: #FFFFFF; -} -/*------------------- - Social ---------------------*/ -/* Facebook */ -.ui.facebook.button { - background-color: #3B579D; - color: #FFFFFF; -} -.ui.facebook.button:hover { - background-color: #3A59A9; - color: #FFFFFF; -} -.ui.facebook.button:active { - background-color: #334F95; - color: #FFFFFF; -} -/* Twitter */ -.ui.twitter.button { - background-color: #4092CC; - color: #FFFFFF; -} -.ui.twitter.button:hover { - background-color: #399ADE; - color: #FFFFFF; -} -.ui.twitter.button:active { - background-color: #3283BC; - color: #FFFFFF; -} -/* Google Plus */ -.ui.google.plus.button { - background-color: #D34836; - color: #FFFFFF; -} -.ui.google.plus.button:hover { - background-color: #E3432E; - color: #FFFFFF; -} -.ui.google.plus.button:active { - background-color: #CA3A27; - color: #FFFFFF; -} -/* Linked In */ -.ui.linkedin.button { - background-color: #1F88BE; - color: #FFFFFF; -} -.ui.linkedin.button:hover { - background-color: #1394D6; - color: #FFFFFF; -} -.ui.linkedin.button:active { - background-color: #1179AE; - color: #FFFFFF; -} -/* YouTube */ -.ui.youtube.button { - background-color: #CC181E; - color: #FFFFFF; -} -.ui.youtube.button:hover { - background-color: #DF0209; - color: #FFFFFF; -} -.ui.youtube.button:active { - background-color: #A50006; - color: #FFFFFF; -} -/* Instagram */ -.ui.instagram.button { - background-color: #49769C; - color: #FFFFFF; -} -.ui.instagram.button:hover { - background-color: #4781B1; - color: #FFFFFF; -} -.ui.instagram.button:active { - background-color: #38658A; - color: #FFFFFF; -} -/* Pinterest */ -.ui.pinterest.button { - background-color: #00ACED; - color: #FFFFFF; -} -.ui.pinterest.button:hover { - background-color: #00B9FF; - color: #FFFFFF; -} -.ui.pinterest.button:active { - background-color: #009EDA; - color: #FFFFFF; -} -/* vk.com */ -.ui.vk.button { - background-color: #4D7198; - color: #FFFFFF; -} -.ui.vk.button:hover { - background-color: #537AA5; - color: #FFFFFF; -} -.ui.vk.button:active { - background-color: #405E7E; - color: #FFFFFF; -} -/*-------------- - Icon ----------------*/ -.ui.button > .icon { - margin-right: 0.6em; - line-height: 1; - -webkit-transition: opacity 0.1s ease - ; - -moz-transition: opacity 0.1s ease - ; - transition: opacity 0.1s ease - ; -} -/******************************* - Variations -*******************************/ -/*------------------- - Floated ---------------------*/ -.ui.left.floated.buttons, -.ui.left.floated.button { - float: left; - margin-right: 0.25em; -} -.ui.right.floated.buttons, -.ui.right.floated.button { - float: right; - margin-left: 0.25em; -} -/*------------------- - Sizes ---------------------*/ -.ui.buttons .button, -.ui.button { - font-size: 1rem; -} -.ui.mini.buttons .button, -.ui.mini.buttons .or, -.ui.mini.button { - font-size: 0.8rem; -} -.ui.mini.buttons .button, -.ui.mini.button { - padding: 0.6em 0.8em; -} -.ui.mini.icon.buttons .button, -.ui.mini.buttons .icon.button { - padding: 0.6em 0.6em; -} -.ui.tiny.buttons .button, -.ui.tiny.buttons .or, -.ui.tiny.button { - font-size: 0.875em; -} -.ui.tiny.buttons .button, -.ui.tiny.buttons .button, -.ui.tiny.button { - padding: 0.6em 0.8em; -} -.ui.tiny.icon.buttons .button, -.ui.tiny.buttons .icon.button { - padding: 0.6em 0.6em; -} -.ui.small.buttons .button, -.ui.small.buttons .or, -.ui.small.button { - font-size: 0.875rem; -} -.ui.large.buttons .button, -.ui.large.buttons .or, -.ui.large.button { - font-size: 1.125rem; -} -.ui.big.buttons .button, -.ui.big.buttons .or, -.ui.big.button { - font-size: 1.25rem; -} -.ui.huge.buttons .button, -.ui.huge.buttons .or, -.ui.huge.button { - font-size: 1.375rem; -} -.ui.massive.buttons .button, -.ui.massive.buttons .or, -.ui.massive.button { - font-size: 1.5rem; - font-weight: bold; -} -/* Or resize */ -.ui.tiny.buttons .or:before, -.ui.mini.buttons .or:before { - width: 1.45em; - height: 1.55em; - line-height: 1.4; - margin-left: -0.725em; - margin-top: -0.25em; -} -.ui.tiny.buttons .or:after, -.ui.mini.buttons .or:after { - height: 1.45em; -} -/* loading */ -.ui.huge.loading.button:after { - background-image: url(../images/loader-small.gif); -} -.ui.massive.buttons .loading.button:after, -.ui.gigantic.buttons .loading.button:after, -.ui.massive.loading.button:after, -.ui.gigantic.loading.button:after { - background-image: url(../images/loader-medium.gif); -} -.ui.huge.loading.button:after, -.ui.huge.loading.button.active:after { - background-image: url(../images/loader-small.gif); -} -.ui.massive.buttons .loading.button:after, -.ui.gigantic.buttons .loading.button:after, -.ui.massive.loading.button:after, -.ui.gigantic.loading.button:after, -.ui.massive.buttons .loading.button.active:after, -.ui.gigantic.buttons .loading.button.active:after, -.ui.massive.loading.button.active:after, -.ui.gigantic.loading.button.active:after { - background-image: url(../images/loader-medium.gif); -} -/*-------------- - Icon Only ----------------*/ -.ui.icon.buttons .button, -.ui.icon.button { - padding: 0.8em; -} -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { - opacity: 0.9; - margin: 0em; - vertical-align: top; -} -/*------------------- - Basic ---------------------*/ -.ui.basic.buttons .button, -.ui.basic.button { - background-color: transparent !important; - background-image: none; - color: #808080 !important; - font-weight: normal; - text-transform: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -} -.ui.basic.buttons { - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 0.25em; -} -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - background-image: none; - color: #7F7F7F !important; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; -} -.ui.basic.buttons .button:active, -.ui.basic.button:active { - background-color: rgba(0, 0, 0, 0.02) !important; - color: #7F7F7F !important; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -} -.ui.basic.buttons .button.active, -.ui.basic.button.active { - background-color: rgba(0, 0, 0, 0.05); - color: #7F7F7F; - -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; - box-shadow: 0px 0px 0px 1px #BDBDBD inset; -} -.ui.basic.buttons .button.active:hover, -.ui.basic.button.active:hover { - background-color: rgba(0, 0, 0, 0.1); -} -/* Inverted */ -.ui.basic.inverted.buttons .button, -.ui.basic.inverted.button { - color: #FAFAFA !important; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; -} -.ui.basic.inverted.buttons .button:hover, -.ui.basic.inverted.button:hover { - background-image: none; - color: #FFFFFF !important; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; -} -.ui.basic.inverted.buttons .button:active, -.ui.basic.inverted.button:active { - background-color: rgba(255, 255, 255, 0.05) !important; - color: #FFFFFF !important; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; -} -.ui.basic.inverted.buttons .button.active, -.ui.basic.inverted.button.active { - background-color: rgba(255, 255, 255, 0.5); - color: #FFFFFF; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.basic.inverted.buttons .button.active:hover, -.ui.basic.inverted.button.active:hover { - background-color: rgba(0, 0, 0, 0.1); -} -/* Basic Group */ -.ui.basic.buttons .button { - border-left: 1px solid rgba(0, 0, 0, 0.1); - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.basic.buttons .button:hover, -.ui.basic.buttons .button:active { - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.basic.buttons .button.active, -.ui.basic.buttons .button.active:hover { - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; -} -/*-------------- - Labeled Icon ----------------*/ -.ui.labeled.icon.buttons .button, -.ui.labeled.icon.button { - position: relative; - padding-left: 4em !important; - padding-right: 1.4em !important; -} -.ui.labeled.icon.buttons > .button > .icon, -.ui.labeled.icon.button > .icon { - position: absolute; - top: 0em; - left: 0em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - width: 2.75em; - height: 100%; - padding-top: 0.8em; - background-color: rgba(0, 0, 0, 0.05); - text-align: center; - border-radius: 0.25em 0px 0px 0.25em; - line-height: 1; - -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; - box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; -} -.ui.labeled.icon.buttons .button > .icon { - border-radius: 0em; -} -.ui.labeled.icon.buttons .button:first-child > .icon { - border-top-left-radius: 0.25em; - border-bottom-left-radius: 0.25em; -} -.ui.labeled.icon.buttons .button:last-child > .icon { - border-top-right-radius: 0.25em; - border-bottom-right-radius: 0.25em; -} -.ui.vertical.labeled.icon.buttons .button:first-child > .icon { - border-radius: 0em; - border-top-left-radius: 0.25em; -} -.ui.vertical.labeled.icon.buttons .button:last-child > .icon { - border-radius: 0em; - border-bottom-left-radius: 0.25em; -} -.ui.right.labeled.icon.button { - padding-left: 1.4em !important; - padding-right: 4em !important; -} -.ui.left.fluid.labeled.icon.button, -.ui.right.fluid.labeled.icon.button { - padding-left: 1.4em !important; - padding-right: 1.4em !important; -} -.ui.right.labeled.icon.button .icon { - left: auto; - right: 0em; - border-radius: 0em 0.25em 0.25em 0em; - -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; - box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; -} -/*-------------- - Toggle ----------------*/ -/* Toggle (Modifies active state to give affordances) */ -.ui.toggle.buttons .active.button, -.ui.buttons .button.toggle.active, -.ui.button.toggle.active { - background-color: #5BBD72 !important; - color: #FFFFFF !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -.ui.button.toggle.active:hover { - background-color: #58CB73 !important; - color: #FFFFFF !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} -/*-------------- - Circular ----------------*/ -.ui.circular.button { - border-radius: 10em; -} -/*-------------- - Attached ----------------*/ -.ui.attached.button { - display: block; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; -} -.ui.attached.top.button { - border-radius: 0.25em 0.25em 0em 0em; -} -.ui.attached.bottom.button { - border-radius: 0em 0em 0.25em 0.25em; -} -.ui.attached.left.button { - display: inline-block; - border-left: none; - padding-right: 0.75em; - text-align: right; - border-radius: 0.25em 0em 0em 0.25em; -} -.ui.attached.right.button { - display: inline-block; - padding-left: 0.75em; - text-align: left; - border-radius: 0em 0.25em 0.25em 0em; -} -/*------------------- - Or Buttons ---------------------*/ -.ui.buttons .or { - position: relative; - float: left; - width: 0.3em; - height: 1.1em; - z-index: 3; -} -.ui.buttons .or:before { - position: absolute; - top: 50%; - left: 50%; - content: 'or'; - background-color: #FFFFFF; - margin-top: -0.1em; - margin-left: -0.9em; - width: 1.8em; - height: 1.8em; - line-height: 1.55; - color: #AAAAAA; - font-style: normal; - font-weight: normal; - text-align: center; - border-radius: 500px; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.buttons .or[data-text]:before { - content: attr(data-text); -} -.ui.buttons .or:after { - position: absolute; - top: 0em; - left: 0em; - content: ' '; - width: 0.3em; - height: 1.7em; - background-color: transparent; - border-top: 0.5em solid #FFFFFF; - border-bottom: 0.5em solid #FFFFFF; -} -/* Fluid Or */ -.ui.fluid.buttons .or { - width: 0em !important; -} -.ui.fluid.buttons .or:after { - display: none; -} -/*------------------- - Attached ---------------------*/ -/* Plural Attached */ -.attached.ui.buttons { - margin: 0px; - border-radius: 4px 4px 0px 0px; -} -.attached.ui.buttons .button:first-child { - border-radius: 4px 0px 0px 0px; -} -.attached.ui.buttons .button:last-child { - border-radius: 0px 4px 0px 0px; -} -/* Bottom Side */ -.bottom.attached.ui.buttons { - margin-top: -1px; - border-radius: 0px 0px 4px 4px; -} -.bottom.attached.ui.buttons .button:first-child { - border-radius: 0px 0px 0px 4px; -} -.bottom.attached.ui.buttons .button:last-child { - border-radius: 0px 0px 4px 0px; -} -/* Left Side */ -.left.attached.ui.buttons { - margin-left: -1px; - border-radius: 0px 4px 4px 0px; -} -.left.attached.ui.buttons .button:first-child { - margin-left: -1px; - border-radius: 0px 4px 0px 0px; -} -.left.attached.ui.buttons .button:last-child { - margin-left: -1px; - border-radius: 0px 0px 4px 0px; -} -/* Right Side */ -.right.attached.ui.buttons, -.right.attached.ui.buttons .button { - margin-right: -1px; - border-radius: 4px 0px 0px 4px; -} -.right.attached.ui.buttons .button:first-child { - margin-left: -1px; - border-radius: 4px 0px 0px 0px; -} -.right.attached.ui.buttons .button:last-child { - margin-left: -1px; - border-radius: 0px 0px 0px 4px; -} -/* Fluid */ -.ui.fluid.buttons, -.ui.button.fluid, -.ui.fluid.buttons > .button { - display: block; - width: 100%; -} -.ui.\32.buttons > .button, -.ui.two.buttons > .button { - width: 50%; -} -.ui.\33.buttons > .button, -.ui.three.buttons > .button { - width: 33.333%; -} -.ui.\34.buttons > .button, -.ui.four.buttons > .button { - width: 25%; -} -.ui.\35.buttons > .button, -.ui.five.buttons > .button { - width: 20%; -} -.ui.\36.buttons > .button, -.ui.six.buttons > .button { - width: 16.666%; -} -.ui.\37.buttons > .button, -.ui.seven.buttons > .button { - width: 14.285%; -} -.ui.\38.buttons > .button, -.ui.eight.buttons > .button { - width: 12.500%; -} -.ui.\39.buttons > .button, -.ui.nine.buttons > .button { - width: 11.11%; -} -.ui.\31\30.buttons > .button, -.ui.ten.buttons > .button { - width: 10%; -} -.ui.\31\31.buttons > .button, -.ui.eleven.buttons > .button { - width: 9.09%; -} -.ui.\31\32.buttons > .button, -.ui.twelve.buttons > .button { - width: 8.3333%; -} -/* Fluid Vertical Buttons */ -.ui.fluid.vertical.buttons, -.ui.fluid.vertical.buttons > .button { - display: block; - width: auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.\32.vertical.buttons > .button, -.ui.two.vertical.buttons > .button { - height: 50%; -} -.ui.\33.vertical.buttons > .button, -.ui.three.vertical.buttons > .button { - height: 33.333%; -} -.ui.\34.vertical.buttons > .button, -.ui.four.vertical.buttons > .button { - height: 25%; -} -.ui.\35.vertical.buttons > .button, -.ui.five.vertical.buttons > .button { - height: 20%; -} -.ui.\36.vertical.buttons > .button, -.ui.six.vertical.buttons > .button { - height: 16.666%; -} -.ui.\37.vertical.buttons > .button, -.ui.seven.vertical.buttons > .button { - height: 14.285%; -} -.ui.\38.vertical.buttons > .button, -.ui.eight.vertical.buttons > .button { - height: 12.500%; -} -.ui.\39.vertical.buttons > .button, -.ui.nine.vertical.buttons > .button { - height: 11.11%; -} -.ui.\31\30.vertical.buttons > .button, -.ui.ten.vertical.buttons > .button { - height: 10%; -} -.ui.\31\31.vertical.buttons > .button, -.ui.eleven.vertical.buttons > .button { - height: 9.09%; -} -.ui.\31\32.vertical.buttons > .button, -.ui.twelve.vertical.buttons > .button { - height: 8.3333%; -} -/*------------------- - Colors ---------------------*/ -/*--- Black ---*/ -.ui.black.buttons .button, -.ui.black.button { - background-color: #5C6166; - color: #FFFFFF; -} -.ui.black.buttons .button:hover, -.ui.black.button:hover { - background-color: #4C4C4C; - color: #FFFFFF; -} -.ui.black.buttons .button:active, -.ui.black.button:active { - background-color: #333333; - color: #FFFFFF; -} -/*--- Green ---*/ -.ui.green.buttons .button, -.ui.green.button { - background-color: #5BBD72; - color: #FFFFFF; -} -.ui.green.buttons .button:hover, -.ui.green.button:hover, -.ui.green.buttons .active.button, -.ui.green.button.active { - background-color: #58cb73; - color: #FFFFFF; -} -.ui.green.buttons .button:active, -.ui.green.button:active { - background-color: #4CB164; - color: #FFFFFF; -} -/*--- Red ---*/ -.ui.red.buttons .button, -.ui.red.button { - background-color: #D95C5C; - color: #FFFFFF; -} -.ui.red.buttons .button:hover, -.ui.red.button:hover, -.ui.red.buttons .active.button, -.ui.red.button.active { - background-color: #E75859; - color: #FFFFFF; -} -.ui.red.buttons .button:active, -.ui.red.button:active { - background-color: #D24B4C; - color: #FFFFFF; -} -/*--- Orange ---*/ -.ui.orange.buttons .button, -.ui.orange.button { - background-color: #E96633; - color: #FFFFFF; -} -.ui.orange.buttons .button:hover, -.ui.orange.button:hover, -.ui.orange.buttons .active.button, -.ui.orange.button.active { - background-color: #FF7038; - color: #FFFFFF; -} -.ui.orange.buttons .button:active, -.ui.orange.button:active { - background-color: #DA683B; - color: #FFFFFF; -} -/*--- Blue ---*/ -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #6ECFF5; - color: #FFFFFF; -} -.ui.blue.buttons .button:hover, -.ui.blue.button:hover, -.ui.blue.buttons .active.button, -.ui.blue.button.active { - background-color: #1AB8F3; - color: #FFFFFF; -} -.ui.blue.buttons .button:active, -.ui.blue.button:active { - background-color: #0AA5DF; - color: #FFFFFF; -} -/*--- Purple ---*/ -.ui.purple.buttons .button, -.ui.purple.button { - background-color: #564F8A; - color: #FFFFFF; -} -.ui.purple.buttons .button:hover, -.ui.purple.button:hover, -.ui.purple.buttons .active.button, -.ui.purple.button.active { - background-color: #3E3773; - color: #FFFFFF; -} -.ui.purple.buttons .button:active, -.ui.purple.button:active { - background-color: #2E2860; - color: #FFFFFF; -} -/*--- Teal ---*/ -.ui.teal.buttons .button, -.ui.teal.button { - background-color: #00B5AD; - color: #FFFFFF; -} -.ui.teal.buttons .button:hover, -.ui.teal.button:hover, -.ui.teal.buttons .active.button, -.ui.teal.button.active { - background-color: #009A93; - color: #FFFFFF; -} -.ui.teal.buttons .button:active, -.ui.teal.button:active { - background-color: #00847E; - color: #FFFFFF; -} -/*--------------- - Positive -----------------*/ -.ui.positive.buttons .button, -.ui.positive.button { - background-color: #5BBD72 !important; - color: #FFFFFF; -} -.ui.positive.buttons .button:hover, -.ui.positive.button:hover, -.ui.positive.buttons .active.button, -.ui.positive.button.active { - background-color: #58CB73 !important; - color: #FFFFFF; -} -.ui.positive.buttons .button:active, -.ui.positive.button:active { - background-color: #4CB164 !important; - color: #FFFFFF; -} -/*--------------- - Negative -----------------*/ -.ui.negative.buttons .button, -.ui.negative.button { - background-color: #D95C5C !important; - color: #FFFFFF; -} -.ui.negative.buttons .button:hover, -.ui.negative.button:hover, -.ui.negative.buttons .active.button, -.ui.negative.button.active { - background-color: #E75859 !important; - color: #FFFFFF; -} -.ui.negative.buttons .button:active, -.ui.negative.button:active { - background-color: #D24B4C !important; - color: #FFFFFF; -} -/******************************* - Groups -*******************************/ -.ui.buttons { - display: inline-block; - vertical-align: middle; -} -.ui.buttons:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -.ui.buttons .button:first-child { - border-left: none; -} -.ui.buttons .button { - float: left; - border-radius: 0em; -} -.ui.buttons .button:first-child { - margin-left: 0em; - border-top-left-radius: 0.25em; - border-bottom-left-radius: 0.25em; -} -.ui.buttons .button:last-child { - border-top-right-radius: 0.25em; - border-bottom-right-radius: 0.25em; -} -/* Vertical Style */ -.ui.vertical.buttons { - display: inline-block; -} -.ui.vertical.buttons .button { - display: block; - float: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -} -.ui.vertical.buttons .button:first-child, -.ui.vertical.buttons .mini.button:first-child, -.ui.vertical.buttons .tiny.button:first-child, -.ui.vertical.buttons .small.button:first-child, -.ui.vertical.buttons .massive.button:first-child, -.ui.vertical.buttons .huge.button:first-child { - margin-top: 0px; - border-radius: 0.25em 0.25em 0px 0px; -} -.ui.vertical.buttons .button:last-child, -.ui.vertical.buttons .mini.button:last-child, -.ui.vertical.buttons .tiny.button:last-child, -.ui.vertical.buttons .small.button:last-child, -.ui.vertical.buttons .massive.button:last-child, -.ui.vertical.buttons .huge.button:last-child, -.ui.vertical.buttons .gigantic.button:last-child { - border-radius: 0px 0px 0.25em 0.25em; -} - -/* - * # Semantic - Divider - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Divider -*******************************/ -.ui.divider { - margin: 1rem 0rem; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.8); - line-height: 1; - height: 0em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} -.ui.vertical.divider, -.ui.horizontal.divider { - position: absolute; - border: none; - height: 0em; - margin: 0em; - background-color: transparent; - font-size: 0.875rem; - font-weight: bold; - text-align: center; - text-transform: uppercase; - color: rgba(0, 0, 0, 0.8); -} -/*-------------- - Vertical ----------------*/ -.ui.vertical.divider { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - margin: 0% 0% 0% -3%; - width: 6%; - height: 50%; - line-height: 0; - padding: 0em; -} -.ui.vertical.divider:before, -.ui.vertical.divider:after { - position: absolute; - left: 50%; - content: " "; - z-index: 3; - border-left: 1px solid rgba(0, 0, 0, 0.1); - border-right: 1px solid rgba(255, 255, 255, 0.8); - width: 0%; - height: 80%; -} -.ui.vertical.divider:before { - top: -100%; -} -.ui.vertical.divider:after { - top: auto; - bottom: 0px; -} -/*-------------- - Horizontal ----------------*/ -.ui.horizontal.divider { - position: relative; - top: 0%; - left: 0%; - margin: 1rem 1.5rem; - height: auto; - padding: 0em; - line-height: 1; -} -.ui.horizontal.divider:before, -.ui.horizontal.divider:after { - position: absolute; - content: " "; - z-index: 3; - width: 50%; - top: 50%; - height: 0%; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.8); -} -.ui.horizontal.divider:before { - left: 0%; - margin-left: -1.5rem; -} -.ui.horizontal.divider:after { - left: auto; - right: 0%; - margin-right: -1.5rem; -} -/*-------------- - Icon ----------------*/ -.ui.divider > .icon { - margin: 0em; - font-size: 1rem; - vertical-align: middle; -} -/******************************* - Variations -*******************************/ -/*-------------- - Inverted ----------------*/ -.ui.divider.inverted { - color: #ffffff; -} -.ui.vertical.inverted.divider, -.ui.horizontal.inverted.divider { - color: rgba(255, 255, 255, 0.9); -} -.ui.divider.inverted, -.ui.divider.inverted:after, -.ui.divider.inverted:before { - border-top-color: rgba(0, 0, 0, 0.15); - border-bottom-color: rgba(255, 255, 255, 0.15); - border-left-color: rgba(0, 0, 0, 0.15); - border-right-color: rgba(255, 255, 255, 0.15); -} -/*-------------- - Fitted ----------------*/ -.ui.fitted.divider { - margin: 0em; -} -/*-------------- - Clearing ----------------*/ -.ui.clearing.divider { - clear: both; -} -/*-------------- - Section ----------------*/ -.ui.section.divider { - margin-top: 2rem; - margin-bottom: 2rem; -} - -/* - * # Semantic - Header - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Header -*******************************/ -/* Standard */ -.ui.header { - border: none; - margin: 1em 0em 1rem; - padding: 0em; - font-size: 1.33em; - font-weight: bold; - line-height: 1.33; -} -.ui.header .sub.header { - font-size: 1rem; - font-weight: normal; - margin: 0em; - padding: 0em; - line-height: 1.2; - color: rgba(0, 0, 0, 0.5); -} -.ui.header .icon { - display: table-cell; - vertical-align: middle; - padding-right: 0.5em; -} -.ui.header .icon:only-child { - display: inline-block; - vertical-align: baseline; -} -.ui.header .content { - display: inline-block; - vertical-align: top; -} -.ui.header .icon + .content { - padding-left: 0.5em; - display: table-cell; -} -/* Positioning */ -.ui.header:first-child { - margin-top: 0em; -} -.ui.header:last-child { - margin-bottom: 0em; -} -.ui.header + p { - margin-top: 0em; -} -/*-------------- - Page Heading ----------------*/ -h1.ui.header { - min-height: 1rem; - line-height: 1.33; - font-size: 2rem; -} -h2.ui.header { - line-height: 1.33; - font-size: 1.75rem; -} -h3.ui.header { - line-height: 1.33; - font-size: 1.33rem; -} -h4.ui.header { - line-height: 1.33; - font-size: 1.1rem; -} -h5.ui.header { - line-height: 1.2; - font-size: 1rem; -} -/*-------------- - Content Heading ----------------*/ -.ui.huge.header { - min-height: 1em; - font-size: 2em; -} -.ui.large.header { - font-size: 1.75em; -} -.ui.medium.header { - font-size: 1.33em; -} -.ui.small.header { - font-size: 1.1em; -} -.ui.tiny.header { - font-size: 1em; -} -/******************************* - Types -*******************************/ -/*------------------- - Icon ---------------------*/ -.ui.icon.header { - display: inline-block; - text-align: center; -} -.ui.icon.header .icon { - float: none; - display: block; - font-size: 3em; - margin: 0em auto 0.2em; - padding: 0em; -} -.ui.icon.header .content { - display: block; -} -.ui.icon.header .circular.icon, -.ui.icon.header .square.icon { - font-size: 2em; -} -.ui.block.icon.header .icon { - margin-bottom: 0em; -} -.ui.icon.header.aligned { - margin-left: auto; - margin-right: auto; - display: block; -} -/******************************* - States -*******************************/ -.ui.disabled.header { - opacity: 0.5; -} -/******************************* - Variations -*******************************/ -/*------------------- - Colors ---------------------*/ -.ui.blue.header { - color: #6ECFF5 !important; -} -.ui.black.header { - color: #5C6166 !important; -} -.ui.green.header { - color: #A1CF64 !important; -} -.ui.red.header { - color: #D95C5C !important; -} -.ui.purple.header { - color: #564F8A !important; -} -.ui.teal.header { - color: #00B5AD !important; -} -.ui.blue.dividing.header { - border-bottom: 3px solid #6ECFF5; -} -.ui.black.dividing.header { - border-bottom: 3px solid #5C6166; -} -.ui.green.dividing.header { - border-bottom: 3px solid #A1CF64; -} -.ui.red.dividing.header { - border-bottom: 3px solid #D95C5C; -} -.ui.purple.dividing.header { - border-bottom: 3px solid #564F8A; -} -.ui.teal.dividing.header { - border-bottom: 3px solid #00B5AD; -} -/*------------------- - Inverted ---------------------*/ -.ui.inverted.header { - color: #FFFFFF; -} -.ui.inverted.header .sub.header { - color: rgba(255, 255, 255, 0.85); -} -/*------------------- - Inverted Colors ---------------------*/ -.ui.inverted.black.header { - background-color: #5C6166 !important; - color: #FFFFFF !important; -} -.ui.inverted.blue.header { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; -} -.ui.inverted.green.header { - background-color: #A1CF64 !important; - color: #FFFFFF !important; -} -.ui.inverted.red.header { - background-color: #D95C5C !important; - color: #FFFFFF !important; -} -.ui.inverted.purple.header { - background-color: #564F8A !important; - color: #FFFFFF !important; -} -.ui.inverted.teal.header { - background-color: #00B5AD !important; - color: #FFFFFF !important; -} -.ui.inverted.block.header { - border-bottom: none; -} -/*------------------- - Aligned ---------------------*/ -.ui.left.aligned.header { - text-align: left; -} -.ui.right.aligned.header { - text-align: right; -} -.ui.center.aligned.header { - text-align: center; -} -.ui.justified.header { - text-align: justify; -} -.ui.justified.header:after { - display: inline-block; - content: ''; - width: 100%; -} -/*------------------- - Floated ---------------------*/ -.ui.floated.header, -.ui.left.floated.header { - float: left; - margin-top: 0em; - margin-right: 0.5em; -} -.ui.right.floated.header { - float: right; - margin-top: 0em; - margin-left: 0.5em; -} -/*------------------- - Fittted ---------------------*/ -.ui.fitted.header { - padding: 0em; -} -/*------------------- - Dividing ---------------------*/ -.ui.dividing.header { - padding-bottom: 0.2rem; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} -.ui.dividing.header .sub.header { - padding-bottom: 0.5em; -} -.ui.dividing.header .icon { - margin-bottom: 0.2em; -} -/*------------------- - Block ---------------------*/ -.ui.block.header { - background-color: rgba(0, 0, 0, 0.05); - padding: 0.5em 1em; -} -/*------------------- - Attached ---------------------*/ -.ui.attached.header { - background-color: #E0E0E0; - padding: 0.5em 1rem; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -} -.ui.top.attached.header { - margin-bottom: 0em; - border-radius: 0.3125em 0.3125em 0em 0em; -} -.ui.bottom.attached.header { - margin-top: 0em; - border-radius: 0em 0em 0.3125em 0.3125em; -} - -/* - * # Semantic - Icon - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/*! - * Font Awesome 3.2.1 - * the iconic font designed for Bootstrap - * ------------------------------------------------------------------------------ - * The full suite of pictographic icons, examples, and documentation can be - * found at http://fon.io. Stay up to date on Twitter at - * http://twitter.com/fon. - * - * License - * ------------------------------------------------------------------------------ - * - The Font Awesome font is licensed under SIL OFL 1.1 - - * http://scripts.sil.org/OFL - -/******************************* - Icon -*******************************/ -@font-face { - font-family: 'Icons'; - src: url(../fonts/icons.eot); - src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.svg#icons) format('svg'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype'); - font-style: normal; - font-weight: normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; -} -i.icon { - display: inline-block; - opacity: 0.75; - margin: 0em 0.25em 0em 0em; - width: 1.23em; - height: 1em; - font-family: 'Icons'; - font-style: normal; - line-height: 1; - font-weight: normal; - text-decoration: inherit; - text-align: center; - speak: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -i.icon.left:before { - content: "\f060"; -} -i.icon.right:before { - content: "\f061"; -} -i.icon.add.sign.box:before { - content: "\f0fe"; -} -i.icon.add.sign:before { - content: "\f055"; -} -i.icon.add:before { - content: "\f067"; -} -i.icon.adjust:before { - content: "\f042"; -} -i.icon.adn:before { - content: "\f170"; -} -i.icon.align.center:before { - content: "\f037"; -} -i.icon.align.justify:before { - content: "\f039"; -} -i.icon.align.left:before { - content: "\f036"; -} -i.icon.align.right:before { - content: "\f038"; -} -i.icon.ambulance:before { - content: "\f0f9"; -} -i.icon.anchor:before { - content: "\f13d"; -} -i.icon.android:before { - content: "\f17b"; -} -i.icon.angle.down:before { - content: "\f107"; -} -i.icon.angle.left:before { - content: "\f104"; -} -i.icon.angle.right:before { - content: "\f105"; -} -i.icon.angle.up:before { - content: "\f106"; -} -i.icon.apple:before { - content: "\f179"; -} -i.icon.archive:before { - content: "\f187"; -} -i.icon.arrow.down:before { - content: "\f078"; -} -i.icon.arrow.left:before { - content: "\f053"; -} -i.icon.arrow.right:before { - content: "\f054"; -} -i.icon.arrow.sign.down:before { - content: "\f13a"; -} -i.icon.arrow.sign.left:before { - content: "\f137"; -} -i.icon.arrow.sign.right:before { - content: "\f138"; -} -i.icon.arrow.sign.up:before { - content: "\f139"; -} -i.icon.arrow.up:before { - content: "\f077"; -} -i.icon.asterisk:before { - content: "\f069"; -} -i.icon.attachment:before { - content: "\f0c6"; -} -i.icon.attention:before { - content: "\f06a"; -} -i.icon.backward:before { - content: "\f04a"; -} -i.icon.ban.circle:before { - content: "\f05e"; -} -i.icon.bar.chart:before { - content: "\f080"; -} -i.icon.barcode:before { - content: "\f02a"; -} -i.icon.beer:before { - content: "\f0fc"; -} -i.icon.bell.outline:before { - content: "\f0a2"; -} -i.icon.bell:before { - content: "\f0f3"; -} -i.icon.bitbucket.sign:before { - content: "\f172"; -} -i.icon.bitbucket:before { - content: "\f171"; -} -i.icon.bitcoin:before { - content: "\f15a"; -} -i.icon.bold:before { - content: "\f032"; -} -i.icon.bolt:before { - content: "\f0e7"; -} -i.icon.book:before { - content: "\f02d"; -} -i.icon.bookmark.empty:before { - content: "\f097"; -} -i.icon.bookmark:before { - content: "\f02e"; -} -i.icon.box.arrow.down:before { - content: "\f150"; -} -/*rtl:ignore*/ -i.icon.box.arrow.right:before { - content: "\f152"; -} -i.icon.box.arrow.up:before { - content: "\f151"; -} -i.icon.briefcase:before { - content: "\f0b1"; -} -i.icon.browser:before { - content: "\f022"; -} -i.icon.bug:before { - content: "\f188"; -} -i.icon.building:before { - content: "\f0f7"; -} -i.icon.bullhorn:before { - content: "\f0a1"; -} -i.icon.bullseye:before { - content: "\f140"; -} -i.icon.calendar.empty:before { - content: "\f133"; -} -i.icon.calendar:before { - content: "\f073"; -} -i.icon.camera.retro:before { - content: "\f083"; -} -i.icon.camera:before { - content: "\f030"; -} -i.icon.triangle.down:before { - content: "\f0d7"; -} -i.icon.triangle.left:before { - content: "\f0d9"; -} -i.icon.triangle.right:before { - content: "\f0da"; -} -i.icon.triangle.up:before { - content: "\f0d8"; -} -i.icon.cart:before { - content: "\f07a"; -} -i.icon.certificate:before { - content: "\f0a3"; -} -i.icon.chat.outline:before { - content: "\f0e6"; -} -i.icon.chat:before { - content: "\f086"; -} -i.icon.checkbox.empty:before { - content: "\f096"; -} -i.icon.checkbox.minus:before { - content: "\f147"; -} -i.icon.checked.checkbox:before { - content: "\f046"; -} -i.icon.checkmark.sign:before { - content: "\f14a"; -} -i.icon.checkmark:before { - content: "\f00c"; -} -i.icon.circle.blank:before { - content: "\f10c"; -} -i.icon.circle.down:before { - content: "\f0ab"; -} -i.icon.circle.left:before { - content: "\f0a8"; -} -i.icon.circle.right:before { - content: "\f0a9"; -} -i.icon.circle.up:before { - content: "\f0aa"; -} -i.icon.circle:before { - content: "\f111"; -} -i.icon.cloud.download:before { - content: "\f0ed"; -} -i.icon.cloud.upload:before { - content: "\f0ee"; -} -i.icon.cloud:before { - content: "\f0c2"; -} -i.icon.code.fork:before { - content: "\f126"; -} -i.icon.code:before { - content: "\f121"; -} -i.icon.coffee:before { - content: "\f0f4"; -} -i.icon.collapse:before { - content: "\f117"; -} -i.icon.comment.outline:before { - content: "\f0e5"; -} -i.icon.comment:before { - content: "\f075"; -} -i.icon.copy:before { - content: "\f0c5"; -} -i.icon.crop:before { - content: "\f125"; -} -i.icon.css3:before { - content: "\f13c"; -} -i.icon.cut:before { - content: "\f0c4"; -} -i.icon.dashboard:before { - content: "\f0e4"; -} -i.icon.desktop:before { - content: "\f108"; -} -i.icon.doctor:before { - content: "\f0f0"; -} -i.icon.dollar:before { - content: "\f155"; -} -i.icon.double.angle.down:before { - content: "\f103"; -} -i.icon.double.angle.left:before { - content: "\f100"; -} -i.icon.double.angle.right:before { - content: "\f101"; -} -i.icon.double.angle.up:before { - content: "\f102"; -} -i.icon.down:before { - content: "\f063"; -} -i.icon.download.disk:before { - content: "\f019"; -} -i.icon.download:before { - content: "\f01a"; -} -i.icon.dribbble:before { - content: "\f17d"; -} -i.icon.dropbox:before { - content: "\f16b"; -} -i.icon.edit.sign:before { - content: "\f14b"; -} -i.icon.edit:before { - content: "\f044"; -} -i.icon.eject:before { - content: "\f052"; -} -i.icon.ellipsis.horizontal:before { - content: "\f141"; -} -i.icon.ellipsis.vertical:before { - content: "\f142"; -} -i.icon.eraser:before { - content: "\f12d"; -} -i.icon.euro:before { - content: "\f153"; -} -i.icon.exchange:before { - content: "\f0ec"; -} -i.icon.exclamation:before { - content: "\f12a"; -} -i.icon.expand:before { - content: "\f116"; -} -i.icon.external.url.sign:before { - content: "\f14c"; -} -i.icon.external.url:before { - content: "\f08e"; -} -i.icon.facebook.sign:before { - content: "\f082"; -} -i.icon.facebook:before { - content: "\f09a"; -} -i.icon.facetime.video:before { - content: "\f03d"; -} -i.icon.fast.backward:before { - content: "\f049"; -} -i.icon.fast.forward:before { - content: "\f050"; -} -i.icon.female:before { - content: "\f182"; -} -i.icon.fighter.jet:before { - content: "\f0fb"; -} -i.icon.file.outline:before { - content: "\f016"; -} -i.icon.file.text.outline:before { - content: "\f0f6"; -} -i.icon.file.text:before { - content: "\f15c"; -} -i.icon.file:before { - content: "\f15b"; -} -i.icon.filter:before { - content: "\f0b0"; -} -i.icon.fire.extinguisher:before { - content: "\f134"; -} -i.icon.fire:before { - content: "\f06d"; -} -i.icon.flag.checkered:before { - content: "\f11e"; -} -i.icon.flag.empty:before { - content: "\f11d"; -} -i.icon.flag:before { - content: "\f024"; -} -i.icon.flickr:before { - content: "\f16e"; -} -i.icon.folder.open.outline:before { - content: "\f115"; -} -i.icon.folder.open:before { - content: "\f07c"; -} -i.icon.folder.outline:before { - content: "\f114"; -} -i.icon.folder:before { - content: "\f07b"; -} -i.icon.font:before { - content: "\f031"; -} -i.icon.food:before { - content: "\f0f5"; -} -i.icon.forward.mail:before { - content: "\f064"; -} -i.icon.forward:before { - content: "\f04e"; -} -i.icon.foursquare:before { - content: "\f180"; -} -i.icon.frown:before { - content: "\f119"; -} -i.icon.fullscreen:before { - content: "\f0b2"; -} -i.icon.gamepad:before { - content: "\f11b"; -} -i.icon.gift:before { - content: "\f06b"; -} -i.icon.github.alternate:before { - content: "\f09b"; -} -i.icon.github.sign:before { - content: "\f092"; -} -i.icon.github:before { - content: "\f113"; -} -i.icon.gittip:before { - content: "\f184"; -} -i.icon.glass:before { - content: "\f000"; -} -i.icon.globe:before { - content: "\f0ac"; -} -i.icon.google.plus.sign:before { - content: "\f0d4"; -} -i.icon.google.plus:before { - content: "\f0d5"; -} -i.icon.h.sign:before { - content: "\f0fd"; -} -i.icon.hand.down:before { - content: "\f0a7"; -} -i.icon.hand.left:before { - content: "\f0a5"; -} -i.icon.hand.right:before { - content: "\f0a4"; -} -i.icon.hand.up:before { - content: "\f0a6"; -} -i.icon.hdd:before { - content: "\f0a0"; -} -i.icon.headphones:before { - content: "\f025"; -} -i.icon.heart.empty:before { - content: "\f08a"; -} -i.icon.heart:before { - content: "\f004"; -} -i.icon.help:before { - content: "\f059"; -} -i.icon.hide:before { - content: "\f070"; -} -i.icon.home:before { - content: "\f015"; -} -i.icon.hospital:before { - content: "\f0f8"; -} -i.icon.html5:before { - content: "\f13b"; -} -i.icon.inbox:before { - content: "\f01c"; -} -i.icon.indent.left:before { - content: "\f03b"; -} -i.icon.indent.right:before { - content: "\f03c"; -} -i.icon.info.letter:before { - content: "\f129"; -} -i.icon.info:before { - content: "\f05a"; -} -i.icon.instagram:before { - content: "\f16d"; -} -i.icon.italic:before { - content: "\f033"; -} -i.icon.key:before { - content: "\f084"; -} -i.icon.keyboard:before { - content: "\f11c"; -} -i.icon.lab:before { - content: "\f0c3"; -} -i.icon.laptop:before { - content: "\f109"; -} -i.icon.layout.block:before { - content: "\f009"; -} -i.icon.layout.column:before { - content: "\f0db"; -} -i.icon.layout.grid:before { - content: "\f00a"; -} -i.icon.layout.list:before { - content: "\f00b"; -} -i.icon.leaf:before { - content: "\f06c"; -} -i.icon.legal:before { - content: "\f0e3"; -} -i.icon.lemon:before { - content: "\f094"; -} -i.icon.level.down:before { - content: "\f149"; -} -i.icon.level.up:before { - content: "\f148"; -} -i.icon.lightbulb:before { - content: "\f0eb"; -} -i.icon.linkedin.sign:before { - content: "\f08c"; -} -i.icon.linkedin:before { - content: "\f0e1"; -} -i.icon.linux:before { - content: "\f17c"; -} -i.icon.list.ordered:before { - content: "\f0cb"; -} -i.icon.list.unordered:before { - content: "\f0ca"; -} -i.icon.list:before { - content: "\f03a"; -} -i.icon.loading:before { - content: "\f110"; -} -i.icon.location:before { - content: "\f124"; -} -i.icon.lock:before { - content: "\f023"; -} -i.icon.long.arrow.down:before { - content: "\f175"; -} -i.icon.long.arrow.left:before { - content: "\f177"; -} -i.icon.long.arrow.right:before { - content: "\f178"; -} -i.icon.long.arrow.up:before { - content: "\f176"; -} -i.icon.magic:before { - content: "\f0d0"; -} -i.icon.magnet:before { - content: "\f076"; -} -i.icon.mail.outline:before { - content: "\f003"; -} -i.icon.mail.reply:before { - content: "\f112"; -} -i.icon.mail:before { - content: "\f0e0"; -} -i.icon.male:before { - content: "\f183"; -} -i.icon.map.marker:before { - content: "\f041"; -} -i.icon.map:before { - content: "\f14e"; -} -i.icon.maxcdn:before { - content: "\f136"; -} -i.icon.medkit:before { - content: "\f0fa"; -} -i.icon.meh:before { - content: "\f11a"; -} -i.icon.minus.sign.alternate:before { - content: "\f146"; -} -i.icon.minus.sign:before { - content: "\f056"; -} -i.icon.minus:before { - content: "\f068"; -} -i.icon.mobile:before { - content: "\f10b"; -} -i.icon.money:before { - content: "\f0d6"; -} -i.icon.moon:before { - content: "\f186"; -} -i.icon.move:before { - content: "\f047"; -} -i.icon.music:before { - content: "\f001"; -} -i.icon.mute:before { - content: "\f131"; -} -i.icon.off:before { - content: "\f011"; -} -i.icon.ok.circle:before { - content: "\f05d"; -} -i.icon.ok.sign:before { - content: "\f058"; -} -i.icon.paste:before { - content: "\f0ea"; -} -i.icon.pause:before { - content: "\f04c"; -} -i.icon.payment:before { - content: "\f09d"; -} -i.icon.pencil:before { - content: "\f040"; -} -i.icon.phone.sign:before { - content: "\f098"; -} -i.icon.phone:before { - content: "\f095"; -} -i.icon.photo:before { - content: "\f03e"; -} -i.icon.pin:before { - content: "\f08d"; -} -i.icon.pinterest.sign:before { - content: "\f0d3"; -} -i.icon.pinterest:before { - content: "\f0d2"; -} -i.icon.plane:before { - content: "\f072"; -} -i.icon.play.circle:before { - content: "\f01d"; -} -i.icon.play.sign:before { - content: "\f144"; -} -i.icon.play:before { - content: "\f04b"; -} -i.icon.pound:before { - content: "\f154"; -} -i.icon.print:before { - content: "\f02f"; -} -i.icon.puzzle.piece:before { - content: "\f12e"; -} -i.icon.qr.code:before { - content: "\f029"; -} -i.icon.question:before { - content: "\f128"; -} -i.icon.quote.left:before { - content: "\f10d"; -} -i.icon.quote.right:before { - content: "\f10e"; -} -i.icon.refresh:before { - content: "\f021"; -} -i.icon.remove.circle:before { - content: "\f05c"; -} -i.icon.remove.sign:before { - content: "\f057"; -} -i.icon.remove:before { - content: "\f00d"; -} -i.icon.renren:before { - content: "\f18b"; -} -i.icon.reorder:before { - content: "\f0c9"; -} -i.icon.repeat:before { - content: "\f01e"; -} -i.icon.reply.all.mail:before { - content: "\f122"; -} -i.icon.resize.full:before { - content: "\f065"; -} -i.icon.resize.horizontal:before { - content: "\f07e"; -} -i.icon.resize.small:before { - content: "\f066"; -} -i.icon.resize.vertical:before { - content: "\f07d"; -} -i.icon.retweet:before { - content: "\f079"; -} -i.icon.road:before { - content: "\f018"; -} -i.icon.rocket:before { - content: "\f135"; -} -i.icon.rss.sign:before { - content: "\f143"; -} -i.icon.rss:before { - content: "\f09e"; -} -i.icon.rupee:before { - content: "\f156"; -} -i.icon.save:before { - content: "\f0c7"; -} -i.icon.screenshot:before { - content: "\f05b"; -} -i.icon.search:before { - content: "\f002"; -} -i.icon.setting:before { - content: "\f013"; -} -i.icon.settings:before { - content: "\f085"; -} -i.icon.share.sign:before { - content: "\f14d"; -} -i.icon.share:before { - content: "\f045"; -} -i.icon.shield:before { - content: "\f132"; -} -i.icon.shuffle:before { - content: "\f074"; -} -i.icon.sign.in:before { - content: "\f090"; -} -i.icon.sign.out:before { - content: "\f08b"; -} -i.icon.sign:before { - content: "\f0c8"; -} -i.icon.signal:before { - content: "\f012"; -} -i.icon.sitemap:before { - content: "\f0e8"; -} -i.icon.skype:before { - content: "\f17e"; -} -i.icon.smile:before { - content: "\f118"; -} -i.icon.sort.ascending:before { - content: "\f0de"; -} -i.icon.sort.descending:before { - content: "\f0dd"; -} -i.icon.sort.alphabet.descending:before { - content: "\f15e"; -} -i.icon.sort.alphabet:before { - content: "\f15d"; -} -i.icon.sort.attributes.descending:before { - content: "\f161"; -} -i.icon.sort.attributes:before { - content: "\f160"; -} -i.icon.sort.order.descending:before { - content: "\f163"; -} -i.icon.sort.order:before { - content: "\f162"; -} -i.icon.sort:before { - content: "\f0dc"; -} -i.icon.stackexchange:before { - content: "\f16c"; -} -i.icon.star.empty:before { - content: "\f006"; -} -i.icon.star.half.empty:before { - content: "\f123"; -} -i.icon.star.half.full:before, -i.icon.star.half:before { - content: "\f089"; -} -i.icon.star:before { - content: "\f005"; -} -i.icon.step.backward:before { - content: "\f048"; -} -i.icon.step.forward:before { - content: "\f051"; -} -i.icon.stethoscope:before { - content: "\f0f1"; -} -i.icon.stop:before { - content: "\f04d"; -} -i.icon.strikethrough:before { - content: "\f0cc"; -} -i.icon.subscript:before { - content: "\f12c"; -} -i.icon.suitcase:before { - content: "\f0f2"; -} -i.icon.sun:before { - content: "\f185"; -} -i.icon.superscript:before { - content: "\f12b"; -} -i.icon.table:before { - content: "\f0ce"; -} -i.icon.tablet:before { - content: "\f10a"; -} -i.icon.tag:before { - content: "\f02b"; -} -i.icon.tags:before { - content: "\f02c"; -} -i.icon.tasks:before { - content: "\f0ae"; -} -i.icon.terminal:before { - content: "\f120"; -} -i.icon.text.height:before { - content: "\f034"; -} -i.icon.text.width:before { - content: "\f035"; -} -i.icon.thumbs.down.outline:before { - content: "\f088"; -} -i.icon.thumbs.down:before { - content: "\f165"; -} -i.icon.thumbs.up.outline:before { - content: "\f087"; -} -i.icon.thumbs.up:before { - content: "\f164"; -} -i.icon.ticket:before { - content: "\f145"; -} -i.icon.time:before { - content: "\f017"; -} -i.icon.tint:before { - content: "\f043"; -} -i.icon.trash:before { - content: "\f014"; -} -i.icon.trello:before { - content: "\f181"; -} -i.icon.trophy:before { - content: "\f091"; -} -i.icon.truck:before { - content: "\f0d1"; -} -i.icon.tumblr.sign:before { - content: "\f174"; -} -i.icon.tumblr:before { - content: "\f173"; -} -i.icon.twitter.sign:before { - content: "\f081"; -} -i.icon.twitter:before { - content: "\f099"; -} -i.icon.umbrella:before { - content: "\f0e9"; -} -i.icon.underline:before { - content: "\f0cd"; -} -i.icon.undo:before { - content: "\f0e2"; -} -i.icon.unhide:before { - content: "\f06e"; -} -i.icon.unlink:before { - content: "\f127"; -} -i.icon.unlock.alternate:before { - content: "\f13e"; -} -i.icon.unlock:before { - content: "\f09c"; -} -i.icon.unmute:before { - content: "\f130"; -} -i.icon.up:before { - content: "\f062"; -} -i.icon.upload.disk:before { - content: "\f093"; -} -i.icon.upload:before { - content: "\f01b"; -} -i.icon.url:before { - content: "\f0c1"; -} -i.icon.user:before { - content: "\f007"; -} -i.icon.users:before { - content: "\f0c0"; -} -i.icon.video:before { - content: "\f008"; -} -i.icon.vk:before { - content: "\f189"; -} -i.icon.volume.down:before { - content: "\f027"; -} -i.icon.volume.off:before { - content: "\f026"; -} -i.icon.volume.up:before { - content: "\f028"; -} -i.icon.warning:before { - content: "\f071"; -} -i.icon.weibo:before { - content: "\f18a"; -} -i.icon.windows:before { - content: "\f17a"; -} -i.icon.won:before { - content: "\f159"; -} -i.icon.wrench:before { - content: "\f0ad"; -} -i.icon.xing.sign:before { - content: "\f169"; -} -i.icon.xing:before { - content: "\f168"; -} -i.icon.yen:before { - content: "\f157"; -} -i.icon.youtube.play:before { - content: "\f16a"; -} -i.icon.youtube.sign:before { - content: "\f166"; -} -i.icon.youtube:before { - content: "\f167"; -} -i.icon.yuan:before { - content: "\f158"; -} -i.icon.zoom.in:before { - content: "\f00e"; -} -i.icon.zoom.out:before { - content: "\f010"; -} -/*-------------- - Aliases ----------------*/ -i.icon.check:before { - content: "\f00c"; -} -i.icon.close:before { - content: "\f00d"; -} -i.icon.delete:before { - content: "\f00d"; -} -i.icon.like:before { - content: "\f004"; -} -i.icon.plus:before { - content: "\f067"; -} -i.icon.signup:before { - content: "\f044"; -} -/*-------------- - Spacing Fix ----------------*/ -/* stars are usually consecutive */ -i.icon.star { - width: auto; - margin: 0em; -} -/* left side icons */ -i.icon.left { - width: auto; - margin: 0em 0.5em 0em 0em; -} -/* right side icons */ -i.icon.search, -i.icon.right { - width: auto; - margin: 0em 0em 0em 0.5em; -} -/******************************* - Types -*******************************/ -/*-------------- - Loading ----------------*/ -i.icon.loading { - -webkit-animation: icon-loading 2s linear infinite; - -moz-animation: icon-loading 2s linear infinite; - -ms-animation: icon-loading 2s linear infinite; - animation: icon-loading 2s linear infinite; -} -@keyframes icon-loading { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-moz-keyframes icon-loading { - from { - -moz-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -moz-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-webkit-keyframes icon-loading { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-ms-keyframes icon-loading { - from { - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } -} -/******************************* - States -*******************************/ -i.icon.hover { - opacity: 1; -} -i.icon.active { - opacity: 1; -} -i.emphasized.icon { - opacity: 1; -} -i.icon.disabled { - opacity: 0.3; -} -/******************************* - Variations -*******************************/ -/*------------------- - Link ---------------------*/ -i.link.icon { - cursor: pointer; - opacity: 0.7; - -webkit-transition: opacity 0.3s ease-out; - -moz-transition: opacity 0.3s ease-out; - transition: opacity 0.3s ease-out; -} -i.link.icon:hover { - opacity: 1 !important; -} -/*------------------- - Circular ---------------------*/ -i.circular.icon { - border-radius: 500em !important; - padding: 0.5em 0.35em !important; - -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - line-height: 1 !important; - width: 2em !important; - height: 2em !important; -} -i.circular.inverted.icon { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -/*------------------- - Flipped ---------------------*/ -i.flipped.icon, -i.horizontally.flipped.icon { - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -i.vertically.flipped.icon { - -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -/*------------------- - Rotated ---------------------*/ -i.rotated.icon, -i.right.rotated.icon, -i.clockwise.rotated.icon { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -i.left.rotated.icon, -i.counterclockwise.rotated.icon { - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); -} -/*------------------- - Square ---------------------*/ -i.square.icon { - width: 2em; - height: 2em; - padding: 0.5em 0.35em !important; - -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; - vertical-align: baseline; -} -i.square.inverted.icon { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -/*------------------- - Inverted ---------------------*/ -i.inverted.icon { - background-color: #222222; - color: #FFFFFF; - -moz-osx-font-smoothing: grayscale; -} -/*------------------- - Colors ---------------------*/ -i.blue.icon { - color: #6ECFF5 !important; -} -i.black.icon { - color: #5C6166 !important; -} -i.green.icon { - color: #A1CF64 !important; -} -i.red.icon { - color: #D95C5C !important; -} -i.purple.icon { - color: #564F8A !important; -} -i.orange.icon { - color: #F05940 !important; -} -i.teal.icon { - color: #00B5AD !important; -} -/*------------------- - Inverted Colors ---------------------*/ -i.inverted.black.icon { - background-color: #5C6166 !important; - color: #FFFFFF !important; -} -i.inverted.blue.icon { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; -} -i.inverted.green.icon { - background-color: #A1CF64 !important; - color: #FFFFFF !important; -} -i.inverted.red.icon { - background-color: #D95C5C !important; - color: #FFFFFF !important; -} -i.inverted.purple.icon { - background-color: #564F8A !important; - color: #FFFFFF !important; -} -i.inverted.orange.icon { - background-color: #F05940 !important; - color: #FFFFFF !important; -} -i.inverted.teal.icon { - background-color: #00B5AD !important; - color: #FFFFFF !important; -} -/*------------------- - Sizes ---------------------*/ -i.small.icon { - font-size: 0.875em; -} -i.icon { - font-size: 1em; -} -i.large.icon { - font-size: 1.5em; - vertical-align: middle; -} -i.big.icon { - font-size: 2em; - vertical-align: middle; -} -i.huge.icon { - font-size: 4em; - vertical-align: middle; -} -i.massive.icon { - font-size: 8em; - vertical-align: middle; -} - -/* - * # Semantic - Image - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Image -*******************************/ -.ui.image { - position: relative; - display: inline-block; - vertical-align: middle; - max-width: 100%; - background-color: rgba(0, 0, 0, 0.05); -} -img.ui.image { - display: block; - background: none; -} -.ui.image img { - display: block; - max-width: 100%; - height: auto; -} -/******************************* - States -*******************************/ -.ui.disabled.image { - cursor: default; - opacity: 0.3; -} -/******************************* - Variations -*******************************/ -/*-------------- - Rounded ----------------*/ -.ui.rounded.images .image, -.ui.rounded.images img, -.ui.rounded.image img, -.ui.rounded.image { - border-radius: 0.3125em; -} -/*-------------- - Circular ----------------*/ -.ui.circular.images .image, -.ui.circular.images img, -.ui.circular.image img, -.ui.circular.image { - border-radius: 500rem; -} -/*-------------- - Fluid ----------------*/ -.ui.fluid.images, -.ui.fluid.image, -.ui.fluid.images img, -.ui.fluid.image img { - display: block; - width: 100%; -} -/*-------------- - Avatar ----------------*/ -.ui.avatar.images .image, -.ui.avatar.images img, -.ui.avatar.image img, -.ui.avatar.image { - margin-right: 0.5em; - display: inline-block; - width: 2em; - height: 2em; - border-radius: 500rem; -} -/*------------------- - Floated ---------------------*/ -.ui.floated.image, -.ui.floated.images { - float: left; - margin-right: 1em; - margin-bottom: 1em; -} -.ui.right.floated.images, -.ui.right.floated.image { - float: right; - margin-bottom: 1em; - margin-left: 1em; -} -/*-------------- - Sizes ----------------*/ -.ui.tiny.images .image, -.ui.tiny.images img, -.ui.tiny.image { - width: 20px; - font-size: 0.7rem; -} -.ui.mini.images .image, -.ui.mini.images img, -.ui.mini.image { - width: 35px; - font-size: 0.8rem; -} -.ui.small.images .image, -.ui.small.images img, -.ui.small.image { - width: 80px; - font-size: 0.9rem; -} -.ui.medium.images .image, -.ui.medium.images img, -.ui.medium.image { - width: 300px; - font-size: 1rem; -} -.ui.large.images .image, -.ui.large.images img, -.ui.large.image { - width: 450px; - font-size: 1.1rem; -} -.ui.huge.images .image, -.ui.huge.images img, -.ui.huge.image { - width: 600px; - font-size: 1.2rem; -} -/******************************* - Groups -*******************************/ -.ui.images { - font-size: 0em; - margin: 0em -0.25rem 0rem; -} -.ui.images .image, -.ui.images img { - display: inline-block; - margin: 0em 0.25em 0.5em; -} - -/* - * # Semantic - Input - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Standard -*******************************/ -/*-------------------- - Inputs ----------------------*/ -.ui.input { - display: inline-block; - position: relative; - color: rgba(0, 0, 0, 0.7); -} -.ui.input input { - width: 100%; - font-family: "Helvetica Neue", "Helvetica", Arial; - margin: 0em; - padding: 0.65em 1em; - font-size: 1em; - background-color: #FFFFFF; - border: 1px solid rgba(0, 0, 0, 0.15); - outline: none; - color: rgba(0, 0, 0, 0.7); - border-radius: 0.3125em; - -webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease; - -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; - transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -/*-------------------- - Placeholder ----------------------*/ -/* browsers require these rules separate */ -.ui.input::-webkit-input-placeholder { - color: #BBBBBB; -} -.ui.input::-moz-placeholder { - color: #BBBBBB; -} -/******************************* - States -*******************************/ -/*-------------------- - Active ----------------------*/ -.ui.input input:active, -.ui.input.down input { - border-color: rgba(0, 0, 0, 0.3); - background-color: #FAFAFA; -} -/*-------------------- - Loading ----------------------*/ -.ui.loading.input > .icon { - background: url(../images/loader-mini.gif) no-repeat 50% 50%; -} -.ui.loading.input > .icon:before, -.ui.loading.input > .icon:after { - display: none; -} -/*-------------------- - Focus ----------------------*/ -.ui.input.focus input, -.ui.input input:focus { - border-color: rgba(0, 0, 0, 0.2); - color: rgba(0, 0, 0, 0.85); -} -.ui.input.focus input input::-webkit-input-placeholder, -.ui.input input:focus input::-webkit-input-placeholder { - color: #AAAAAA; -} -.ui.input.focus input input::-moz-placeholder, -.ui.input input:focus input::-moz-placeholder { - color: #AAAAAA; -} -/*-------------------- - Error ----------------------*/ -.ui.input.error input { - background-color: #FFFAFA; - border-color: #E7BEBE; - color: #D95C5C; -} -/* Error Placeholder */ -.ui.input.error input ::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.4); -} -.ui.input.error input ::-moz-placeholder { - color: rgba(255, 80, 80, 0.4); -} -.ui.input.error input :focus::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.7); -} -.ui.input.error input :focus::-moz-placeholder { - color: rgba(255, 80, 80, 0.7); -} -/******************************* - Variations -*******************************/ -/*-------------------- - Transparent ----------------------*/ -.ui.transparent.input input { - border: none; - background-color: transparent; -} -/*-------------------- - Icon ----------------------*/ -.ui.icon.input > .icon { - cursor: default; - position: absolute; - opacity: 0.5; - top: 0px; - right: 0px; - margin: 0em; - width: 2.6em; - height: 100%; - padding-top: 0.82em; - text-align: center; - border-radius: 0em 0.3125em 0.3125em 0em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: opacity 0.3s ease-out; - -moz-transition: opacity 0.3s ease-out; - transition: opacity 0.3s ease-out; -} -.ui.icon.input > .link.icon { - cursor: pointer; -} -.ui.icon.input input { - padding-right: 3em !important; -} -.ui.icon.input > .circular.icon { - top: 0.35em; - right: 0.5em; -} -/* Left Side */ -.ui.left.icon.input > .icon { - right: auto; - left: 1px; - border-radius: 0.3125em 0em 0em 0.3125em; -} -.ui.left.icon.input > .circular.icon { - right: auto; - left: 0.5em; -} -.ui.left.icon.input > input { - padding-left: 3em !important; - padding-right: 1.2em !important; -} -/* Focus */ -.ui.icon.input > input:focus ~ .icon { - opacity: 1; -} -/*-------------------- - Labeled ----------------------*/ -.ui.labeled.input .corner.label { - font-size: 0.7em; - border-radius: 0 0.3125em; -} -.ui.labeled.input .left.corner.label { - border-radius: 0.3125em 0; -} -.ui.labeled.input input { - padding-right: 2.5em !important; -} -/* Spacing with corner label */ -.ui.labeled.icon.input:not(.left) > input { - padding-right: 3.25em !important; -} -.ui.labeled.icon.input:not(.left) > .icon { - margin-right: 1.25em; -} -/*-------------------- - Action ----------------------*/ -.ui.action.input { - display: table; -} -.ui.action.input > input { - display: table-cell; - border-top-right-radius: 0px !important; - border-bottom-right-radius: 0px !important; - border-right: none; -} -.ui.action.input > .button, -.ui.action.input > .buttons { - display: table-cell; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - white-space: nowrap; -} -.ui.action.input > .button > .icon, -.ui.action.input > .buttons > .button > .icon { - display: inline; - vertical-align: top; -} -.ui.fluid.action.input { - display: table; - width: 100%; -} -.ui.fluid.action.input > .button { - width: 0.01%; -} -/*-------------------- - Fluid ----------------------*/ -.ui.fluid.input { - display: block; -} -/*-------------------- - Size ----------------------*/ -.ui.mini.input { - font-size: 0.8125em; -} -.ui.small.input { - font-size: 0.875em; -} -.ui.input { - font-size: 1em; -} -.ui.large.input { - font-size: 1.125em; -} -.ui.big.input { - font-size: 1.25em; -} -.ui.huge.input { - font-size: 1.375em; -} -.ui.massive.input { - font-size: 1.5em; -} - -/* - * # Semantic - Label - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Label -*******************************/ -.ui.label { - display: inline-block; - vertical-align: middle; - margin: -0.25em 0.25em 0em; - background-color: #E8E8E8; - border-color: #E8E8E8; - padding: 0.5em 0.8em; - color: rgba(0, 0, 0, 0.65); - text-transform: uppercase; - font-weight: normal; - border-radius: 0.325em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: background 0.1s linear - ; - -moz-transition: background 0.1s linear - ; - transition: background 0.1s linear - ; -} -.ui.label:first-child { - margin-left: 0em; -} -.ui.label:last-child { - margin-right: 0em; -} -/* Link */ -a.ui.label { - cursor: pointer; -} -/* Inside Link */ -.ui.label a { - cursor: pointer; - color: inherit; - opacity: 0.8; - -webkit-transition: 0.2s opacity ease; - -moz-transition: 0.2s opacity ease; - transition: 0.2s opacity ease; -} -.ui.label a:hover { - opacity: 1; -} -/* Detail */ -.ui.label .detail { - display: inline-block; - margin-left: 0.5em; - font-weight: bold; - opacity: 0.8; -} -/* Icon */ -.ui.label .icon { - width: auto; -} -/* Removable label */ -.ui.label .delete.icon { - cursor: pointer; - margin: 0em 0em 0em 0.5em; - opacity: 0.7; - -webkit-transition: background 0.1s linear - ; - -moz-transition: background 0.1s linear - ; - transition: background 0.1s linear - ; -} -.ui.label .delete.icon:hover { - opacity: 0.99; -} -/*------------------- - Coupling ---------------------*/ -/* Padding on next content after a label */ -.ui.segment > .attached.label:first-child + * { - margin-top: 2.5em; -} -.ui.segment > .bottom.attached.label:first-child ~ :last-child { - margin-top: 0em; - margin-bottom: 2.5em; -} -/******************************* - Types -*******************************/ -.ui.image.label { - width: auto !important; - margin-top: 0em; - margin-bottom: 0em; - padding-top: 0.4em; - padding-bottom: 0.4em; - line-height: 1.5em; - vertical-align: baseline; - text-transform: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -} -.ui.image.label img { - display: inline-block; - height: 2.25em; - margin: -0.4em 0.8em -0.4em -0.8em; - vertical-align: top; - border-radius: 0.325em 0em 0em 0.325em; -} -/******************************* - States -*******************************/ -/*------------------- - Disabled ---------------------*/ -.ui.label.disabled { - opacity: 0.5; -} -/*------------------- - Hover ---------------------*/ -a.ui.labels .label:hover, -a.ui.label:hover { - background-color: #E0E0E0; - border-color: #E0E0E0; - color: rgba(0, 0, 0, 0.7); -} -.ui.labels a.label:hover:before, -a.ui.label:hover:before { - background-color: #E0E0E0; - color: rgba(0, 0, 0, 0.7); -} -/*------------------- - Visible ---------------------*/ -.ui.labels.visible .label, -.ui.label.visible { - display: inline-block !important; -} -/*------------------- - Hidden ---------------------*/ -.ui.labels.hidden .label, -.ui.label.hidden { - display: none !important; -} -/******************************* - Variations -*******************************/ -/*------------------- - Tag ---------------------*/ -.ui.tag.labels .label, -.ui.tag.label { - margin-left: 1em; - position: relative; - padding: 0.33em 1.3em 0.33em 1.4em; - border-radius: 0px 3px 3px 0px; -} -.ui.tag.labels .label:before, -.ui.tag.label:before { - position: absolute; - top: 0.3em; - left: 0.3em; - content: ''; - margin-left: -1em; - background-image: none; - width: 1.5em; - height: 1.5em; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: background 0.1s linear - ; - -moz-transition: background 0.1s linear - ; - transition: background 0.1s linear - ; -} -.ui.tag.labels .label:after, -.ui.tag.label:after { - position: absolute; - content: ''; - top: 50%; - left: -0.25em; - margin-top: -0.3em; - background-color: #FFFFFF; - width: 0.55em; - height: 0.55em; - -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); - border-radius: 100px 100px 100px 100px; -} -/*------------------- - Ribbon ---------------------*/ -.ui.ribbon.label { - position: relative; - margin: 0em 0.2em; - left: -2rem; - padding-left: 2rem; - border-radius: 0px 4px 4px 0px; - border-color: rgba(0, 0, 0, 0.15); -} -.ui.ribbon.label:after { - position: absolute; - content: ""; - top: 100%; - left: 0%; - border-top: 0em solid transparent; - border-right-width: 1em; - border-right-color: inherit; - border-right-style: solid; - border-bottom: 1em solid transparent; - border-left: 0em solid transparent; - width: 0em; - height: 0em; -} -/*------------------- - Attached ---------------------*/ -.ui.top.attached.label, -.ui.attached.label { - width: 100%; - position: absolute; - margin: 0em; - top: 0em; - left: 0em; - padding: 0.75em 1em; - border-radius: 4px 4px 0em 0em; -} -.ui.bottom.attached.label { - top: auto; - bottom: 0em; - border-radius: 0em 0em 4px 4px; -} -.ui.top.left.attached.label { - width: auto; - margin-top: 0em !important; - border-radius: 4px 0em 4px 0em; -} -.ui.top.right.attached.label { - width: auto; - left: auto; - right: 0em; - border-radius: 0em 4px 0em 4px; -} -.ui.bottom.left.attached.label { - width: auto; - top: auto; - bottom: 0em; - border-radius: 4px 0em 0em 4px; -} -.ui.bottom.right.attached.label { - top: auto; - bottom: 0em; - left: auto; - right: 0em; - width: auto; - border-radius: 4px 0em 4px 0em; -} -/*------------------- - Corner Label ---------------------*/ -.ui.corner.label { - background-color: transparent; - position: absolute; - top: 0em; - right: 0em; - z-index: 10; - margin: 0em; - width: 3em; - height: 3em; - padding: 0em; - text-align: center; - -webkit-transition: color 0.2s ease; - -moz-transition: color 0.2s ease; - transition: color 0.2s ease; -} -.ui.corner.label:after { - position: absolute; - content: ""; - right: 0em; - top: 0em; - z-index: -1; - width: 0em; - height: 0em; - border-top: 0em solid transparent; - border-right: 3em solid transparent; - border-bottom: 3em solid transparent; - border-left: 0em solid transparent; - border-right-color: inherit; - -webkit-transition: border-color 0.2s ease; - -moz-transition: border-color 0.2s ease; - transition: border-color 0.2s ease; -} -.ui.corner.label .icon { - font-size: 0.875em; - margin: 0.5em 0em 0em 1.25em; -} -.ui.corner.label .text { - display: inline-block; - font-weight: bold; - margin: 0.5em 0em 0em 1em; - width: 2.5em; - font-size: 0.875em; - text-align: center; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -/* Coupling */ -.ui.rounded.image > .ui.corner.label, -.ui.input > .ui.corner.label, -.ui.segment > .ui.corner.label { - overflow: hidden; -} -.ui.segment > .ui.corner.label { - top: -1px; - right: -1px; -} -.ui.segment > .ui.left.corner.label { - right: auto; - left: -1px; -} -.ui.input > .ui.corner.label { - top: 1px; - right: 1px; -} -.ui.input > .ui.right.corner.label { - right: auto; - left: 1px; -} -/* Left Corner */ -.ui.left.corner.label, -.ui.left.corner.label:after { - right: auto; - left: 0em; -} -.ui.left.corner.label:after { - border-top: 3em solid transparent; - border-right: 3em solid transparent; - border-bottom: 0em solid transparent; - border-left: 0em solid transparent; - border-top-color: inherit; -} -.ui.left.corner.label .icon { - margin: 0.5em 0em 0em -1em; -} -.ui.left.corner.label .text { - margin: 0.5em 0em 0em -1em; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} -/* Hover */ -.ui.corner.label:hover { - background-color: transparent; -} -/*------------------- - Fluid ---------------------*/ -.ui.label.fluid, -.ui.fluid.labels > .label { - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -/*------------------- - Inverted ---------------------*/ -.ui.inverted.labels .label, -.ui.inverted.label { - color: #FFFFFF !important; -} -/*------------------- - Colors ---------------------*/ -/*--- Black ---*/ -.ui.black.labels .label, -.ui.black.label { - background-color: #5C6166 !important; - border-color: #5C6166 !important; - color: #FFFFFF !important; -} -.ui.labels .black.label:before, -.ui.black.labels .label:before, -.ui.black.label:before { - background-color: #5C6166 !important; -} -/* Hover */ -a.ui.black.labels .label:hover, -a.ui.black.label:hover { - background-color: #333333 !important; - border-color: #333333 !important; -} -.ui.labels a.black.label:hover:before, -.ui.black.labels a.label:hover:before, -a.ui.black.label:hover:before { - background-color: #333333 !important; -} -/* Corner */ -.ui.black.corner.label, -.ui.black.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.black.ribbon.label { - border-color: #333333 !important; -} -/*--- Green ---*/ -.ui.green.labels .label, -.ui.green.label { - background-color: #A1CF64 !important; - border-color: #A1CF64 !important; - color: #FFFFFF !important; -} -.ui.labels .green.label:before, -.ui.green.labels .label:before, -.ui.green.label:before { - background-color: #A1CF64 !important; -} -/* Hover */ -a.ui.green.labels .label:hover, -a.ui.green.label:hover { - background-color: #89B84C !important; - border-color: #89B84C !important; -} -.ui.labels a.green.label:hover:before, -.ui.green.labels a.label:hover:before, -a.ui.green.label:hover:before { - background-color: #89B84C !important; -} -/* Corner */ -.ui.green.corner.label, -.ui.green.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.green.ribbon.label { - border-color: #89B84C !important; -} -/*--- Red ---*/ -.ui.red.labels .label, -.ui.red.label { - background-color: #D95C5C !important; - border-color: #D95C5C !important; - color: #FFFFFF !important; -} -.ui.labels .red.label:before, -.ui.red.labels .label:before, -.ui.red.label:before { - background-color: #D95C5C !important; -} -/* Corner */ -.ui.red.corner.label, -.ui.red.corner.label:hover { - background-color: transparent !important; -} -/* Hover */ -a.ui.red.labels .label:hover, -a.ui.red.label:hover { - background-color: #DE3859 !important; - border-color: #DE3859 !important; - color: #FFFFFF !important; -} -.ui.labels a.red.label:hover:before, -.ui.red.labels a.label:hover:before, -a.ui.red.label:hover:before { - background-color: #DE3859 !important; -} -/* Ribbon */ -.ui.red.ribbon.label { - border-color: #DE3859 !important; -} -/*--- Blue ---*/ -.ui.blue.labels .label, -.ui.blue.label { - background-color: #6ECFF5 !important; - border-color: #6ECFF5 !important; - color: #FFFFFF !important; -} -.ui.labels .blue.label:before, -.ui.blue.labels .label:before, -.ui.blue.label:before { - background-color: #6ECFF5 !important; -} -/* Hover */ -a.ui.blue.labels .label:hover, -.ui.blue.labels a.label:hover, -a.ui.blue.label:hover { - background-color: #1AB8F3 !important; - border-color: #1AB8F3 !important; - color: #FFFFFF !important; -} -.ui.labels a.blue.label:hover:before, -.ui.blue.labels a.label:hover:before, -a.ui.blue.label:hover:before { - background-color: #1AB8F3 !important; -} -/* Corner */ -.ui.blue.corner.label, -.ui.blue.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.blue.ribbon.label { - border-color: #1AB8F3 !important; -} -/*--- Purple ---*/ -.ui.purple.labels .label, -.ui.purple.label { - background-color: #564F8A !important; - border-color: #564F8A !important; - color: #FFFFFF !important; -} -.ui.labels .purple.label:before, -.ui.purple.labels .label:before, -.ui.purple.label:before { - background-color: #564F8A !important; -} -/* Hover */ -a.ui.purple.labels .label:hover, -.ui.purple.labels a.label:hover, -a.ui.purple.label:hover { - background-color: #3E3773 !important; - border-color: #3E3773 !important; - color: #FFFFFF !important; -} -.ui.labels a.purple.label:hover:before, -.ui.purple.labels a.label:hover:before, -a.ui.purple.label:hover:before { - background-color: #3E3773 !important; -} -/* Corner */ -.ui.purple.corner.label, -.ui.purple.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.purple.ribbon.label { - border-color: #3E3773 !important; -} -/*--- Orange ---*/ -.ui.orange.labels .label, -.ui.orange.label { - background-color: #F05940 !important; - border-color: #F05940 !important; - color: #FFFFFF !important; -} -.ui.labels .orange.label:before, -.ui.orange.labels .label:before, -.ui.orange.label:before { - background-color: #F05940 !important; -} -/* Hover */ -a.ui.orange.labels .label:hover, -.ui.orange.labels a.label:hover, -a.ui.orange.label:hover { - background-color: #FF4121 !important; - border-color: #FF4121 !important; - color: #FFFFFF !important; -} -.ui.labels a.orange.label:hover:before, -.ui.orange.labels a.label:hover:before, -a.ui.orange.label:hover:before { - background-color: #FF4121 !important; -} -/* Corner */ -.ui.orange.corner.label, -.ui.orange.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.orange.ribbon.label { - border-color: #FF4121 !important; -} -/*--- Teal ---*/ -.ui.teal.labels .label, -.ui.teal.label { - background-color: #00B5AD !important; - border-color: #00B5AD !important; - color: #FFFFFF !important; -} -.ui.labels .teal.label:before, -.ui.teal.labels .label:before, -.ui.teal.label:before { - background-color: #00B5AD !important; -} -/* Hover */ -a.ui.teal.labels .label:hover, -.ui.teal.labels a.label:hover, -a.ui.teal.label:hover { - background-color: #009A93 !important; - border-color: #009A93 !important; - color: #FFFFFF !important; -} -.ui.labels a.teal.label:hover:before, -.ui.teal.labels a.label:hover:before, -a.ui.teal.label:hover:before { - background-color: #009A93 !important; -} -/* Corner */ -.ui.teal.corner.label, -.ui.teal.corner.label:hover { - background-color: transparent !important; -} -/* Ribbon */ -.ui.teal.ribbon.label { - border-color: #009A93 !important; -} -/*------------------- - Horizontal ---------------------*/ -.ui.horizontal.labels .label, -.ui.horizontal.label { - margin: -0.125em 0.5em -0.125em 0em; - padding: 0.35em 1em; - min-width: 6em; - text-align: center; -} -/*------------------- - Circular ---------------------*/ -.ui.circular.labels .label, -.ui.circular.label { - min-height: 1em; - max-height: 2em; - padding: 0.5em !important; - line-height: 1em; - text-align: center; - border-radius: 500rem; -} -/*------------------- - Pointing ---------------------*/ -.ui.pointing.label { - position: relative; -} -.ui.attached.pointing.label { - position: absolute; -} -.ui.pointing.label:before { - position: absolute; - content: ""; - width: 0.6em; - height: 0.6em; - background-image: none; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - z-index: 2; - -webkit-transition: background 0.1s linear - ; - -moz-transition: background 0.1s linear - ; - transition: background 0.1s linear - ; -} -/*--- Above ---*/ -.ui.pointing.label:before { - background-color: #E8E8E8; -} -.ui.pointing.label, -.ui.pointing.above.label { - margin-top: 1em; -} -.ui.pointing.label:before, -.ui.pointing.above.label:before { - margin-left: -0.3em; - top: -0.3em; - left: 50%; -} -/*--- Below ---*/ -.ui.pointing.below.label { - margin-top: 0em; - margin-bottom: 1em; -} -.ui.pointing.below.label:before { - margin-left: -0.3em; - top: auto; - right: auto; - bottom: -0.3em; - left: 50%; -} -/*--- Left ---*/ -.ui.pointing.left.label { - margin-top: 0em; - margin-left: 1em; -} -.ui.pointing.left.label:before { - margin-top: -0.3em; - bottom: auto; - right: auto; - top: 50%; - left: 0em; -} -/*--- Right ---*/ -.ui.pointing.right.label { - margin-top: 0em; - margin-right: 1em; -} -.ui.pointing.right.label:before { - margin-top: -0.3em; - right: -0.3em; - top: 50%; - bottom: auto; - left: auto; -} -/*------------------ - Floating Label --------------------*/ -.ui.floating.label { - position: absolute; - z-index: 100; - top: -1em; - left: 100%; - margin: 0em 0em 0em -1.5em !important; -} -/*------------------- - Sizes ---------------------*/ -.ui.small.labels .label, -.ui.small.label { - font-size: 0.75rem; -} -.ui.label { - font-size: 0.8125rem; -} -.ui.large.labels .label, -.ui.large.label { - font-size: 0.875rem; -} -.ui.huge.labels .label, -.ui.huge.label { - font-size: 1rem; -} - -/* - * # Semantic - Loader - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Loader -*******************************/ -/* Standard Size */ -.ui.loader { - display: none; - position: absolute; - top: 50%; - left: 50%; - margin: 0px; - z-index: 1000; - -webkit-transform: translateX(-50%) translateY(-50%); - -moz-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); -} -.ui.dimmer .loader { - display: block; -} -/******************************* - Types -*******************************/ -/*------------------- - Text ---------------------*/ -.ui.text.loader { - width: auto !important; - height: auto !important; - text-align: center; - font-style: normal; -} -.ui.mini.text.loader { - min-width: 16px; - padding-top: 2em; - font-size: 0.875em; -} -.ui.small.text.loader { - min-width: 24px; - padding-top: 2.5em; - font-size: 0.875em; -} -.ui.text.loader { - min-width: 32px; - font-size: 1em; - padding-top: 3em; -} -.ui.large.text.loader { - min-width: 64px; - padding-top: 5em; - font-size: 1.2em; -} -/******************************* - States -*******************************/ -.ui.loader.active, -.ui.loader.visible { - display: block; -} -.ui.loader.disabled, -.ui.loader.hidden { - display: none; -} -/******************************* - Variations -*******************************/ -/*------------------- - Inverted ---------------------*/ -.ui.dimmer .ui.text.loader, -.ui.inverted.text.loader { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.dimmer .ui.text.loader { - color: rgba(0, 0, 0, 0.8); -} -/* Tiny Size */ -.ui.dimmer .mini.ui.loader, -.ui.inverted .mini.ui.loader { - background-image: url(../images/loader-mini-inverted.gif); -} -/* Small Size */ -.ui.dimmer .small.ui.loader, -.ui.inverted .small.ui.loader { - background-image: url(../images/loader-small-inverted.gif); -} -/* Standard Size */ -.ui.dimmer .ui.loader, -.ui.inverted.loader { - background-image: url(../images/loader-medium-inverted.gif); -} -/* Large Size */ -.ui.dimmer .large.ui.loader, -.ui.inverted .large.ui.loader { - background-image: url(../images/loader-large-inverted.gif); -} -/*------------------- - Sizes ---------------------*/ -/* Tiny Size */ -.ui.inverted.dimmer .ui.mini.loader, -.ui.mini.loader { - width: 16px; - height: 16px; - background-image: url(../images/loader-mini.gif); -} -/* Small Size */ -.ui.inverted.dimmer .ui.small.loader, -.ui.small.loader { - width: 24px; - height: 24px; - background-image: url(../images/loader-small.gif); -} -.ui.inverted.dimmer .ui.loader, -.ui.loader { - width: 32px; - height: 32px; - background: url(../images/loader-medium.gif) no-repeat; - background-position: 48% 0px; -} -/* Large Size */ -.ui.inverted.dimmer .ui.loader.large, -.ui.loader.large { - width: 64px; - height: 64px; - background-image: url(../images/loader-large.gif); -} -/*------------------- - Inline ---------------------*/ -.ui.inline.loader { - position: static; - vertical-align: middle; - margin: 0em; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; -} -.ui.inline.loader.active, -.ui.inline.loader.visible { - display: inline-block; -} - -/* - * # Semantic - Progress Bar - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Progress Bar -*******************************/ -.ui.progress { - border: 1px solid rgba(0, 0, 0, 0.1); - width: 100%; - height: 35px; - background-color: #FAFAFA; - padding: 5px; - border-radius: 0.3125em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.progress .bar { - display: inline-block; - height: 100%; - background-color: #CCCCCC; - border-radius: 3px; - -webkit-transition: width 1s ease-in-out, background-color 1s ease-out; - -moz-transition: width 1s ease-in-out, background-color 1s ease-out; - transition: width 1s ease-in-out, background-color 1s ease-out; -} -/******************************* - States -*******************************/ -/*-------------- - Successful ----------------*/ -.ui.successful.progress .bar { - background-color: #73E064 !important; -} -.ui.successful.progress .bar, -.ui.successful.progress .bar::after { - -webkit-animation: none !important; - -moz-animation: none !important; - animation: none !important; -} -.ui.warning.progress .bar { - background-color: #E96633 !important; -} -.ui.warning.progress .bar, -.ui.warning.progress .bar::after { - -webkit-animation: none !important; - -moz-animation: none !important; - animation: none !important; -} -/*-------------- - Failed ----------------*/ -.ui.failed.progress .bar { - background-color: #DF9BA4 !important; -} -.ui.failed.progress .bar, -.ui.failed.progress .bar::after { - -webkit-animation: none !important; - -moz-animation: none !important; - animation: none !important; -} -/*-------------- - Active ----------------*/ -.ui.active.progress .bar { - position: relative; -} -.ui.active.progress .bar::after { - content: ''; - opacity: 0; - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background: #FFFFFF; - border-radius: 3px; - -webkit-animation: progress-active 2s ease-out infinite; - -moz-animation: progress-active 2s ease-out infinite; - animation: progress-active 2s ease-out infinite; -} -@-webkit-keyframes progress-active { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 95%; - } -} -@-moz-keyframes progress-active { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} -@keyframes progress-active { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} -/*-------------- - Disabled ----------------*/ -.ui.disabled.progress { - opacity: 0.35; -} -.ui.disabled.progress .bar, -.ui.disabled.progress .bar::after { - -webkit-animation: none !important; - -moz-animation: none !important; - animation: none !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Attached ----------------*/ -/* bottom attached */ -.ui.progress.attached { - position: relative; - border: none; -} -.ui.progress.attached, -.ui.progress.attached .bar { - display: block; - height: 3px; - padding: 0px; - overflow: hidden; - border-radius: 0em 0em 0.3125em 0.3125em; -} -.ui.progress.attached .bar { - border-radius: 0em; -} -/* top attached */ -.ui.progress.top.attached, -.ui.progress.top.attached .bar { - top: -2px; - border-radius: 0.3125em 0.3125em 0em 0em; -} -.ui.progress.top.attached .bar { - border-radius: 0em; -} -/*-------------- - Colors ----------------*/ -.ui.blue.progress .bar { - background-color: #6ECFF5; -} -.ui.black.progress .bar { - background-color: #5C6166; -} -.ui.green.progress .bar { - background-color: #A1CF64; -} -.ui.red.progress .bar { - background-color: #EF4D6D; -} -.ui.purple.progress .bar { - background-color: #564F8A; -} -.ui.teal.progress .bar { - background-color: #00B5AD; -} -/*-------------- - Striped ----------------*/ -.ui.progress.striped .bar { - -webkit-background-size: 30px 30px; - background-size: 30px 30px; - background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} -.ui.progress.active.striped .bar:after { - -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - animation: none; -} -.ui.progress.active.striped .bar { - -webkit-animation: progress-striped 3s linear infinite; - -moz-animation: progress-striped 3s linear infinite; - animation: progress-striped 3s linear infinite; -} -@-webkit-keyframes progress-striped { - 0% { - background-position: 0px 0; - } - 100% { - background-position: 60px 0; - } -} -@-moz-keyframes progress-striped { - 0% { - background-position: 0px 0; - } - 100% { - background-position: 60px 0; - } -} -@keyframes progress-striped { - 0% { - background-position: 0px 0; - } - 100% { - background-position: 60px 0; - } -} -/*-------------- - Sizes ----------------*/ -.ui.small.progress .bar { - height: 14px; -} - -/* - * # Semantic - Reveal - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Reveal -*******************************/ -.ui.reveal { - display: inline-block; - position: relative !important; - z-index: 2 !important; - font-size: 0em !important; -} -.ui.reveal > .content { - font-size: 1rem !important; -} -.ui.reveal > .visible.content { - -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -} -.ui.reveal > .visible.content { - position: absolute !important; - top: 0em !important; - left: 0em !important; - z-index: 4 !important; - -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -} -.ui.reveal > .hidden.content { - position: relative !important; - z-index: 3 !important; -} -/*------------------ - Loose Coupling --------------------*/ -.ui.reveal.button { - overflow: hidden; -} -/******************************* - Types -*******************************/ -/*-------------- - Slide ----------------*/ -.ui.slide.reveal { - position: relative !important; - display: block; - overflow: hidden !important; - white-space: nowrap; -} -.ui.slide.reveal > .content { - display: block; - float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - margin: 0em; - -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -} -.ui.slide.reveal > .visible.content { - position: relative !important; -} -.ui.slide.reveal > .hidden.content { - position: absolute !important; - left: 100% !important; - width: 100% !important; -} -.ui.slide.reveal:hover > .visible.content, -.ui.slide.reveal:focus > .visible.content { - left: -100% !important; -} -.ui.slide.reveal:hover > .hidden.content, -.ui.slide.reveal:focus > .hidden.content { - left: 0% !important; -} -.ui.right.slide.reveal > .visible.content { - left: 0%; -} -.ui.right.slide.reveal > .hidden.content { - left: auto !important; - right: 100% !important; -} -.ui.right.slide.reveal:hover > .visible.content, -.ui.right.slide.reveal:focus > .visible.content { - left: 100% !important; - right: auto !important; -} -.ui.right.slide.reveal:hover > .hidden.content, -.ui.right.slide.reveal:focus > .hidden.content { - left: auto !important; - right: 0% !important; -} -.ui.up.slide.reveal > .visible.content { - top: 0% !important; - left: 0% !important; - right: auto !important; - bottom: auto !important; -} -.ui.up.slide.reveal > .hidden.content { - top: 100% !important; - left: 0% !important; - right: auto !important; - bottom: auto !important; -} -.ui.slide.up.reveal:hover > .visible.content, -.ui.slide.up.reveal:focus > .visible.content { - top: -100% !important; - left: 0% !important; -} -.ui.slide.up.reveal:hover > .hidden.content, -.ui.slide.up.reveal:focus > .hidden.content { - top: 0% !important; - left: 0% !important; -} -.ui.down.slide.reveal > .visible.content { - top: auto !important; - right: auto !important; - bottom: auto !important; - bottom: 0% !important; -} -.ui.down.slide.reveal > .hidden.content { - top: auto !important; - right: auto !important; - bottom: 100% !important; - left: 0% !important; -} -.ui.slide.down.reveal:hover > .visible.content, -.ui.slide.down.reveal:focus > .visible.content { - left: 0% !important; - bottom: -100% !important; -} -.ui.slide.down.reveal:hover > .hidden.content, -.ui.slide.down.reveal:focus > .hidden.content { - left: 0% !important; - bottom: 0% !important; -} -/*-------------- - Fade ----------------*/ -.ui.fade.reveal > .hidden.content { - -webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - -moz-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; - transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -} -.ui.fade.reveal > .hidden.content { - z-index: 5 !important; - opacity: 0; -} -.ui.fade.reveal:hover > .hidden.content { - opacity: 1; -} -/*-------------- - Move ----------------*/ -.ui.move.reveal > .visible.content, -.ui.move.left.reveal > .visible.content { - left: auto !important; - top: auto !important; - bottom: auto !important; - right: 0% !important; -} -.ui.move.reveal:hover > .visible.content, -.ui.move.left.reveal:hover > .visible.content, -.ui.move.reveal:focus > .visible.content, -.ui.move.left.reveal:focus > .visible.content { - right: 100% !important; -} -.ui.move.right.reveal > .visible.content { - right: auto !important; - top: auto !important; - bottom: auto !important; - left: 0% !important; -} -.ui.move.right.reveal:hover > .visible.content, -.ui.move.right.reveal:focus > .visible.content { - left: 100% !important; -} -.ui.move.up.reveal > .visible.content { - right: auto !important; - left: auto !important; - top: auto !important; - bottom: 0% !important; -} -.ui.move.up.reveal:hover > .visible.content, -.ui.move.up.reveal:focus > .visible.content { - bottom: 100% !important; -} -.ui.move.down.reveal > .visible.content { - right: auto !important; - left: auto !important; - top: 0% !important; - bottom: auto !important; -} -.ui.move.down.reveal:hover > .visible.content, -.ui.move.down.reveal:focus > .visible.content { - top: 100% !important; -} -/*-------------- - Rotate ----------------*/ -.ui.rotate.reveal > .visible.content { - -webkit-transition-duration: 0.8s; - -moz-transition-duration: 0.8s; - transition-duration: 0.8s; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); -} -.ui.rotate.reveal > .visible.content, -.ui.rotate.right.reveal > .visible.content { - -webkit-transform-origin: bottom right; - -moz-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; -} -.ui.rotate.reveal:hover > .visible.content, -.ui.rotate.right.reveal:hover > .visible.content, -.ui.rotate.reveal:focus > .visible.content, -.ui.rotate.right.reveal:focus > .visible.content { - -webkit-transform: rotate(110deg); - -moz-transform: rotate(110deg); - -ms-transform: rotate(110deg); - transform: rotate(110deg); -} -.ui.rotate.left.reveal > .visible.content { - -webkit-transform-origin: bottom left; - -moz-transform-origin: bottom left; - -ms-transform-origin: bottom left; - transform-origin: bottom left; -} -.ui.rotate.left.reveal:hover > .visible.content, -.ui.rotate.left.reveal:focus > .visible.content { - -webkit-transform: rotate(-110deg); - -moz-transform: rotate(-110deg); - -ms-transform: rotate(-110deg); - transform: rotate(-110deg); -} -/******************************* - States -*******************************/ -.ui.disabled.reveal { - opacity: 1 !important; -} -.ui.disabled.reveal > .content { - -webkit-transition: none !important; - -moz-transition: none !important; - transition: none !important; -} -.ui.disabled.reveal:hover > .visible.content, -.ui.disabled.reveal:focus > .visible.content { - position: static !important; - display: block !important; - opacity: 1 !important; - top: 0 !important; - left: 0 !important; - right: auto !important; - bottom: auto !important; - -webkit-transform: none !important; - -moz-transform: none !important; - -ms-transform: none !important; - transform: none !important; -} -.ui.disabled.reveal:hover > .hidden.content, -.ui.disabled.reveal:focus > .hidden.content { - display: none !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Masked ----------------*/ -.ui.masked.reveal { - overflow: hidden; -} -/*-------------- - Instant ----------------*/ -.ui.instant.reveal > .content { - -webkit-transition-delay: 0s !important; - -moz-transition-delay: 0s !important; - transition-delay: 0s !important; -} - -/* - * # Semantic - Segment - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Segment -*******************************/ -.ui.segment { - position: relative; - background-color: #FFFFFF; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - margin: 1em 0em; - padding: 1em; - border-radius: 5px 5px 5px 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.segment:first-child { - margin-top: 0em; -} -.ui.segment:last-child { - margin-bottom: 0em; -} -.ui.segment:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -.ui.vertical.segment { - margin: 0em; - padding-left: 0em; - padding-right: 0em; - background-color: transparent; - border-radius: 0px; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); -} -.ui.vertical.segment:first-child { - padding-top: 0em; -} -.ui.horizontal.segment { - margin: 0em; - padding-top: 0em; - padding-bottom: 0em; - background-color: transparent; - border-radius: 0px; - -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); - box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); -} -.ui.horizontal.segment:first-child { - padding-left: 0em; -} -/*------------------- - Loose Coupling ---------------------*/ -.ui.pointing.menu ~ .ui.attached.segment { - top: 1px; -} -.ui.page.grid.segment .ui.grid .ui.segment.column { - padding-top: 2rem; - padding-bottom: 2rem; -} -.ui.grid.segment, -.ui.grid .ui.segment.row, -.ui.grid .ui.segment.column { - border-radius: 0em; - -webkit-box-shadow: none; - box-shadow: none; - border: none; -} -/* No padding on edge content */ -.ui.segment > :first-child { - margin-top: 0em; -} -.ui.segment > :last-child { - margin-bottom: 0em; -} -/******************************* - Types -*******************************/ -/*------------------- - Piled ---------------------*/ -.ui.piled.segment { - margin: 2em 0em; - -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); - -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); - -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); -} -.ui.piled.segment:first-child { - margin-top: 0em; -} -.ui.piled.segment:last-child { - margin-bottom: 0em; -} -.ui.piled.segment:after, -.ui.piled.segment:before { - background-color: #FFFFFF; - visibility: visible; - content: ""; - display: block; - height: 100%; - left: -1px; - position: absolute; - width: 100%; - -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); -} -.ui.piled.segment:after { - -webkit-transform: rotate(1.2deg); - -moz-transform: rotate(1.2deg); - -ms-transform: rotate(1.2deg); - transform: rotate(1.2deg); - top: 0; - z-index: -1; -} -.ui.piled.segment:before { - -webkit-transform: rotate(-1.2deg); - -moz-transform: rotate(-1.2deg); - -ms-transform: rotate(-1.2deg); - transform: rotate(-1.2deg); - top: 0; - z-index: -2; -} -/*------------------- - Stacked ---------------------*/ -.ui.stacked.segment { - padding-bottom: 1.7em; -} -.ui.stacked.segment:after, -.ui.stacked.segment:before { - content: ''; - position: absolute; - bottom: -3px; - left: 0%; - border-top: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(0, 0, 0, 0.02); - width: 100%; - height: 5px; - visibility: visible; -} -.ui.stacked.segment:before { - bottom: 0px; -} -/* Inverted */ -.ui.stacked.inverted.segment:after, -.ui.stacked.inverted.segment:before { - background-color: rgba(255, 255, 255, 0.1); - border-top: 1px solid rgba(255, 255, 255, 0.35); -} -/*------------------- - Circular ---------------------*/ -.ui.circular.segment { - display: table-cell; - padding: 2em; - text-align: center; - vertical-align: middle; - border-radius: 500em; -} -/*------------------- - Raised ---------------------*/ -.ui.raised.segment { - -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); -} -/******************************* - States -*******************************/ -.ui.disabled.segment { - opacity: 0.8; - color: #DDDDDD; -} -/******************************* - Variations -*******************************/ -/*------------------- - Basic ---------------------*/ -.ui.basic.segment { - position: relative; - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - border-radius: 0px; -} -.ui.basic.segment:first-child { - padding-top: 0em; -} -.ui.basic.segment:last-child { - padding-bottom: 0em; -} -/*------------------- - Fittted ---------------------*/ -.ui.fitted.segment { - padding: 0em; -} -/*------------------- - Colors ---------------------*/ -.ui.blue.segment { - border-top: 0.2em solid #6ECFF5; -} -.ui.green.segment { - border-top: 0.2em solid #A1CF64; -} -.ui.red.segment { - border-top: 0.2em solid #D95C5C; -} -.ui.orange.segment { - border-top: 0.2em solid #F05940; -} -.ui.purple.segment { - border-top: 0.2em solid #564F8A; -} -.ui.teal.segment { - border-top: 0.2em solid #00B5AD; -} -/*------------------- - Inverted Colors ---------------------*/ -.ui.inverted.black.segment { - background-color: #5C6166 !important; - color: #FFFFFF !important; -} -.ui.inverted.blue.segment { - background-color: #6ECFF5 !important; - color: #FFFFFF !important; -} -.ui.inverted.green.segment { - background-color: #A1CF64 !important; - color: #FFFFFF !important; -} -.ui.inverted.red.segment { - background-color: #D95C5C !important; - color: #FFFFFF !important; -} -.ui.inverted.orange.segment { - background-color: #F05940 !important; - color: #FFFFFF !important; -} -.ui.inverted.purple.segment { - background-color: #564F8A !important; - color: #FFFFFF !important; -} -.ui.inverted.teal.segment { - background-color: #00B5AD !important; - color: #FFFFFF !important; -} -/*------------------- - Aligned ---------------------*/ -.ui.left.aligned.segment { - text-align: left; -} -.ui.right.aligned.segment { - text-align: right; -} -.ui.center.aligned.segment { - text-align: center; -} -.ui.justified.segment { - text-align: justify; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} -/*------------------- - Floated ---------------------*/ -.ui.floated.segment, -.ui.left.floated.segment { - float: left; -} -.ui.right.floated.segment { - float: right; -} -/*------------------- - Inverted ---------------------*/ -.ui.inverted.segment { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.segment .segment { - color: rgba(0, 0, 0, 0.7); -} -.ui.inverted.segment .inverted.segment { - color: #FFFFFF; -} -.ui.inverted.segment, -.ui.primary.inverted.segment { - background-color: #222222; - color: #FFFFFF; -} -/*------------------- - Ordinality ---------------------*/ -.ui.primary.segment { - background-color: #FFFFFF; - color: #555555; -} -.ui.secondary.segment { - background-color: #FAF9FA; - color: #777777; -} -.ui.tertiary.segment { - background-color: #EBEBEB; - color: #B0B0B0; -} -.ui.secondary.inverted.segment { - background-color: #555555; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); - background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); - color: #FAFAFA; -} -.ui.tertiary.inverted.segment { - background-color: #555555; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); - background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); - color: #EEEEEE; -} -/*------------------- - Attached ---------------------*/ -.ui.segment.attached { - top: -1px; - bottom: -1px; - border-radius: 0px; - margin: 0em; - -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; - box-shadow: 0px 0px 0px 1px #DDDDDD; -} -.ui.top.attached.segment { - top: 0px; - bottom: -1px; - margin-top: 1em; - margin-bottom: 0em; - border-radius: 5px 5px 0px 0px; -} -.ui.segment.top.attached:first-child { - margin-top: 0em; -} -.ui.segment.bottom.attached { - top: -1px; - bottom: 0px; - margin-top: 0em; - margin-bottom: 1em; - border-radius: 0px 0px 5px 5px; -} -.ui.segment.bottom.attached:last-child { - margin-bottom: 0em; -} - -/* - * # Semantic - Steps - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Step -*******************************/ -.ui.step, -.ui.steps .step { - display: inline-block; - position: relative; - padding: 1em 2em 1em 3em; - vertical-align: top; - background-color: #FFFFFF; - color: #888888; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.step:after, -.ui.steps .step:after { - position: absolute; - z-index: 2; - content: ''; - top: 0.42em; - right: -1em; - border: medium none; - background-color: #FFFFFF; - width: 2.2em; - height: 2.2em; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset; - box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset; -} -.ui.step, -.ui.steps .step, -.ui.steps .step:after { - -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; - -moz-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; - transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; -} -/******************************* - Types -*******************************/ -/* Vertical */ -.ui.vertical.steps { - overflow: visible; -} -.ui.vertical.steps .step { - display: block; - border-radius: 0em; - padding: 1em 2em; -} -.ui.vertical.steps .step:first-child { - padding: 1em 2em; - border-radius: 0em; - border-top-left-radius: 0.3125rem; - border-top-right-radius: 0.3125rem; -} -.ui.vertical.steps .active.step:first-child { - border-top-right-radius: 0rem; -} -.ui.vertical.steps .step:last-child { - border-radius: 0em; - border-bottom-left-radius: 0.3125rem; - border-bottom-right-radius: 0.3125rem; -} -.ui.vertical.steps .active.step:last-child { - border-bottom-right-radius: 0rem; -} -/* Arrow */ -.ui.vertical.steps .step:after { - display: none; -} -/* Active Arrow */ -.ui.vertical.steps .active.step:after { - display: block; -} -/* Two Line */ -.ui.vertical.steps .two.line.step { - line-height: 1.3; -} -.ui.vertical.steps .two.line.active.step:after { - position: absolute; - z-index: 2; - content: ''; - top: 0em; - right: -1.45em; - background-color: transparent; - border-bottom: 2.35em solid transparent; - border-left: 1.55em solid #555555; - border-top: 2.35em solid transparent; - width: 0em; - height: 0em; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; -} -/******************************* - Group -*******************************/ -.ui.steps { - cursor: pointer; - display: inline-block; - font-size: 0em; - overflow: hidden; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - line-height: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - border-radius: 0.3125rem; -} -.ui.steps .step:first-child { - padding-left: 1.35em; - border-radius: 0.3125em 0em 0em 0.3125em; -} -.ui.steps .step:last-child { - border-radius: 0em 0.3125em 0.3125em 0em; -} -.ui.steps .step:only-child { - border-radius: 0.3125em; -} -.ui.steps .step:last-child { - margin-right: 0em; -} -.ui.steps .step:last-child:after { - display: none; -} -/******************************* - States -*******************************/ -/* Hover */ -.ui.step:hover, -.ui.step.hover { - background-color: #F7F7F7; - color: rgba(0, 0, 0, 0.8); -} -.ui.steps .step.hover:after, -.ui.steps .step:hover:after, -.ui.step:hover, -.ui.step.hover::after { - background-color: #F7F7F7; -} -/* Hover */ -.ui.steps .step.down, -.ui.steps .step:active, -.ui.step.down, -.ui.step:active { - background-color: #F0F0F0; -} -.ui.steps .step.down:after, -.ui.steps .step:active:after, -.ui.steps.down::after, -.ui.steps:active::after { - background-color: #F0F0F0; -} -/* Active */ -.ui.steps .step.active, -.ui.active.step { - cursor: auto; - background-color: #555555; - color: #FFFFFF; - font-weight: bold; -} -.ui.steps .step.active:after, -.ui.active.steps:after { - background-color: #555555; - -webkit-box-shadow: none; - box-shadow: none; -} -/* Disabled */ -.ui.steps .disabled.step, -.ui.disabled.step { - cursor: auto; - background-color: #FFFFFF; - color: #CBCBCB; -} -.ui.steps .disabled.step:after, -.ui.disabled.step:after { - background-color: #FFFFFF; -} -/******************************* - Variations -*******************************/ -/* Attached */ -.attached.ui.steps { - margin: 0em; - border-radius: 0.3125em 0.3125em 0em 0em; -} -.attached.ui.steps .step:first-child { - border-radius: 0.3125em 0em 0em 0em; -} -.attached.ui.steps .step:last-child { - border-radius: 0em 0.3125em 0em 0em; -} -/* Bottom Side */ -.bottom.attached.ui.steps { - margin-top: -1px; - border-radius: 0em 0em 0.3125em 0.3125em; -} -.bottom.attached.ui.steps .step:first-child { - border-radius: 0em 0em 0em 0.3125em; -} -.bottom.attached.ui.steps .step:last-child { - border-radius: 0em 0em 0.3125em 0em; -} -/* Evenly divided */ -.ui.one.steps, -.ui.two.steps, -.ui.three.steps, -.ui.four.steps, -.ui.five.steps, -.ui.six.steps, -.ui.seven.steps, -.ui.eight.steps { - display: block; -} -.ui.one.steps > .step { - width: 100%; -} -.ui.two.steps > .step { - width: 50%; -} -.ui.three.steps > .step { - width: 33.333%; -} -.ui.four.steps > .step { - width: 25%; -} -.ui.five.steps > .step { - width: 20%; -} -.ui.six.steps > .step { - width: 16.666%; -} -.ui.seven.steps > .step { - width: 14.285%; -} -.ui.eight.steps > .step { - width: 12.500%; -} -/******************************* - Sizes -*******************************/ -.ui.small.step, -.ui.small.steps .step { - font-size: 0.8rem; -} -.ui.step, -.ui.steps .step { - font-size: 1rem; -} -.ui.large.step, -.ui.large.steps .step { - font-size: 1.25rem; -} - -/* - * # Semantic - Accordion - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Accordion -*******************************/ -.ui.accordion, -.ui.accordion .accordion { - width: 600px; - max-width: 100%; - font-size: 1rem; - border-radius: 0.3125em; - background-color: #FFFFFF; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -} -.ui.accordion .title, -.ui.accordion .accordion .title { - cursor: pointer; - margin: 0em; - padding: 0.75em 1em; - color: rgba(0, 0, 0, 0.6); - border-top: 1px solid rgba(0, 0, 0, 0.05); - -webkit-transition: background-color 0.2s ease-out; - -moz-transition: background-color 0.2s ease-out; - transition: background-color 0.2s ease-out; -} -.ui.accordion .title:first-child, -.ui.accordion .accordion .title:first-child { - border-top: none; -} -/* Content */ -.ui.accordion .content, -.ui.accordion .accordion .content { - display: none; - margin: 0em; - padding: 1.3em 1em; -} -/* Arrow */ -.ui.accordion .title .dropdown.icon, -.ui.accordion .accordion .title .dropdown.icon { - display: inline-block; - float: none; - margin: 0em 0.5em 0em 0em; - -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; - -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease; - transition: transform 0.2s ease, - opacity 0.2s ease - ; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); -} -.ui.accordion .title .dropdown.icon:before, -.ui.accordion .accordion .title .dropdown.icon:before { - content: '\f0da' /*rtl:'\f0d9'*/; -} -/*-------------- - Loose Coupling ----------------*/ -.ui.basic.accordion.menu { - background-color: #FFFFFF; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -} -.ui.basic.accordion.menu .title, -.ui.basic.accordion.menu .content { - padding: 0em; -} -/******************************* - Types -*******************************/ -/*-------------- - Basic ----------------*/ -.ui.basic.accordion { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.basic.accordion .title, -.ui.basic.accordion .accordion .title { - background-color: transparent; - border-top: none; - padding-left: 0em; - padding-right: 0em; -} -.ui.basic.accordion .content, -.ui.basic.accordion .accordion .content { - padding: 0.5em 0em; -} -.ui.basic.accordion .active.title, -.ui.basic.accordion .accordion .active.title { - background-color: transparent; -} -/******************************* - States -*******************************/ -/*-------------- - Hover ----------------*/ -.ui.accordion .title:hover, -.ui.accordion .active.title, -.ui.accordion .accordion .title:hover, -.ui.accordion .accordion .active.title { - color: rgba(0, 0, 0, 0.8); -} -/*-------------- - Active ----------------*/ -.ui.accordion .active.title, -.ui.accordion .accordion .active.title { - background-color: rgba(0, 0, 0, 0.1); - color: rgba(0, 0, 0, 0.8); -} -.ui.accordion .active.title .dropdown.icon, -.ui.accordion .accordion .active.title .dropdown.icon { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.ui.accordion .active.content, -.ui.accordion .accordion .active.content { - display: block; -} -/******************************* - Variations -*******************************/ -/*-------------- - Fluid ----------------*/ -.ui.fluid.accordion, -.ui.fluid.accordion .accordion { - width: 100%; -} - -/* - * # Semantic - Chat Room - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Chat Room -*******************************/ -.ui.chatroom { - background-color: #F8F8F8; - width: 330px; - height: 370px; - padding: 0px; -} -.ui.chatroom .room { - position: relative; - background-color: #FFFFFF; - overflow: hidden; - height: 286px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-top: none; - border-bottom: none; -} -.ui.chatroom .room .loader { - display: none; - margin: -25px 0px 0px -25px; -} -/* Chat Room Actions */ -.ui.chatroom .actions { - overflow: hidden; - background-color: #EEEEEE; - padding: 4px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 5px 5px 0px 0px; -} -.ui.chatroom .actions .button { - float: right; - margin-left: 3px; -} -/* Online User Count */ -.ui.chatroom .actions .message { - float: left; - margin-left: 6px; - font-size: 11px; - color: #AAAAAA; - text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); - line-height: 28px; -} -.ui.chatroom .actions .message .loader { - display: inline-block; - margin-right: 8px; -} -/* Chat Room Text Log */ -.ui.chatroom .log { - float: left; - overflow: auto; - overflow-x: hidden; - overflow-y: auto; -} -.ui.chatroom .log .message { - padding: 3px 0px; - border-top: 1px dotted #DADADA; -} -.ui.chatroom .log .message:first-child { - border-top: none; -} -/* status event */ -.ui.chatroom .status { - padding: 5px 0px; - color: #AAAAAA; - font-size: 12px; - font-style: italic; - line-height: 1.33; - border-top: 1px dotted #DADADA; -} -.ui.chatroom .log .status:first-child { - border-top: none; -} -.ui.chatroom .log .flag { - float: left; -} -.ui.chatroom .log p { - margin-left: 0px; -} -.ui.chatroom .log .author { - font-weight: bold; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -.ui.chatroom .log a.author:hover { - opacity: 0.8; -} -.ui.chatroom .log .message.admin p { - font-weight: bold; - margin: 1px 0px 0px 23px; -} -.ui.chatroom .log .divider { - margin: -1px 0px; - font-size: 11px; - padding: 10px 0px; - border-top: 1px solid #F8F8F8; - border-bottom: 1px solid #F8F8F8; -} -.ui.chatroom .log .divider .rule { - top: 50%; - width: 15%; -} -.ui.chatroom .log .divider .label { - color: #777777; - margin: 0px; -} -/* Chat Room User List */ -.ui.chatroom .room .list { - position: relative; - overflow: auto; - overflow-x: hidden; - overflow-y: auto; - float: left; - background-color: #EEEEEE; - border-left: 1px solid #DDDDDD; -} -.ui.chatroom .room .list .user { - display: table; - padding: 3px 7px; - border-bottom: 1px solid #DDDDDD; -} -.ui.chatroom .room .list .user:hover { - background-color: #F8F8F8; -} -.ui.chatroom .room .list .image { - display: table-cell; - vertical-align: middle; - width: 20px; -} -.ui.chatroom .room .list .image img { - width: 20px; - height: 20px; - vertical-align: middle; -} -.ui.chatroom .room .list p { - display: table-cell; - vertical-align: middle; - padding-left: 7px; - padding-right: 14px; - font-size: 11px; - line-height: 1.2; - font-weight: bold; -} -.ui.chatroom .room .list a:hover { - opacity: 0.8; -} -/* User List Loading */ -.ui.chatroom.loading .loader { - display: block; -} -/* Chat Room Talk Input */ -.ui.chatroom .talk { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 0px 0px; - background-color: #EEEEEE; - border-radius: 0px 0px 5px 5px; -} -.ui.chatroom .talk .avatar, -.ui.chatroom .talk input, -.ui.chatroom .talk .button { - float: left; -} -.ui.chatroom .talk .avatar img { - display: block; - width: 30px; - height: 30px; - margin-right: 4px; - border-radius: 500rem; -} -.ui.chatroom .talk input { - border: 1px solid #CCCCCC; - margin: 0px; - width: 196px; - height: 14px; - padding: 8px 5px; - font-size: 12px; - color: #555555; -} -.ui.chatroom .talk input.focus { - border: 1px solid #AAAAAA; -} -.ui.chatroom .send { - width: 80px; - height: 32px; - margin-left: -1px; - padding: 4px 12px; - font-size: 12px; - line-height: 23px; - -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 0 5px 5px 0; -} -.ui.chatroom .talk .log-in.button { - display: block; - float: none; - margin-top: -6px; - height: 22px; - border-radius: 0px 0px 4px 4px; -} -.ui.chatroom .talk .log-in.button i { - vertical-align: text-top; -} -/* Quirky Flags */ -.ui.chatroom .log .team.flag { - width: 18px; -} -/* Chat room Loaded */ -.ui.chatroom.loading .loader { - display: block; -} -/* Standard Size */ -.ui.chatroom { - width: 330px; - height: 370px; -} -.ui.chatroom .room .container { - width: 3000px; -} -.ui.chatroom .log { - width: 314px; - height: 278px; - padding: 4px 7px; -} -.ui.chatroom .room .list { - width: 124px; - height: 278px; - padding: 4px 0px; -} -.ui.chatroom .room .list .user { - width: 110px; -} -.ui.chatroom .talk { - height: 40px; -} - -/* - * # Semantic - Checkbox - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Checkbox -*******************************/ -/*-------------- - Standard ----------------*/ -/*--- Content ---*/ -.ui.checkbox { - position: relative; - display: inline-block; - min-width: 1em; - min-height: 1.25em; - line-height: 1em; - outline: none; - vertical-align: middle; -} -.ui.checkbox input { - position: absolute; - top: 0px; - left: 0px; - opacity: 0; - outline: none; -} -/*--- Box ---*/ -.ui.checkbox .box, -.ui.checkbox label { - cursor: pointer; - padding-left: 2em; - outline: none; -} -.ui.checkbox .box:before, -.ui.checkbox label:before { - position: absolute; - top: 0em; - line-height: 1; - width: 1em; - height: 1em; - left: 0em; - content: ''; - border-radius: 4px; - background: #FFFFFF; - -webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease; - -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; - transition: background-color 0.3s ease, box-shadow 0.3s ease; - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); -} -/*--- Checkbox ---*/ -.ui.checkbox .box:after, -.ui.checkbox label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - content: ''; - position: absolute; - background: transparent; - border: 0.2em solid #333333; - border-top: none; - border-right: none; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.ui.checkbox .box:after, -.ui.checkbox label:after { - top: 0.275em; - left: 0.2em; - width: 0.45em; - height: 0.15em; -} -/*--- Inside Label ---*/ -.ui.checkbox label { - display: block; - color: rgba(0, 0, 0, 0.6); - -webkit-transition: color 0.2s ease; - -moz-transition: color 0.2s ease; - transition: color 0.2s ease; -} -.ui.checkbox label:hover { - color: rgba(0, 0, 0, 0.8); -} -.ui.checkbox input:focus ~ label { - color: rgba(0, 0, 0, 0.8); -} -/*--- Outside Label ---*/ -.ui.checkbox ~ label { - cursor: pointer; - opacity: 0.85; - vertical-align: middle; -} -.ui.checkbox ~ label:hover { - opacity: 1; -} -/******************************* - States -*******************************/ -/*--- Hover ---*/ -.ui.checkbox .box:hover::before, -.ui.checkbox label:hover::before { - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -} -/*--- Down ---*/ -.ui.checkbox .box:active::before, -.ui.checkbox label:active::before { - background-color: #F5F5F5; -} -/*--- Focus ---*/ -.ui.checkbox input:focus ~ .box:before, -.ui.checkbox input:focus ~ label:before { - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -} -/*--- Active ---*/ -.ui.checkbox input:checked ~ .box:after, -.ui.checkbox input:checked ~ label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; -} -/*--- Disabled ---*/ -.ui.disabled.checkbox ~ .box:after, -.ui.checkbox input[disabled] ~ .box:after, -.ui.disabled.checkbox label, -.ui.checkbox input[disabled] ~ label { - opacity: 0.4; - color: rgba(0, 0, 0, 0.3); -} -/******************************* - Variations -*******************************/ -/*-------------- - Radio ----------------*/ -.ui.radio.checkbox .box:before, -.ui.radio.checkbox label:before { - min-width: 1em; - height: 1em; - border-radius: 500px; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; -} -.ui.radio.checkbox .box:after, -.ui.radio.checkbox label:after { - border: none; - top: 0.2em; - left: 0.2em; - width: 0.6em; - height: 0.6em; - background-color: #555555; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; - border-radius: 500px; -} -/*-------------- - Slider ----------------*/ -.ui.slider.checkbox { - cursor: pointer; - min-width: 3em; -} -/* Line */ -.ui.slider.checkbox:after { - position: absolute; - top: 0.5em; - left: 0em; - content: ''; - width: 3em; - height: 2px; - background-color: rgba(0, 0, 0, 0.1); -} -/* Button */ -.ui.slider.checkbox .box, -.ui.slider.checkbox label { - padding-left: 4em; -} -.ui.slider.checkbox .box:before, -.ui.slider.checkbox label:before { - cursor: pointer; - display: block; - position: absolute; - top: -0.25em; - left: 0em; - z-index: 1; - width: 1.5em; - height: 1.5em; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 50rem; - -webkit-transition: left 0.3s ease 0s; - -moz-transition: left 0.3s ease 0s; - transition: left 0.3s ease 0s; -} -/* Button Activation Light */ -.ui.slider.checkbox .box:after, -.ui.slider.checkbox label:after { - opacity: 1; - position: absolute; - content: ''; - top: 0.15em; - left: 0em; - z-index: 2; - margin-left: 0.375em; - border: none; - width: 0.75em; - height: 0.75em; - border-radius: 50rem; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; - -webkit-transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; - -moz-transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; - transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; -} -/* Selected Slider Toggle */ -.ui.slider.checkbox input:checked ~ .box:before, -.ui.slider.checkbox input:checked ~ label:before, -.ui.slider.checkbox input:checked ~ .box:after, -.ui.slider.checkbox input:checked ~ label:after { - left: 1.75em; -} -/* Off Color */ -.ui.slider.checkbox .box:after, -.ui.slider.checkbox label:after { - background-color: #D95C5C; -} -/* On Color */ -.ui.slider.checkbox input:checked ~ .box:after, -.ui.slider.checkbox input:checked ~ label:after { - background-color: #89B84C; -} -/*-------------- - Toggle ----------------*/ -.ui.toggle.checkbox { - cursor: pointer; -} -.ui.toggle.checkbox .box, -.ui.toggle.checkbox label { - padding-left: 4em; -} -/* Switch */ -.ui.toggle.checkbox .box:before, -.ui.toggle.checkbox label:before { - cursor: pointer; - display: block; - position: absolute; - content: ''; - top: -0.25em; - left: 0em; - z-index: 1; - background-color: #FFFFFF; - width: 3em; - height: 1.5em; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 50rem; -} -/* Activation Light */ -.ui.toggle.checkbox .box:after, -.ui.toggle.checkbox label:after { - opacity: 1; - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - content: ''; - position: absolute; - top: 0.15em; - left: 0.5em; - z-index: 2; - border: none; - width: 0.75em; - height: 0.75em; - background-color: #D95C5C; - border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; - -moz-transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; - transition: background 0.3s ease 0s, - left 0.3s ease 0s - ; -} -/* Active */ -.ui.toggle.checkbox:active .box:before, -.ui.toggle.checkbox:active label:before { - background-color: #F5F5F5; -} -/* Active */ -.ui.toggle.checkbox input:checked ~ .box:after, -.ui.toggle.checkbox input:checked ~ label:after { - left: 1.75em; - background-color: #89B84C; -} -/*-------------- - Sizes ----------------*/ -.ui.checkbox { - font-size: 1em; -} -.ui.large.checkbox { - font-size: 1.25em; -} -.ui.huge.checkbox { - font-size: 1.5em; -} - -/* - * # Semantic - Dimmer - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Dimmer -*******************************/ -.ui.dimmable { - position: relative; -} -.ui.dimmer { - display: none; - position: absolute; - top: 0em !important; - left: 0em !important; - width: 0%; - height: 0%; - text-align: center; - vertical-align: middle; - background-color: rgba(0, 0, 0, 0.85); - opacity: 0; - line-height: 1; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - animation-duration: 0.5s; - -webkit-transition: background-color 0.5s linear; - -moz-transition: background-color 0.5s linear; - transition: background-color 0.5s linear; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - z-index: 1000; -} -/* Dimmer Content */ -.ui.dimmer > .content { - width: 100%; - height: 100%; - display: table; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} -.ui.dimmer > .content > div { - display: table-cell; - vertical-align: middle; - color: #FFFFFF; -} -/* Loose Coupling */ -.ui.segment > .ui.dimmer { - border-radius: 5px; -} -.ui.horizontal.segment > .ui.dimmer, -.ui.vertical.segment > .ui.dimmer { - border-radius: 5px; -} -/******************************* - States -*******************************/ -.ui.dimmed.dimmable:not(body) { - overflow: hidden; -} -.ui.dimmed.dimmable > .ui.animating.dimmer, -.ui.dimmed.dimmable > .ui.visible.dimmer, -.ui.active.dimmer { - display: block; - width: 100%; - height: 100%; - opacity: 1; -} -.ui.disabled.dimmer { - width: 0em !important; - height: 0em !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Page ----------------*/ -.ui.page.dimmer { - position: fixed; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-perspective: 2000px; - -moz-perspective: 2000px; - -ms-perspective: 2000px; - perspective: 2000px; - -webkit-transform-origin: center center; - -moz-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; -} -.ui.scrolling.dimmable > .dimmer, -.ui.scrolling.page.dimmer { - position: absolute; -} -/* Blurred Background -body.ui.dimmed.dimmable > :not(.dimmer){ - filter: ~"blur(15px) grayscale(0.7)"; -} -*/ -/*-------------- - Aligned ----------------*/ -.ui.dimmer > .top.aligned.content > * { - vertical-align: top; -} -.ui.dimmer > .bottom.aligned.content > * { - vertical-align: bottom; -} -/*-------------- - Inverted ----------------*/ -.ui.inverted.dimmer { - background-color: rgba(255, 255, 255, 0.85); -} -.ui.inverted.dimmer > .content > * { - color: rgba(0, 0, 0, 0.8); -} -/*-------------- - Simple ----------------*/ -/* Displays without javascript */ -.ui.simple.dimmer { - display: block; - overflow: hidden; - opacity: 1; - z-index: -100; - background-color: rgba(0, 0, 0, 0); -} -.ui.dimmed.dimmable > .ui.simple.dimmer { - overflow: visible; - opacity: 1; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.85); - z-index: 1; -} -.ui.simple.inverted.dimmer { - background-color: rgba(255, 255, 255, 0); -} -.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { - background-color: rgba(255, 255, 255, 0.85); -} - -/* - * # Semantic - Dropdown - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Dropdown -*******************************/ -.ui.dropdown { - cursor: pointer; - position: relative; - display: inline-block; - line-height: 1; - -webkit-transition: border-radius 0.1s ease, width 0.2s ease; - -moz-transition: border-radius 0.1s ease, width 0.2s ease; - transition: border-radius 0.1s ease, width 0.2s ease; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -moz-tap-highlight-color: rgba(0, 0, 0, 0); - tap-highlight-color: rgba(0, 0, 0, 0); -} -/******************************* - Content -*******************************/ -/*-------------- - Menu ----------------*/ -.ui.dropdown .menu { - cursor: auto; - position: absolute; - display: none; - top: 100%; - margin: 0em; - background-color: #FFFFFF; - min-width: 100%; - white-space: nowrap; - font-size: 0.875em; - text-shadow: none; - -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); - border-radius: 0px 0px 0.325em 0.325em; - -webkit-transition: opacity 0.2s ease; - -moz-transition: opacity 0.2s ease; - transition: opacity 0.2s ease; - z-index: 11; -} -/*-------------- - Icon ----------------*/ -.ui.dropdown > .dropdown.icon { - width: auto; - margin: 0em 0em 0em 1em; -} -.ui.dropdown > .dropdown.icon:before { - content: "\f0d7"; -} -.ui.dropdown .menu .item .dropdown.icon { - width: auto; - float: right; - margin: 0em 0em 0em 0.5em; -} -.ui.dropdown .menu .item .dropdown.icon:before { - content: "\f0da" /*rtl:"\f0d9"*/; -} -/*-------------- - Text ----------------*/ -.ui.dropdown > .text { - display: inline-block; - -webkit-transition: color 0.2s ease; - -moz-transition: color 0.2s ease; - transition: color 0.2s ease; -} -/* Flyout Direction */ -.ui.dropdown .menu { - left: 0px; -} -/*-------------- - Sub Menu ----------------*/ -.ui.dropdown .menu .menu { - top: 0% !important; - left: 100% !important; - margin: 0em !important; - border-radius: 0 0.325em 0.325em 0em !important; -} -.ui.dropdown .menu .menu:after { - display: none; -} -.ui.dropdown .menu .item { - cursor: pointer; - border: none; - border-top: 1px solid rgba(0, 0, 0, 0.05); - height: auto; - font-size: 0.875em; - display: block; - color: rgba(0, 0, 0, 0.75); - padding: 0.85em 1em !important; - font-size: 0.875rem; - text-transform: none; - font-weight: normal; - text-align: left; - -webkit-touch-callout: none; -} -.ui.dropdown .menu .item:before { - display: none; -} -.ui.dropdown .menu .item .icon { - margin-right: 0.75em; -} -.ui.dropdown .menu .item:first-child { - border-top: none; -} -/******************************* - Coupling -*******************************/ -/* Opposite on last menu on right */ -.ui.menu .right.menu .dropdown:last-child .menu, -.ui.buttons > .ui.dropdown:last-child .menu { - left: auto; - right: 0px; -} -.ui.vertical.menu .dropdown.item > .dropdown.icon:before { - content: "\f0da" /*rtl:"\f0d9"*/; -} -.ui.dropdown.icon.button > .dropdown.icon { - margin: 0em; -} -/******************************* - States -*******************************/ -/* Dropdown Visible */ -.ui.visible.dropdown > .menu { - display: block; -} -/*-------------------- - Hover -----------------------*/ -/* Menu Item Hover */ -.ui.dropdown .menu .item:hover { - background-color: rgba(0, 0, 0, 0.02); - z-index: 12; -} -/*-------------------- - Active -----------------------*/ -/* Menu Item Active */ -.ui.dropdown .menu .active.item { - background-color: rgba(0, 0, 0, 0.06) !important; - border-left: none; - border-color: transparent !important; - -webkit-box-shadow: none; - -moz-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - z-index: 12; -} -/*-------------------- - Default Text -----------------------*/ -.ui.dropdown > .default.text, -.ui.default.dropdown > .text { - color: rgba(0, 0, 0, 0.5); -} -.ui.dropdown:hover > .default.text, -.ui.default.dropdown:hover > .text { - color: rgba(0, 0, 0, 0.8); -} -/*-------------------- - Error -----------------------*/ -.ui.dropdown.error, -.ui.dropdown.error > .text, -.ui.dropdown.error > .default.text { - color: #D95C5C !important; -} -.ui.selection.dropdown.error { - background-color: #FFFAFA; - -webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important; - box-shadow: 0px 0px 0px 1px #e7bebe !important; -} -.ui.selection.dropdown.error:hover { - -webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important; - box-shadow: 0px 0px 0px 1px #e7bebe !important; -} -.ui.dropdown.error > .menu, -.ui.dropdown.error > .menu .menu { - -webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important; - box-shadow: 0px 0px 1px 1px #E7BEBE !important; -} -.ui.dropdown.error > .menu .item { - color: #D95C5C !important; -} -/* Item Hover */ -.ui.dropdown.error > .menu .item:hover { - background-color: #FFF2F2 !important; -} -/* Item Active */ -.ui.dropdown.error > .menu .active.item { - background-color: #FDCFCF !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Simple ----------------*/ -/* Displays without javascript */ -.ui.simple.dropdown .menu:before, -.ui.simple.dropdown .menu:after { - display: none; -} -.ui.simple.dropdown .menu { - display: block; - overflow: hidden; - top: -9999px !important; - position: absolute; - opacity: 0; - width: 0; - height: 0; - -webkit-transition: opacity 0.2s ease-out; - -moz-transition: opacity 0.2s ease-out; - transition: opacity 0.2s ease-out; -} -.ui.simple.active.dropdown, -.ui.simple.dropdown:hover { - border-bottom-left-radius: 0em !important; - border-bottom-right-radius: 0em !important; -} -.ui.simple.active.dropdown > .menu, -.ui.simple.dropdown:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 100% !important; - opacity: 1; -} -.ui.simple.dropdown > .menu .item:active > .menu, -.ui.simple.dropdown:hover > .menu .item:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 0% !important; - left: 100% !important; - opacity: 1; -} -.ui.simple.disabled.dropdown:hover .menu { - display: none; - height: 0px; - width: 0px; - overflow: hidden; -} -/*-------------- - Selection ----------------*/ -/* Displays like a select box */ -.ui.selection.dropdown { - cursor: pointer; - display: inline-block; - word-wrap: break-word; - white-space: normal; - background-color: #FFFFFF; - padding: 0.65em 1em; - line-height: 1.33; - color: rgba(0, 0, 0, 0.8); - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; - border-radius: 0.3125em !important; -} -.ui.selection.dropdown select { - display: none; -} -.ui.selection.dropdown > .dropdown.icon { - opacity: 0.7; - margin: 0.2em 0em 0.2em 1.25em; - -webkit-transition: opacity 0.2s ease-out; - -moz-transition: opacity 0.2s ease-out; - transition: opacity 0.2s ease-out; -} -.ui.selection.dropdown, -.ui.selection.dropdown .menu { - -webkit-transition: -webkit-box-shadow 0.2s ease-out; - -moz-transition: box-shadow 0.2s ease-out; - transition: box-shadow 0.2s ease-out; -} -.ui.selection.dropdown .menu { - top: 100%; - max-height: 312px; - overflow-x: hidden; - overflow-y: auto; - -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0; - box-shadow: 0px 1px 0px 1px #E0E0E0; - border-radius: 0px 0px 0.325em 0.325em; -} -.ui.selection.dropdown .menu:after, -.ui.selection.dropdown .menu:before { - display: none; -} -.ui.selection.dropdown .menu img { - height: 2.5em; - display: inline-block; - vertical-align: middle; - margin-right: 0.5em; -} -/* Visible */ -.ui.visible.selection.dropdown { - border-bottom-left-radius: 0em !important; - border-bottom-right-radius: 0em !important; -} -/* Active */ -.ui.active.selection.dropdown { - border-radius: 0.3125em 0.3125em 0em 0em !important; -} -.ui.active.selection.dropdown > .dropdown.icon { - opacity: 1; -} -/*-------------- - Fluid ----------------*/ -.ui.fluid.dropdown { - display: block; -} -.ui.fluid.dropdown > .dropdown.icon { - float: right; -} -/*-------------- - Inline ----------------*/ -.ui.inline.dropdown { - cursor: pointer; - display: inline-block; - color: inherit; -} -.ui.inline.dropdown .dropdown.icon { - margin: 0em 0.5em 0em 0.25em; -} -.ui.inline.dropdown .text { - font-weight: bold; -} -.ui.inline.dropdown .menu { - cursor: auto; - margin-top: 0.25em; - border-radius: 0.325em; -} -/*-------------- - Floating ----------------*/ -.ui.floating.dropdown .menu { - left: 0; - right: auto; - margin-top: 0.5em !important; - border-radius: 0.325em; -} -/*-------------- - Pointing ----------------*/ -.ui.pointing.dropdown .menu { - top: 100%; - margin-top: 0.75em; - border-radius: 0.325em; -} -.ui.pointing.dropdown .menu:after { - display: block; - position: absolute; - pointer-events: none; - content: " "; - visibility: visible; - width: 0.5em; - height: 0.5em; - -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); - box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); - background-image: none; - background-color: #FFFFFF; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - z-index: 2; -} -.ui.pointing.dropdown .menu .active.item:first-child { - background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); - background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); - background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); -} -/* Directions */ -.ui.pointing.dropdown .menu:after { - top: -0.25em; - left: 50%; - margin: 0em 0em 0em -0.25em; -} -.ui.top.left.pointing.dropdown .menu { - top: 100%; - bottom: auto; - left: 0%; - right: auto; - margin: 0.75em 0em 0em; -} -.ui.top.left.pointing.dropdown .menu:after { - top: -0.25em; - left: 1.25em; - right: auto; - margin: 0em; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -.ui.top.right.pointing.dropdown .menu { - top: 100%; - bottom: auto; - right: 0%; - left: auto; - margin: 0.75em 0em 0em; -} -.ui.top.right.pointing.dropdown .menu:after { - top: -0.25em; - left: auto; - right: 1.25em; - margin: 0em; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -.ui.left.pointing.dropdown .menu { - top: 0%; - left: 100%; - right: auto; - margin: 0em 0em 0em 0.75em; -} -.ui.left.pointing.dropdown .menu:after { - top: 1em; - left: -0.25em; - margin: 0em 0em 0em 0em; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.ui.right.pointing.dropdown .menu { - top: 0%; - left: auto; - right: 100%; - margin: 0em 0.75em 0em 0em; -} -.ui.right.pointing.dropdown .menu:after { - top: 1em; - left: auto; - right: -0.25em; - margin: 0em 0em 0em 0em; - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -ms-transform: rotate(135deg); - transform: rotate(135deg); -} - -/* - * # Semantic - Modal - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Modal -*******************************/ -.ui.modal { - display: none; - position: fixed; - z-index: 1001; - top: 50%; - left: 50%; - text-align: left; - width: 90%; - margin-left: -45%; - background-color: #FFFFFF; - border: 1px solid #DDDDDD; - border-radius: 5px; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} -/******************************* - Content -*******************************/ -/*-------------- - Close ----------------*/ -.ui.modal > .close { - cursor: pointer; - position: absolute; - z-index: 1; - opacity: 0.8; - font-size: 1.25em; - top: -1.75em; - right: -1.75em; - color: #FFFFFF; -} -.ui.modal > .close:hover { - opacity: 1; -} -/*-------------- - Header ----------------*/ -.ui.modal > .header { - margin: 0em; - padding: 1.5rem 2rem; - font-size: 1.6em; - font-weight: bold; - border-radius: 0.325em 0.325em 0px 0px; -} -/*-------------- - Content ----------------*/ -.ui.modal > .content { - display: table; - width: 100%; - position: relative; - padding: 2em; - background-color: #F4F4F4; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.modal > .content > .left:not(.ui) { - display: table-cell; - padding-right: 1.5%; - min-width: 25%; -} -.ui.modal > .content > .right:not(.ui) { - display: table-cell; - padding-left: 1.5%; - vertical-align: top; -} -/*rtl:ignore*/ -.ui.modal > .content > .left:not(.ui) > i.icon { - font-size: 8em; - margin: 0em; -} -.ui.modal > .content p { - line-height: 1.6; -} -/*-------------- - Actions ----------------*/ -.ui.modal .actions { - padding: 1rem 2rem; - text-align: right; -} -.ui.modal .actions > .button { - margin-left: 0.75em; -} -/*------------------- - Sizing ---------------------*/ -/* Mobile Only */ -@media only screen and (max-width: 768px) { - /*rtl:ignore*/ - .ui.modal .content > .left:not(.ui) { - display: block; - padding: 0em 0em 1em; - } - /*rtl:ignore*/ - .ui.modal .content > .right:not(.ui) { - display: block; - padding: 1em 0em 0em; - -webkit-box-shadow: none; - box-shadow: none; - } - .ui.modal .content .image { - width: auto !important; - max-width: 100%; - } - .ui.modal .actions { - padding-bottom: 0em; - } - .ui.modal .actions > .buttons, - .ui.modal .actions > .button { - margin-bottom: 1em; - } -} -/* Tablet and Mobile */ -@media only screen and (max-width: 998px) { - .ui.modal { - width: 92%; - margin-left: -46%; - } - .ui.modal > .close { - color: rgba(0, 0, 0, 0.8); - top: 1.5rem; - right: 1rem; - } -} -/* Computer / Responsive */ -@media only screen and (min-width: 998px) { - .ui.modal { - width: 74%; - margin-left: -37%; - } -} -@media only screen and (min-width: 1500px) { - .ui.modal { - width: 56%; - margin-left: -28%; - } -} -@media only screen and (min-width: 1750px) { - .ui.modal { - width: 42%; - margin-left: -21%; - } -} -@media only screen and (min-width: 2000px) { - .ui.modal { - width: 36%; - margin-left: -18%; - } -} -/******************************* - Types -*******************************/ -.ui.basic.modal { - background-color: transparent; - border: none; - color: #FFFFFF; -} -.ui.basic.modal > .close { - top: 1.5rem; - right: 1rem; -} -.ui.basic.modal .content { - background-color: transparent; -} -/******************************* - Variations -*******************************/ -/* A modal that cannot fit on the page */ -.ui.modal.scrolling { - position: absolute; - margin-top: 10px; -} -/******************************* - States -*******************************/ -.ui.active.modal { - display: block; -} -/*-------------- - Size ----------------*/ -/* Small */ -.ui.small.modal > .header { - font-size: 1.3em; -} -@media only screen and (min-width: 998px) { - .ui.small.modal { - width: 58%; - margin-left: -29%; - } -} -@media only screen and (min-width: 1500px) { - .ui.small.modal { - width: 40%; - margin-left: -20%; - } -} -@media only screen and (min-width: 1750px) { - .ui.small.modal { - width: 26%; - margin-left: -13%; - } -} -@media only screen and (min-width: 2000px) { - .ui.small.modal { - width: 20%; - margin-left: -10%; - } -} -/* Large */ -@media only screen and (min-width: 998px) { - .ui.large.modal { - width: 74%; - margin-left: -37%; - } -} -@media only screen and (min-width: 1500px) { - .ui.large.modal { - width: 64%; - margin-left: -32%; - } -} -@media only screen and (min-width: 1750px) { - .ui.large.modal { - width: 54%; - margin-left: -27%; - } -} -@media only screen and (min-width: 2000px) { - .ui.large.modal { - width: 44%; - margin-left: -22%; - } -} - -/* - * # Semantic - Nag - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Nag -*******************************/ -.ui.nag { - display: none; - opacity: 0.95; - position: relative; - top: 0px; - left: 0%; - z-index: 101; - min-height: 0; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - margin: 0em; - line-height: 3em; - padding: 0em 1em; - background-color: #555555; - -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); - font-size: 1em; - text-align: center; - color: rgba(255, 255, 255, 0.8); - border-radius: 0px 0px 5px 5px; - -webkit-transition: 0.2s background; - -moz-transition: 0.2s background; - transition: 0.2s background; -} -a.ui.nag { - cursor: pointer; -} -.ui.nag > .title { - display: inline-block; - margin: 0em 0.5em; - color: #FFFFFF; -} -.ui.nag > .close.icon { - cursor: pointer; - opacity: 0.4; - position: absolute; - top: 50%; - right: 1em; - margin-top: -0.5em; - color: #FFFFFF; - -webkit-transition: 0.1s opacity; - -moz-transition: 0.1s opacity; - transition: 0.1s opacity; -} -/******************************* - States -*******************************/ -/* Hover */ -.ui.nag:hover { - opacity: 1; -} -.ui.nag .close:hover { - opacity: 1; -} -/******************************* - Variations -*******************************/ -/*-------------- - Static ----------------*/ -.ui.overlay.nag { - position: absolute; - display: block; -} -/*-------------- - Fixed ----------------*/ -.ui.fixed.nag { - position: fixed; -} -/*-------------- - Bottom ----------------*/ -.ui.bottom.nag { - border-radius: 5px 5px 0px 0px; -} -.ui.fixed.bottom.nags, -.ui.fixed.bottom.nag { - top: auto; - bottom: 0px; -} -/*-------------- - White ----------------*/ -.ui.white.nags .nag, -.ui.white.nag { - background-color: #F1F1F1; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); - color: #ACACAC; -} -.ui.white.nags .nag .close, -.ui.white.nags .nag .title, -.ui.white.nag .close, -.ui.white.nag .title { - color: #333333; -} -/******************************* - Groups -*******************************/ -.ui.nags .nag { - border-radius: 0px; -} - -/* - * # Semantic - Popup - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Popup -*******************************/ -.ui.popup { - display: none; - position: absolute; - top: 0px; - right: 0px; - z-index: 900; - border: 1px solid rgba(0, 0, 0, 0.1); - max-width: 250px; - background-color: #FFFFFF; - padding: 0.8em 1.2em; - font-size: 0.875rem; - font-weight: normal; - font-style: normal; - color: rgba(0, 0, 0, 0.7); - border-radius: 0.2em; - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -} -.ui.popup .header { - padding: 0em 0em 0.5em; - font-size: 1.125em; - line-height: 1.2; - font-weight: bold; -} -.ui.popup:before { - position: absolute; - content: ""; - width: 0.75em; - height: 0.75rem; - background-image: none; - background-color: #FFFFFF; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - z-index: 2; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -} -.ui.popup .ui.button { - width: 100%; -} -/******************************* - Types -*******************************/ -/*-------------- - Spacing ----------------*/ -.ui.popup { - margin: 0em; -} -.ui.popup.bottom { - margin: 0.75em 0em 0em; -} -.ui.popup.top { - margin: 0em 0em 0.75em; -} -.ui.popup.left.center { - margin: 0em 0.75em 0em 0em; -} -.ui.popup.right.center { - margin: 0em 0em 0em 0.75em; -} -.ui.popup.center { - margin-left: -1.25em; -} -/*-------------- - Pointer ----------------*/ -/*--- Below ---*/ -.ui.bottom.center.popup:before { - margin-left: -0.4em; - top: -0.4em; - left: 50%; - right: auto; - bottom: auto; - -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); - box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); -} -.ui.bottom.left.popup { - margin-right: -2em; -} -.ui.bottom.left.popup:before { - top: -0.4em; - right: 1em; - bottom: auto; - left: auto; - margin-left: 0em; - -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); - box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); -} -.ui.bottom.right.popup { - margin-left: -2em; -} -.ui.bottom.right.popup:before { - top: -0.4em; - left: 1em; - right: auto; - bottom: auto; - margin-left: 0em; - -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); - box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); -} -/*--- Above ---*/ -.ui.top.center.popup:before { - top: auto; - right: auto; - bottom: -0.4em; - left: 50%; - margin-left: -0.4em; -} -.ui.top.left.popup { - margin-right: -2em; -} -.ui.top.left.popup:before { - bottom: -0.4em; - right: 1em; - top: auto; - left: auto; - margin-left: 0em; -} -.ui.top.right.popup { - margin-left: -2em; -} -.ui.top.right.popup:before { - bottom: -0.4em; - left: 1em; - top: auto; - right: auto; - margin-left: 0em; -} -/*--- Left Center ---*/ -.ui.left.center.popup:before { - top: 50%; - right: -0.35em; - bottom: auto; - left: auto; - margin-top: -0.4em; - -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); - box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); -} -/*--- Right Center ---*/ -.ui.right.center.popup:before { - top: 50%; - left: -0.35em; - bottom: auto; - right: auto; - margin-top: -0.4em; - -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); -} -/******************************* - States -*******************************/ -.ui.loading.popup { - display: block; - visibility: hidden; -} -.ui.animating.popup, -.ui.visible.popup { - display: block; -} -/******************************* - Variations -*******************************/ -/*-------------- - Size ----------------*/ -.ui.small.popup { - font-size: 0.75rem; -} -.ui.large.popup { - font-size: 1rem; -} -/*-------------- - Colors ----------------*/ -/* Inverted colors */ -.ui.inverted.popup { - background-color: #333333; - border: none; - color: #FFFFFF; - -webkit-box-shadow: none; - box-shadow: none; -} -.ui.inverted.popup .header { - background-color: rgba(0, 0, 0, 0.2); - color: #FFFFFF; -} -.ui.inverted.popup:before { - background-color: #333333; - -webkit-box-shadow: none; - box-shadow: none; -} - -/* - * # Semantic - Rating - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Rating -*******************************/ -.ui.rating { - display: inline-block; - font-size: 0em; - vertical-align: middle; - margin: 0em 0.5rem 0em 0em; -} -.ui.rating:last-child { - margin-right: 0em; -} -.ui.rating:before { - display: block; - content: ''; - visibility: hidden; - clear: both; - height: 0; -} -/* Icon */ -.ui.rating .icon { - cursor: pointer; - margin: 0em; - width: 1em; - height: auto; - padding: 0em; - color: rgba(0, 0, 0, 0.15); - font-weight: normal; - font-style: normal; -} -.ui.rating .icon:before { - content: "\2605"; -} -/******************************* - Types -*******************************/ -/*------------------- - Star ---------------------*/ -.ui.star.rating .icon { - width: 1.2em; -} -/* Star */ -.ui.star.rating .icon:before { - content: '\f006'; - font-family: 'Icons'; -} -/* Active Star */ -.ui.star.rating .active.icon:before { - content: '\f005'; - font-family: 'Icons'; -} -/*------------------- - Heart ---------------------*/ -.ui.heart.rating .icon { - width: 1.2em; -} -.ui.heart.rating .icon:before { - content: '\f08a'; - font-family: 'Icons'; -} -/* Active */ -.ui.heart.rating .active.icon:before { - content: '\f004'; - font-family: 'Icons'; -} -.ui.heart.rating .active.icon { - color: #EF404A !important; -} -/* Hovered */ -.ui.heart.rating .hover.icon, -.ui.heart.rating .active.hover.icon { - color: #FF2733 !important; -} -/******************************* - States -*******************************/ -/*------------------- - Active ---------------------*/ -/* disabled rating */ -.ui.disabled.rating .icon { - cursor: default; -} -/* active icons */ -.ui.rating .active.icon { - color: #FFCB08 !important; -} -/*------------------- - Hover ---------------------*/ -/* rating */ -.ui.rating.hover .active.icon { - opacity: 0.5; -} -/* icon */ -.ui.rating .icon.hover, -.ui.rating .icon.hover.active { - opacity: 1; - color: #FFB70A !important; -} -/******************************* - Variations -*******************************/ -.ui.small.rating .icon { - font-size: 0.75rem; -} -.ui.rating .icon { - font-size: 1rem; -} -.ui.large.rating .icon { - font-size: 1.5rem; - vertical-align: middle; -} -.ui.huge.rating .icon { - font-size: 2rem; - vertical-align: middle; -} - -/* - * # Semantic - Search - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Search -*******************************/ -.ui.search { - position: relative; - text-shadow: none; - font-style: normal; - font-weight: normal; -} -.ui.search input { - border-radius: 500rem; -} -/*-------------- - Button ----------------*/ -.ui.search > .button { - position: relative; - z-index: 2; - float: right; - margin: 0px 0px 0px -15px; - padding: 6px 15px 7px; - border-radius: 0px 15px 15px 0px; - -webkit-box-shadow: none; - box-shadow: none; -} -/*-------------- - Results ----------------*/ -.ui.search .results { - display: none; - position: absolute; - z-index: 999; - top: 100%; - left: 0px; - overflow: hidden; - background-color: #FFFFFF; - margin-top: 0.5em; - width: 380px; - font-size: 0.875em; - line-height: 1.2; - color: #555555; - border-radius: 3px; - -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; -} -.ui.search .result { - cursor: pointer; - overflow: hidden; - padding: 0.5em 1em; -} -.ui.search .result:first-child { - border-top: none; -} -.ui.search .result .image { - background: #F0F0F0; - margin-right: 10px; - float: left; - overflow: hidden; - border-radius: 3px; - width: 38px; - height: 38px; -} -.ui.search .result .image img { - display: block; - width: 38px; - height: 38px; -} -.ui.search .result .image ~ .info { - float: none; - margin-left: 50px; -} -.ui.search .result .info { - float: left; -} -.ui.search .result .title { - font-weight: bold; - color: rgba(0, 0, 0, 0.8); -} -.ui.search .result .description { - color: rgba(0, 0, 0, 0.6); -} -.ui.search .result .price { - float: right; - color: #5BBD72; - font-weight: bold; -} -/*-------------- - Message ----------------*/ -.ui.search .message { - padding: 1em; -} -.ui.search .message .text .title { - margin: 0em 0em 0.5rem; - font-size: 1.25rem; - font-weight: bold; - color: rgba(0, 0, 0, 0.8); -} -.ui.search .message .text .description { - margin: 0em; - font-size: 1rem; - color: rgba(0, 0, 0, 0.5); -} -/*-------------- - Categories ----------------*/ -.ui.search .results .category { - background-color: #FAFAFA; - border-top: 1px solid rgba(0, 0, 0, 0.1); - -webkit-transition: background 0.2s ease-in; - -moz-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} -.ui.search .results .category:first-child { - border-top: none; -} -.ui.search .results .category > .name { - float: left; - padding: 12px 0px 0px 8px; - font-weight: bold; - color: #777777; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); -} -.ui.search .results .category .result { - background-color: #FFFFFF; - margin-left: 80px; - border-left: 1px solid rgba(0, 0, 0, 0.1); -} -/* View All Results */ -.ui.search .all { - display: block; - border-top: 1px solid rgba(0, 0, 0, 0.1); - background-color: #FAFAFA; - height: 2em; - line-height: 2em; - color: rgba(0, 0, 0, 0.6); - font-weight: bold; - text-align: center; -} -/******************************* - States -*******************************/ -/*-------------- - Hover ----------------*/ -.ui.search .result:hover, -.ui.search .category .result:hover { - background-color: #F8F8F8; -} -.ui.search .all:hover { - background-color: #F0F0F0; -} -/*-------------- - Loading ----------------*/ -.ui.search.loading .input .icon { - background: url(../images/loader-mini.gif) no-repeat 50% 50%; -} -.ui.search.loading .input .icon:before, -.ui.search.loading .input .icon:after { - display: none; -} -/*-------------- - Active ----------------*/ -.ui.search .results .category.active { - background-color: #F1F1F1; -} -.ui.search .results .category.active > .name { - color: #333333; -} -.ui.search .result.active, -.ui.search .category .result.active { - background-color: #FBFBFB; -} -.ui.search .result.active .title { - color: #000000; -} -.ui.search .result.active .description { - color: #555555; -} -/******************************* - Variations -*******************************/ -/* Large */ -.ui.search .large.result .image, -.ui.search .large.result .image img { - width: 50px; - height: 50px; -} -.ui.search .large.results .indented.info { - margin-left: 65px; -} -.ui.search .large.results .info .title { - font-size: 16px; -} -.ui.search .large.results .info .description { - font-size: 11px; -} - -/* - * # Semantic - Shape - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Shape -*******************************/ -.ui.shape { - display: inline-block; - position: relative; - -webkit-perspective: 2000px; - -moz-perspective: 2000px; - -ms-perspective: 2000px; - perspective: 2000px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.shape .sides { - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; -} -.ui.shape .side { - opacity: 1; - width: 100%; - margin: 0em !important; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -.ui.shape .side { - display: none; -} -/******************************* - Types -*******************************/ -.ui.cube.shape .side { - min-width: 15em; - height: 15em; - padding: 2em; - background-color: #E6E6E6; - color: rgba(0, 0, 0, 0.6); - -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -} -.ui.cube.shape .side > .content { - width: 100%; - height: 100%; - display: table; - text-align: center; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} -.ui.cube.shape .side > .content > div { - display: table-cell; - vertical-align: middle; - font-size: 2em; -} -/******************************* - Variations -*******************************/ -.ui.text.shape.animating .sides { - position: static; -} -.ui.text.shape .side { - white-space: nowrap; -} -.ui.text.shape .side > * { - white-space: normal; -} -/******************************* - States -*******************************/ -/*-------------- - Loading ----------------*/ -.ui.loading.shape { - position: absolute; - top: -9999px; - left: -9999px; -} -/*-------------- - Animating ----------------*/ -.ui.shape .animating.side { - position: absolute; - top: 0px; - left: 0px; - z-index: 100; -} -.ui.shape .hidden.side { - opacity: 0.4; -} -/*-------------- - CSS ----------------*/ -.ui.shape.animating { - -webkit-transition: all 0.6s ease-in-out; - -moz-transition: all 0.6s ease-in-out; - transition: all 0.6s ease-in-out; -} -.ui.shape.animating .sides { - position: absolute; -} -.ui.shape.animating .sides { - -webkit-transition: all 0.6s ease-in-out; - -moz-transition: all 0.6s ease-in-out; - transition: all 0.6s ease-in-out; -} -.ui.shape.animating .side { - -webkit-transition: opacity 0.6s ease-in-out; - -moz-transition: opacity 0.6s ease-in-out; - transition: opacity 0.6s ease-in-out; -} -/*-------------- - Active ----------------*/ -.ui.shape .active.side { - display: block; -} - -/* - * # Semantic - Sidebar - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Sidebar -*******************************/ -body { - -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease /*rtl:append:, - padding 0.3s ease*/; - -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease /*rtl:append:, - padding 0.3s ease*/; - transition: margin 0.3s ease, transform 0.3s ease /*rtl:append:, - padding 0.3s ease*/; -} -.ui.sidebar { - position: fixed; - margin: 0 !important; - height: 100% !important; - border-radius: 0px !important; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - -ms-overflow-y: auto; - overflow-y: auto; - top: 0px; - left: 0px; - z-index: 999; - -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; - -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; - transition: margin-left 0.3s ease, margin-top 0.3s ease; -} -/*------------------- - Coupling ---------------------*/ -body.pushed.scrolling.ui.dimmable { - position: static; -} -/******************************* - Types -*******************************/ -/*------------------- - Direction ---------------------*/ -.ui.right.very.thin.sidebar, -.ui.right.thin.sidebar, -.ui.right.sidebar, -.ui.right.wide.sidebar, -.ui.right.very.wide.sidebar { - left: 100%; - margin: 0px !important; -} -.ui.top.sidebar { - width: 100% !important; -} -.ui.bottom.sidebar { - width: 100% !important; - top: 100%; - margin: 0px !important; -} -/******************************* - States -*******************************/ -.ui.active.sidebar { - margin-left: 0px !important; -} -.ui.active.top.sidebar, -.ui.active.bottom.sidebar { - margin-top: 0px !important; -} -/******************************* - Variations -*******************************/ -/*------------------- - Formatted ---------------------*/ -.ui.styled.sidebar { - padding: 1em 1.5em; - background-color: #FFFFFF; - -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); - box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); -} -.ui.styled.very.thin.sidebar { - padding: 0.5em; -} -.ui.styled.thin.sidebar { - padding: 1em; -} -/*------------------- - Floating ---------------------*/ -.ui.floating.sidebar { - -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); - box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); -} -.ui.right.floating.sidebar { - -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); - box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); -} -.ui.top.floating.sidebar { - -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); -} -.ui.bottom.floating.sidebar { - -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); - box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); -} -/*------------------- - Width ---------------------*/ -/* Very Thin */ -.ui.very.thin.sidebar { - width: 60px !important; - margin-left: -60px !important; -} -.ui.active.very.thin.sidebar { - margin-left: 0px !important; -} -.ui.active.right.very.thin.sidebar { - margin-left: -60px !important; -} -/* Thin */ -.ui.thin.sidebar { - width: 200px !important; - margin-left: -200px !important; -} -.ui.active.thin.sidebar { - margin-left: 0px !important; -} -.ui.active.right.thin.sidebar { - margin-left: -200px !important; -} -/* Standard */ -.ui.sidebar { - width: 275px !important; - margin-left: -275px !important; -} -.ui.active.sidebar { - margin-left: 0px !important; -} -.ui.active.right.sidebar { - margin-left: -275px !important; -} -/* Wide */ -.ui.wide.sidebar { - width: 350px !important; - margin-left: -350px !important; -} -.ui.active.wide.sidebar { - margin-left: 0px !important; -} -.ui.active.right.wide.sidebar { - margin-left: -350px !important; -} -/* Very Wide */ -.ui.very.wide.sidebar { - width: 475px !important; - margin-left: -475px !important; -} -.ui.active.very.wide.sidebar { - margin-left: 0px !important; -} -.ui.active.right.very.wide.sidebar { - margin-left: -475px !important; -} -/*------------------- - Height ---------------------*/ -/* Standard */ -.ui.top.sidebar { - margin: -40px 0px 0px 0px !important; -} -.ui.top.sidebar, -.ui.bottom.sidebar { - height: 40px !important; -} -.ui.active.bottom.sidebar { - margin-top: -40px !important; -} - -/* - * # Semantic - Tab - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - UI Tabs -*******************************/ -.ui.tab { - display: none; -} -/******************************* - States -*******************************/ -/*-------------------- - Active ----------------------*/ -.ui.tab.active, -.ui.tab.open { - display: block; -} -/*-------------------- - Loading ----------------------*/ -.ui.tab.loading { - position: relative; - overflow: hidden; - display: block; - min-height: 250px; - text-indent: -10000px; -} -.ui.tab.loading * { - position: relative !important; - left: -10000px !important; -} -.ui.tab.loading:after { - position: absolute; - top: 50px; - left: 50%; - content: 'Loading...'; - margin-left: -32px; - text-indent: 5px; - color: rgba(0, 0, 0, 0.4); - width: 100%; - height: 100%; - padding-top: 75px; - background: url(../images/loader-large.gif) no-repeat 0px 0px; - visibility: visible; -} - -/******************************* - Semantic - Transition - Author: Jack Lukic - - CSS animation definitions for - transition module - -*******************************/ -/* - Some transitions adapted from Animate CSS - https://github.com/daneden/animate.css -*/ -.ui.transition { - -webkit-animation-iteration-count: 1; - -moz-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: ease; - -moz-animation-timing-function: ease; - animation-timing-function: ease; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - animation-fill-mode: both; -} -/******************************* - States -*******************************/ -.ui.animating.transition { - display: block; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} -/* Loading */ -.ui.loading.transition { - position: absolute; - top: -999999px; - left: -99999px; -} -/* Hidden */ -.ui.hidden.transition { - display: none !important; -} -/* Visible */ -.ui.visible.transition { - display: block; - visibility: visible; -} -/* Disabled */ -.ui.disabled.transition { - -webkit-animation-play-state: paused; - -moz-animation-play-state: paused; - animation-play-state: paused; -} -/******************************* - Variations -*******************************/ -.ui.looping.transition { - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} -/******************************* - Types -*******************************/ -/*-------------- - Emphasis ----------------*/ -.ui.flash.transition { - -webkit-animation-name: flash; - -moz-animation-name: flash; - animation-name: flash; -} -.ui.shake.transition { - -webkit-animation-name: shake; - -moz-animation-name: shake; - animation-name: shake; -} -.ui.bounce.transition { - -webkit-animation-name: bounce; - -moz-animation-name: bounce; - animation-name: bounce; -} -.ui.tada.transition { - -webkit-animation-name: tada; - -moz-animation-name: tada; - animation-name: tada; -} -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -.ui.pulse.transition { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - animation-name: pulse; -} -/*-------------- - Flips ----------------*/ -.ui.flip.transition.in, -.ui.flip.transition.out { - -webkit-perspective: 2000px; - -moz-perspective: 2000px; - -ms-perspective: 2000px; - perspective: 2000px; -} -.ui.horizontal.flip.transition.in, -.ui.horizontal.flip.transition.out { - -webkit-animation-name: horizontalFlip; - -moz-animation-name: horizontalFlip; - animation-name: horizontalFlip; -} -.ui.horizontal.flip.transition.out { - -webkit-animation-name: horizontalFlipOut; - -moz-animation-name: horizontalFlipOut; - animation-name: horizontalFlipOut; -} -.ui.vertical.flip.transition.in, -.ui.vertical.flip.transition.out { - -webkit-animation-name: verticalFlip; - -moz-animation-name: verticalFlip; - animation-name: verticalFlip; -} -.ui.vertical.flip.transition.out { - -webkit-animation-name: verticalFlipOut; - -moz-animation-name: verticalFlipOut; - animation-name: verticalFlipOut; -} -/*-------------- - Fades ----------------*/ -.ui.fade.transition.in { - -webkit-animation-name: fade; - -moz-animation-name: fade; - animation-name: fade; -} -.ui.fade.transition.out { - -webkit-animation-name: fadeOut; - -moz-animation-name: fadeOut; - animation-name: fadeOut; -} -.ui.fade.up.transition.in { - -webkit-animation-name: fadeUp; - -moz-animation-name: fadeUp; - animation-name: fadeUp; -} -.ui.fade.up.transition.out { - -webkit-animation-name: fadeUpOut; - -moz-animation-name: fadeUpOut; - animation-name: fadeUpOut; -} -.ui.fade.down.transition.in { - -webkit-animation-name: fadeDown; - -moz-animation-name: fadeDown; - animation-name: fadeDown; -} -.ui.fade.down.transition.out { - -webkit-animation-name: fadeDownOut; - -moz-animation-name: fadeDownOut; - animation-name: fadeDownOut; -} -/*-------------- - Scale ----------------*/ -.ui.scale.transition.in { - -webkit-animation-name: scale; - -moz-animation-name: scale; - animation-name: scale; -} -.ui.scale.transition.out { - -webkit-animation-name: scaleOut; - -moz-animation-name: scaleOut; - animation-name: scaleOut; -} -/*-------------- - Slide ----------------*/ -.ui.slide.down.transition.in { - -webkit-animation-name: slide; - -moz-animation-name: slide; - animation-name: slide; - -moz-transform-origin: 50% 0%; - transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; - -webkit-transform-origin: 50% 0%; -} -.ui.slide.down.transition.out { - -webkit-animation-name: slideOut; - -moz-animation-name: slideOut; - animation-name: slideOut; - -webkit-transform-origin: 50% 0%; - -moz-transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; - transform-origin: 50% 0%; -} -.ui.slide.up.transition.in { - -webkit-animation-name: slide; - -moz-animation-name: slide; - animation-name: slide; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -.ui.slide.up.transition.out { - -webkit-animation-name: slideOut; - -moz-animation-name: slideOut; - animation-name: slideOut; - -webkit-transform-origin: 50% 100%; - -moz-transform-origin: 50% 100%; - -ms-transform-origin: 50% 100%; - transform-origin: 50% 100%; -} -@-webkit-keyframes slide { - 0% { - opacity: 0; - -webkit-transform: scaleY(0); - transform: scaleY(0); - } - 100% { - opacity: 1; - -webkit-transform: scaleY(1); - transform: scaleY(1); - } -} -@-moz-keyframes slide { - 0% { - opacity: 0; - -moz-transform: scaleY(0); - transform: scaleY(0); - } - 100% { - opacity: 1; - -moz-transform: scaleY(1); - transform: scaleY(1); - } -} -@keyframes slide { - 0% { - opacity: 0; - -webkit-transform: scaleY(0); - -moz-transform: scaleY(0); - transform: scaleY(0); - } - 100% { - opacity: 1; - -webkit-transform: scaleY(1); - -moz-transform: scaleY(1); - transform: scaleY(1); - } -} -@-webkit-keyframes slideOut { - 0% { - opacity: 1; - -webkit-transform: scaleY(1); - transform: scaleY(1); - } - 100% { - opacity: 0; - -webkit-transform: scaleY(0); - transform: scaleY(0); - } -} -@-moz-keyframes slideOut { - 0% { - opacity: 1; - -moz-transform: scaleY(1); - transform: scaleY(1); - } - 100% { - opacity: 0; - -moz-transform: scaleY(0); - transform: scaleY(0); - } -} -@keyframes slideOut { - 0% { - opacity: 1; - -webkit-transform: scaleY(1); - -moz-transform: scaleY(1); - transform: scaleY(1); - } - 100% { - opacity: 0; - -webkit-transform: scaleY(0); - -moz-transform: scaleY(0); - transform: scaleY(0); - } -} -/******************************* - Animations -*******************************/ -/*-------------- - Emphasis ----------------*/ -/* Flash */ -@-webkit-keyframes flash { - 0%, - 50%, - 100% { - opacity: 1; - } - 25%, - 75% { - opacity: 0; - } -} -@-moz-keyframes flash { - 0%, - 50%, - 100% { - opacity: 1; - } - 25%, - 75% { - opacity: 0; - } -} -@keyframes flash { - 0%, - 50%, - 100% { - opacity: 1; - } - 25%, - 75% { - opacity: 0; - } -} -/* Shake */ -@-webkit-keyframes shake { - 0%, - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px); - } - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - transform: translateX(10px); - } -} -@-moz-keyframes shake { - 0%, - 100% { - -moz-transform: translateX(0); - transform: translateX(0); - } - 10%, - 30%, - 50%, - 70%, - 90% { - -moz-transform: translateX(-10px); - transform: translateX(-10px); - } - 20%, - 40%, - 60%, - 80% { - -moz-transform: translateX(10px); - transform: translateX(10px); - } -} -@keyframes shake { - 0%, - 100% { - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - transform: translateX(0); - } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - -moz-transform: translateX(-10px); - transform: translateX(-10px); - } - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - -moz-transform: translateX(10px); - transform: translateX(10px); - } -} -/* Bounce */ -@-webkit-keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } - 40% { - -webkit-transform: translateY(-30px); - transform: translateY(-30px); - } - 60% { - -webkit-transform: translateY(-15px); - transform: translateY(-15px); - } -} -@-moz-keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - -moz-transform: translateY(0); - transform: translateY(0); - } - 40% { - -moz-transform: translateY(-30px); - transform: translateY(-30px); - } - 60% { - -moz-transform: translateY(-15px); - transform: translateY(-15px); - } -} -@keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - transform: translateY(0); - } - 40% { - -webkit-transform: translateY(-30px); - -moz-transform: translateY(-30px); - transform: translateY(-30px); - } - 60% { - -webkit-transform: translateY(-15px); - -moz-transform: translateY(-15px); - transform: translateY(-15px); - } -} -/* Tada */ -@-webkit-keyframes tada { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 10%, - 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); - } - 30%, - 50%, - 70%, - 90% { - -webkit-transform: scale(1.1) rotate(3deg); - transform: scale(1.1) rotate(3deg); - } - 40%, - 60%, - 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); - } - 100% { - -webkit-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); - } -} -@-moz-keyframes tada { - 0% { - -moz-transform: scale(1); - transform: scale(1); - } - 10%, - 20% { - -moz-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); - } - 30%, - 50%, - 70%, - 90% { - -moz-transform: scale(1.1) rotate(3deg); - transform: scale(1.1) rotate(3deg); - } - 40%, - 60%, - 80% { - -moz-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); - } - 100% { - -moz-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); - } -} -@keyframes tada { - 0% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - transform: scale(1); - } - 10%, - 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - -moz-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); - } - 30%, - 50%, - 70%, - 90% { - -webkit-transform: scale(1.1) rotate(3deg); - -moz-transform: scale(1.1) rotate(3deg); - transform: scale(1.1) rotate(3deg); - } - 40%, - 60%, - 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - -moz-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); - } - 100% { - -webkit-transform: scale(1) rotate(0); - -moz-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); - } -} -/* Pulse */ -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } - 50% { - -webkit-transform: scale(0.9); - transform: scale(0.9); - opacity: 0.7; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes pulse { - 0% { - -moz-transform: scale(1); - transform: scale(1); - opacity: 1; - } - 50% { - -moz-transform: scale(0.9); - transform: scale(0.9); - opacity: 0.7; - } - 100% { - -moz-transform: scale(1); - transform: scale(1); - opacity: 1; - } -} -@keyframes pulse { - 0% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - transform: scale(1); - opacity: 1; - } - 50% { - -webkit-transform: scale(0.9); - -moz-transform: scale(0.9); - transform: scale(0.9); - opacity: 0.7; - } - 100% { - -webkit-transform: scale(1); - -moz-transform: scale(1); - transform: scale(1); - opacity: 1; - } -} -/*-------------- - Flips ----------------*/ -/* Horizontal */ -@-webkit-keyframes horizontalFlip { - 0% { - -webkit-transform: rotateY(-90deg); - transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } -} -@-moz-keyframes horizontalFlip { - 0% { - -moz-transform: rotateY(-90deg); - transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -moz-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } -} -@keyframes horizontalFlip { - 0% { - -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } -} -/* Horizontal */ -@-webkit-keyframes horizontalFlipOut { - 0% { - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } - 100% { - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - opacity: 0; - } -} -@-moz-keyframes horizontalFlipOut { - 0% { - -moz-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } - 100% { - -moz-transform: rotateY(90deg); - transform: rotateY(90deg); - opacity: 0; - } -} -@keyframes horizontalFlipOut { - 0% { - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - transform: rotateY(0deg); - opacity: 1; - } - 100% { - -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - transform: rotateY(90deg); - opacity: 0; - } -} -/* Vertical */ -@-webkit-keyframes verticalFlip { - 0% { - -webkit-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } -} -@-moz-keyframes verticalFlip { - 0% { - -moz-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -moz-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } -} -@keyframes verticalFlip { - 0% { - -webkit-transform: rotateX(-90deg); - -moz-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateX(0deg); - -moz-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } -} -@-webkit-keyframes verticalFlipOut { - 0% { - -webkit-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } -} -@-moz-keyframes verticalFlipOut { - 0% { - -moz-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } - 100% { - -moz-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } -} -@keyframes verticalFlipOut { - 0% { - -webkit-transform: rotateX(0deg); - -moz-transform: rotateX(0deg); - transform: rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: rotateX(-90deg); - -moz-transform: rotateX(-90deg); - transform: rotateX(-90deg); - opacity: 0; - } -} -/*-------------- - Fades ----------------*/ -/* Fade */ -@-webkit-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-moz-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-moz-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -/* Fade Up */ -@-webkit-keyframes fadeUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - transform: translateY(20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} -@-moz-keyframes fadeUp { - 0% { - opacity: 0; - -moz-transform: translateY(20px); - transform: translateY(20px); - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - transform: translateY(0); - } -} -@keyframes fadeUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - -moz-transform: translateY(20px); - transform: translateY(20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - transform: translateY(0); - } -} -@-webkit-keyframes fadeUpOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - transform: translateY(20px); - } -} -@-moz-keyframes fadeUpOut { - 0% { - opacity: 1; - -moz-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -moz-transform: translateY(20px); - transform: translateY(20px); - } -} -@keyframes fadeUpOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - -moz-transform: translateY(20px); - transform: translateY(20px); - } -} -/* Fade Down */ -@-webkit-keyframes fadeDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} -@-moz-keyframes fadeDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - transform: translateY(-20px); - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - transform: translateY(0); - } -} -@keyframes fadeDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - -moz-transform: translateY(-20px); - transform: translateY(-20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - transform: translateY(0); - } -} -@-webkit-keyframes fadeDownOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); - } -} -@-moz-keyframes fadeDownOut { - 0% { - opacity: 1; - -moz-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -moz-transform: translateY(-20px); - transform: translateY(-20px); - } -} -@keyframes fadeDownOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - -moz-transform: translateY(-20px); - transform: translateY(-20px); - } -} -/*-------------- - Scale ----------------*/ -/* Scale */ -@-webkit-keyframes scale { - 0% { - opacity: 0; - -webkit-transform: scale(0.7); - transform: scale(0.7); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} -@-moz-keyframes scale { - 0% { - opacity: 0; - -moz-transform: scale(0.7); - transform: scale(0.7); - } - 100% { - opacity: 1; - -moz-transform: scale(1); - transform: scale(1); - } -} -@keyframes scale { - 0% { - opacity: 0; - -webkit-transform: scale(0.7); - -moz-transform: scale(0.7); - transform: scale(0.7); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - transform: scale(1); - } -} -@-webkit-keyframes scaleOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(0.7); - transform: scale(0.7); - } -} -@-moz-keyframes scaleOut { - 0% { - opacity: 1; - -moz-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -moz-transform: scale(0.7); - transform: scale(0.7); - } -} -@keyframes scaleOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(0.7); - -moz-transform: scale(0.7); - transform: scale(0.7); - } -} - -/* - * # Semantic - Video - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -/******************************* - Video -*******************************/ -.ui.video { - position: relative; - max-width: 100%; -} -/*-------------- - Content ----------------*/ -/* Placeholder Image */ -.ui.video .placeholder { - background-color: #333333; -} -/* Play Icon Overlay */ -.ui.video .play { - cursor: pointer; - position: absolute; - top: 0px; - left: 0px; - z-index: 10; - width: 100%; - height: 100%; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); - opacity: 0.6; - -webkit-transition: opacity 0.3s; - -moz-transition: opacity 0.3s; - transition: opacity 0.3s; -} -.ui.video .play.icon:before { - position: absolute; - top: 50%; - left: 50%; - z-index: 11; - font-size: 6rem; - margin: -3rem 0em 0em -3rem; - color: #FFFFFF; - text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); -} -.ui.video .placeholder { - display: block; - width: 100%; - height: 100%; -} -/* IFrame Embed */ -.ui.video .embed { - display: none; -} -/******************************* - States -*******************************/ -/*-------------- - Hover ----------------*/ -.ui.video .play:hover { - opacity: 1; -} -/*-------------- - Active ----------------*/ -.ui.video.active .play, -.ui.video.active .placeholder { - display: none; -} -.ui.video.active .embed { - display: block; -} - -/* - * # Semantic Comment View - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - * Released: April 17 2013 - */ -/******************************* - Standard -*******************************/ -/*-------------- - Comments ----------------*/ -.ui.comments a { - cursor: pointer; -} -/*-------------- - Comment ----------------*/ -.ui.comments .comment { - position: relative; - margin-top: 0.5em; - padding-top: 0.5em; -} -.ui.comments .comment:first-child { - margin-top: 0em; - padding-top: 0em; -} -/*-------------------- - Avatar (Optional) ----------------------*/ -.ui.comments .comment .avatar { - display: block; - float: left; - width: 4em; -} -.ui.comments .comment .avatar img { - display: block; - margin: 0em auto; - width: 3em; - height: 3em; - border-radius: 500px; -} -/*-------------- - Content ----------------*/ -.ui.comments .comment > .content, -.ui.comments .comment > .avatar { - display: block; -} -.ui.comments .comment .avatar ~ .content { - padding: 0em 1em; -} -/* If there is an avatar move content over */ -.ui.comments .comment > .avatar ~ .content { - padding-top: 0.25em; - margin-left: 3.5em; -} -.ui.comments .comment .metadata { - display: inline-block; - margin-left: 0.3em; - color: rgba(0, 0, 0, 0.4); -} -.ui.comments .comment .metadata > * { - display: inline-block; - margin: 0em 0.3em 0em 0em; -} -/*-------------------- - Comment Text ----------------------*/ -.ui.comments .comment .text { - margin: 0.25em 0em 0.5em; - word-wrap: break-word; -} -/*-------------------- - User Actions ----------------------*/ -.ui.comments .comment .actions { - font-size: 0.9em; -} -.ui.comments .comment .actions a { - display: inline-block; - margin: 0em 0.3em 0em 0em; - color: rgba(0, 0, 0, 0.3); -} -.ui.comments .comment .actions a.active, -.ui.comments .comment .actions a:hover { - color: rgba(0, 0, 0, 0.6); -} -/*-------------------- - Reply Form ----------------------*/ -.ui.comments .reply.form { - margin-top: 0.75em; - width: 100%; - max-width: 30em; -} -.ui.comments .comment .reply.form { - margin-left: 2em; -} -.ui.comments > .reply.form { - margin-top: 1.5em; - max-width: 40em; -} -.ui.comments .reply.form textarea { - height: 12em; -} -/*-------------------- - Nested Comments ----------------------*/ -.ui.comments .comment .comments { - margin-top: 0.5em; - padding-top: 0.5em; - padding-bottom: 1em; -} -.ui.comments .comment .comments:before { - position: absolute; - top: 0px; - left: 0px; -} -/* One Deep */ -.ui.comments > .comment .comments { - margin-left: 2em; -} -/* Two Deep */ -.ui.comments > .comment > .comments > .comment > .comments { - margin-left: 1.75em; -} -/* Three Deep */ -.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { - margin-left: 1.5em; -} -/* Four Deep or more */ -.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { - margin-left: 0.5em; -} -/******************************* - Variations -*******************************/ -/*-------------------- - Threaded ----------------------*/ -.ui.threaded.comments .comment .comments { - margin-left: 2em !important; - padding-left: 2em !important; - -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); - box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); -} -/*-------------------- - Minimal ----------------------*/ -.ui.minimal.comments .comment .actions { - opacity: 0; - -webkit-transition: opacity 0.1s ease-out; - -moz-transition: opacity 0.1s ease-out; - transition: opacity 0.1s ease-out; - -webkit-transition-delay: 0.1s; - -moz-transition-delay: 0.1s; - transition-delay: 0.1s; -} -.ui.minimal.comments .comment > .content:hover > .actions { - opacity: 1; -} -/*-------------------- - Sizes ----------------------*/ -.ui.small.comments { - font-size: 0.875em; -} - -/* - * # Activity Feed View - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - * Released: May 22, 2013 - */ -/******************************* - Activity Feed -*******************************/ -.ui.feed a { - cursor: pointer; -} -.ui.feed, -.ui.feed .event, -.ui.feed .label, -.ui.feed .content, -.ui.feed .extra { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -/******************************* - Content -*******************************/ -/* Event */ -.ui.feed .event { - width: 100%; - display: table; - padding: 1em; -} -.ui.feed .event:first-child { - border-top: 0px; -} -.ui.feed .event:last-child { - margin-bottom: 1em; -} -/* Event Label */ -.ui.feed .label { - width: 3em; - display: table-cell; - vertical-align: top; - text-align: left; -} -.ui.feed .label .icon { - font-size: 1.5em; - padding: 0.5em; - margin: 0em; -} -.ui.feed .label img { - width: 3em; - margin: 0em; - border-radius: 50em; -} -.ui.feed .label + .content { - padding: 0.75em 1em 0em; -} -/* Content */ -.ui.feed .content { - display: table-cell; - vertical-align: top; - text-align: left; - word-wrap: break-word; -} -/* Date */ -.ui.feed .content .date { - float: right; - padding-left: 1em; - color: rgba(0, 0, 0, 0.4); -} -/* Summary */ -.ui.feed .content .summary { - color: rgba(0, 0, 0, 0.75); -} -.ui.feed .content .summary img { - display: inline-block; - margin-right: 0.25em; - width: 4em; - border-radius: 500px; -} -/* Additional Information */ -.ui.feed .content .extra { - margin: 1em 0em 0em; - padding: 0.5em 0em 0em; - color: rgba(0, 0, 0, 0.5); -} -.ui.feed .content .extra.images img { - display: inline-block; - margin-right: 0.25em; - width: 6em; -} -.ui.feed .content .extra.text { - padding: 0.5em 1em; - border-left: 0.2em solid rgba(0, 0, 0, 0.1); -} -/******************************* - Variations -*******************************/ -.ui.small.feed { - font-size: 0.875em; -} -.ui.small.feed .label img { - width: 2.5em; -} -.ui.small.feed .label .icon { - font-size: 1.25em; -} -.ui.feed .event { - padding: 0.75em 0em; -} -.ui.small.feed .label + .content { - padding: 0.5em 0.5em 0; -} -.ui.small.feed .content .extra.images img { - width: 5em; -} -.ui.small.feed .content .extra { - margin: 0.5em 0em 0em; -} -.ui.small.feed .content .extra.text { - padding: 0.25em 0.5em; -} - -/* - * # Semantic Item View - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - * Released: April 17 2013 - */ -/******************************* - Standard -*******************************/ -/*-------------- - Items ----------------*/ -.ui.items { - margin: 1em 0em 0em; -} -.ui.items:first-child { - margin-top: 0em; -} -.ui.items:last-child { - margin-bottom: -1em; -} -/* Force Clearing */ -.ui.items:after { - display: block; - content: ' '; - height: 0px; - clear: both; - overflow: hidden; - visibility: hidden; -} -/*-------------- - Item ----------------*/ -.ui.items > .row > .item, -.ui.items > .item { - display: block; - float: left; - position: relative; - top: 0px; - width: 316px; - min-height: 375px; - margin: 0em 0.5em 2.5em; - padding: 0em; - background-color: #FFFFFF; - line-height: 1.2; - font-size: 1em; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); - border-radius: 0.33em; - -webkit-transition: -webkit-box-shadow 0.2s ease; - -moz-transition: box-shadow 0.2s ease; - transition: box-shadow 0.2s ease; - padding: 0.5em; -} -.ui.items a.item, -.ui.items .item a { - cursor: pointer; -} -.ui.items .item, -.ui.items .item > .image, -.ui.items .item > .image .overlay, -.ui.items .item > .content, -.ui.items .item > .content > .meta, -.ui.items .item > .content > .extra { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} -/*-------------- - Images ----------------*/ -.ui.items .item > .image { - display: block; - position: relative; - background-color: rgba(0, 0, 0, 0.05); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - border-radius: 0.2em; -} -.ui.items .item > .image > img { - display: block; - width: 100%; -} -/*-------------- - Content ----------------*/ -.ui.items .item > .content { - padding: 0.75em 0.5em; -} -.ui.items .item > .content > .name { - display: block; - font-size: 1.25em; - font-weight: bold; - margin-bottom: 0.2em; - color: rgba(0, 0, 0, 0.7); -} -.ui.items .item > .content > .description { - clear: both; - margin: 0em 0em; - color: rgba(0, 0, 0, 0.45); -} -.ui.items .item > .content > .description p { - margin: 0em 0em 0.2em; -} -.ui.items .item > .content > .description p:last-child { - margin-bottom: 0em; -} -/*-------------- - Meta ----------------*/ -.ui.items .item .meta { - float: right; - color: rgba(0, 0, 0, 0.35); -} -.ui.items .item > .content > .meta + .name { - float: left; -} -/*-------------- - Labels ----------------*/ -/*-----star----- */ -/* hover */ -.ui.items .item .star.label:hover::after { - border-right-color: #F6EFC3; -} -.ui.items .item .star.label:hover::after { - border-top-color: #F6EFC3; -} -.ui.items .item .star.label:hover .icon { - color: #ac9400; -} -/* active */ -.ui.items .item .star.label.active::after { - border-right-color: #F6EFC3; -} -.ui.items .item .star.label.active::after { - border-top-color: #F6EFC3; -} -.ui.items .item .star.label.active .icon { - color: #ac9400; -} -/*-----like----- */ -/* hover */ -.ui.items .item .like.label:hover::after { - border-right-color: #F5E1E2; -} -.ui.items .item .like.label.active::after { - border-top-color: #F5E1E2; -} -.ui.items .item .like.label:hover .icon { - color: #ef404a; -} -/* active */ -.ui.items .item .like.label.active::after { - border-right-color: #F5E1E2; -} -.ui.items .item .like.label.active::after { - border-top-color: #F5E1E2; -} -.ui.items .item .like.label.active .icon { - color: #ef404a; -} -/*-------------- - Extra ----------------*/ -.ui.items .item .extra { - position: absolute; - width: 100%; - padding: 0em 0.5em; - bottom: -2em; - left: 0em; - height: 1.5em; - color: rgba(0, 0, 0, 0.25); - -webkit-transition: color 0.2s ease; - -moz-transition: color 0.2s ease; - transition: color 0.2s ease; -} -.ui.items .item .extra > img { - display: inline-block; - border-radius: 500px 500px 500px 500px; - margin-right: 0.25em; - vertical-align: middle; - width: 2em; -} -.ui.items .item .extra .left { - float: left; -} -.ui.items .item .extra .right { - float: right; -} -/******************************* - States -*******************************/ -.ui.items .item:hover { - cursor: pointer; - z-index: 5; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); -} -.ui.items .item:hover .extra { - color: rgba(0, 0, 0, 0.5); -} -.ui.items .item:nth-of-type(6n+1):hover { - border-bottom-color: #6ECFF5 !important; -} -.ui.items .item:nth-of-type(6n+2):hover { - border-bottom-color: #5C6166 !important; -} -.ui.items .item:nth-of-type(6n+3):hover { - border-bottom-color: #A1CF64 !important; -} -.ui.items .item:nth-of-type(6n+4):hover { - border-bottom-color: #D95C5C !important; -} -.ui.items .item:nth-of-type(6n+5):hover { - border-bottom-color: #00B5AD !important; -} -.ui.items .item:nth-of-type(6n+6):hover { - border-bottom-color: #564F8A !important; -} -/******************************* - Variations -*******************************/ -/*-------------- - Connected ----------------*/ -.ui.connected.items { - display: table; - width: 100%; - margin-left: 0em !important; - margin-right: 0em !important; -} -.ui.connected.items > .row > .item, -.ui.connected.items > .item { - float: none; - display: table-cell; - vertical-align: top; - height: auto; - border-radius: 0px; - margin: 0em; - width: 33.33%; -} -.ui.connected.items > .row { - display: table; - margin: 0.5em 0em; -} -.ui.connected.items > .row:first-child { - margin-top: 0em; -} -/* Borders */ -.ui.connected.items > .item, -.ui.connected.items > .row:last-child > .item { - border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); -} -.ui.connected.items > .row:last-child > .item:first-child, -.ui.connected.items > .item:first-child { - border-radius: 0em 0em 0em 0.33em; -} -.ui.connected.items > .row:last-child > .item:last-child, -.ui.connected.items > .item:last-child { - border-radius: 0em 0em 0.33em 0em; -} -/* Hover */ -.ui.connected.items .item:hover { - border-bottom-width: 0.2em; -} -/* Item Count */ -.ui.one.connected.items > .row > .item, -.ui.one.connected.items > .item { - width: 50%; - padding-left: 2%; - padding-right: 2%; -} -.ui.two.connected.items > .row > .item, -.ui.two.connected.items > .item { - width: 50%; - padding-left: 1%; - padding-right: 1%; -} -.ui.three.connected.items > .row > .item, -.ui.three.connected.items > .item { - width: 33.333%; - padding-left: 1%; - padding-right: 1%; -} -.ui.four.connected.items > .row > .item, -.ui.four.connected.items > .item { - width: 25%; - padding-left: 0.5%; - padding-right: 0.5%; -} -.ui.five.connected.items > .row > .item, -.ui.five.connected.items > .item { - width: 20%; - padding-left: 0.5%; - padding-right: 0.5%; -} -.ui.six.connected.items > .row > .item, -.ui.six.connected.items > .item { - width: 16.66%; - padding-left: 0.5%; - padding-right: 0.5%; -} -.ui.seven.connected.items > .row > .item, -.ui.seven.connected.items > .item { - width: 14.28%; - padding-left: 0.5%; - padding-right: 0.5%; -} -.ui.eight.connected.items > .row > .item, -.ui.eight.connected.items > .item { - width: 12.5%; - padding-left: 0.25%; - padding-right: 0.25%; -} -.ui.nine.connected.items > .row > .item, -.ui.nine.connected.items > .item { - width: 11.11%; - padding-left: 0.25%; - padding-right: 0.25%; -} -.ui.ten.connected.items > .row > .item, -.ui.ten.connected.items > .item { - width: 10%; - padding-left: 0.2%; - padding-right: 0.2%; -} -.ui.eleven.connected.items > .row > .item, -.ui.eleven.connected.items > .item { - width: 9.09%; - padding-left: 0.2%; - padding-right: 0.2%; -} -.ui.twelve.connected.items > .row > .item, -.ui.twelve.connected.items > .item { - width: 8.3333%; - padding-left: 0.1%; - padding-right: 0.1%; -} -/*------------------- - Responsive ---------------------*/ -@media only screen and (max-width: 768px) { - .ui.stackable.items { - display: block !important; - } - .ui.stackable.items > .item, - .ui.stackable.items > .row > .item { - display: block !important; - height: auto !important; - width: 100% !important; - padding: 0% !important; - } -} -/*-------------------- - Horizontal ----------------------*/ -.ui.horizontal.items > .item, -.ui.items > .horizontal.item { - display: table; -} -.ui.horizontal.items > .item > .image, -.ui.items > .horizontal.item > .image { - display: table-cell; - width: 50%; -} -.ui.horizontal.items > .item > .image + .content, -.ui.items > .horizontal.item > .image + .content { - width: 50%; - display: table-cell; -} -.ui.horizontal.items > .item > .content, -.ui.items > .horizontal.item > .content { - padding: 1% 1.7% 11% 3%; - vertical-align: top; -} -.ui.horizontal.items > .item > .meta, -.ui.items > .horizontal.item > .meta { - position: absolute; - padding: 0%; - bottom: 7%; - left: 3%; - width: 94%; -} -.ui.horizontal.items > .item > .image + .content + .meta, -.ui.items > .horizontal.item > .image + .content + .meta { - bottom: 7%; - left: 53%; - width: 44%; -} -.ui.horizontal.items > .item .avatar, -.ui.items > .horizontal.item .avatar { - width: 11.5%; -} -.ui.items > .item .avatar { - max-width: 25px; -} -/*-------------- - Item Count ----------------*/ -.ui.one.items { - margin-left: -2%; - margin-right: -2%; -} -.ui.one.items > .item { - width: 100%; - margin-left: 2%; - margin-right: 2%; -} -.ui.two.items { - margin-left: -1%; - margin-right: -1%; -} -.ui.two.items > .item { - width: 48%; - margin-left: 1%; - margin-right: 1%; -} -.ui.two.items > .item:nth-child(2n+1) { - clear: left; -} -.ui.three.items { - margin-left: -1%; - margin-right: -1%; -} -.ui.three.items > .item { - width: 31.333%; - margin-left: 1%; - margin-right: 1%; -} -.ui.three.items > .item:nth-child(3n+1) { - clear: left; -} -.ui.four.items { - margin-left: -0.5%; - margin-right: -0.5%; -} -.ui.four.items > .item { - width: 24%; - margin-left: 0.5%; - margin-right: 0.5%; -} -.ui.four.items > .item:nth-child(4n+1) { - clear: left; -} -.ui.five.items { - margin-left: -0.5%; - margin-right: -0.5%; -} -.ui.five.items > .item { - width: 19%; - margin-left: 0.5%; - margin-right: 0.5%; -} -.ui.five.items > .item:nth-child(5n+1) { - clear: left; -} -.ui.six.items { - margin-left: -0.5%; - margin-right: -0.5%; -} -.ui.six.items > .item { - width: 15.66%; - margin-left: 0.5%; - margin-right: 0.5%; -} -.ui.six.items > .item:nth-child(6n+1) { - clear: left; -} -.ui.seven.items { - margin-left: -0.5%; - margin-right: -0.5%; -} -.ui.seven.items > .item { - width: 13.28%; - margin-left: 0.5%; - margin-right: 0.5%; - font-size: 11px; -} -.ui.seven.items > .item:nth-child(7n+1) { - clear: left; -} -.ui.eight.items { - margin-left: -0.25%; - margin-right: -0.25%; -} -.ui.eight.items > .item { - width: 12.0%; - margin-left: 0.25%; - margin-right: 0.25%; - font-size: 11px; -} -.ui.eight.items > .item:nth-child(8n+1) { - clear: left; -} -.ui.nine.items { - margin-left: -0.25%; - margin-right: -0.25%; -} -.ui.nine.items > .item { - width: 10.61%; - margin-left: 0.25%; - margin-right: 0.25%; - font-size: 10px; -} -.ui.nine.items > .item:nth-child(9n+1) { - clear: left; -} -.ui.ten.items { - margin-left: -0.2%; - margin-right: -0.2%; -} -.ui.ten.items > .item { - width: 9.6%; - margin-left: 0.2%; - margin-right: 0.2%; - font-size: 10px; -} -.ui.ten.items > .item:nth-child(10n+1) { - clear: left; -} -.ui.eleven.items { - margin-left: -0.2%; - margin-right: -0.2%; -} -.ui.eleven.items > .item { - width: 8.69%; - margin-left: 0.2%; - margin-right: 0.2%; - font-size: 9px; -} -.ui.eleven.items > .item:nth-child(11n+1) { - clear: left; -} -.ui.twelve.items { - margin-left: -0.1%; - margin-right: -0.1%; -} -.ui.twelve.items > .item { - width: 8.1333%; - margin-left: 0.1%; - margin-right: 0.1%; - font-size: 9px; -} -.ui.twelve.items > .item:nth-child(12n+1) { - clear: left; -} - -/* - * # Semantic List - Flat - * http://github.com/jlukic/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - * Released: April 26 2013 - */ -/******************************* - List -*******************************/ -ul.ui.list, -ol.ui.list, -.ui.list { - list-style-type: none; - margin: 1em 0em; - padding: 0em; -} -ul.ui.list ul, -ol.ui.list ol, -.ui.list .list { - margin: 0em; - padding: 0.5em 0em 0.5em 1em; -} -ul.ui.list:first-child, -ol.ui.list:first-child, -.ui.list:first-child { - margin-top: 0em; -} -ul.ui.list:last-child, -ol.ui.list:last-child, -.ui.list:last-child { - margin-bottom: 0em; -} -/******************************* - Content -*******************************/ -/* List Item */ -ul.ui.list li, -ol.ui.list li, -.ui.list .item { - display: list-item; - list-style-type: none; - list-style-position: inside; - padding: 0.3em 0em; - line-height: 1.2em; -} -.ui.list .item:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -/* Sub-List */ -.ui.list .list { - clear: both; -} -/* Icon */ -.ui.list .item > .icon { - display: block; - float: left; - margin: 0em 1em 0em 0em; - padding: 0.1em 0em 0em 0em; -} -.ui.list .item > .icon:only-child { - display: inline-block; -} -.ui.horizontal.list .item > .icon { - margin: 0em; - padding: 0em 0.25em 0em 0em; -} -.ui.horizontal.list .item > .icon, -.ui.horizontal.list .item > .icon + .content { - float: none; - display: inline-block; -} -/* Image */ -.ui.list .item > img { - display: block; - float: left; - margin-right: 1em; - vertical-align: middle; -} -/* Content */ -.ui.list .item > .content { - display: inline-block; - vertical-align: middle; - line-height: 1.2em; -} -.ui.list .item > .icon + .content { - display: table-cell; - vertical-align: top; -} -/* Link */ -.ui.list a { - cursor: pointer; -} -.ui.list a .icon { - color: rgba(0, 0, 0, 0.6); - -webkit-transition: color 0.2s ease; - -moz-transition: color 0.2s ease; - transition: color 0.2s ease; -} -/* Header */ -.ui.list .header { - font-weight: bold; -} -.ui.list .description { - color: rgba(0, 0, 0, 0.5); -} -/* Floated Content */ -.ui.list .item > .left.floated { - margin-right: 1em; - float: left; -} -.ui.list .item > .right.floated { - margin-left: 1em; - float: right; -} -/******************************* - Types -*******************************/ -/*------------------- - Horizontal ---------------------*/ -.ui.horizontal.list { - display: inline-block; - font-size: 0em; -} -.ui.horizontal.list > .item { - display: inline-block; - margin-left: 1em; - font-size: 1rem; -} -.ui.horizontal.list > .item:first-child { - margin-left: 0em; -} -.ui.horizontal.list .list { - padding-left: 0em; - padding-bottom: 0em; -} -/******************************* - States -*******************************/ -/*------------------- - Hover ---------------------*/ -.ui.list a:hover .icon { - color: rgba(0, 0, 0, 0.8); -} -/******************************* - Variations -*******************************/ -/*------------------- - Inverted ---------------------*/ -.ui.inverted.list a .icon { - color: rgba(255, 255, 255, 0.6); -} -.ui.inverted.list .description { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.link.list .item { - color: rgba(255, 255, 255, 0.4); -} -/*------------------- - Link ---------------------*/ -.ui.link.list .item { - color: rgba(0, 0, 0, 0.3); -} -.ui.link.list a.item, -.ui.link.list .item a { - color: rgba(0, 0, 0, 0.5); -} -.ui.link.list a.item:hover, -.ui.link.list .item a:hover { - color: rgba(0, 0, 0, 0.8); -} -.ui.link.list a.item:active, -.ui.link.list .item a:active { - color: rgba(0, 0, 0, 0.8); -} -.ui.link.list a.active.item, -.ui.link.list .active.item a { - color: rgba(0, 0, 0, 0.8); -} -/* Inverted */ -.ui.inverted.link.list a.item, -.ui.inverted.link.list .item a { - color: rgba(255, 255, 255, 0.6); -} -.ui.inverted.link.list a.item:hover, -.ui.inverted.link.list .item a:hover { - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.link.list a.item:active, -.ui.inverted.link.list .item a:active { - color: rgba(255, 255, 255, 0.9); -} -.ui.inverted.link.list a.active.item, -.ui.inverted.link.list .active.item a { - color: rgba(255, 255, 255, 0.8); -} -/*------------------- - Selection ---------------------*/ -.ui.selection.list .item { - cursor: pointer; - color: rgba(0, 0, 0, 0.4); - padding: 0.5em; - -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; - -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; - transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; -} -.ui.selection.list .item:hover { - background-color: rgba(0, 0, 0, 0.02); - color: rgba(0, 0, 0, 0.7); -} -.ui.selection.list .item:active { - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.7); -} -.ui.selection.list .item.active { - background-color: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.7); -} -.ui.animated.list .item { - -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; - -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; - transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; -} -.ui.animated.list:not(.horizontal) .item:hover { - padding-left: 1em; -} -.ui.animated.list:not(.horizontal) .item:hover .item:hover { - padding-left: 0.5em; -} -/* Inverted */ -.ui.inverted.selection.list .item { - color: rgba(255, 255, 255, 0.6); -} -.ui.inverted.selection.list .item:hover { - background-color: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.8); -} -.ui.inverted.selection.list .item:active { - background-color: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.7); -} -.ui.inverted.selection.list .item.active { - background-color: rgba(255, 255, 255, 0.08); - color: #FFFFFF; -} -/*------------------- - Bulleted ---------------------*/ -ul.ui.list, -.ui.bulleted.list { - margin-left: 1.5em; -} -ul.ui.list li, -.ui.bulleted.list .item { - position: relative; -} -ul.ui.list li:before, -.ui.bulleted.list .item:before { - position: absolute; - left: -1.5em; - content: '•'; -} -ul.ui.list ul, -.ui.bulleted.list .list { - padding-left: 1.5em; -} -/* Horizontal Bulleted */ -ul.ui.horizontal.bulleted.list, -.ui.horizontal.bulleted.list { - margin-left: 0em; -} -ul.ui.horizontal.bulleted.list li, -.ui.horizontal.bulleted.list .item { - margin-left: 1.5em; -} -ul.ui.horizontal.bulleted.list li:before, -.ui.horizontal.bulleted.list .item:before { - left: -0.9em; -} -ul.ui.horizontal.bulleted.list li:first-child, -.ui.horizontal.bulleted.list .item:first-child { - margin-left: 0em; -} -ul.ui.horizontal.bulleted.list li:first-child::before, -.ui.horizontal.bulleted.list .item:first-child::before { - display: none; -} -/*------------------- - Ordered ---------------------*/ -ol.ui.list, -.ui.ordered.list { - counter-reset: ordered; - margin-left: 2em; - list-style-type: none; -} -ol.ui.list li, -.ui.ordered.list .item { - list-style-type: none; - position: relative; -} -ol.ui.list li:before, -.ui.ordered.list .item:before { - position: absolute; - left: -2em; - counter-increment: ordered; - content: counters(ordered, "."); - text-align: right; - vertical-align: top; - opacity: 0.75; -} -ol.ui.list ol, -.ui.ordered.list .list { - counter-reset: ordered; - padding-left: 2.5em; -} -ol.ui.list ol li:before, -.ui.ordered.list .list .item:before { - left: -2.5em; -} -/* Horizontal Ordered */ -ol.ui.horizontal.list, -.ui.ordered.horizontal.list { - margin-left: 0em; -} -ol.ui.horizontal.list li:before, -.ui.ordered.horizontal.list .item:before { - position: static; - left: 0em; - margin: 0em 0.5em 0em 0em; -} -/*------------------- - Divided ---------------------*/ -.ui.divided.list > .item, -.ui.divided.list:not(.horizontal) > .list { - border-top: 1px solid rgba(0, 0, 0, 0.1); - padding-left: 0.5em; - padding-right: 0.5em; -} -.ui.divided.list .item .menu .item { - border-width: 0px; -} -.ui.divided.list .item:first-child { - border-top-width: 0px; -} -/* Sub Menu */ -.ui.divided.list:not(.horizontal) .list { - margin-left: -0.5em; - margin-right: -0.5em; -} -.ui.divided.list:not(.horizontal) .list .item { - padding-left: 1em; - padding-right: 1em; -} -.ui.divided.list:not(.horizontal) .list .item:first-child { - border-top-width: 1px; -} -/* Divided bulleted */ -.ui.divided.bulleted.list { - margin-left: 0em; -} -.ui.divided.bulleted.list .item { - padding-left: 1.5em; -} -.ui.divided.bulleted.list .item:before { - left: 0.5em; -} -/* Divided ordered */ -.ui.divided.ordered.list { - margin-left: 0em; -} -.ui.divided.ordered.list > .item { - padding-left: 2em; - padding-right: 2em; -} -.ui.divided.ordered.list > .item:before { - left: 0.5em; -} -.ui.divided.ordered.list .item .list { - margin-left: -2em; - margin-right: -2em; -} -/* Divided horizontal */ -.ui.divided.horizontal.list { - margin-left: 0em; -} -.ui.divided.horizontal.list > .item { - border-top: none; - border-left: 1px solid rgba(0, 0, 0, 0.1); - margin: 0em; - padding-left: 0.75em; - padding-right: 0.75em; - line-height: 0.6em; -} -.ui.horizontal.divided.list > .item:first-child { - border-left: none; - padding-left: 0em; -} -/* Inverted */ -.ui.divided.inverted.list > .item, -.ui.divided.inverted.list > .list { - border-color: rgba(255, 255, 255, 0.2); -} -.ui.divided.inverted.horizontal.list .item { - border-color: rgba(255, 255, 255, 0.2); -} -/*------------------- - Celled ---------------------*/ -.ui.celled.list > .item, -.ui.celled.list > .list { - border-top: 1px solid rgba(0, 0, 0, 0.1); - padding-left: 0.5em; - padding-right: 0.5em; -} -.ui.celled.list > .item:last-child { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} -/* Sub Menu */ -.ui.celled.list .item .list { - margin-left: -0.5em; - margin-right: -0.5em; -} -.ui.celled.list .item .list .item { - border-width: 0px; -} -.ui.celled.list .list .item:first-child { - border-top-width: 0px; -} -/* Celled Bulleted */ -.ui.celled.bulleted.list { - margin-left: 0em; -} -.ui.celled.bulleted.list > .item { - padding-left: 1.5em; -} -.ui.celled.bulleted.list > .item:before { - left: 0.5em; -} -/* Celled Ordered */ -.ui.celled.ordered.list { - margin-left: 0em; -} -.ui.celled.ordered.list .item { - padding-left: 2em; - padding-right: 2em; -} -.ui.celled.ordered.list .item:before { - left: 0.5em; -} -.ui.celled.ordered.list .item .list { - margin-left: -2em; - margin-right: -2em; -} -/* Celled Horizontal */ -.ui.horizontal.celled.list { - margin-left: 0em; -} -.ui.horizontal.celled.list .item { - border-top: none; - border-left: 1px solid rgba(0, 0, 0, 0.1); - margin: 0em; - padding-left: 0.75em; - padding-right: 0.75em; - line-height: 0.6em; -} -.ui.horizontal.celled.list .item:last-child { - border-bottom: none; - border-right: 1px solid rgba(0, 0, 0, 0.1); -} -/* Inverted */ -.ui.celled.inverted.list > .item, -.ui.celled.inverted.list > .list { - border-color: rgba(255, 255, 255, 0.2); -} -.ui.celled.inverted.horizontal.list .item { - border-color: rgba(255, 255, 255, 0.2); -} -/*------------------- - Relaxed ---------------------*/ -.ui.relaxed.list:not(.horizontal) .item { - padding-top: 0.5em; - padding-bottom: 0.5em; -} -.ui.relaxed.list .header { - margin-bottom: 0.25em; -} -.ui.horizontal.relaxed.list .item { - padding-left: 1.25em; - padding-right: 1.25em; -} -.ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 1em; - padding-bottom: 1em; -} -.ui.very.relaxed.list .header { - margin-bottom: 0.5em; -} -.ui.horizontal.very.relaxed.list .item { - padding-left: 2em; - padding-right: 2em; -} -/*------------------- - Sizes ---------------------*/ -.ui.mini.list .item { - font-size: 0.7rem; -} -.ui.tiny.list .item { - font-size: 0.8125rem; -} -.ui.small.list .item { - font-size: 0.875rem; -} -.ui.list .item { - font-size: 1em; -} -.ui.large.list .item { - font-size: 1.125rem; -} -.ui.big.list .item { - font-size: 1.25rem; -} -.ui.huge.list .item { - font-size: 1.375rem; -} -.ui.massive.list .item { - font-size: 1.5rem; -} - -/* - * # Statistic - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - * Released: Aug 20, 2013 - */ -/******************************* - Statistic -*******************************/ -.ui.statistic { - text-align: center; -} -/******************************* - Content -*******************************/ -.ui.statistic > .number { - font-size: 4em; - font-weight: bold; - color: rgba(0, 0, 0, 0.7); -} -.ui.statistic > .description { - opacity: 0.8; -} diff --git a/benchmark/small.css b/benchmark/small.css deleted file mode 100644 index 08f8950..0000000 --- a/benchmark/small.css +++ /dev/null @@ -1,425 +0,0 @@ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/index.js b/index.js index ea23b5d..32c8634 100644 --- a/index.js +++ b/index.js @@ -1,578 +1 @@ -// http://www.w3.org/TR/CSS21/grammar.html -// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027 -var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g - -module.exports = function(css, options){ - options = options || {}; - options.position = options.position === false ? false : true; - - /** - * Positional. - */ - - var lineno = 1; - var column = 1; - - /** - * Update lineno and column based on `str`. - */ - - function updatePosition(str) { - var lines = str.match(/\n/g); - if (lines) lineno += lines.length; - var i = str.lastIndexOf('\n'); - column = ~i ? str.length - i : column + str.length; - } - - /** - * Mark position and patch `node.position`. - */ - - function position() { - var start = { line: lineno, column: column }; - if (!options.position) return positionNoop; - - return function(node){ - node.position = new Position(start); - whitespace(); - return node; - }; - } - - /** - * Store position information for a node - */ - - function Position(start) { - this.start = start; - this.end = { line: lineno, column: column }; - this.source = options.source; - } - - /** - * Non-enumerable source string - */ - - Position.prototype.content = css; - - /** - * Return `node`. - */ - - function positionNoop(node) { - whitespace(); - return node; - } - - /** - * Error `msg`. - */ - - function error(msg) { - if (options.silent === true) { - return false; - } - - var err = new Error(msg + ' near line ' + lineno + ':' + column); - err.filename = options.source; - err.line = lineno; - err.column = column; - err.source = css; - throw err; - } - - /** - * Parse stylesheet. - */ - - function stylesheet() { - return { - type: 'stylesheet', - stylesheet: { - rules: rules() - } - }; - } - - /** - * Opening brace. - */ - - function open() { - return match(/^{\s*/); - } - - /** - * Closing brace. - */ - - function close() { - return match(/^}/); - } - - /** - * Parse ruleset. - */ - - function rules() { - var node; - var rules = []; - whitespace(); - comments(rules); - while (css.length && css.charAt(0) != '}' && (node = atrule() || rule())) { - if (node !== false) { - rules.push(node); - comments(rules); - } - } - return rules; - } - - /** - * Match `re` and return captures. - */ - - function match(re) { - var m = re.exec(css); - if (!m) return; - var str = m[0]; - updatePosition(str); - css = css.slice(str.length); - return m; - } - - /** - * Parse whitespace. - */ - - function whitespace() { - match(/^\s*/); - } - - /** - * Parse comments; - */ - - function comments(rules) { - var c; - rules = rules || []; - while (c = comment()) { - if (c !== false) { - rules.push(c); - } - } - return rules; - } - - /** - * Parse comment. - */ - - function comment() { - var pos = position(); - if ('/' != css.charAt(0) || '*' != css.charAt(1)) return; - - var i = 2; - while ("" != css.charAt(i) && ('*' != css.charAt(i) || '/' != css.charAt(i + 1))) ++i; - i += 2; - - if ("" === css.charAt(i-1)) { - return error('End of comment missing'); - } - - var str = css.slice(2, i - 2); - column += 2; - updatePosition(str); - css = css.slice(i); - column += 2; - - return pos({ - type: 'comment', - comment: str - }); - } - - /** - * Parse selector. - */ - - function selector() { - var m = match(/^([^{]+)/); - if (!m) return; - /* @fix Remove all comments from selectors - * http://ostermiller.org/findcomment.html */ - return trim(m[0]) - .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '') - .replace(/(?:"[^"]*"|'[^']*')/g, function(m) { - return m.replace(/,/g, '\u200C'); - }) - .split(/\s*(?![^(]*\)),\s*/) - .map(function(s) { - return s.replace(/\u200C/g, ','); - }); - } - - /** - * Parse declaration. - */ - - function declaration() { - var pos = position(); - - // prop - var prop = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/); - if (!prop) return; - prop = trim(prop[0]); - - // : - if (!match(/^:\s*/)) return error("property missing ':'"); - - // val - var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/); - - var ret = pos({ - type: 'declaration', - property: prop.replace(commentre, ''), - value: val ? trim(val[0]).replace(commentre, '') : '' - }); - - // ; - match(/^[;\s]*/); - - return ret; - } - - /** - * Parse declarations. - */ - - function declarations() { - var decls = []; - - if (!open()) return error("missing '{'"); - comments(decls); - - // declarations - var decl; - while (decl = declaration()) { - if (decl !== false) { - decls.push(decl); - comments(decls); - } - } - - if (!close()) return error("missing '}'"); - return decls; - } - - /** - * Parse keyframe. - */ - - function keyframe() { - var m; - var vals = []; - var pos = position(); - - while (m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)) { - vals.push(m[1]); - match(/^,\s*/); - } - - if (!vals.length) return; - - return pos({ - type: 'keyframe', - values: vals, - declarations: declarations() - }); - } - - /** - * Parse keyframes. - */ - - function atkeyframes() { - var pos = position(); - var m = match(/^@([-\w]+)?keyframes */); - - if (!m) return; - var vendor = m[1]; - - // identifier - var m = match(/^([-\w]+)\s*/); - if (!m) return error("@keyframes missing name"); - var name = m[1]; - - if (!open()) return error("@keyframes missing '{'"); - - var frame; - var frames = comments(); - while (frame = keyframe()) { - frames.push(frame); - frames = frames.concat(comments()); - } - - if (!close()) return error("@keyframes missing '}'"); - - return pos({ - type: 'keyframes', - name: name, - vendor: vendor, - keyframes: frames - }); - } - - /** - * Parse supports. - */ - - function atsupports() { - var pos = position(); - var m = match(/^@supports *([^{]+)/); - - if (!m) return; - var supports = trim(m[1]); - - if (!open()) return error("@supports missing '{'"); - - var style = comments().concat(rules()); - - if (!close()) return error("@supports missing '}'"); - - return pos({ - type: 'supports', - supports: supports, - rules: style - }); - } - - /** - * Parse host. - */ - - function athost() { - var pos = position(); - var m = match(/^@host */); - - if (!m) return; - - if (!open()) return error("@host missing '{'"); - - var style = comments().concat(rules()); - - if (!close()) return error("@host missing '}'"); - - return pos({ - type: 'host', - rules: style - }); - } - - /** - * Parse media. - */ - - function atmedia() { - var pos = position(); - var m = match(/^@media *([^{]+)/); - - if (!m) return; - var media = trim(m[1]); - - if (!open()) return error("@media missing '{'"); - - var style = comments().concat(rules()); - - if (!close()) return error("@media missing '}'"); - - return pos({ - type: 'media', - media: media, - rules: style - }); - } - - - /** - * Parse custom-media. - */ - - function atcustommedia() { - var pos = position(); - var m = match(/^@custom-media (--[^\s]+) *([^{;]+);/); - if (!m) return; - - return pos({ - type: 'custom-media', - name: trim(m[1]), - media: trim(m[2]) - }); - } - - /** - * Parse paged media. - */ - - function atpage() { - var pos = position(); - var m = match(/^@page */); - if (!m) return; - - var sel = selector() || []; - - if (!open()) return error("@page missing '{'"); - var decls = comments(); - - // declarations - var decl; - while (decl = declaration()) { - decls.push(decl); - decls = decls.concat(comments()); - } - - if (!close()) return error("@page missing '}'"); - - return pos({ - type: 'page', - selectors: sel, - declarations: decls - }); - } - - /** - * Parse document. - */ - - function atdocument() { - var pos = position(); - var m = match(/^@([-\w]+)?document *([^{]+)/); - if (!m) return; - - var vendor = trim(m[1]); - var doc = trim(m[2]); - - if (!open()) return error("@document missing '{'"); - - var style = comments().concat(rules()); - - if (!close()) return error("@document missing '}'"); - - return pos({ - type: 'document', - document: doc, - vendor: vendor, - rules: style - }); - } - - /** - * Parse font-face. - */ - - function atfontface() { - var pos = position(); - var m = match(/^@font-face */); - if (!m) return; - - if (!open()) return error("@font-face missing '{'"); - var decls = comments(); - - // declarations - var decl; - while (decl = declaration()) { - decls.push(decl); - decls = decls.concat(comments()); - } - - if (!close()) return error("@font-face missing '}'"); - - return pos({ - type: 'font-face', - declarations: decls - }); - } - - /** - * Parse import - */ - - var atimport = _compileAtrule('import'); - - /** - * Parse charset - */ - - var atcharset = _compileAtrule('charset'); - - /** - * Parse namespace - */ - - var atnamespace = _compileAtrule('namespace'); - - /** - * Parse non-block at-rules - */ - - - function _compileAtrule(name) { - var re = new RegExp('^@' + name + ' *([^;\\n]+);'); - return function() { - var pos = position(); - var m = match(re); - if (!m) return; - var ret = { type: name }; - ret[name] = m[1].trim(); - return pos(ret); - } - } - - /** - * Parse at rule. - */ - - function atrule() { - if (css[0] != '@') return; - - return atkeyframes() - || atmedia() - || atcustommedia() - || atsupports() - || atimport() - || atcharset() - || atnamespace() - || atdocument() - || atpage() - || athost() - || atfontface(); - } - - /** - * Parse rule. - */ - - function rule() { - var pos = position(); - var sel = selector(); - - if (!sel) return error('selector missing'); - comments(); - - return pos({ - type: 'rule', - selectors: sel, - declarations: declarations() - }); - } - - return stylesheet(); -}; - -/** - * Trim `str`. - */ - -function trim(str) { - return str ? str.replace(/^\s+|\s+$/g, '') : ''; -} +module.exports = require('css').parse; diff --git a/package.json b/package.json index f66cb5b..7bd84e8 100644 --- a/package.json +++ b/package.json @@ -2,27 +2,22 @@ "name": "css-parse", "version": "1.7.0", "description": "CSS parser", - "keywords": [ - "css", - "parser", - "stylesheet" + "main": "index", + "files": [ + "index.js" ], + "dependencies": { + "css": "^1.6.0" + }, "author": "TJ Holowaychuk ", "license": "MIT", - "devDependencies": { - "mocha": "*", - "should": "*", - "matcha": "~0.4.0", - "bytes": "~0.2.1" - }, "repository": { "type": "git", "url": "https://github.com/reworkcss/css-parse.git" }, - "scripts": { - "test": "make test" - }, - "files": [ - "index.js" + "keywords": [ + "css", + "parser", + "stylesheet" ] } diff --git a/test/cases/charset.css b/test/cases/charset.css deleted file mode 100644 index 035601c..0000000 --- a/test/cases/charset.css +++ /dev/null @@ -1,2 +0,0 @@ -@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8*/ -@charset 'iso-8859-15'; /* Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign) */ diff --git a/test/cases/charset.json b/test/cases/charset.json deleted file mode 100644 index 7f8eafa..0000000 --- a/test/cases/charset.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "charset", - "charset": "\"UTF-8\"", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 18 - }, - "source": "charset.css" - } - }, - { - "type": "comment", - "comment": " Set the encoding of the style sheet to Unicode UTF-8", - "position": { - "start": { - "line": 1, - "column": 25 - }, - "end": { - "line": 1, - "column": 82 - }, - "source": "charset.css" - } - }, - { - "type": "charset", - "charset": "'iso-8859-15'", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 24 - }, - "source": "charset.css" - } - }, - { - "type": "comment", - "comment": " Set the encoding of the style sheet to Latin-9 (Western European languages, with euro sign) ", - "position": { - "start": { - "line": 2, - "column": 25 - }, - "end": { - "line": 2, - "column": 122 - }, - "source": "charset.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/colon-space.css b/test/cases/colon-space.css deleted file mode 100644 index 21354be..0000000 --- a/test/cases/colon-space.css +++ /dev/null @@ -1,4 +0,0 @@ -a { - margin : auto; - padding : 0; -} \ No newline at end of file diff --git a/test/cases/colon-space.json b/test/cases/colon-space.json deleted file mode 100644 index 607ad36..0000000 --- a/test/cases/colon-space.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "a" - ], - "declarations": [ - { - "type": "declaration", - "property": "margin", - "value": "auto", - "position": { - "start": { - "line": 2, - "column": 5 - }, - "end": { - "line": 2, - "column": 19 - }, - "source": "colon-space.css" - } - }, - { - "type": "declaration", - "property": "padding", - "value": "0", - "position": { - "start": { - "line": 3, - "column": 5 - }, - "end": { - "line": 3, - "column": 16 - }, - "source": "colon-space.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 4, - "column": 2 - }, - "source": "colon-space.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/comma-attribute.css b/test/cases/comma-attribute.css deleted file mode 100644 index c45d32e..0000000 --- a/test/cases/comma-attribute.css +++ /dev/null @@ -1,39 +0,0 @@ -.foo[bar="baz,quz"] { - foobar: 123; -} - -.bar, -#bar[baz="qux,foo"], -#qux { - foobar: 456; -} - -.baz[qux=",foo"], -.baz[qux="foo,"], -.baz[qux="foo,bar,baz"], -.baz[qux=",foo,bar,baz,"], -.baz[qux=" , foo , bar , baz , "] { - foobar: 789; -} - -.qux[foo='bar,baz'], -.qux[bar="baz,foo"], -#qux[foo="foobar"], -#qux[foo=',bar,baz, '] { - foobar: 012; -} - -#foo[foo=""], -#foo[bar=" "], -#foo[bar=","], -#foo[bar=", "], -#foo[bar=" ,"], -#foo[bar=" , "], -#foo[baz=''], -#foo[qux=' '], -#foo[qux=','], -#foo[qux=', '], -#foo[qux=' ,'], -#foo[qux=' , '] { - foobar: 345; -} diff --git a/test/cases/comma-attribute.json b/test/cases/comma-attribute.json deleted file mode 100644 index 530b254..0000000 --- a/test/cases/comma-attribute.json +++ /dev/null @@ -1,202 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - ".foo[bar=\"baz,quz\"]" - ], - "declarations": [ - { - "type": "declaration", - "property": "foobar", - "value": "123", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 14 - }, - "source": "comma-attribute.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 3, - "column": 2 - }, - "source": "comma-attribute.css" - } - }, - { - "type": "rule", - "selectors": [ - ".bar", - "#bar[baz=\"qux,foo\"]", - "#qux" - ], - "declarations": [ - { - "type": "declaration", - "property": "foobar", - "value": "456", - "position": { - "start": { - "line": 8, - "column": 3 - }, - "end": { - "line": 8, - "column": 14 - }, - "source": "comma-attribute.css" - } - } - ], - "position": { - "start": { - "line": 5, - "column": 1 - }, - "end": { - "line": 9, - "column": 2 - }, - "source": "comma-attribute.css" - } - }, - { - "type": "rule", - "selectors": [ - ".baz[qux=\",foo\"]", - ".baz[qux=\"foo,\"]", - ".baz[qux=\"foo,bar,baz\"]", - ".baz[qux=\",foo,bar,baz,\"]", - ".baz[qux=\" , foo , bar , baz , \"]" - ], - "declarations": [ - { - "type": "declaration", - "property": "foobar", - "value": "789", - "position": { - "start": { - "line": 16, - "column": 3 - }, - "end": { - "line": 16, - "column": 14 - }, - "source": "comma-attribute.css" - } - } - ], - "position": { - "start": { - "line": 11, - "column": 1 - }, - "end": { - "line": 17, - "column": 2 - }, - "source": "comma-attribute.css" - } - }, - { - "type": "rule", - "selectors": [ - ".qux[foo='bar,baz']", - ".qux[bar=\"baz,foo\"]", - "#qux[foo=\"foobar\"]", - "#qux[foo=',bar,baz, ']" - ], - "declarations": [ - { - "type": "declaration", - "property": "foobar", - "value": "012", - "position": { - "start": { - "line": 23, - "column": 3 - }, - "end": { - "line": 23, - "column": 14 - }, - "source": "comma-attribute.css" - } - } - ], - "position": { - "start": { - "line": 19, - "column": 1 - }, - "end": { - "line": 24, - "column": 2 - }, - "source": "comma-attribute.css" - } - }, - { - "type": "rule", - "selectors": [ - "#foo[foo=\"\"]", - "#foo[bar=\" \"]", - "#foo[bar=\",\"]", - "#foo[bar=\", \"]", - "#foo[bar=\" ,\"]", - "#foo[bar=\" , \"]", - "#foo[baz='']", - "#foo[qux=' ']", - "#foo[qux=',']", - "#foo[qux=', ']", - "#foo[qux=' ,']", - "#foo[qux=' , ']" - ], - "declarations": [ - { - "type": "declaration", - "property": "foobar", - "value": "345", - "position": { - "start": { - "line": 38, - "column": 3 - }, - "end": { - "line": 38, - "column": 14 - }, - "source": "comma-attribute.css" - } - } - ], - "position": { - "start": { - "line": 26, - "column": 1 - }, - "end": { - "line": 39, - "column": 2 - }, - "source": "comma-attribute.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/comma-selector-function.css b/test/cases/comma-selector-function.css deleted file mode 100644 index 196f8dc..0000000 --- a/test/cases/comma-selector-function.css +++ /dev/null @@ -1,12 +0,0 @@ -.foo:matches(.bar,.baz), -.foo:matches(.bar, .baz), -.foo:matches(.bar , .baz), -.foo:matches(.bar ,.baz) { - prop: value; -} - -.foo:matches(.bar,.baz,.foobar), -.foo:matches(.bar, .baz,), -.foo:matches(,.bar , .baz) { - anotherprop: anothervalue; -} diff --git a/test/cases/comma-selector-function.json b/test/cases/comma-selector-function.json deleted file mode 100644 index 1c347a0..0000000 --- a/test/cases/comma-selector-function.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - ".foo:matches(.bar,.baz)", - ".foo:matches(.bar, .baz)", - ".foo:matches(.bar , .baz)", - ".foo:matches(.bar ,.baz)" - ], - "declarations": [ - { - "type": "declaration", - "property": "prop", - "value": "value", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 14 - }, - "source": "comma-selector-function.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 6, - "column": 2 - }, - "source": "comma-selector-function.css" - } - }, - { - "type": "rule", - "selectors": [ - ".foo:matches(.bar,.baz,.foobar)", - ".foo:matches(.bar, .baz,)", - ".foo:matches(,.bar , .baz)" - ], - "declarations": [ - { - "type": "declaration", - "property": "anotherprop", - "value": "anothervalue", - "position": { - "start": { - "line": 11, - "column": 3 - }, - "end": { - "line": 11, - "column": 28 - }, - "source": "comma-selector-function.css" - } - } - ], - "position": { - "start": { - "line": 8, - "column": 1 - }, - "end": { - "line": 12, - "column": 2 - }, - "source": "comma-selector-function.css" - } - } - ] - } -} - diff --git a/test/cases/comment.css b/test/cases/comment.css deleted file mode 100644 index 25fda25..0000000 --- a/test/cases/comment.css +++ /dev/null @@ -1,10 +0,0 @@ -/* 1 */ - -head, /* footer, */body/*, nav */ { /* 2 */ - /* 3 */ - /**/foo: 'bar'; - /* 4 */ -} /* 5 */ - -/* 6 */ - diff --git a/test/cases/comment.in.css b/test/cases/comment.in.css deleted file mode 100644 index 3b8aa99..0000000 --- a/test/cases/comment.in.css +++ /dev/null @@ -1,5 +0,0 @@ -a { - color/**/: 12px; - padding/*4815162342*/: 1px /**/ 2px /*13*/ 3px; - border/*\**/: solid; border-top/*\**/: none\9; -} diff --git a/test/cases/comment.in.json b/test/cases/comment.in.json deleted file mode 100644 index b035ad3..0000000 --- a/test/cases/comment.in.json +++ /dev/null @@ -1,90 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "a" - ], - "declarations": [ - { - "type": "declaration", - "property": "color", - "value": "12px", - "position": { - "start": { - "line": 2, - "column": 5 - }, - "end": { - "line": 2, - "column": 20 - }, - "source": "comment.in.css" - } - }, - { - "type": "declaration", - "property": "padding", - "value": "1px 2px 3px", - "position": { - "start": { - "line": 3, - "column": 5 - }, - "end": { - "line": 3, - "column": 51 - }, - "source": "comment.in.css" - } - }, - { - "type": "declaration", - "property": "border", - "value": "solid", - "position": { - "start": { - "line": 4, - "column": 5 - }, - "end": { - "line": 4, - "column": 24 - }, - "source": "comment.in.css" - } - }, - { - "type": "declaration", - "property": "border-top", - "value": "none\\9", - "position": { - "start": { - "line": 4, - "column": 26 - }, - "end": { - "line": 4, - "column": 50 - }, - "source": "comment.in.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - }, - "source": "comment.in.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/comment.json b/test/cases/comment.json deleted file mode 100644 index 041649b..0000000 --- a/test/cases/comment.json +++ /dev/null @@ -1,148 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "comment", - "comment": " 1 ", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 8 - }, - "source": "comment.css" - } - }, - { - "type": "rule", - "selectors": [ - "head", - "body" - ], - "declarations": [ - { - "type": "comment", - "comment": " 2 ", - "position": { - "start": { - "line": 3, - "column": 37 - }, - "end": { - "line": 3, - "column": 44 - }, - "source": "comment.css" - } - }, - { - "type": "comment", - "comment": " 3 ", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 4, - "column": 10 - }, - "source": "comment.css" - } - }, - { - "type": "comment", - "comment": "", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 7 - }, - "source": "comment.css" - } - }, - { - "type": "declaration", - "property": "foo", - "value": "'bar'", - "position": { - "start": { - "line": 5, - "column": 7 - }, - "end": { - "line": 5, - "column": 17 - }, - "source": "comment.css" - } - }, - { - "type": "comment", - "comment": " 4 ", - "position": { - "start": { - "line": 6, - "column": 3 - }, - "end": { - "line": 6, - "column": 10 - }, - "source": "comment.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 1 - }, - "end": { - "line": 7, - "column": 2 - }, - "source": "comment.css" - } - }, - { - "type": "comment", - "comment": " 5 ", - "position": { - "start": { - "line": 7, - "column": 3 - }, - "end": { - "line": 7, - "column": 10 - }, - "source": "comment.css" - } - }, - { - "type": "comment", - "comment": " 6 ", - "position": { - "start": { - "line": 9, - "column": 1 - }, - "end": { - "line": 9, - "column": 8 - }, - "source": "comment.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/comment.url.css b/test/cases/comment.url.css deleted file mode 100644 index 6788a85..0000000 --- a/test/cases/comment.url.css +++ /dev/null @@ -1,7 +0,0 @@ -/* http://foo.com/bar/baz.html */ -/**/ - -foo { /*/*/ - /* something */ - bar: baz; /* http://foo.com/bar/baz.html */ -} diff --git a/test/cases/comment.url.json b/test/cases/comment.url.json deleted file mode 100644 index eb00189..0000000 --- a/test/cases/comment.url.json +++ /dev/null @@ -1,117 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "comment", - "comment": " http://foo.com/bar/baz.html ", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 34 - }, - "source": "comment.url.css" - } - }, - { - "type": "comment", - "comment": "", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 5 - }, - "source": "comment.url.css" - } - }, - { - "type": "rule", - "selectors": [ - "foo" - ], - "declarations": [ - { - "type": "comment", - "comment": "/", - "position": { - "start": { - "line": 4, - "column": 7 - }, - "end": { - "line": 4, - "column": 12 - }, - "source": "comment.url.css" - } - }, - { - "type": "comment", - "comment": " something ", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 18 - }, - "source": "comment.url.css" - } - }, - { - "type": "declaration", - "property": "bar", - "value": "baz", - "position": { - "start": { - "line": 6, - "column": 3 - }, - "end": { - "line": 6, - "column": 11 - }, - "source": "comment.url.css" - } - }, - { - "type": "comment", - "comment": " http://foo.com/bar/baz.html ", - "position": { - "start": { - "line": 6, - "column": 13 - }, - "end": { - "line": 6, - "column": 46 - }, - "source": "comment.url.css" - } - } - ], - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 7, - "column": 2 - }, - "source": "comment.url.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/custom-media.css b/test/cases/custom-media.css deleted file mode 100644 index 3fee784..0000000 --- a/test/cases/custom-media.css +++ /dev/null @@ -1,2 +0,0 @@ -@custom-media --narrow-window (max-width: 30em); -@custom-media --wide-window screen and (min-width: 40em); diff --git a/test/cases/custom-media.json b/test/cases/custom-media.json deleted file mode 100644 index d4b1d7e..0000000 --- a/test/cases/custom-media.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "custom-media", - "name": "--narrow-window", - "media": "(max-width: 30em)", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 49 - }, - "source": "custom-media.css" - } - }, - { - "type": "custom-media", - "name": "--wide-window", - "media": "screen and (min-width: 40em)", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 58 - }, - "source": "custom-media.css" - } - } - ] - } -} diff --git a/test/cases/document.css b/test/cases/document.css deleted file mode 100644 index 8c2cd86..0000000 --- a/test/cases/document.css +++ /dev/null @@ -1,7 +0,0 @@ -@-moz-document url-prefix() { - /* ui above */ - .ui-select .ui-btn select { - /* ui inside */ - opacity:.0001 - } -} diff --git a/test/cases/document.json b/test/cases/document.json deleted file mode 100644 index 916e0dc..0000000 --- a/test/cases/document.json +++ /dev/null @@ -1,90 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "document", - "document": "url-prefix()", - "vendor": "-moz-", - "rules": [ - { - "type": "comment", - "comment": " ui above ", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 17 - }, - "source": "document.css" - } - }, - { - "type": "rule", - "selectors": [ - ".ui-select .ui-btn select" - ], - "declarations": [ - { - "type": "comment", - "comment": " ui inside ", - "position": { - "start": { - "line": 4, - "column": 5 - }, - "end": { - "line": 4, - "column": 20 - }, - "source": "document.css" - } - }, - { - "type": "declaration", - "property": "opacity", - "value": ".0001", - "position": { - "start": { - "line": 5, - "column": 5 - }, - "end": { - "line": 6, - "column": 3 - }, - "source": "document.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 6, - "column": 4 - }, - "source": "document.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 7, - "column": 2 - }, - "source": "document.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/empty.css b/test/cases/empty.css deleted file mode 100644 index e69de29..0000000 diff --git a/test/cases/empty.json b/test/cases/empty.json deleted file mode 100644 index 9a68693..0000000 --- a/test/cases/empty.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [] - } -} \ No newline at end of file diff --git a/test/cases/escapes.css b/test/cases/escapes.css deleted file mode 100644 index b4271ad..0000000 --- a/test/cases/escapes.css +++ /dev/null @@ -1,54 +0,0 @@ -/* tests compressed for easy testing */ -/* http://mathiasbynens.be/notes/css-escapes */ -/* will match elements with class=":`(" */ -.\3A \`\({} -/* will match elements with class="1a2b3c" */ -.\31 a2b3c{} -/* will match the element with id="#fake-id" */ -#\#fake-id{} -/* will match the element with id="---" */ -#\---{} -/* will match the element with id="-a-b-c-" */ -#-a-b-c-{} -/* will match the element with id="©" */ -#©{} -/* More tests from http://mathiasbynens.be/demo/html5-id */ -html{font:1.2em/1.6 Arial;} -code{font-family:Consolas;} -li code{background:rgba(255, 255, 255, .5);padding:.3em;} -li{background:orange;} -#♥{background:lime;} -#©{background:lime;} -#“‘’”{background:lime;} -#☺☃{background:lime;} -#⌘⌥{background:lime;} -#𝄞♪♩♫♬{background:lime;} -#\?{background:lime;} -#\@{background:lime;} -#\.{background:lime;} -#\3A \){background:lime;} -#\3A \`\({background:lime;} -#\31 23{background:lime;} -#\31 a2b3c{background:lime;} -#\{background:lime;} -#\<\>\<\<\<\>\>\<\>{background:lime;} -#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\.{background:lime;} -#\#{background:lime;} -#\#\#{background:lime;} -#\#\.\#\.\#{background:lime;} -#\_{background:lime;} -#\.fake\-class{background:lime;} -#foo\.bar{background:lime;} -#\3A hover{background:lime;} -#\3A hover\3A focus\3A active{background:lime;} -#\[attr\=value\]{background:lime;} -#f\/o\/o{background:lime;} -#f\\o\\o{background:lime;} -#f\*o\*o{background:lime;} -#f\!o\!o{background:lime;} -#f\'o\'o{background:lime;} -#f\~o\~o{background:lime;} -#f\+o\+o{background:lime;} - -/* css-parse does not yet pass this test */ -/*#\{\}{background:lime;}*/ diff --git a/test/cases/escapes.json b/test/cases/escapes.json deleted file mode 100644 index 8b99960..0000000 --- a/test/cases/escapes.json +++ /dev/null @@ -1,1556 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "comment", - "comment": " tests compressed for easy testing ", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 40 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " http://mathiasbynens.be/notes/css-escapes ", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 48 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match elements with class=\":`(\" ", - "position": { - "start": { - "line": 3, - "column": 1 - }, - "end": { - "line": 3, - "column": 43 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - ".\\3A \\`\\(" - ], - "declarations": [], - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 4, - "column": 12 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match elements with class=\"1a2b3c\" ", - "position": { - "start": { - "line": 5, - "column": 1 - }, - "end": { - "line": 5, - "column": 46 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - ".\\31 a2b3c" - ], - "declarations": [], - "position": { - "start": { - "line": 6, - "column": 1 - }, - "end": { - "line": 6, - "column": 13 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match the element with id=\"#fake-id\" ", - "position": { - "start": { - "line": 7, - "column": 1 - }, - "end": { - "line": 7, - "column": 48 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\#fake-id" - ], - "declarations": [], - "position": { - "start": { - "line": 8, - "column": 1 - }, - "end": { - "line": 8, - "column": 13 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match the element with id=\"---\" ", - "position": { - "start": { - "line": 9, - "column": 1 - }, - "end": { - "line": 9, - "column": 43 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\---" - ], - "declarations": [], - "position": { - "start": { - "line": 10, - "column": 1 - }, - "end": { - "line": 10, - "column": 8 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match the element with id=\"-a-b-c-\" ", - "position": { - "start": { - "line": 11, - "column": 1 - }, - "end": { - "line": 11, - "column": 47 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#-a-b-c-" - ], - "declarations": [], - "position": { - "start": { - "line": 12, - "column": 1 - }, - "end": { - "line": 12, - "column": 11 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " will match the element with id=\"©\" ", - "position": { - "start": { - "line": 13, - "column": 1 - }, - "end": { - "line": 13, - "column": 41 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#©" - ], - "declarations": [], - "position": { - "start": { - "line": 14, - "column": 1 - }, - "end": { - "line": 14, - "column": 5 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " More tests from http://mathiasbynens.be/demo/html5-id ", - "position": { - "start": { - "line": 15, - "column": 1 - }, - "end": { - "line": 15, - "column": 60 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "html" - ], - "declarations": [ - { - "type": "declaration", - "property": "font", - "value": "1.2em/1.6 Arial", - "position": { - "start": { - "line": 16, - "column": 6 - }, - "end": { - "line": 16, - "column": 26 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 16, - "column": 1 - }, - "end": { - "line": 16, - "column": 28 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "code" - ], - "declarations": [ - { - "type": "declaration", - "property": "font-family", - "value": "Consolas", - "position": { - "start": { - "line": 17, - "column": 6 - }, - "end": { - "line": 17, - "column": 26 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 17, - "column": 1 - }, - "end": { - "line": 17, - "column": 28 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "li code" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "rgba(255, 255, 255, .5)", - "position": { - "start": { - "line": 18, - "column": 9 - }, - "end": { - "line": 18, - "column": 43 - }, - "source": "escapes.css" - } - }, - { - "type": "declaration", - "property": "padding", - "value": ".3em", - "position": { - "start": { - "line": 18, - "column": 44 - }, - "end": { - "line": 18, - "column": 56 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 18, - "column": 1 - }, - "end": { - "line": 18, - "column": 58 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "li" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "orange", - "position": { - "start": { - "line": 19, - "column": 4 - }, - "end": { - "line": 19, - "column": 21 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 19, - "column": 1 - }, - "end": { - "line": 19, - "column": 23 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#♥" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 20, - "column": 4 - }, - "end": { - "line": 20, - "column": 19 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 20, - "column": 1 - }, - "end": { - "line": 20, - "column": 21 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#©" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 21, - "column": 4 - }, - "end": { - "line": 21, - "column": 19 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 21, - "column": 1 - }, - "end": { - "line": 21, - "column": 21 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#“‘’”" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 22, - "column": 7 - }, - "end": { - "line": 22, - "column": 22 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 22, - "column": 1 - }, - "end": { - "line": 22, - "column": 24 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#☺☃" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 23, - "column": 5 - }, - "end": { - "line": 23, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 23, - "column": 1 - }, - "end": { - "line": 23, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#⌘⌥" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 24, - "column": 5 - }, - "end": { - "line": 24, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 24, - "column": 1 - }, - "end": { - "line": 24, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#𝄞♪♩♫♬" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 25, - "column": 9 - }, - "end": { - "line": 25, - "column": 24 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 25, - "column": 1 - }, - "end": { - "line": 25, - "column": 26 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\?" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 26, - "column": 5 - }, - "end": { - "line": 26, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 26, - "column": 1 - }, - "end": { - "line": 26, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\@" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 27, - "column": 5 - }, - "end": { - "line": 27, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 27, - "column": 1 - }, - "end": { - "line": 27, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\." - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 28, - "column": 5 - }, - "end": { - "line": 28, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 28, - "column": 1 - }, - "end": { - "line": 28, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\3A \\)" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 29, - "column": 9 - }, - "end": { - "line": 29, - "column": 24 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 29, - "column": 1 - }, - "end": { - "line": 29, - "column": 26 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\3A \\`\\(" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 30, - "column": 11 - }, - "end": { - "line": 30, - "column": 26 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 30, - "column": 1 - }, - "end": { - "line": 30, - "column": 28 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\31 23" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 31, - "column": 9 - }, - "end": { - "line": 31, - "column": 24 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 31, - "column": 1 - }, - "end": { - "line": 31, - "column": 26 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\31 a2b3c" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 32, - "column": 12 - }, - "end": { - "line": 32, - "column": 27 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 32, - "column": 1 - }, - "end": { - "line": 32, - "column": 29 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 33, - "column": 8 - }, - "end": { - "line": 33, - "column": 23 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 33, - "column": 1 - }, - "end": { - "line": 33, - "column": 25 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\<\\>\\<\\<\\<\\>\\>\\<\\>" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 34, - "column": 21 - }, - "end": { - "line": 34, - "column": 36 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 34, - "column": 1 - }, - "end": { - "line": 34, - "column": 38 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\." - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 35, - "column": 225 - }, - "end": { - "line": 35, - "column": 240 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 35, - "column": 1 - }, - "end": { - "line": 35, - "column": 242 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\#" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 36, - "column": 5 - }, - "end": { - "line": 36, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 36, - "column": 1 - }, - "end": { - "line": 36, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\#\\#" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 37, - "column": 7 - }, - "end": { - "line": 37, - "column": 22 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 37, - "column": 1 - }, - "end": { - "line": 37, - "column": 24 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\#\\.\\#\\.\\#" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 38, - "column": 13 - }, - "end": { - "line": 38, - "column": 28 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 38, - "column": 1 - }, - "end": { - "line": 38, - "column": 30 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\_" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 39, - "column": 5 - }, - "end": { - "line": 39, - "column": 20 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 39, - "column": 1 - }, - "end": { - "line": 39, - "column": 22 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\.fake\\-class" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 40, - "column": 16 - }, - "end": { - "line": 40, - "column": 31 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 40, - "column": 1 - }, - "end": { - "line": 40, - "column": 33 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#foo\\.bar" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 41, - "column": 11 - }, - "end": { - "line": 41, - "column": 26 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 41, - "column": 1 - }, - "end": { - "line": 41, - "column": 28 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\3A hover" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 42, - "column": 12 - }, - "end": { - "line": 42, - "column": 27 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 42, - "column": 1 - }, - "end": { - "line": 42, - "column": 29 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\3A hover\\3A focus\\3A active" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 43, - "column": 31 - }, - "end": { - "line": 43, - "column": 46 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 43, - "column": 1 - }, - "end": { - "line": 43, - "column": 48 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#\\[attr\\=value\\]" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 44, - "column": 18 - }, - "end": { - "line": 44, - "column": 33 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 44, - "column": 1 - }, - "end": { - "line": 44, - "column": 35 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\/o\\/o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 45, - "column": 10 - }, - "end": { - "line": 45, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 45, - "column": 1 - }, - "end": { - "line": 45, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\\\o\\\\o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 46, - "column": 10 - }, - "end": { - "line": 46, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 46, - "column": 1 - }, - "end": { - "line": 46, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\*o\\*o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 47, - "column": 10 - }, - "end": { - "line": 47, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 47, - "column": 1 - }, - "end": { - "line": 47, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\!o\\!o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 48, - "column": 10 - }, - "end": { - "line": 48, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 48, - "column": 1 - }, - "end": { - "line": 48, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\'o\\'o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 49, - "column": 10 - }, - "end": { - "line": 49, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 49, - "column": 1 - }, - "end": { - "line": 49, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\~o\\~o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 50, - "column": 10 - }, - "end": { - "line": 50, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 50, - "column": 1 - }, - "end": { - "line": 50, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "rule", - "selectors": [ - "#f\\+o\\+o" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "lime", - "position": { - "start": { - "line": 51, - "column": 10 - }, - "end": { - "line": 51, - "column": 25 - }, - "source": "escapes.css" - } - } - ], - "position": { - "start": { - "line": 51, - "column": 1 - }, - "end": { - "line": 51, - "column": 27 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": " css-parse does not yet pass this test ", - "position": { - "start": { - "line": 53, - "column": 1 - }, - "end": { - "line": 53, - "column": 44 - }, - "source": "escapes.css" - } - }, - { - "type": "comment", - "comment": "#\\{\\}{background:lime;}", - "position": { - "start": { - "line": 54, - "column": 1 - }, - "end": { - "line": 54, - "column": 28 - }, - "source": "escapes.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/font-face.css b/test/cases/font-face.css deleted file mode 100644 index 0ca66db..0000000 --- a/test/cases/font-face.css +++ /dev/null @@ -1,8 +0,0 @@ -@font-face { - font-family: "Bitstream Vera Serif Bold"; - src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); -} - -body { - font-family: "Bitstream Vera Serif Bold", serif; -} \ No newline at end of file diff --git a/test/cases/font-face.json b/test/cases/font-face.json deleted file mode 100644 index fea467c..0000000 --- a/test/cases/font-face.json +++ /dev/null @@ -1,90 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "font-face", - "declarations": [ - { - "type": "declaration", - "property": "font-family", - "value": "\"Bitstream Vera Serif Bold\"", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 43 - }, - "source": "font-face.css" - } - }, - { - "type": "declaration", - "property": "src", - "value": "url(\"http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf\")", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 78 - }, - "source": "font-face.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 4, - "column": 2 - }, - "source": "font-face.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "font-family", - "value": "\"Bitstream Vera Serif Bold\", serif", - "position": { - "start": { - "line": 7, - "column": 3 - }, - "end": { - "line": 7, - "column": 50 - }, - "source": "font-face.css" - } - } - ], - "position": { - "start": { - "line": 6, - "column": 1 - }, - "end": { - "line": 8, - "column": 2 - }, - "source": "font-face.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/host.css b/test/cases/host.css deleted file mode 100644 index 567a9d3..0000000 --- a/test/cases/host.css +++ /dev/null @@ -1,5 +0,0 @@ -@host { - :scope { - display: block; - } -} \ No newline at end of file diff --git a/test/cases/host.json b/test/cases/host.json deleted file mode 100644 index 4967920..0000000 --- a/test/cases/host.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "host", - "rules": [ - { - "type": "rule", - "selectors": [ - ":scope" - ], - "declarations": [ - { - "type": "declaration", - "property": "display", - "value": "block", - "position": { - "start": { - "line": 3, - "column": 5 - }, - "end": { - "line": 3, - "column": 19 - }, - "source": "host.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 4, - "column": 4 - }, - "source": "host.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - }, - "source": "host.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/import.css b/test/cases/import.css deleted file mode 100644 index 3d9ad35..0000000 --- a/test/cases/import.css +++ /dev/null @@ -1,6 +0,0 @@ - -@import url("fineprint.css") print; -@import url("bluish.css") projection, tv; -@import 'custom.css'; -@import "common.css" screen, projection; -@import url('landscape.css') screen and (orientation:landscape); diff --git a/test/cases/import.json b/test/cases/import.json deleted file mode 100644 index ce1f2ac..0000000 --- a/test/cases/import.json +++ /dev/null @@ -1,82 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "import", - "import": "url(\"fineprint.css\") print", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 36 - }, - "source": "import.css" - } - }, - { - "type": "import", - "import": "url(\"bluish.css\") projection, tv", - "position": { - "start": { - "line": 3, - "column": 1 - }, - "end": { - "line": 3, - "column": 42 - }, - "source": "import.css" - } - }, - { - "type": "import", - "import": "'custom.css'", - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 4, - "column": 22 - }, - "source": "import.css" - } - }, - { - "type": "import", - "import": "\"common.css\" screen, projection", - "position": { - "start": { - "line": 5, - "column": 1 - }, - "end": { - "line": 5, - "column": 41 - }, - "source": "import.css" - } - }, - { - "type": "import", - "import": "url('landscape.css') screen and (orientation:landscape)", - "position": { - "start": { - "line": 6, - "column": 1 - }, - "end": { - "line": 6, - "column": 65 - }, - "source": "import.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/import.messed.css b/test/cases/import.messed.css deleted file mode 100644 index 6184cf6..0000000 --- a/test/cases/import.messed.css +++ /dev/null @@ -1,7 +0,0 @@ - - @import url("fineprint.css") print; - @import url("bluish.css") projection, tv; - @import 'custom.css'; - @import "common.css" screen, projection ; - - @import url('landscape.css') screen and (orientation:landscape); diff --git a/test/cases/import.messed.json b/test/cases/import.messed.json deleted file mode 100644 index 78139d7..0000000 --- a/test/cases/import.messed.json +++ /dev/null @@ -1,82 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "import", - "import": "url(\"fineprint.css\") print", - "position": { - "start": { - "line": 2, - "column": 4 - }, - "end": { - "line": 2, - "column": 39 - }, - "source": "import.messed.css" - } - }, - { - "type": "import", - "import": "url(\"bluish.css\") projection, tv", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 44 - }, - "source": "import.messed.css" - } - }, - { - "type": "import", - "import": "'custom.css'", - "position": { - "start": { - "line": 4, - "column": 7 - }, - "end": { - "line": 4, - "column": 28 - }, - "source": "import.messed.css" - } - }, - { - "type": "import", - "import": "\"common.css\" screen, projection", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 45 - }, - "source": "import.messed.css" - } - }, - { - "type": "import", - "import": "url('landscape.css') screen and (orientation:landscape)", - "position": { - "start": { - "line": 7, - "column": 3 - }, - "end": { - "line": 7, - "column": 67 - }, - "source": "import.messed.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/keyframes.advanced.css b/test/cases/keyframes.advanced.css deleted file mode 100644 index c509a11..0000000 --- a/test/cases/keyframes.advanced.css +++ /dev/null @@ -1,13 +0,0 @@ -@keyframes advanced { - top { - opacity[sqrt]: 0; - } - - 100 { - opacity: 0.5; - } - - bottom { - opacity: 1; - } -} diff --git a/test/cases/keyframes.advanced.json b/test/cases/keyframes.advanced.json deleted file mode 100644 index e1a2f46..0000000 --- a/test/cases/keyframes.advanced.json +++ /dev/null @@ -1,129 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "keyframes", - "name": "advanced", - "keyframes": [ - { - "type": "keyframe", - "values": [ - "top" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity[sqrt]", - "value": "0", - "position": { - "start": { - "line": 3, - "column": 5 - }, - "end": { - "line": 3, - "column": 21 - }, - "source": "keyframes.advanced.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 4, - "column": 4 - }, - "source": "keyframes.advanced.css" - } - }, - { - "type": "keyframe", - "values": [ - "100" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "0.5", - "position": { - "start": { - "line": 7, - "column": 5 - }, - "end": { - "line": 7, - "column": 17 - }, - "source": "keyframes.advanced.css" - } - } - ], - "position": { - "start": { - "line": 6, - "column": 3 - }, - "end": { - "line": 8, - "column": 4 - }, - "source": "keyframes.advanced.css" - } - }, - { - "type": "keyframe", - "values": [ - "bottom" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "1", - "position": { - "start": { - "line": 11, - "column": 5 - }, - "end": { - "line": 11, - "column": 15 - }, - "source": "keyframes.advanced.css" - } - } - ], - "position": { - "start": { - "line": 10, - "column": 3 - }, - "end": { - "line": 12, - "column": 4 - }, - "source": "keyframes.advanced.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 13, - "column": 2 - }, - "source": "keyframes.advanced.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/keyframes.complex.css b/test/cases/keyframes.complex.css deleted file mode 100644 index 79eb689..0000000 --- a/test/cases/keyframes.complex.css +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes foo { - 0% { top: 0; left: 0 } - 30.50% { top: 50px } - .68% , - 72% - , 85% { left: 50px } - 100% { top: 100px; left: 100% } -} \ No newline at end of file diff --git a/test/cases/keyframes.complex.json b/test/cases/keyframes.complex.json deleted file mode 100644 index 379c421..0000000 --- a/test/cases/keyframes.complex.json +++ /dev/null @@ -1,198 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "keyframes", - "name": "foo", - "keyframes": [ - { - "type": "keyframe", - "values": [ - "0%" - ], - "declarations": [ - { - "type": "declaration", - "property": "top", - "value": "0", - "position": { - "start": { - "line": 2, - "column": 8 - }, - "end": { - "line": 2, - "column": 14 - }, - "source": "keyframes.complex.css" - } - }, - { - "type": "declaration", - "property": "left", - "value": "0", - "position": { - "start": { - "line": 2, - "column": 16 - }, - "end": { - "line": 2, - "column": 24 - }, - "source": "keyframes.complex.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 25 - }, - "source": "keyframes.complex.css" - } - }, - { - "type": "keyframe", - "values": [ - "30.50%" - ], - "declarations": [ - { - "type": "declaration", - "property": "top", - "value": "50px", - "position": { - "start": { - "line": 3, - "column": 12 - }, - "end": { - "line": 3, - "column": 22 - }, - "source": "keyframes.complex.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 23 - }, - "source": "keyframes.complex.css" - } - }, - { - "type": "keyframe", - "values": [ - ".68%", - "72%", - "85%" - ], - "declarations": [ - { - "type": "declaration", - "property": "left", - "value": "50px", - "position": { - "start": { - "line": 6, - "column": 15 - }, - "end": { - "line": 6, - "column": 26 - }, - "source": "keyframes.complex.css" - } - } - ], - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 6, - "column": 27 - }, - "source": "keyframes.complex.css" - } - }, - { - "type": "keyframe", - "values": [ - "100%" - ], - "declarations": [ - { - "type": "declaration", - "property": "top", - "value": "100px", - "position": { - "start": { - "line": 7, - "column": 10 - }, - "end": { - "line": 7, - "column": 20 - }, - "source": "keyframes.complex.css" - } - }, - { - "type": "declaration", - "property": "left", - "value": "100%", - "position": { - "start": { - "line": 7, - "column": 22 - }, - "end": { - "line": 7, - "column": 33 - }, - "source": "keyframes.complex.css" - } - } - ], - "position": { - "start": { - "line": 7, - "column": 3 - }, - "end": { - "line": 7, - "column": 34 - }, - "source": "keyframes.complex.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 8, - "column": 2 - }, - "source": "keyframes.complex.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/keyframes.css b/test/cases/keyframes.css deleted file mode 100644 index 24f19ff..0000000 --- a/test/cases/keyframes.css +++ /dev/null @@ -1,13 +0,0 @@ -@keyframes fade { - /* from above */ - from { - /* from inside */ - opacity: 0; - } - - /* to above */ - to { - /* to inside */ - opacity: 1; - } -} \ No newline at end of file diff --git a/test/cases/keyframes.json b/test/cases/keyframes.json deleted file mode 100644 index 0ef0637..0000000 --- a/test/cases/keyframes.json +++ /dev/null @@ -1,154 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "keyframes", - "name": "fade", - "keyframes": [ - { - "type": "comment", - "comment": " from above ", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 19 - }, - "source": "keyframes.css" - } - }, - { - "type": "keyframe", - "values": [ - "from" - ], - "declarations": [ - { - "type": "comment", - "comment": " from inside ", - "position": { - "start": { - "line": 4, - "column": 5 - }, - "end": { - "line": 4, - "column": 22 - }, - "source": "keyframes.css" - } - }, - { - "type": "declaration", - "property": "opacity", - "value": "0", - "position": { - "start": { - "line": 5, - "column": 5 - }, - "end": { - "line": 5, - "column": 15 - }, - "source": "keyframes.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 6, - "column": 4 - }, - "source": "keyframes.css" - } - }, - { - "type": "comment", - "comment": " to above ", - "position": { - "start": { - "line": 8, - "column": 3 - }, - "end": { - "line": 8, - "column": 17 - }, - "source": "keyframes.css" - } - }, - { - "type": "keyframe", - "values": [ - "to" - ], - "declarations": [ - { - "type": "comment", - "comment": " to inside ", - "position": { - "start": { - "line": 10, - "column": 5 - }, - "end": { - "line": 10, - "column": 20 - }, - "source": "keyframes.css" - } - }, - { - "type": "declaration", - "property": "opacity", - "value": "1", - "position": { - "start": { - "line": 11, - "column": 5 - }, - "end": { - "line": 11, - "column": 15 - }, - "source": "keyframes.css" - } - } - ], - "position": { - "start": { - "line": 9, - "column": 3 - }, - "end": { - "line": 12, - "column": 4 - }, - "source": "keyframes.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 13, - "column": 2 - }, - "source": "keyframes.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/keyframes.messed.css b/test/cases/keyframes.messed.css deleted file mode 100644 index 32f0be9..0000000 --- a/test/cases/keyframes.messed.css +++ /dev/null @@ -1,6 +0,0 @@ -@keyframes fade {from - {opacity: 0; - } -to - { - opacity: 1;}} \ No newline at end of file diff --git a/test/cases/keyframes.messed.json b/test/cases/keyframes.messed.json deleted file mode 100644 index 9c92591..0000000 --- a/test/cases/keyframes.messed.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "keyframes", - "name": "fade", - "keyframes": [ - { - "type": "keyframe", - "values": [ - "from" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "0", - "position": { - "start": { - "line": 2, - "column": 4 - }, - "end": { - "line": 2, - "column": 14 - }, - "source": "keyframes.messed.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 18 - }, - "end": { - "line": 3, - "column": 7 - }, - "source": "keyframes.messed.css" - } - }, - { - "type": "keyframe", - "values": [ - "to" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "1", - "position": { - "start": { - "line": 6, - "column": 6 - }, - "end": { - "line": 6, - "column": 16 - }, - "source": "keyframes.messed.css" - } - } - ], - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 6, - "column": 18 - }, - "source": "keyframes.messed.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 6, - "column": 19 - }, - "source": "keyframes.messed.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/keyframes.vendor.css b/test/cases/keyframes.vendor.css deleted file mode 100644 index 54f15e1..0000000 --- a/test/cases/keyframes.vendor.css +++ /dev/null @@ -1,4 +0,0 @@ -@-webkit-keyframes fade { - from { opacity: 0 } - to { opacity: 1 } -} \ No newline at end of file diff --git a/test/cases/keyframes.vendor.json b/test/cases/keyframes.vendor.json deleted file mode 100644 index 02def17..0000000 --- a/test/cases/keyframes.vendor.json +++ /dev/null @@ -1,95 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "keyframes", - "name": "fade", - "vendor": "-webkit-", - "keyframes": [ - { - "type": "keyframe", - "values": [ - "from" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "0", - "position": { - "start": { - "line": 2, - "column": 10 - }, - "end": { - "line": 2, - "column": 21 - }, - "source": "keyframes.vendor.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 22 - }, - "source": "keyframes.vendor.css" - } - }, - { - "type": "keyframe", - "values": [ - "to" - ], - "declarations": [ - { - "type": "declaration", - "property": "opacity", - "value": "1", - "position": { - "start": { - "line": 3, - "column": 8 - }, - "end": { - "line": 3, - "column": 19 - }, - "source": "keyframes.vendor.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 20 - }, - "source": "keyframes.vendor.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 4, - "column": 2 - }, - "source": "keyframes.vendor.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/media.css b/test/cases/media.css deleted file mode 100644 index b9dc81e..0000000 --- a/test/cases/media.css +++ /dev/null @@ -1,26 +0,0 @@ -@media screen, projection { - /* html above */ - html { - /* html inside */ - background: #fffef0; - color: #300; - } - - /* body above */ - body { - /* body inside */ - max-width: 35em; - margin: 0 auto; - } -} - -@media print { - html { - background: #fff; - color: #000; - } - body { - padding: 1in; - border: 0.5pt solid #666; - } -} \ No newline at end of file diff --git a/test/cases/media.json b/test/cases/media.json deleted file mode 100644 index 8dabf65..0000000 --- a/test/cases/media.json +++ /dev/null @@ -1,305 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "media", - "media": "screen, projection", - "rules": [ - { - "type": "comment", - "comment": " html above ", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 19 - }, - "source": "media.css" - } - }, - { - "type": "rule", - "selectors": [ - "html" - ], - "declarations": [ - { - "type": "comment", - "comment": " html inside ", - "position": { - "start": { - "line": 4, - "column": 5 - }, - "end": { - "line": 4, - "column": 22 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "background", - "value": "#fffef0", - "position": { - "start": { - "line": 5, - "column": 5 - }, - "end": { - "line": 5, - "column": 24 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "color", - "value": "#300", - "position": { - "start": { - "line": 6, - "column": 5 - }, - "end": { - "line": 6, - "column": 16 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 7, - "column": 4 - }, - "source": "media.css" - } - }, - { - "type": "comment", - "comment": " body above ", - "position": { - "start": { - "line": 9, - "column": 3 - }, - "end": { - "line": 9, - "column": 19 - }, - "source": "media.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "comment", - "comment": " body inside ", - "position": { - "start": { - "line": 11, - "column": 5 - }, - "end": { - "line": 11, - "column": 22 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "max-width", - "value": "35em", - "position": { - "start": { - "line": 12, - "column": 5 - }, - "end": { - "line": 12, - "column": 20 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "margin", - "value": "0 auto", - "position": { - "start": { - "line": 13, - "column": 5 - }, - "end": { - "line": 13, - "column": 19 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 10, - "column": 3 - }, - "end": { - "line": 14, - "column": 4 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 15, - "column": 2 - }, - "source": "media.css" - } - }, - { - "type": "media", - "media": "print", - "rules": [ - { - "type": "rule", - "selectors": [ - "html" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "#fff", - "position": { - "start": { - "line": 19, - "column": 5 - }, - "end": { - "line": 19, - "column": 21 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "color", - "value": "#000", - "position": { - "start": { - "line": 20, - "column": 5 - }, - "end": { - "line": 20, - "column": 16 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 18, - "column": 3 - }, - "end": { - "line": 21, - "column": 4 - }, - "source": "media.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "padding", - "value": "1in", - "position": { - "start": { - "line": 23, - "column": 5 - }, - "end": { - "line": 23, - "column": 17 - }, - "source": "media.css" - } - }, - { - "type": "declaration", - "property": "border", - "value": "0.5pt solid #666", - "position": { - "start": { - "line": 24, - "column": 5 - }, - "end": { - "line": 24, - "column": 29 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 22, - "column": 3 - }, - "end": { - "line": 25, - "column": 4 - }, - "source": "media.css" - } - } - ], - "position": { - "start": { - "line": 17, - "column": 1 - }, - "end": { - "line": 26, - "column": 2 - }, - "source": "media.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/media.messed.css b/test/cases/media.messed.css deleted file mode 100644 index 9b678f9..0000000 --- a/test/cases/media.messed.css +++ /dev/null @@ -1,27 +0,0 @@ -@media screen, projection{ html - - { -background: #fffef0; - color:#300; - } - body - -{ - max-width: 35em; - margin: 0 auto; - - -} - } - -@media print -{ - html { - background: #fff; - color: #000; - } - body { - padding: 1in; - border: 0.5pt solid #666; - } -} \ No newline at end of file diff --git a/test/cases/media.messed.json b/test/cases/media.messed.json deleted file mode 100644 index 42757a6..0000000 --- a/test/cases/media.messed.json +++ /dev/null @@ -1,245 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "media", - "media": "screen, projection", - "rules": [ - { - "type": "rule", - "selectors": [ - "html" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "#fffef0", - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 4, - "column": 20 - }, - "source": "media.messed.css" - } - }, - { - "type": "declaration", - "property": "color", - "value": "#300", - "position": { - "start": { - "line": 5, - "column": 5 - }, - "end": { - "line": 5, - "column": 15 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 28 - }, - "end": { - "line": 6, - "column": 4 - }, - "source": "media.messed.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "max-width", - "value": "35em", - "position": { - "start": { - "line": 10, - "column": 5 - }, - "end": { - "line": 10, - "column": 20 - }, - "source": "media.messed.css" - } - }, - { - "type": "declaration", - "property": "margin", - "value": "0 auto", - "position": { - "start": { - "line": 11, - "column": 5 - }, - "end": { - "line": 11, - "column": 19 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 7, - "column": 3 - }, - "end": { - "line": 14, - "column": 2 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 15, - "column": 4 - }, - "source": "media.messed.css" - } - }, - { - "type": "media", - "media": "print", - "rules": [ - { - "type": "rule", - "selectors": [ - "html" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "#fff", - "position": { - "start": { - "line": 20, - "column": 15 - }, - "end": { - "line": 20, - "column": 31 - }, - "source": "media.messed.css" - } - }, - { - "type": "declaration", - "property": "color", - "value": "#000", - "position": { - "start": { - "line": 21, - "column": 15 - }, - "end": { - "line": 21, - "column": 26 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 19, - "column": 15 - }, - "end": { - "line": 22, - "column": 16 - }, - "source": "media.messed.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "padding", - "value": "1in", - "position": { - "start": { - "line": 24, - "column": 15 - }, - "end": { - "line": 24, - "column": 27 - }, - "source": "media.messed.css" - } - }, - { - "type": "declaration", - "property": "border", - "value": "0.5pt solid #666", - "position": { - "start": { - "line": 25, - "column": 15 - }, - "end": { - "line": 25, - "column": 39 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 23, - "column": 15 - }, - "end": { - "line": 26, - "column": 16 - }, - "source": "media.messed.css" - } - } - ], - "position": { - "start": { - "line": 17, - "column": 1 - }, - "end": { - "line": 27, - "column": 2 - }, - "source": "media.messed.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/messed-up.css b/test/cases/messed-up.css deleted file mode 100644 index 96fcc4e..0000000 --- a/test/cases/messed-up.css +++ /dev/null @@ -1,15 +0,0 @@ -body { foo - : - 'bar' } - - body{foo:bar;bar:baz} - body - { - foo - : - bar - ; - bar - : - baz - } \ No newline at end of file diff --git a/test/cases/messed-up.json b/test/cases/messed-up.json deleted file mode 100644 index 6fa5739..0000000 --- a/test/cases/messed-up.json +++ /dev/null @@ -1,144 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "foo", - "value": "'bar'", - "position": { - "start": { - "line": 1, - "column": 8 - }, - "end": { - "line": 3, - "column": 9 - }, - "source": "messed-up.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 3, - "column": 10 - }, - "source": "messed-up.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "foo", - "value": "bar", - "position": { - "start": { - "line": 5, - "column": 9 - }, - "end": { - "line": 5, - "column": 16 - }, - "source": "messed-up.css" - } - }, - { - "type": "declaration", - "property": "bar", - "value": "baz", - "position": { - "start": { - "line": 5, - "column": 17 - }, - "end": { - "line": 5, - "column": 24 - }, - "source": "messed-up.css" - } - } - ], - "position": { - "start": { - "line": 5, - "column": 4 - }, - "end": { - "line": 5, - "column": 25 - }, - "source": "messed-up.css" - } - }, - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "foo", - "value": "bar", - "position": { - "start": { - "line": 8, - "column": 6 - }, - "end": { - "line": 11, - "column": 6 - }, - "source": "messed-up.css" - } - }, - { - "type": "declaration", - "property": "bar", - "value": "baz", - "position": { - "start": { - "line": 12, - "column": 6 - }, - "end": { - "line": 15, - "column": 6 - }, - "source": "messed-up.css" - } - } - ], - "position": { - "start": { - "line": 6, - "column": 4 - }, - "end": { - "line": 15, - "column": 7 - }, - "source": "messed-up.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/namespace.css b/test/cases/namespace.css deleted file mode 100644 index 6982d5e..0000000 --- a/test/cases/namespace.css +++ /dev/null @@ -1,2 +0,0 @@ -@namespace "http://www.w3.org/1999/xhtml"; -@namespace svg "http://www.w3.org/2000/svg"; \ No newline at end of file diff --git a/test/cases/namespace.json b/test/cases/namespace.json deleted file mode 100644 index f6f4a12..0000000 --- a/test/cases/namespace.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "namespace", - "namespace": "\"http://www.w3.org/1999/xhtml\"", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 43 - }, - "source": "namespace.css" - } - }, - { - "type": "namespace", - "namespace": "svg \"http://www.w3.org/2000/svg\"", - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 2, - "column": 45 - }, - "source": "namespace.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/no-semi.css b/test/cases/no-semi.css deleted file mode 100644 index 652cdf2..0000000 --- a/test/cases/no-semi.css +++ /dev/null @@ -1,5 +0,0 @@ - -tobi loki jane { - are: 'all'; - the-species: called "ferrets" -} diff --git a/test/cases/no-semi.json b/test/cases/no-semi.json deleted file mode 100644 index 5d313ea..0000000 --- a/test/cases/no-semi.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "tobi loki jane" - ], - "declarations": [ - { - "type": "declaration", - "property": "are", - "value": "'all'", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 13 - }, - "source": "no-semi.css" - } - }, - { - "type": "declaration", - "property": "the-species", - "value": "called \"ferrets\"", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 5, - "column": 1 - }, - "source": "no-semi.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - }, - "source": "no-semi.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/paged-media.css b/test/cases/paged-media.css deleted file mode 100644 index 8e9338e..0000000 --- a/test/cases/paged-media.css +++ /dev/null @@ -1,9 +0,0 @@ -/* toc above */ -@page toc, index:blank { - /* toc inside */ - color: green; -} - -@page { - font-size: 16pt; -} diff --git a/test/cases/paged-media.json b/test/cases/paged-media.json deleted file mode 100644 index 77effee..0000000 --- a/test/cases/paged-media.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "comment", - "comment": " toc above ", - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 1, - "column": 16 - }, - "source": "paged-media.css" - } - }, - { - "type": "page", - "selectors": [ - "toc", - "index:blank" - ], - "declarations": [ - { - "type": "comment", - "comment": " toc inside ", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 19 - }, - "source": "paged-media.css" - } - }, - { - "type": "declaration", - "property": "color", - "value": "green", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 4, - "column": 15 - }, - "source": "paged-media.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - }, - "source": "paged-media.css" - } - }, - { - "type": "page", - "selectors": [], - "declarations": [ - { - "type": "declaration", - "property": "font-size", - "value": "16pt", - "position": { - "start": { - "line": 8, - "column": 3 - }, - "end": { - "line": 8, - "column": 18 - }, - "source": "paged-media.css" - } - } - ], - "position": { - "start": { - "line": 7, - "column": 1 - }, - "end": { - "line": 9, - "column": 2 - }, - "source": "paged-media.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/props.css b/test/cases/props.css deleted file mode 100644 index 6549151..0000000 --- a/test/cases/props.css +++ /dev/null @@ -1,6 +0,0 @@ - -tobi loki jane { - are: 'all'; - the-species: called "ferrets"; - *even: 'ie crap'; -} diff --git a/test/cases/props.json b/test/cases/props.json deleted file mode 100644 index a0fcaab..0000000 --- a/test/cases/props.json +++ /dev/null @@ -1,74 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "tobi loki jane" - ], - "declarations": [ - { - "type": "declaration", - "property": "are", - "value": "'all'", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 13 - }, - "source": "props.css" - } - }, - { - "type": "declaration", - "property": "the-species", - "value": "called \"ferrets\"", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 4, - "column": 32 - }, - "source": "props.css" - } - }, - { - "type": "declaration", - "property": "*even", - "value": "'ie crap'", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 19 - }, - "source": "props.css" - } - } - ], - "position": { - "start": { - "line": 2, - "column": 1 - }, - "end": { - "line": 6, - "column": 2 - }, - "source": "props.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/quoted.css b/test/cases/quoted.css deleted file mode 100644 index 373340e..0000000 --- a/test/cases/quoted.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: url('some;stuff;here') 50% 50% no-repeat; -} \ No newline at end of file diff --git a/test/cases/quoted.json b/test/cases/quoted.json deleted file mode 100644 index 7092353..0000000 --- a/test/cases/quoted.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "body" - ], - "declarations": [ - { - "type": "declaration", - "property": "background", - "value": "url('some;stuff;here') 50% 50% no-repeat", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 55 - }, - "source": "quoted.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 3, - "column": 2 - }, - "source": "quoted.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/rule.css b/test/cases/rule.css deleted file mode 100644 index 84f5ffd..0000000 --- a/test/cases/rule.css +++ /dev/null @@ -1,3 +0,0 @@ -foo { - bar: 'baz'; -} \ No newline at end of file diff --git a/test/cases/rule.json b/test/cases/rule.json deleted file mode 100644 index 0af5c6f..0000000 --- a/test/cases/rule.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "foo" - ], - "declarations": [ - { - "type": "declaration", - "property": "bar", - "value": "'baz'", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 13 - }, - "source": "rule.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 3, - "column": 2 - }, - "source": "rule.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/rules.css b/test/cases/rules.css deleted file mode 100644 index 329002e..0000000 --- a/test/cases/rules.css +++ /dev/null @@ -1,6 +0,0 @@ -tobi { - name: 'tobi'; -} -loki { - name: 'loki'; -} \ No newline at end of file diff --git a/test/cases/rules.json b/test/cases/rules.json deleted file mode 100644 index 9fda096..0000000 --- a/test/cases/rules.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - "tobi" - ], - "declarations": [ - { - "type": "declaration", - "property": "name", - "value": "'tobi'", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 15 - }, - "source": "rules.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 3, - "column": 2 - }, - "source": "rules.css" - } - }, - { - "type": "rule", - "selectors": [ - "loki" - ], - "declarations": [ - { - "type": "declaration", - "property": "name", - "value": "'loki'", - "position": { - "start": { - "line": 5, - "column": 3 - }, - "end": { - "line": 5, - "column": 15 - }, - "source": "rules.css" - } - } - ], - "position": { - "start": { - "line": 4, - "column": 1 - }, - "end": { - "line": 6, - "column": 2 - }, - "source": "rules.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/supports.css b/test/cases/supports.css deleted file mode 100644 index 4ca696a..0000000 --- a/test/cases/supports.css +++ /dev/null @@ -1,8 +0,0 @@ -@supports (display: flex) or (display: box) { - /* flex above */ - .flex { - /* flex inside */ - display: box; - display: flex; - } -} \ No newline at end of file diff --git a/test/cases/supports.json b/test/cases/supports.json deleted file mode 100644 index 065a7ce..0000000 --- a/test/cases/supports.json +++ /dev/null @@ -1,105 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "supports", - "supports": "(display: flex) or (display: box)", - "rules": [ - { - "type": "comment", - "comment": " flex above ", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 19 - }, - "source": "supports.css" - } - }, - { - "type": "rule", - "selectors": [ - ".flex" - ], - "declarations": [ - { - "type": "comment", - "comment": " flex inside ", - "position": { - "start": { - "line": 4, - "column": 5 - }, - "end": { - "line": 4, - "column": 22 - }, - "source": "supports.css" - } - }, - { - "type": "declaration", - "property": "display", - "value": "box", - "position": { - "start": { - "line": 5, - "column": 5 - }, - "end": { - "line": 5, - "column": 17 - }, - "source": "supports.css" - } - }, - { - "type": "declaration", - "property": "display", - "value": "flex", - "position": { - "start": { - "line": 6, - "column": 5 - }, - "end": { - "line": 6, - "column": 18 - }, - "source": "supports.css" - } - } - ], - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 7, - "column": 4 - }, - "source": "supports.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 8, - "column": 2 - }, - "source": "supports.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/cases/wtf.css b/test/cases/wtf.css deleted file mode 100644 index 3305c18..0000000 --- a/test/cases/wtf.css +++ /dev/null @@ -1,5 +0,0 @@ -.wtf { - *overflow-x: hidden; - //max-height: 110px; - #height: 18px; -} \ No newline at end of file diff --git a/test/cases/wtf.json b/test/cases/wtf.json deleted file mode 100644 index df6233d..0000000 --- a/test/cases/wtf.json +++ /dev/null @@ -1,74 +0,0 @@ -{ - "type": "stylesheet", - "stylesheet": { - "rules": [ - { - "type": "rule", - "selectors": [ - ".wtf" - ], - "declarations": [ - { - "type": "declaration", - "property": "*overflow-x", - "value": "hidden", - "position": { - "start": { - "line": 2, - "column": 3 - }, - "end": { - "line": 2, - "column": 22 - }, - "source": "wtf.css" - } - }, - { - "type": "declaration", - "property": "//max-height", - "value": "110px", - "position": { - "start": { - "line": 3, - "column": 3 - }, - "end": { - "line": 3, - "column": 22 - }, - "source": "wtf.css" - } - }, - { - "type": "declaration", - "property": "#height", - "value": "18px", - "position": { - "start": { - "line": 4, - "column": 3 - }, - "end": { - "line": 4, - "column": 16 - }, - "source": "wtf.css" - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1 - }, - "end": { - "line": 5, - "column": 2 - }, - "source": "wtf.css" - } - } - ] - } -} \ No newline at end of file diff --git a/test/css-parse.js b/test/css-parse.js deleted file mode 100644 index f1bed64..0000000 --- a/test/css-parse.js +++ /dev/null @@ -1,79 +0,0 @@ - -/** - * Module dependencies. - */ - -var parse = require('..'); -var fs = require('fs'); -var path = require('path'); -var read = fs.readFileSync; -var readdir = fs.readdirSync; -var assert = require('assert'); - -describe('parse(str)', function(){ - readdir('test/cases').forEach(function(file){ - if (~file.indexOf('json')) return; - file = path.basename(file, '.css'); - it('should parse ' + file, function(){ - var css = read(path.join('test', 'cases', file + '.css'), 'utf8'); - var json = read(path.join('test', 'cases', file + '.json'), 'utf8'); - var ret = parse(css, { source: file + '.css' }); - // normalize line endings from input file - json = JSON.parse(json); - json = JSON.stringify(json, null, 2); - ret = JSON.stringify(ret, null, 2); - ret.should.equal(json); - }); - }); - - it('should save the filename and source', function(){ - var css = 'booty {\n size: large;\n}\n'; - var ast = parse(css, { - source: 'booty.css' - }); - - var position = ast.stylesheet.rules[0].position; - position.start.should.be.ok; - position.end.should.be.ok; - position.source.should.equal('booty.css'); - position.content.should.equal(css); - }); - - it('should throw when a selector is missing', function(){ - assert.throws(function(){ - parse('{size: large}'); - }); - - assert.throws(function(){ - parse('b { color: red; }\n{ color: green; }\na {color: blue; }'); - }); - }); - - it('should throw when a broken comment is found', function () { - assert.throws(function(){ - parse('thing { color: red; } /* b { color: blue; }'); - }); - - assert.throws(function(){ - parse('/*'); - }); - - /* Nested comments should be fine */ - assert.doesNotThrow(function(){ - parse('/* /* */'); - }); - }); - - it('should allow empty property value', function() { - assert.doesNotThrow(function() { - parse('p { color:; }'); - }); - }); - - it('should not throw with silent option', function () { - assert.doesNotThrow(function(){ - parse('thing { color: red; } /* b { color: blue; }',{ silent: true }); - }); - }); - -}); From 300449a0cdc3b4636371f46ee89d6623d10af1fc Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 18 Jun 2014 10:40:52 -0700 Subject: [PATCH 22/23] Update 'css' to 2.0.0 --- History.md | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/History.md b/History.md index bfd6377..5babde2 100644 --- a/History.md +++ b/History.md @@ -1,6 +1,7 @@ HEAD ================== + * update 'css' to 2.0.0 * depend on the 'css' package, which now contains the parser 1.7.0 / 2013-12-21 diff --git a/package.json b/package.json index 7bd84e8..e5f011f 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "index.js" ], "dependencies": { - "css": "^1.6.0" + "css": "^2.0.0" }, "author": "TJ Holowaychuk ", "license": "MIT", From 2af44c81764153cfc5299717237b63398f00de89 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 18 Jun 2014 10:41:24 -0700 Subject: [PATCH 23/23] 2.0.0 --- History.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/History.md b/History.md index 5babde2..4a93ca7 100644 --- a/History.md +++ b/History.md @@ -1,4 +1,4 @@ -HEAD +2.0.0 / 2014-06-18 ================== * update 'css' to 2.0.0 diff --git a/package.json b/package.json index e5f011f..b9b243f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "css-parse", - "version": "1.7.0", + "version": "2.0.0", "description": "CSS parser", "main": "index", "files": [